[Javascript] 스프레드(Spread) 연산자

 

스프레드 연산자란?

스프레드 연산자(Spread Operator)는 ES6에서 도입된 기능으로, 배열이나 객체를 펼치는 역할을 합니다. 이 연산자는 세 개의 점( ... )으로 표현되며, 다양한 상황에서 유용하게 사용될 수 있습니다.

 

주요 용도

1. 배열 복사 및 병합

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

const combined = [...arr1, ...arr2]; // [1, 2, 3, 1, 2, 3, 4, 5]

2. 객체 복사 및 병합

const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };

const clonedObj = { ...obj1 }; // { foo: 'bar', x: 42 }
const mergedObj = { ...obj1, ...obj2 }; // { foo: 'baz', x: 42, y: 13 }

3. 함수 인자로 전달

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

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

 

주의사항

1. 스프레드 연산자는 얕은 복사(Shallow Copy)만 수행합니다. 객체나 배열의 최상위 수준의 속성만 복사되며, 중첩된 배열이나 객체에 대해서는 참조만 복사됩니다. 따라서 복사된 객체나 배열 내의 중첩된 객체나 배열은 원본과 동일한 객체를 가리킵니다.

// 배열의 경우
const originalArray = [1, [2, 3]];
const copiedArray = [...originalArray];

copiedArray[0] = 10; // 최상위 요소는 독립적
copiedArray[1][0] = 20; // 중첩된 배열은 참조가 복사됨

console.log(originalArray); // [1, [20, 3]]
console.log(copiedArray);  // [10, [20, 3]]

2. 객체에 사용할 때, 중복된 키가 있다면 나중에 오는 값이 이전 값을 덮어씁니다.

 

활용 예시

1. 배열 요소 추가/제거

const fruits = ['apple', 'banana'];
const moreFruits = ['mango', ...fruits, 'orange']; // ['mango', 'apple', 'banana', 'orange']

const [first, ...rest] = moreFruits;
console.log(first); // 'mango'
console.log(rest); // ['apple', 'banana', 'orange']

2. 문자열을 개별 문자로 분리

const str = "Hello";
const chars = [...str]; // ['H', 'e', 'l', 'l', 'o']

3. 배열 중복 제거하기

const arr = [1, 2, 3, 2, 4, 4]
const uniqueArr = [...new Set(arr)]; // [1, 2, 3, 4]

4. 배열 내 최대/최소값 찾기

const numbers = [5, 2, 8, 1, 9];
const max = Math.max(...numbers); // 9
const min = Math.min(...numbers); // 1

5. 조건부로 객체 속성 추가

const addUser = (age) =>  {
  return {
    name: "Yundogi",
    ...(age > 18 && { canVote: true })
  };
};

console.log(addUser(26)) // {name: 'Yundogi', canVote: true}

6. NodeList 배열로 반환

const divs = document.querySelectorAll('div');
const divsArray = [...divs];