[Javascript] 전개 연산자(Spread Operator)

개요

전개 연산자(spread operator)란 ECMAScript6(2015)에서 새롭게 추가 된 자바스크립트 문법으로 배열 혹은 객체의 요소를 나열해주는 연산자이다. 원본에 영향을 주지 않고 복사본을 만들 수 있으며 여러 요소를 병합하는 등 다양하게 활용할 수 있다.

사용법

...

배열, 객체 변수명 앞에 '...'을 붙이는 것으로 사용이 가능하다. 더 자세한 예시를 알아보자.

배열, 객체 복사하기

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

const obj = {
  a: '1',
  b: '2',
  c: '3',
};
const obj2 = {...obj};
console.log(obj); //{a:'1', b:'2', c:'3'}
console.log(obj2);//{a:'1', b:'2', c:'3'}

배열, 객체 병합하기

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

const obj = {
  a: '1',
  b: '2',
  c: '3',
};
const obj2 = {
  d: '4',
  e: '5',
  f: '6',
};
const obj3 = {...obj,...obj2};
console.log(obj3); //{a:'1', b:'2', c:'3', d:'4', e:'5', f:'6'}

왜 '전개(Spread)' 연산자일까?

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

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

const numbers = [1, 2, 3];

console.log(sum(...numbers)); // expected output: 6

여담

지금까지 ES6 문법 중 하나인 전개 연산자에 대해 알아보았다. 배열과 객체는 자주 사용하기 떄문에 전개 연산자를 다루는 방법을 알고 있으면 도움이 될 것이다.

References

전개 연산자(Spread Operator)
배열의 요소, 객체를 나열해주는 전개 연산자(Spread Operator)
전개 구문 - JavaScript | MDN