[Javascript] 7. Spread 연산자

[인프런x코드캠프] 훈훈한 Javascript - 인프런 | 강의

인프런 강의 "훈훈한 Javascript"를 보고 정리한 내용이며, 추가로 공부한 내용도 덧붙였습니다.

---

Spread 연산자(...)는 배열이나 객체를 개별 요소나 속성으로 확장하는 데 사용됩니다. 배열이나 객체를 다른 배열, 객체, 함수 호출 등에 '펼쳐' 넣을 수 있습니다.

배열에서의 Spread 연산자 사용

배열에서 Spread 연산자를 사용하면 배열의 각 요소를 개별적으로 분리하여 처리할 수 있습니다. 

배열 복사

let arr1 = [1, 2, 3];
let arr2 = [...arr1];  // arr2는 이제 [1, 2, 3] 입니다.

console.log(arr2); // [1, 2, 3]이 출력됩니다.

배열 병합

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];  // arr3는 이제 [1, 2, 3, 4, 5, 6] 입니다.

console.log(arr3); // [1, 2, 3, 4, 5, 6]이 출력됩니다.

배열 요소 추가

let arr = [1, 2, 3];
arr = [...arr, 4];  // arr는 이제 [1, 2, 3, 4] 입니다.

console.log(arr); // [1, 2, 3, 4]이 출력됩니다.

Spread 연산자는 간단하게 배열을 복사하거나 병합하고, 배열에 요소를 추가하는 등의 작업을 할 수 있게 해줍니다. 다만, Spread 연산자를 사용해서 배열을 복사할 때 얕은 복사가 이루어지는 것에 주의해야 합니다. 즉, 복사된 배열과 원본 배열이 동일한 참조 값을 공유하는 중첩된 배열이 있다면, 이 중첩된 배열의 변화가 복사된 배열과 원본 배열 양쪽에 모두 반영됩니다.

 

객체에서의 Spread 연산자 사용

객체에서의 Spread 연산자 사용은 주로 객체를 복사하거나 객체의 속성을 다른 객체에 합치는 데 사용됩니다. 

객체의 복사

let obj1 = {a: 1, b: 2, c: 3};
let obj2 = {...obj1};  // obj2는 이제 {a: 1, b: 2, c: 3} 입니다.

console.log(obj2); // {a: 1, b: 2, c: 3}이 출력됩니다.

객체의 속성 합치기

let obj1 = {a: 1, b: 2};
let obj2 = {c: 3, d: 4};
let obj3 = {...obj1, ...obj2};  // obj3는 이제 {a: 1, b: 2, c: 3, d: 4} 입니다.

console.log(obj3); // {a: 1, b: 2, c: 3, d: 4}이 출력됩니다.

기존 객체에 새로운 속성 추가하기

let obj = {a: 1, b: 2};
obj = {...obj, c: 3};  // obj는 이제 {a: 1, b: 2, c: 3} 입니다.

console.log(obj); // {a: 1, b: 2, c: 3}이 출력됩니다.

기존 객체의 속성을 오버라이드 하기

let obj = {a: 1, b: 2};
obj = {...obj, a: 10};  // obj는 이제 {a: 10, b: 2} 입니다.

console.log(obj); // {a: 10, b: 2}이 출력됩니다.

 Spread 연산자는 객체를 복사하거나 객체의 속성을 합치거나, 객체의 속성을 추가하거나, 기존의 속성을 오버라이드 하는 등의 기능을 할 수 있습니다.

이때 주의할 점은 Spread 연산자를 사용해서 객체를 복사하면 얕은 복사(shallow copy)가 이루어진다는 것입니다. 즉, 복사된 객체와 원본 객체가 동일한 참조 값을 공유하는 중첩된 객체가 있다면, 이 중첩된 객체의 변화가 복사된 객체와 원본 객체 양쪽에 모두 반영됩니다. 중첩된 객체를 포함하여 모든 레벨에서 새로운 객체를 만들려면 깊은 복사(deep copy)가 필요합니다. 이를 위해서는 다른 방법이 필요하며, JSON 객체의 메소드나 외부 라이브러리를 활용할 수 있습니다.

 

함수에서의 Spread 연산자 사용

함수 인수로도 spread 연산자를 사용할 수 있습니다. Spread 연산자는 함수 호출에 넘겨질 수 있는 인자의 수가 가변적일 때 유용합니다. 

let arr = [1, 2, 3];
console.log(...arr);  // 1 2 3을 출력합니다.

예를 들어, 최소값을 찾는 Math.min() 함수는 여러 개의 인자를 받을 수 있습니다. 이때, 배열에 저장된 값 중에서 최소값을 찾기 위해 Spread 연산자를 사용할 수 있습니다.

let numbers = [9, 4, 7, 1, 3];
let min = Math.min(...numbers);
console.log(min); // 1이 출력됩니다.

위 코드에서 ...numbers는 [9, 4, 7, 1, 3]이 아닌 9, 4, 7, 1, 3으로 전달됩니다. 즉, Spread 연산자는 배열을 펼쳐서 각 요소를 개별적인 인자로 함수에 전달합니다.

또한, Spread 연산자는 함수의 파라미터를 배열로 받아 처리할 때도 유용합니다. 이때는 Rest 파라미터라고 부르는데, 그 예시는 다음과 같습니다:

function sum(...args) {
    return args.reduce((previous, current) => {
        return previous + current;
    });
}

console.log(sum(1, 2, 3, 4, 5)); // 15가 출력됩니다.

위 코드에서 ...args는 입력된 모든 인자를 배열로 묶어 처리합니다. 따라서 함수 sum은 임의의 개수의 인자를 받아 처리할 수 있습니다.