[JS/Node] 핵심 개념과 주요 문법 Chapter - Spread/Rest 문법

Spread 문법은 ... 을 사용해 배열을 풀어서 인자로 전달하거나 각각의 요소로 넣을 때에 사용한다.

 

function sum(x, y, z) {
    return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers)); // 6

 

numbers가 배열임에도 불구하고 x, y, z에 각 요소가 들어가 계산되는 것을 확인할 수 있다.

 

Rest 문법은 파라미터를 배열의 형태로 받아서 사용할 수 있다.

 

function sum(...theArgs) {
  return theArgs.reduce((acc, cur) => acc + cur);
}

sum(1, 2, 3) // 6
sum(1, 2, 3, 4) // 10

 

이를 이용하면 배열을 조작할 때 좀 더 편하게 작성할 수 있다.

 

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

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

 

구조 분해 할당은 배열이나 객체의 속성을 해체해서 그 값을 변수에 담을 수 있게 하는 자바스크립트 표현식이다.

 

let a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest); // [30, 40, 50]