[javascript] rest

펼친걸 모아보자..

rest

spread와 비슷하게 생긴 ...으로 시작한다. 하지만 기능은 조금 다르다.

객체에서의 rest

const purpleCuteSlime = {
  name: "슬라임",
  attribute: "cute",
  color: "purple"
};

const { color, ...cuteSlime } = purpleCuteSlime;
console.log(color);
console.log(cuteSlime);
// purple
// {name: "슬라임", attribute: "cute"}

// attribute까지 없애고 싶다면?
const { attribute, ...slime } = cuteSlime;
console.log(slime);
//{name: "슬라임"}

위 예제 코드를 보면 color의 purple은 정상적으로 출력이 됐고 ...cuteSlime(rest)을 찍어봤을땐 color를 제외한 나머지들이 나오게 된다.

코드 하단에 attribute까지 없애고 싶다면 이미 color는 빼냈고 attribute를 작성해주고 안에 ...slime으로 나머지 name: "슬라임"만 남겨둘 수 있게 된다.

작성 할 때 굳이 이름을 rest로 할필요는 없다. rest는 spread에 반대라고 생각하면 된다.
spread는 특정 객체나 배열안에 다른 객체나 배열을 퍼뜨리는 역할을 한다면
rest는 퍼져있는 것들을 다시 모아오는 역할을 한다.

배열에서의 rest

const numbers = [0, 1, 2, 3, 4, 5, 6];

const [one, two, ...rest] = numbers;
console.log(one);
console.log(two);
console.log(rest);
// 0
// 1
// [2, 3, 4, 5, 6]

객체와 거의 비슷하지만 배열에서의 ...rest는 무조건 맨마지막에 와야한다. 앞에 쓰일 수 없다.