[기초]JavaScript 스프레드 연산자(Spread Operation)

스프레드 연산자 (...)는 JavaScript에서 매우 유용한 기능으로, 배열이나 객체를 다른 배열이나 객체로 펼치거나 전개할 때 사용됩니다. 스프레드 연산자는 ES6(ECMAScript 2015)에서 도입되었으며, 다양한 상황에서 활용될 수 있습니다.

 

1. 배열에서의 사용

스프레드 연산자는 배열을 개별 요소로 분해하여 다른 배열에 포함시키거나, 함수의 인자로 전달할 수 있습니다.

• 배열 복사

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
copiedArray[1] = 99
console.log(copiedArray); // [ 1, 99, 3 ]
console.log(originalArray); // [1, 2, 3]

위 코드에서 copiedArray는 originalArray의 복사본입니다. 이 경우 깊은 복사가 이루어집니다.

 

• 배열 합치기

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];

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

여기서 combinedArray는 array1과 array2를 합친 새로운 배열입니다.

 

• 함수 인자 전달

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

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

numbers 배열의 요소가 sum 함수의 개별 인자로 전달됩니다.

 

 

2. 객체에서의 사용

스프레드 연산자는 객체에서도 사용 가능하며, 객체의 프로퍼티를 분해하여 다른 객체로 병합하거나 복사할 수 있습니다.

• 객체 복사

const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };

copiedObject['b'] = 99;

console.log(copiedObject); // { a: 1, b: 99 }
console.log(originalObject); // { a: 1, b: 2 }

단일 계층 객체를 복사할 때도 깊은 복사가 이루어집니다.

 

• 객체 병합

const object1 = { a: 1, b: 2 };
const object2 = { b: 3, c: 4 };
const mergedObject = { ...object1, ...object2 };

console.log(mergedObject); // { a: 1, b: 3, c: 4 }

이 예제에서 mergedObject는 object1과 object2를 병합한 것입니다. 중복되는 키(b)의 경우, 나중에 병합된 객체(object2)의 값이 우선합니다.

 

3. 스프레드 연산자와 나머지 연산자 비교

스프레드 연산자는 배열이나 객체를 분해하여 펼치는 반면, 나머지 연산자(...)는 인자나 요소를 배열이나 객체로 묶는 데 사용됩니다. 스프레드 연산자와 나머지 연산자는 생김새는 같지만 사용하는 맥락이 다릅니다.

• 나머지 연산자 예제

function sum(...args) {
  return args.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

 

 

4. 주의할 점

• 깊은 복사: 스프레드 연산자로 복사한 단일 객체나 배열은 깊은 복사입니다. 즉, 원본이랑 독립된 객체 및 배열입니다.
• 얕은 복사: 스프레드 연산자로 복사한 중첩된 객체나 배열이나 객체는 얕은 복사입니다. 즉, 원본을 참조합니다. 

const original = { a: 1, b: { c: 2 } };
const copied = { ...original };

// 단일 계층 객체의 속성을 수정 (깊은 복사 : 독립된 객체)
copied.a = 99;
console.log(original.a); // 1 (영향 없음)

// 중첩 계층 객체의 속성을 수정 (얕은 복사 : 원본을 참조)
copied.b.c = 99;
console.log(original.b.c); // 99 (영향 있음)

 

 

5. 함수 호출과 스프레드 연산자

함수를 호출할 때, 스프레드 연산자를 사용해 인자의 개수에 맞게 배열 요소가 자동으로 분해되어 전달됩니다.

function multiply(a, b, c) {
  return a * b * c;
}

const numbers = [2, 3, 4];
console.log(multiply(...numbers)); // 24

스프레드 연산자는 코드의 가독성을 높이고, 배열이나 객체의 조작을 더욱 간결하게 해 줍니다. 다양한 상황에서 스프레드 연산자를 활용할 수 있으므로, 이를 잘 이해하고 사용하면 코드를 더 효율적으로 작성할 수 있습니다.