[ES6 정리] 9. Rest & Spread

Spread

 

spread는 변수를 가져와서 풀어헤치는 기능?이라고 보면 될 것 같다. 이건 코드를 보면서 이해하는 게 제일 좋음!

const numbers = [1, 2, 3, 4];
const words = ["a", "b", "c", "d"];

console.log([numbers, words]);
console.log([...numbers, ...words]);

위의 numbers 와 words 배열을 하나의 배열로 만들고 싶어 [numbers, words]라고 콘솔에 출력을 했다. 하지만 그들은 한 묶음이 아닌 각각의 배열로 나타난다. 

이때, spread를 이용해서 각 변수의 앞에 ... 을 붙여주면 하나의 배열로 된다. spread가 배열에 뭉쳐있던 데이터를 다 풀어서 각각의 데이터로 만들어주기 때문!

const weekday = ["mon", "tue", "wed", "thu"]

const weekend = ["sat", "sun"]

const fullWeek = [...weekday, "fri", ...weekend]

console.log(fullWeek);

조금 더 활용해보면 위와 같은 방식으로 중간에 값을 추가해서 넣을 수 있다.

 

 

Rest

 

Rest는 배열의 모든것을 하나의 변수로 합쳐버린다. Spread처럼 ...을 앞에 붙이고 사용한다

const bestfriends = (...friends) => {
  console.log(friends);
};
bestfriends("jay", "molina", "edman", "freese");

위를 보면 배열 뭉탱이를 friends라는 변수 하나로 전부 묶었다.

이 같은 경우외에도 Array Destructuring 기능을 활용해서 특정값을 제외한 값을 출력할수도 있다

const bestfriends = (rest, ...friends) => {
  console.log(rest);
};
bestfriends("jay", "molina", "edman", "freese");

첫번째값만 rest라는 변수로 넣어주고 나머지는 friends에 집어넣어 rest만 출력하면 "jay"를 제외한 나머지는 출력되지 않는다