[JS] JavaScript의 Spread 연산자 깊게 이해하기

JavaScript의 Spread 연산자(...)에 대해 알아보겠습니다. Spread 연산자는 배열이나 객체를 개별 요소나 속성으로 확장하는 데 사용되는 강력한 도구입니다. 이를 이해하기 위해 각 사용 사례를 살펴보도록 하겠습니다.

1. 함수 호출에서의 Spread  연산자

Spread 연산자는 함수에 배열을 인수로 전달할 때 유용합니다. 배열의 각 요소가 함수의 개별 인수로 전달됩니다.

let numbers = [1, 2, 3];
console.log(Math.max(...numbers)); //Outputs: 3

위의 예제에서 Math.max(...numbers)는 Math.max(1, 2, 3)과 동일하게 작동합니다.

 

2. 배열 리터럴에서의 Spread 연산자

Spread 연산자는 새 배열을 만들거나 기존 배열을 복사하거나 확장하는 데 사용할 수 있습니다.

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // arr2 is now [1, 2, 3, 4, 5]

위의 예제에서 arr2는 arr1의 모든 요소와 추가적인 두 요소 4와 5를 포함합니다.

 

3. 객체 리터럴에서의 Spread 연산자

Spread 연산자는 객체의 모든 열거 가능한 속성을 새 객체로 복사하는 데 사용할 수 있습니다. 이는 객체를 복제하거나 속성을 병합하는 데 유용합니다.

let obj1 = {a: 1, b: 2};
let obj2 = {...obj1, c: 3}; //obj2 is now {a: 1, b: 2, c: 3}

위의 예제에서 obj2는 obj1의 모든 속성과 추가적인 속성 c를 포함합니다.

 

4. 주의사항

Spread 연산자는 코드를 간결하게 만들고, 배열과 객체를 쉽게 조작할 수 있게 해줍니다. 그러나 Spread 연산자는 얕은 복사(Shallow copy)를 수행하므로, 중첩된 배열이나 객체를 복사할 때는 주의가 필요합니다. 중첩된 객체나 배열을 완전히 복사하려면 깊은 복사(Deep copy)를 수행하여야 합니다.

 

해당 연산자는 배열과 객체를 조작하는 데 있어 매우 유용한 도구이지만 초심자가 봤을 때는 연산자가 아니라 일종의 요약 기호(...)처럼 보일 수 있어서 헷갈릴 수 있습니다. 이 점 유의하면서 사용하면 여러분들의 코드가 조금 더 간결해지고 보기 좋아질 것입니다.