정의
ECMA Script6(2015)에서 새로 추가된 전개 연산자(Spread Operator)란 객체나 배열의 값을 하나하나 넘기는 용도로 사용할 수 있다. 전개 연산자를 사용하는 방법은 ...를 붙이면 된다.
전개 연산자는 직관적이고, 배열의 아무 곳에 추가 가능하다.
ES5 배열 내용 조합
ES5에서는 배열의 내용을 합쳐 새로운 배열을 만들기 위해서 concat 메소드를 활용한다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = arr1.concat(arr2, arr3);
console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]arr1 배열에 concat메소드를 사용해, 배열 arr2와 arr3를 배열에 이어 붙였다.
ES6 배열 내용 조합
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = [...arr1, ...arr2, ...arr3]
console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]전개 연산자를 활용해 새로운 배열을 만들었다. concat 메소드를 사용한 코드보다 간결하고, 가독성도 개선되었다.
const arr = [4, 5, 6];
const arrWrap = [1, 2, 3, ...arr, 7, 8, 9]
console.log(arrWrap); //[1, 2, 3, 4, 5, 6, 7, 8, 9]concat 메서드는 인자로 전달받은 값 순으로 기존 배열 끝에서부터 값을 추가하지만, 전개연산자는
위처럼 배열의 아무 곳에나 추가할 수 있다.
전개 연산자로 할당하면 2차원 형태가 되지 않는다.
전개 연산자를 이용한 복사에는 1차원에서만 유효
2차원 이상의 배열을 할당할 땐 1차원 요소만 같은 1차원 레벨로 할당이 되고, 2차원 이상의 배열은 그대로 들어간다.
const arr1 = [4, 5, [6, 7]];
const arr2 = [1, 2, 3, ...arr1];
console.log(arr2); // [1, 2, 3, 4, 5, [6, 7]]케이스 별 전개 연산자 예시
배열
concat 메소드는 새로운 배열을 만들어내는 것이 아닌, 기존 배열 요소에 값을 추가한다면 push 메소드를 사용할 것이다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
arr1.push(arr2);
console.log(arr1); // [1, 2, 3, [4, 5]]arr1 배열에 arr2 배열을 할당하지만, arr2 배열 전체가 들어가 2차원 배열이 되었다. 이 경우 기존 자바스크립트에서는 배열 객체의 프로타입 배서드인 push.apply를 사용해야 한다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1); // [1, 2, 3, 4, 5];이렇게 다소 복잡하게 구현하는 코드를 전개 연산자를 활용하면 쉽게 구현이 가능하다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4, 5]객체
const obj1 = {
a: 'A',
b: 'B'
};
const obj2 = {
c: 'C',
d: 'D'
};
const objWrap = {obj1, obj2};
console.log(objWrap);{
obj1: {
a: 'A',
b: 'B'
},
obj2: {
c: 'C',
d: 'D'
}
}obj1 객체와 obj2 객체를 하나의 objWrap 객체로 묶으면 객체 각각의 값이 아닌, 객체 자체가 들어가 2차원 객체가 되었다.
const obj1 = {
a: 'A',
b: 'B'
};
const obj2 = {
c: 'C',
d: 'D'
};
const objWrap = {...obj1, ...obj2};
console.log(objWrap);{
a: 'A',
b: 'B',
c: 'C',
d: 'D'
}전개 연산자를 사용하면 객체 자체를 할당하는 것이 아닌, 각각의 값이 할당된다.
전개 연산자는 기존 배열을 보존해야 할 때 유용하다.
ES5 배열 요소를 역순으로 변경
전개 연산자는 원본 배열을 그대로 유지하면서 새로운 배열을 만든다.예를들어 reverse메소드는 배열의 각 요소를 역순으로 바꾸는 메소드인데, 기존의 배열을 바꾸는 단점이 있다.
const arr1 = [1, 2, 3];
const arr2 = arr1.reverse();
console.log(arr1); // [3, 2, 1]
console.log(arr2); // [3, 2, 1]원본 배열을 수정할 의도가 있었다면 문제가 되지 않지만, 원본 배열을 그대로 두고 배열 요소의 순서를 뒤집은 새로운 배열이 필요하다면 상황이 복잡해진다. 이 상황에서 전개 연산자를 사용하면 편리해진다.
const arr1 = [1, 2, 3];
const arr2 = [...arr1].reverse();
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [3, 2, 1]원본 배열을 그대로 유지하면서 새로운 배열을 만들었다.
배열의 나머지 요소를 할당할 수 있다.
비구조화 할당과 전개 연산자를 사용해 배열의 나머지 요소를 할당 받을 수 있다.
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]변수 first과 second의 각각의 인덱스 값에 맞는 값이 차례로 들어가고(1, 2), rest에는 할당 받지 못한 나머지 값들이 대입된다.
참조
