[JavaScript] 전개 구문(Spread syntax)

전개 구문 : 배열 

let arr1 = [1,2,3];
let arr2 = [4,5,6];

let result = [...arr1, ...arr2];

console.log(result); // [1, 2, 3, 4, 5, 6]

let result = [0, ...arr1, ...arr2, 7, 8, 9 ]
console.log(result); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

배열의 넣고 중간에 빼고 병합하는 작업은 굉장히 번거롭지만

전개 구문을 사용하면 쉽게 가능하다.

객체도 가능하다.

 

전개 구문 : 복제

let arr = [1, 2, 3];
let arr2 = [...arr]; // [1, 2, 3] 

let user = {name: 'Mike', age: 30};
let user2 = {...user};

user2.name = "Tom";

colsole.log(user.name); // "Mike"
colsole.log(user2.name); // "Tom"

Object.assign()을 사용할 필요없이 간단하게 가능하다.

user2의 이름을 Tom으로 바꿔도 user의 name은 변하지 않는다. 

별개의 user2로 복제된 것이다.

 

다음 예제를 살펴보자.

//arr1을 [4,5,6,1,2,3]으로

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

//arr2.forEach((num) => { // [6, 5, 4, 1, 2, 3]
arr2.reverse().forEach((num) => { // 순회하기 전 역순으로 정렬
  arr1.unshift(num);
});

console.log(arr1); // [4, 5, 6, 1, 2, 3]

위 코드를 전개구문으로 간단히 할 수 있다.

//arr1을 [4,5,6,1,2,3]으로

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

arr1 = [...arr2, ...arr1];

console.log(arr1); // [4, 5, 6, 1, 2, 3]