나머지 연산자와 전개 연산자 에서

나머지 연산자와 전개 연산자 소개

JavaScript에는 개수가 정해지지 않은 여러 원소를 다루기 쉽게 해 주는 내장 ... 연산자가 있어요. 문맥에 따라 이 연산자를 나머지 연산자 또는 _전개 연산자_라고 불러요.

나머지 연산자

나머지 원소

...이 할당의 왼쪽에 나타나면, 이 점 세 개를 rest 연산자라고 해요. 점 세 개와 변수 이름을 함께 부르는 이름이 나머지 원소예요. 나머지 원소는 0개 이상의 값을 모아서 하나의 배열에 저장해요.

const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];

a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]

JavaScript에서는 다른 언어와 달리 rest 원소 뒤에 쉼표를 붙일 수 없다는 점에 주의해요. rest 원소는 구조 분해 할당에서 반드시 마지막 원소여야 해요. 아래 예제는 SyntaxError를 발생시켜요.

const [...items, last] = [2, 4, 8, 16]

나머지 속성

배열과 마찬가지로, 나머지 연산자를 사용해 객체의 속성 하나 이상을 모아서 하나의 객체에 저장할 수도 있어요.

const { street, ...address } = {
  street: 'Platz der Republik 1',
  postalCode: '11011',
  city: 'Berlin',
};

street;
// => 'Platz der Republik 1'

address;
// => {postalCode: '11011', city: 'Berlin'}

나머지 매개변수

...이 함수 정의에서 마지막 인자 옆에 나타나면, 그 매개변수를 _나머지 매개변수_라고 해요. 나머지 매개변수를 사용하면 함수가 개수가 정해지지 않은 여러 인자를 배열로 받을 수 있어요.

function concat(...strings) {
  return strings.join(' ');
}

concat('one');
// => 'one'

concat('one', 'two', 'three');
// => 'one two three'

전개

전개 원소

...이 할당의 오른쪽에 나타나면, 이를 spread 연산자라고 해요. 전개 연산자는 배열을 원소의 목록으로 펼쳐요. 나머지 원소와 달리, 전개 연산자는 배열 리터럴 표현식의 어디에나 나타날 수 있고, 하나보다 많을 수도 있어요.

const oneToFive = [1, 2, 3, 4, 5];
const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];

oneToTen;
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const woow = ['A', ...oneToFive, 'B', 'C', 'D', 'E', ...oneToFive, 42];

woow;
// =>  ["A", 1, 2, 3, 4, 5, "B", "C", "D", "E", 1, 2, 3, 4, 5, 42]

전개 속성

배열과 마찬가지로, 전개 연산자를 사용해 한 객체의 속성을 다른 객체로 복사할 수도 있어요.

let address = {
  postalCode: '11011',
  city: 'Berlin',
};

address = { ...address, country: 'Germany' };
// => {
//   postalCode: '11011',
//   city: 'Berlin',
//   country: 'Germany',
// }