자바스크립트의 스프레드 문법(spread syntax)은 배열, 객체 등의 요소를 확장하거나 복사할 때 사용하는 문법이다. 이는 배열과 객체 작업을 더 직관적이고 간단하게 만들어주는 유용한 기능이므로 이번 포스팅에서 정리하고 넘어가보자.

스프레드 문법(Spread syntax)

• ES6에서 도입된 스프레드 문법(spread syntax, 전개 문법) ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다.
• 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for...of문으로 순회할 수 있는 이터러블에 한정된다.
• 스프레드 문법은 피연산자를 연산하여 값을 생성하는 연산자가 아니다. 즉, 스프레드 문법의 결과는 변수에 할당할 수 없다.
• 스프레드 문법의 결과는 값으로 사용할 수 없고, 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.
  • 함수 호출문의 인수 등록
  • 배열 리터럴의 요소 목록
  • 객체 리터럴의 프로퍼티 목록

const list = [1, 2, 3];

const arr1 = ...list // Syntax Error: Unexpected token ...
const arr2 = [...list]; // arr1의 모든 요소를 복사하여 arr2 생성
console.log(arr2); // [1, 2, 3]

---

1. 배열에서 스프레드 문법

• 스프레드 문법을 배열에서 사용할 경우, 배열의 모든 요소를 개별적으로 펼쳐서 새로운 배열을 만들거나 기존 배열에 요소를 추가할 수 있다.

1) 배열 합치기

ES5

const arr = [1, 2].concat([3, 4]);
console.log(arr); // [1, 2, 3, 4]

ES6(스프레드 문법 사용)

const arr = [ ...[1, 2], ...[3, 4] ];
console.log(arr); // [1, 2, 3, 4]

• 스프레드 문법을 사용하면 별도의 메서드를 사용하지 않고 배열 리터럴만으로 2개의 배열을 1개의 배열로 결합할 수 있다.

2) 배열에 요소 추가 및 제거

ES5

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

Array.prototype.splice.apply(arr1, [1, 0].concat(arr2));
console.log(arr1); // [1, 2, 3, 4]

ES6(스프레드 문법 사용)

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

arr1.splice(1, 0, ...arr2);
console.log(arr1); // [1, 2, 3, 4]

• 스프레드 문법을 사용하면 메서드를 여러개 호출하지 않고도 간결하고 가독성 좋게 표현할 수 있다.

3) 배열 복사

ES5

const origin = [1, 2];
const copy = origin.slice();

console.log(copy); [1, 2]
console.log(copy === origin); // false

ES6(스프레드 문법 사용)

const origin = [1, 2];
const copy = [...origin];

console.log(copy); [1, 2]
console.log(copy === origin); // false

• 이때 원본 배열의 각 요소를 얕은 복사하여 새로운 복사본을 생성한다.

---

2. 함수 호출에서 스프레드 문법

• 함수 호출 시 스프레드 문법을 사용하여 배열을 개별 인수로 전달할 수 있다.

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

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

• add(...numbers)는 add(1, 2, 3)과 동일하게 동작한다.

---

3. 객체에서 스프레드 문법

• ES2018부터 객체에서도 스프레드 문법을 사용할 수 있게 되었다.
• 객체의 속성을 모두 펼쳐서 새로운 객체를 만들거나, 속성을 추가/덮어쓰는 등의 작업에 활용할 수 있다.

객체 복사

const obj1 = { name: 'Sean', age: 25 };
const obj2 = { ...obj1 };
console.log(obj2); // { name: 'Sean', age: 25 }

객체 병합 및 덮어쓰기

const obj1 = { name: 'Sean', age: 25 };
const obj2 = { age: 30, city: 'New York' };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { name: 'Sean', age: 30, city: 'New York' }

• obj2의 age 프로퍼티가 obj1의 age 프로퍼티를 덮어쓰고, city 프로퍼티가 추가됨

---

4. 중접 배열이나 객체에서 스프레드 문법 주의점

• 스프레드 문법은 얕은 복사(Shallow Copy)를 수행하므로 중첩된 배열이나 객체의 내부 참조가 그대로 복사된다.
• 중첩된 요소까지 깊은 복사를 해야한다면 structuredClone이나 Lodash 라이브러리의 _.cloneDeep 같은 깊은 복사 함수를 사용해야 한다.

const nestedArr = [[1], [2], [3]];
const shallowCopy = [...nestedArr];
shallowCopy[0][0] = 100;
console.log(nestedArr); // [[100], [2], [3]]

• 객체의 내부 참조가 같기 때문에 shallowCopy를 수정했는데도 nestedArr이 함께 변경된다.