전개연산자(Spread Operator)는 객체나 배열의 값을 하나 하나 넘기는 용도로 사용할 수 있어!
전개연산자를 사용하는 방법은 점 세개(...)를 붙이면 돼!
ES5에서 배열의 내용을 합쳐서 새로운 배열을 만들기 위해선 concat 메소드를 썼거든?
예를 들자면 이렇게!
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8 ,9];
var arrWrap = arr1.concat(arr2, arr3);
console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
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 메소드를 사용한 코드보다 간결하고 가독성도 개선 됐다고 해!(나는 concat이 더 보기 편한거 같은데..)
여기서 중요한 점이!
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]
오.. 이건 좀 효과적인거 같아!
대신 위치를 잘 보고 해야겠다!
※ 주의할 점
전개연산자로 할당하면 2차원 형태가 되지 않아!
배열의 경우에 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'
}
전개연산자를 사용하면 객체 자체가 할당되는게 아니라 각각의 값이 할당 돼! 오우오우~ 싸발적이고~
전개연산자를 이용해서 복사할 때는 1차원에서만 유효해!
위에서 전개연산자로 할당하면 2차원 배열이 되지 않는다고 했지?
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]]
오 너무너무 편하고 ...
또 기존 배열을 보존할 때 겁나 유용!!
ES5에서는 배열 요소를 역순으로 변경할 때
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]
원본 배열 유지에 새로운 배열을 reverse까지 할 수 있지요!!
또또또!
배열의 나머지 요소를 할당 할 수 있어!
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에 각각의 인덱스 값에 맞는 값이 차례대로 들어가고
rest에는 나머지가 대입 돼!!
전개연산자 짱짱짱짱~~
참고: velog.io/@recordboy/%EC%A0%84%EA%B0%9C-%EC%97%B0%EC%82%B0%EC%9E%90Spread-Operator
'Dev > JS' 카테고리의 다른 글
getElementById ? querySelector ? 뭘 써야 해 .. ? (2) | 2020.12.14 |
---|---|
innerHTML ? innerText ? 삐--- textContent를 지향하자 (0) | 2020.12.04 |
브라우저가 지원하지 않아서 ES6를 안쓴다? 핑계 노노해! 바벨(BABEL) (0) | 2020.11.26 |
ES6 : 비구조화 할당~ 오우오우~ (0) | 2020.11.25 |
JavaScript - var, let, const 차이점 // 선언, 할당 (0) | 2020.10.22 |