[JS] Syntax | 13. Spread - 배열 또는 객체 분해하기

JavaScript에서 배열은 call-by-reference입니다.

 

따라서, 배열을 담은 변수는 배열의 값들 자체가 아닌, 배열을 가리키는 주소값을 담고 있습니다.

 

때문에 배열을 담은 변수를 다른 변수에 할당하면, 주소값을 할당받아 같은 배열을 공유하게 됩니다.

const lst1 = [1, 2, 3];
const lst2 = lst1;

lst1.push(4);  // lst1에 4를 추가

console.log(lst1);  // [1, 2, 3, 4]
console.log(lst2);  // [1, 2, 3, 4]

따라서 주소값을 공유하지 않는 완전히 새로운 배열로 복사하려면, 동일한 요소로 구성된 리스트를 새로 선언해야 합니다.

 

이 때 유용한 문법이 spread입니다. Spread를 사용하면 배열의 값을 펼쳐 각각 항목의 묶음으로 사용할 수 있습니다.

 

...[1, 2, 3] 이면 1, 2, 3 이 되는 식입니다.

const lst1 = [1, 2, 3];
const lst2 = [...lst1];

lst1.push(4);  // lst1에 4를 추가

console.log(lst1);  // [1, 2, 3, 4]
console.log(lst2);  // [1, 2, 3]

이를 응용하면 요소를 추가하거나, 두 배열을 합치는 것도 가능합니다.

const lst1 = [1, 2, 3];
const lst2 = [4, 5, 6];

const lst3 = [...lst1, 6];  // 추가
const lst4 = [...lst1, ...lst2];  // 합치기

console.log(lst3);  // [1, 2, 3, 6]
console.log(lst4);  // [1, 2, 3, 4, 5, 6]

 

Spread 문법은 또 다른 사용처가 있는데, 객체의 값들을 분해할 때도 사용할 수 있다는 것입니다.

 

이를 이용하면 객체의 값중 일부만 수정할 때 모든 값을 다시 쓸 필요 없이 원하는 부분만 명시할 수 있습니다.

const obj = {
    name: "js",
    year: "2015",
}

const obj2 = {
    ...obj1,
    year: "2025",
}