[Modern JS] spread 와 rest

Spread And Rest

Spread

spread라는 단어는 펼치다 퍼뜨리다 라는 의미를 가지고 있는데,
이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있음.
예를 들어 다음과 같은 객체들이 있다고 가정하면,
01.js

const o = {
  name: "object",
};

const ob = {
  name: "object",
  attribute: "hard",
};

const obj = {
  name: "object",
  attribute: "hard",
  color: "grey",
};

console.log(o);
console.log(ob);
console.log(obj);

객체 o를 선언하고, 기존에 선언한 o를 건드리지 않고 o의 속성을 이용해서 ob를 만들고, ob의 속성을 이용해서 obj를 만들었는데,
기존의 객체를 건드리지 않고 새로운 객체를 만들 때 spread를 사용하면 다음과 같이 작성할 수 있음.

02.js

const o = {
  name: "object",
};

const ob = {
  ...o,
  attribute: "hard",
};

const obj = {
  ...ob,
  color: "grey",
};

console.log(o);
console.log(ob);
console.log(obj);

배열에서 Spread

const pet = ["개", "고양이", "토끼"];
const animals = [...pet, "코요테", "코끼리"];

console.log(pet);
console.log(animals);

---

Rest

Rest는 가변 인자를 받아 배열로 만들어 선언하는것

04.js

const obj = {
  name: "object",
  attribute: "hard",
  color: "grey",
};

const { attribute, ...rest } = obj;

console.log(attribute);
console.log(rest);

배열에서의 rest

05.js

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

console.log(first);
console.log(others);

// const [...othrs, last] = numbers;

함수 파라미터와 인자로서의 rest와 spread

const sum = function (...nums) {
  return nums.reduce((acc, curr) => acc + curr, 0);
};

const numbers = [1, 2, 3, 4, 5];
const result = sum(...numbers);

console.log(result);