[Day33] HTML, CSS, Javascript - Project - Spread 연산자

Spread 연산자

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있다. spread 라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다이다. 이 문법을 사용하면, 객체 혹은 배열을 펼칠 수 있다.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// Expected output: 6

console.log(sum.apply(null, numbers));
// Expected output: 6

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

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

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

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

이 코드에서는 먼저 slime 이라는 객체를 선언했다. 그리고 cuteSlime 이라는 객체를 만들었는데, 기존에 선언한 slime 을 건들이지 않고 새로운 객체를 만들어서 slime 이 가지고 있는 값을 그대로 사용하였다.

그 다음에는 purpleCuteSlime 이라는 객체를 만들었다, 이 객체는 cuteSlime 이 가지고 있는 속성을 그대로 사용하면서 추가적으로 color 가 추가되었다.

위 코드에서의 핵심은, 기존의 것을 건들이지 않고, 새로운 객체를 만든다는 것이다! 이러한 상황에 사용 할 수 있는 유용한 문법이 spread 연산자를 사용하는 것.

아까 코드는 spread 문법을 사용하면 다음과 같이 작성 할 수 있게 된다.
(실제 코딩 및 코딩테스트 등에서도 매우 유용하게 사용하므로 반드시 기억할 것)

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

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

const purpleCuteSlime = {...cuteSlime, color: 'Purple'}


console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

여기서 사용한 ... 문자가 바로 spread 연산자이다.

spread 연산자는 배열에서도 사용 할 수 있다.

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

기존의 animals 는 건드리지 않으면서, 새로운 anotherAnimals 배열에 animals 가 가지고 있는 내용을 모두 집어넣고, '비둘기' 라는 항목을 추가적으로 넣은 것이다.

배열에서 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]

rest

rest는 생김새는 spread 랑 비슷한데, 역할이 매우 다르다
rest는 객체, 배열, 그리고 함수의 파라미터에서 사용이 가능하다.

객체에서의 rest

우선 객체에서의 예시를 보면 이해할 수 있다.

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

const { color, ...rest } = purpleCuteSlime;
console.log(color);
console.log(rest);

rest 안에 color 값을 제외한 값이 들어있는 것을 확인할 수 있다.

rest 는 객체와 배열에서 사용 할 때는 이렇게 구조분해 할당 문법과 함께 사용할 수 있다. 주로 사용 할때는 위와 같이 rest 라는 키워드를 사용하게 되는데, 추출한 값의 이름이 꼭 rest 일 필요는 없다.
(다만, 가독성과 실수 방지를 위하여 ...rest라는 표현을 사용하는 것이 더 나아 보임)

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

const { color, ...cuteSlime } = purpleCuteSlime; // --> ...rest대신 다르게 써도
된다는 것을 알 수 있다!
console.log(color);
console.log(cuteSlime);

이렇게 해도 무방하다

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

const { color, ...cuteSlime } = purpleCuteSlime;
console.log(color);
console.log(cuteSlime);

const { attribute, ...slime } = cuteSlime;
console.log(attribute);
console.log(slime);

배열에서의 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 를 함수파라미터에서 사용 할 수도 있다. 예를 들어서 우리가 파라미터로 넣어준 모든 값들을 합해주는 함수를 만들어주고 싶다고 가정해보자.

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

위에서의 sum 함수는 7개의 파라미터를 받아오는데, 아래에서 사용 할때에는 6개만 넣어줬다. 그러면, g 값이 undefined 가 되기 때문에 sum 에 더하는 과정에서 += undefined 를 하게 되면 결과는 NaN 이 되버리게 될 것이다. 그렇기 때문에 함수에서 하나하나 유효한 값인지 확인을 해준 것을 알 수 있다.

함수의 파라미터가 몇개가 될 지 모르는 상황에서 rest 파라미터를 사용하면 매우 유용하다. 코드를 다음과 같이 수정해서 더 고차원적인 구현이 가능하다.

function sum(...rest) {
  return rest;
}

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

result 가 가르키고 있는 것은 함수에서 받아온 파라미터들로 이루어진 배열임을 알 수 있다. 우리가 이제 파라미터들이 들어가있는 배열을 받았으니, 모두 더해주는 작업만 하면 된다.
그것은 reduce를 써서 할 수 있을 것이다.

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

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