TIL-14, Spread, Rest, 구조 분해 할당

Spread

배열에서의 사용

주로 배열을 풀어서 인자로 전달하거나 각각의 요소에
넣을 때 사용한다.

  function sum(x, y, z) {
    return x + y + z;
  }

  const numbers = [1, 2, 3]
  sum(...numbers) // 6 (1 + 2 + 3)

위 코드와 같이, 배열 [1, 2, 3]이 numbers로 할당되어있다.
이 때, sum함수에 ' ... '를 붙인 numbers를 인자로 전달한다.
...numbers는 배열을 풀어서 1, 2, 3이므로 함수가 실행됨에따라
1 + 2 + 3 -> 6의 결과를 나타낸다.

---

배열 합치기

  let arr1 = [0, 1, 2];
  let arr2 = [3, 4, 5];
  arr1 = [...arr1, ...arr2];
  // arr1 -> [0, 1, 2, 3, 4, 5]

위 코드와 같이, ' ... ' 을 이용해 arr1과 arr2의 배열을 풀고,
새로운 변수에 할당하여 배열을 합칠 수 있다.

---

배열 복사

  let arr1 = [1, 2, 3];
  let arr2 = [...arr1];
  arr2.push(4);
  //arr1 -> [1, 2, 3]
  //arr2 -> [1, 2, 3, 4]

위 코드와 같이, 새로운 변수에 ...arr을 할당해서 복사해준 뒤,
그 변수에 새로운 배열을 넣으면, 기존 배열은 값이 변하지 않는다.
(왜? -> arr1이 가르키는 주소와, arr2가 가르키는 주소가 다르기 때문)

---

Spread

객체에서의 사용

  let obj1 = { foo: 'bar', x: 42 };
  let obj2 = { foo: 'baz', y: 13 };

  let clonedObj = { ...obj1 };
  let mergedObj = { ...obj1, ...obj2 };

  // clonedObj -> { foo: 'bar', x: 42 }
  // mergedObj -> { foo: 'bar', x: 42, y: 13}

Spread는 객체에서도 사용할 수 있는데,
위 코드처럼 객체를 Spread하면 Object로 키-값 쌍이 나온다.
Spread한 객체를 두 개 입력하면 병합(merge)하고,
중복되는 키는 기존 값을 유지, 새로운 키는 추가한다.

---

Rest

매개변수를 배열의 형태로 받아서 사용할 수 있다.
매개변수의 개수가 가변적일 때 유용하다.

  function sum(...theArgs) {
    return theArgs.reduce((previous, current) => {
      return previous + current;
    });
  }
  sum(1, 2, 3)

---

구조 분해 할당

Spread 문법을 이용해 값을 해체한 후, 개별 값을 변수에
새로 할당하는 과정이다.

배열에서.

  const [a, b, ...rest] = [10, 20, 30, 40, 50];
  // a -> 10
  // b -> 20
  // rest -> [30, 40, 50]

객체에서.

  const {a, b, ...rest) = {a: 10, b: 20, c: 30, d: 40);
  // a -> 10
  // b -> 20
  // rest -> {c:30, d:40}