Chapter 09: Spread와 Rest (Spread operator and rest parameters)

💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다.

9.1 The Spread operator (스프레드 연산자)

---

• spread 라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다
• 이 문법을 사용하면 이터러블한 요소를 개별 요소로 분리하거나, 객체 혹은 배열을 펼칠 수 있음
• 기존의 배열 혹은 객체를 건드리지 않고 새로운 배열 및 객체를 생성해야 하는 경우 유용하게 사용할 수 있음 → 기존의 것을 건드리지 않고 새로운 것을 만든다는 것이 핵심

// ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)
console.log(...[1, 2, 3]); // 1 2 3

// 문자열은 이터러블이다.
console.log(...'Hello'); // H e l l o

// 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다.
console.log(...{ a: 1, b: 2 });
// TypeError: Found non-callable @@iterator

// 스프레드 연산자의 결과물은 값으로 사용할 수 없다. 오직 쉼표로 구분한 값의 목록을 사용하는 문맥 내의 값으로만 사용할 수 있다.
const list = ...[1, 2, 3]; // SyntaxError: Unexpected token ...

배열의 결합

const veggie = ["tomato","cucumber","beans"];
const meat = ["pork","beef","chicken"];

const menu = [...veggie, "pasta", ...meat];
console.log(menu);
// Array [ "tomato", "cucumber", "beans", "pasta", "pork", "beef", "chicken" ]

배열의 복사

배열의 참조

하단의 코드는 배열을 복사한 것 같아 보이지만, 실제로 newVeggie는 배열 veggie를 참조할 뿐이다.

const veggie = ["tomato","cucumber","beans"];
const newVeggie = veggie;

veggie.push("peas");
console.log(veggie);
// Array [ "tomato", "cucumber", "beans", "peas" ]

console.log(newVeggie);
// Array [ "tomato", "cucumber", "beans", "peas" ]

배열의 복사 : ES5 - concat 사용

const veggie = ["tomato","cucumber","beans"];
const newVeggie = [].concat(veggie);
veggie.push("peas");
console.log(veggie);
// Array [ "tomato", "cucumber", "beans", "peas" ]
console.log(newVeggie);
// Array [ "tomato", "cucumber", "beans" ]

배열의 복사 : ES6 - spread 연산자 사용

const veggie = ["tomato","cucumber","beans"];
const newVeggie = [...veggie];
veggie.push("peas");
console.log(veggie);
// Array [ "tomato", "cucumber", "beans", "peas" ]
console.log(newVeggie);
// Array [ "tomato", "cucumber", "beans" ]

객체 리터럴과 스프레드 연산자

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

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

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

console.log(slime); // Object {name: '슬라임'}
console.log(cuteSlime); // Object {name: '슬라임', attribute: 'cute'}
console.log(purpleCuteSlime); // Object {name: '슬라임', attribute: 'cute', color: 'purple'}

함수 인자와 스프레드 연산자

배열 안에 있는 원소들을 모두 함수의 인자로 넣어주고 싶을 때 사용

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

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

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

// ES5 - 함수 호출, 인수 전달
const result = sum.apply(null, numbers);
console.log(result);

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

9.2 Rest Parameter (나머지 파라미터)

---

• 확장하는 역할을 하는 Spread와는 반대로, 여러 원소를 하나의 원소로 압축하는 역할
• 객체, 배열, 그리고 함수의 파라미터에서 사용 가능
• 키워드가 꼭 rest일 필요는 없으나 관용적으로 rest가 사용됨

객체에서의 rest

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

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

키워드, 즉 추출한 값의 이름이 꼭 rest일 필요가 없으므로 아래와 같이 사용 가능

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

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

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

배열에서의 rest

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

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

console.log(one);
console.log(rest);

rest 파라미터는 사용 시 꼭 마지막에 위치해야 하므로 아래와 같이 사용 불가능

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

const [..rest, last] = numbers;

함수 파라미터에서의 rest

함수의 파라미터가 몇 개가 될 지 모르는 상황에서 rest 파라미터를 사용하면 매우 유용

// ES5
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);

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

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

9.3 Spread와 Rest의 차이

---

Spread

• Spread는 기존 장소에 있는 요소를 새로운 장소에 풀어내서 사용하는 것
• 사용 위치(순서) 상관 없음
• 함수에서 사용 시, 함수의 인자 자리에만 사용 가능

Rest

• Rest는 같은 장소 안에서 직접 선언한 변수 등의 특정한 것들을 제외한 나머지 값을 묶어주는 것
• 사용 시 늘 마지막에 위치해야 함
• 함수에서 사용 시, 함수의 인수 자리에만 사용 가능

예시 코드

function sum(...rest) { // 인수에 사용된 ...은 rest
  return rest.reduce((acc, current) => acc + current, 0);
}

const numbers = [1, 2, 3, 4, 5, 6];
const result = sum(...numbers); // 인자에 사용된 ...은 spread
console.log(result);

📎 참고

---

• spread 와 rest 문법
• mjs - wikibook