JavaScript Spread[...] & Destructuring(구조 분해 할당)

Spread ...

...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만들 때 사용한다.
Array, String, Map, Set, DOM Collection과 같이 for ... of 문으로 순회할 수 있는 이터러블에 사용할 수 있다.

console.log(...[1, 2, 3]); // 1 2 3
console.log(..."Mindyo"); // M i n d y o

함수의 인자값으로 많은 값을 넣을 때도 유용하게 사용된다.

const max = Math.max(...[1, 2, 3]);

2개의 배열을 1개의 배열로 결합하고 싶은 경우에도 사용된다.

const arr = [...[1, 2], ...[3, 4]];
console.log(arr) // [1, 2, 3, 4]

배열 중간에 다른 배열의 요소들을 추가하거나 제거할 때 splice를 사용하는데 이 때 spread 문법을 사용하면 배열을 편하게 추가할 수 있다.

const arr1 = [1, 4];
const arr2 = [2, 3];

arr1.splice(1, 0, ...arr2); // 1번 인덱스에 2 ,3추가
console.arr1(arr1); // [1, 2, 3, 4]

배열 복사 또한 손쉽게 이루어진다.

const original = [1, 2, 3, 4];
const copy = [...original];

console.log(copy === original) // false, 얕은복사가 이루어짐

객체 병합도 가능하다.

const merged = {...{x: 1, y: 2}, ...{y: 10, z: 13}};
console.log(merged); // {x: 1, y: 10, z: 13}, 뒤에 나온 프로퍼티가 우선권을 가짐

Destructuring 구조 분해 할당

const arr = [1, 2, 3];
const [one, two, three] = arr;
console.log(one, two, three) // 1 2 3

앞에서부터 순서대로 할당이 되기 때문에 변수보다 값이 부족하면 undefined, 값이 많으면 뒤에 값은 할당이 되지 않음

// 기본값을 지정할 수도 있지만 할당된 값이 우선됨
const [a, b = 10, c = 5] = [1, 2];
console.log(a, b, c) // 1 2 5

객체도 구조 분해 할당이 가능

const user = { userName: 'mindyo', age: 25};
const {userName, age} = user;

console.log(userName, age); // mindyo 25
// 또한 기본값 설정도 가능하다
const {userName = 'Olive', age} = {age:25};