221206_TIL

Slice() 함수

⭐️ slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용 ! ⭐️

첫 번째 인사로 시작 인덱스, 두 번째 인자로 종료 인덱스를 받음. 그리고 시작 인덱스부터 종료 인덱스까지 값을 복사하여 새로운 값을 반환한다.

const num_list = [1,2,3,4,5,6,7,8];

function solution(num_list, n) {
    const arr = [];

    for (let i = 0; i < num_list.length; i = i + n) {
        arr.push(num_list.slice(i, i + n))
    }
    // console.log(num_list.slice());

    console.log(arr);

    return arr;
}

☝️ arr.push(num_list.slice(i, i + n)) <<

.slice(start_index, end_index)

⭐️ 첫번째 인자로 넘어온 시작 인덱스가 가리키는 값은 포함.
두번째 인자로 넘어온 종료 인덱스가 가리키는 값은 포함하지 않는다. ⭐️

⭐️ 두번째 인자를 넘기지 않으면, 시작 인덱스가 가리키는 값부터 배열의 마지막 값까지 모두 복사해줌.⭐️

const arr = [1,2,3,4,5,6,7,8,9]
arr.slice(3) // [3,4,5,6,7,8,9]

⭐️ 첫번째 인자를 넘기지 않으면, 배열의 처음 값부터 마지막 값까지 전체를 복제해줌.⭐️

const arr = [1,2,3,4,5,6,7,8,9]
let anotherArr = arr.slice() // [1,2,3,4,5,6,7,8,9]
// anotherArr = [1,2,3,4,5,6,7,8,9], arr의 배열도 그대로 살아있음.

⭐️⭐️⭐️ slice()함수는 아무리 많이 호출해도 원본 배열의 값을 절대 건드리지 않음. 따라서 원본 배열이 그대로 보존되어야 하는 상황에서 매우 유용하다.

---

splice() 함수

splice()함수는 다목적으로 사용할 수 있는 함수다.
⭐️해당 함수로는 배열로 부터 특정 범위를 삭제하거나 새로운 값을 추가 OR 기존 값을 대체할 수 있음.⭐️

---

⭐️⭐️⭐️⭐️

• 첫번째 인자 : 시작 인덱스
• 두번째 인자 : 몇 개의 값을 삭제할 것인지
• 세번째 인자 : 추가할 값을 가변 인자로 넘길 수 있음. 삭제된 값을 담고 있는 배열을 반환한다.

⭐️⭐️⭐️⭐️

---

<splice() 함수로 특정 인덱스부터 값 제거>

const arr = [1,2,3,4,5,6,7,8,9]
arr.splice(5, 2);
// [5, 6]
arr
// [1,2,3,4,7,8,9] << splice() 후, 원본 배열을 반환하면 5, 6이 빠진 배열이 반환. 

<splice() 함수로 특정 인덱스 범위 값 변경>

const arr = [1,2,3,4,5,6,7,8,9]
arr.splice(3, 0, -3, -4, -5);
// [ empty ]⭐️
arr
// [1, 2, -3, -4, -5, 6, 7, 8, 9] << splice() 후, 원본 배열을 반환하면 3부터 -3, -4, -5로 변경된 배열이 반환. 

<splice() 함수로 특정 인덱스 삭제 후, 빠진 인덱스 값 대체하기>

const arr = [1,2,3,4,5,6,7,8,9]
arr.splice(3, 7, -3, -4, -5, -6, -7);
// [3, 4, 5, 6, 7]⭐️
arr
// [1, 2, -3, -4, -5, -6, -7, 8, 9] << splice() 후, 원본 배열을 반환하면 3부터 -3, -4, -5, -6, -7로 변경된 배열이 반환. 

특정 인덱스 범위 값 변경과 차이점
- 값을 삭제하지 않음 OR 값을 삭제하고 그 자리에 새로운 값을 채움.

<splice() 함수에 첫번째 인자만 넘기면, 해당 인덱스가 가리키는 값을 포함해서 배열의 마지막 값까지 삭제가 된다.>

const arr = [1,2,3,4,5,6,7,8,9]
arr.splice(6);
// [ 6, 7, 8, 9 ]⭐️
arr
// [1, 2, 3, 4, 5] << splice() 후, 원본 배열을 반환하면 6부터 9가 삭제된 배열이 반환.

🔥주의점

• splice() 함수를 사용할 때, 가장 주의할 부분

1. 삭제된 값을 담고 있는 새로운 배열이 반환.
2. 원본 배열에도 영향을 미침. (원본 배열 변경된다.)

따라서, 의도치 않은 데이터 유실이나 변경으로 이어질 수 있음.
데이터의 불변ㄱ성이 보장되어야 하는 프로그램을 작성할 땐 매우 주의해야 할 것임.

slice()와 splice()의 차이점

차이점이라고 하면 두번째 인자로 slice() 함수는 종료 인덱스, splice() 함수는 몇개의 값을 때어낼지를 넘긴다는 것 뿐임.

• splice() 함수는 값을 계속 깎아먹기 때문에, 반복문에서 사용할 시, 매번 다른 배열이 반환될 것이다.

---

React

• 컴포넌트 불러와서 사용하기.

import ExpenseItem from './components/ExpenseItem'; << 불러오기

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
      <ExpenseItem></ExpenseItem> << 컴포넌트 사용
    </div>
  );
}

export default App; << 다른 파일에서 현재 컴포넌트 사용할 수 있게.

컴퓨터는 대문자로 시작하는 태그들을 컴포넌트로 인식함.

⭐️⭐️⭐️⭐️⭐️ 컴포넌트는 무조건 하나의 부모 안에 있어야 한다. (루트 요소)⭐️⭐️⭐️⭐️⭐️
⭐️⭐️⭐️⭐️⭐️ 컴포넌트에 css를 입히기 위해서는 className='' 이다.⭐️⭐️⭐️⭐️⭐️

function ExpenseItem() {
    return (
<div className='expense-item'> // <= 부모 div 1개에 다 들어가있음.
        <div>Desember 6th 2022</div>
        <div className='expense-item__description'>
            <h2>Car Insurance</h2>
            <div className='expense-item__price'>37,800₩</div>
        </div>
    </div>
}

export default ExpenseItem;