Spread/Rest문법(Js)

Spread

배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용합니다.

객체 혹은 배열을 펼칠 수 있다. [] {}이 벗겨진다.

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

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

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

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

이렇게 객체에서도 사용 할 수 있다.
배열에서 사용하는 것도 보자.

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

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

앞과 뒤에 numbers라는 배열을 추가했다.
spread는 immutable하기 때문에 numbers를 바꿀수는 없고 numbers에 재할당을 해주거나 다른 변수에 할당을 해줘야한다.

slice()문법과 비슷하게 배열을 값들을 복사하는것이 가능하다.

let arr = [1, 2, 3];
let arr1 = [...arr];
let arr2 = arr.slice();
// arr1 과 arr2의 값은 [1, 2, 3]으로 같다.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

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안에는 color을 제외한 값들이 들어가게된다.
rest는 객체와 배열에서 사용 될 때, 이렇게 비구조화 할당 문법과 함께 사용된다. 보통은 rest라는 키워드를 사용하지만, 임의로 바꿔도 상관없다.

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

배열 비 구조화 할당을 통해 원하는 값은 순서대로 밖으로 꺼내고, 나머지 값은 rest안에 넣어집니다.

하지만 맨 마지막 값을 꺼내고, 앞에서부터 나머지값을 rest에 넣을 수는 없습니다.

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}
sum(1,2,3) // 6
sum(1,2,3,4) // 10