JavaScript spread 와 rest

 

21.02.09

 

 

1. spread

spread는 원래 객체를 건드리지 않고 새로운 객체에 기존 객체의 값을 포함시킬 수 있다.

Spread와 Rest 둘 다 ES6 문법이다.

---

1-1. 객체에 spread사용

기존 코드

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  name: '슬라임',
  attribute: 'cute'
};

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

 

spread 사용 코드

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  ...slime,
  attribute: 'cute'
};

const purpleCuteSlime = {
  ...cuteSlime,
  color: 'purple'
};

---

1-2. 배열에 사용

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];

---

1-3. 배열에서 spread 연산자 연속으로 사용

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

const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers); // [1, 2, 3, 4, 5, 1000, 1, 2, 3, 4, 5]

---

2. rest

지정 변수 외의 나머지를 객체로 받는다.

객체, 배열, 파라미터에 사용 가능한 문법이다.

배열과 객체에 사용할 때는 비구조화 할당과 같이 쓰인다.

---

2-1. 객체에서 사용

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

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

* 객체의 이름이 꼭 rest가 아니어도 된다.

---

2-2. 배열에서 사용

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

const [one, ...rest] = numbers;

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

* 앞에서부터 하나씩만 분리 할 수 있다. 뒤에서부터 또는 여러개씩 불가능

 

---

2-3. 파라미터에서 사용

기존 코드

function sum(a, b, c, d, e, f, g) {
  let sum = 0;
  if (a) sum += a;
  if (b) sum += b;
  if (c) sum += c;
  if (d) sum += d;
  if (e) sum += e;
  if (f) sum += f;
  if (g) sum += g;
  return sum;
}

const result = sum(1, 2, 3, 4, 5, 6);
console.log(result);

* 이렇게 코드를 짜면 g에는 undefined가 들어가게 되고 sum은 NaN이 된다.

 

rest 사용 코드

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}

const result = sum(1, 2, 3, 4, 5, 6);
console.log(result); 	// 21

* rest는 함수의 인자 개수를 모를 때 유용하게 사용할 수 있다.

---

3. rest와 spread 같이 사용하기

rest만 사용한 기존 코드

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}

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

 

rest와 spread 모두 사용 코드

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}

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