spread와 rest 비교하기

spread

전개 구문으로 배열에서의 spread 활용과 객체에서의 spread 활용 예제를 통해 이해해보자.

 

[배열] spread

spread 연산자를 통해 배열 메서드인 concat, push, unshift 등을 쉽게 구현할 수 있다.

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

// result1과 arr1.concat(arr2)는 같은 결과를 갖는다.
let result1 = [...arr1, ...arr2];
console.log(result1); // [1, 2, 3, 4, 5, 6]

// result2와 arr3.push(10)는 같은 결과를 갖는다.
let result2 = [...arr1, 10];
console.log(result2); // [1, 2, 3, 10]

// result3과 arr4.unshift()는 같은 결과를 갖는다.
let result3 = [10, ...arr1];
console.log(result3); // [10, 1, 2, 3]

 

또한, 배열을 복제할 수 있다.

let arr1 = [1, 2, 3];
let arr2 = [...arr1]; 
console.log(arr2); // [1, 2, 3]

 

[객체] spread

spread 연산자를 통해 객체의 프로퍼티를 복사할 수 있다.

let user = {name: 'Steve'};
let steve = {...user, age: 30};

console.log(steve); 
// { name: 'Steve', age: 30 }

 

또한, 객체도 복제할 수 있다.

let user1 = {name: 'Steve', age: 30};
let user2 = {...user1};

console.log(user2); // { name: 'Steve', age: 30 }

 

---

 

rest

rest 연산자를 배열과 객체에 사용할 때는 구조분해할당 문법과 같이 사용한다.

[배열] rest

let [a, b, ...others] = [1, 2, 3, 4, 5];

console.log(a); // 1
console.log(b); // 2
console.log(others); // [3, 4, 5]

[1, 2, 3, 4, 5] 배열의

첫번째 요소를 변수 a에 할당하고,

두번째 요소를 변수 b에 할당한다.

 

rest 연산자를 사용한 others 변수에는 빈 배열을 만들고 남는 배열 요소(3, 4, 5)를 모두 넣은 배열을 할당한다.

 

[객체] rest

let week = {
    monday: {},
    tuesday: {}, 
    wednesday: {}, 
    thursday: {}, 
    friday: {}, 
    saturday: {},
    sunday: {},
}

let { saturday, sunday, ...weekdays } = week;
console.log(weekdays); // { monday: {…}, tuesday: {…}, wednesday: {…}, thursday: {…}, friday: {…} }

객체 week에서 saturday와 sunday 프로퍼티만 뺀 나머지 프로터티를

변수 weekdays에 저장하여 새로운 객체를 만들 수 있다.