JavaScript- spread 와 rest

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

 

1. sperad

spread를 사용하면 객체나 배열을 펼칠 수 있다.

 

1) 객체에서 사용

... 연산자를 사용하여 spread를 사용할 수있다.

 

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

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

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

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

실행 결과

spread를 이용하면 실행 결과에서 알수 있듯이 기존의 것을 건들이지 않고 기존 객체가 가지고 있는 속성을 그대로 사용하면서 새로운 것을 추가해서 새로운 객체를 만들수 있다.

 

 

2) 배열에서 사용

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

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

 

실행 결과

 

 

3)  함수 호출시 인자에 사용

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

배열 안에 있는 모든 수의 합을 구할때 spread를 사용하여 위와 같이 배열을 통째로 인자로 넣을 수 있다.

 

실행 결과

 

 

2. rest

rest는 생김새는 spread 랑 비슷한데 역할이 매우 다르다.(반대 역할)

rest는 객체, 배열 그리고 함수의 파라미터에서 사용이 가능하다.

rest 또한 ... 연산자를 사용

 

 

1) 객체에서 사용

const purpleCuteSlime = {
    name: '슬라임',
    attribute: 'cute',
    color: 'purple'
};
  
const { color, ...cuteSlime } = purpleCuteSlime; // rest를 사용할때 자신이 원하는 다른이름으로도 지정 가능
console.log(color);
console.log(cuteSlime);
  
const { attribute, ...slime } = cuteSlime;
console.log(attribute);
console.log(slime);

rest 는 객체와 배열에서 사용 할 때는 이렇게 비구조화 할당 문법과 함께 사용한다.

꼭 키워드를 rest로 할 필요는 없고 자신이 원하는 다른 이름으로도 사용할 수 있다.

 

실행 결과

 

2) 배열에서 사용

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

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

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

배열 비구조화 할당을 통하여 원하는 값을 밖으로 꺼내고, 나머지 값을 rest 안에 넣었다.

 

실행 결과

 

3) 함수 파라미터에서 사용

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

 

 

만약 예를 들어 파라미터로 넣어준 모든 값들을 합해주는 함수를 만들어주고 싶다고 가정해봤을때

파라미터로 rest를 사용하면 아래와 같이 파라미터가 배열로 받아와지는데

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

const result = sum(1, 2, 3, 4, 5, 6);
console.log(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);

실행 결과