[JavaScript] Spread Operator

Spread Operator (...)

스프레드 연산자(Spread Operator)는 자바스크립트 객체 중에 반복 가능한 Array, Object, String, Map, Set 등을 펼치는(spread out) 연산자이다. ES6에서 새롭게 도입된 문법이다.

 

 

 

 

Array에 스프레드 연산자를 붙이면 다음과 같이 대괄호가 제거되어 원소만 가져올 수 있다. 

var arr = [1,2,3];
console.log(...arr);
> 1 2 3

 

또한 배열 합치기, 복사(deep copy)를 할 때 유용하게 사용된다.

var arr1 = [1, 2, 3];
var arr2 = [4, 5];
var arr3 = [...arr1, ...arr2];

console.log(arr3);
>> [1, 2, 3, 4, 5]

var arr4 = ...arr1;

console.log(arr4);
>> [1, 2, 3]

arr1.pop();
>> 3

console.log(arr1);
>> [1, 2]
console.log(arr4); // arr1에 변화가 생겨도 arr4에는 영향 X
>> [1, 2, 3]

 

 

 

마찬가지로 Object에 스프레드 연산자를 사용하여 객체 합치기 또는 복사 (deep copy)를 할 수 있다.

var obj1 = {a: 1, b: 2};
var obj2 = {c: 3, ...obj1}; // ...obj1 == a: 1, b: 2

console.log(obj2);
>> {c: 3, a: 1, b: 2}

delete obj1.a; 
>> true

console.log(obj1);
>> {b: 2}
console.log(obj2); // obj1에 변화가 있어도 obj2에는 영향 X 
>> {c: 3, a: 1, b: 2}

 

* deep copy시 key 값이 중복되면 덮어씌워진다. 뒤에 오는 값이 우선순위를 가진다!

var obj1 = {a: 1, b: 2};
var obj2 = {a: 3, ...obj1};
var obj3 = {...obj1, a: 3};

console.log(obj2);
>> {a: 1, b: 2}
console.log(obj3);
>> {a: 3, b: 2}

 

 

 

스프레드 연산자를 String에 적용하면 문자열을 분리할 수 있다.

var str = 'gomgom';
console.log(str[0]);
>> 'g'
console.log(...str);
>> g o m g o m

 

 

스프레드 연산자는 Array를 펼쳐 함수의 파라미터로 넣고자 할 때도 활용할 수 있다.

function add(a, b, c) {
  console.log(a + b + c);
}

arr = [1, 2, 3];

add(...arr); // add(arr[0], arr[1], arr[2])과 동일한 결과
>> 6

이렇게 쓰니 제법 편리한 것 같다!