[TIL] JavaScript 전개 연산자

전개 연산자 ( spread 문법 )

전개 연산자는 ES6에서 새로 추가된 문법으로, 배열의 요소나 객체를 나열해주는 연산자이다. 배열이나 객체의 복사본( 원본에 영향을 미치지 않는)을 만들 수 있으며, 여러 개의 배열이나 객체를 손쉽게 병합할 수도 있습니다. 또한, 함수의 매개변수나 인자 값으로도 사용이 가능한 연산자입니다. 사용법은 배열을 담은 변수 앞에  ...  을 붙이면 됩니다.

{ ... object }    // 펼칠 대상이 객체인 경우

[ ... array ]    // 펼칠 대상이 배열인 경우
{ ... array }    // 배열일 경우 중괄호{}도 가능!!

 

ES5 vs ES6

1) ES5 배열 조합

ES5 에서는 배열의 내용을 합쳐 새로운 배열을 만들기 위해서 concat 메소드를 활용했었습니다.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];

let all = arr1.concat(arr2, arr3);

console.log(all);
>>> [1, 2, 3, 4, 5, 6, 7, 8, 9]

 

2) ES6 배열 조합

concat 메소드를 사용하는 대신에 전개 연산자를 활용하여 새로운 배열을 만들 수 있습니다.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];

let all = [...arr1, ...arr2, ...arr3];

console.log(all);
>>> [1, 2, 3, 4, 5, 6, 7, 8, 9]

 

concat 매소드는 인자로 전달받은 값 순으로 기존 배열 끝에서부터 값을 추가하지만, 전개 연산자는 배열의 아무 곳에나 추가할 수 있다는 장점이 있습니다.

let arr = [4, 5, 6];
let all = [1, 2, 3, ...arr, 7, 8, 9]

console.log(all)
>>> [1, 2, 3, 4, 5, 6, 7, 8, 9]

 

3) ES5 배열 요소 역순 변경

reverse 메소드는 배열의 각 요소를 역순으로 바꿔주는 메소드인데, 기존 배열도 바꿔버리는 단점이 있습니다.

let arr1 - [1, 2, 3];
let arr2 = arr1.reverse();

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

원본 배열을 수정할 의도가 있었으면 문제가 되지 않지만, 원본 배열은 그대로 두고 배열 요소의 순서를 뒤집은 새로운 배열이 필요하다면 상황이 복잡해집니다.

 

4) ES6 배열 요소 역순 변경

전개 연산자를 사용할 시 원본 배열을 그대로 유지하면서 새로운 배열을 만듭니다.

let arr1 = [1, 2, 3];
let arr2 = [...arr1].reverse();

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

 

Reference

• https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%84%EA%B0%9C-%EC%97%B0%EC%82%B0%EC%9E%90Spread-%EB%AC%B8%EB%B2%95