JavaScript (Spread & Rest Operators)

... 점 3개 연산자 어디에 사용하는냐에 따라 스프레드 또는 레스트 연산자라고 부른다.

 

Spread

배열의 원소나 객체의 프로퍼티를 나누는데 사용한다. 그래서 객체나 배열을 펼쳐 놓는다.

const newArray = [...oldArray,1,2]
const newObject = {...oldObject, newProp: 5}

oldArray 가 있는데 이 oldArray배에 있는 모든 원소들을 새로운 배열에 추가하고 거기에 1과 2를 추가하고 싶다면

oldArray앞에 점이 3개 있고, 모든 원소들을 꺼내서 대괄호로 새로 생성한 배열에추가합니다

 

스프레드 예시

const numbers = [1,2,3];
const newNumbers = [...numbers,4];
console.log(newNumbers);

1,2,3,4 가 찍힌다.

점이 없다면?

const numbers = [1,2,3];
const newNumbers = [numbers,4];
console.log(newNumbers);

새 배열에 하나의 원소가 포함되었다.

스프레드는 쉽게 배열을 복사하거나 안전하게 이전 개체를 복사해서 객체에 프로퍼티를 추가하는 작업

 

객체에하는 것

const person = {
  name: 'karatejin'
};
const newPerson = {
  ...person, //이전 객체의 모든 값을 복사하기위해 ... 점3개를 붙인다.
  age: 35
}
console.log(newPerson);

나이가 추가되었다.

앞에나온 person객체를 취해서 스프레드 연산자가 있는 newPerson에 전달 되었다.

 

Rest

함수의 인수 목록으로 사용

function sortArgs(...args){
  return args.sort()
}

sortArgs 는 매개변수를 무제한으로 받는다. 1개 이상의 매개변수를 갖게 되어도, 모두 배열로 통합

레스트 예시

const filter = (...args) => {
  return args.filter(el => el === 1);
}

console.log(filter(1,2,3));

매개변수 1,2,3 을 전달후 실행하면 배열을 1만 호출 한다.

...args 이 점 3개로 레스트 연산자를 생성하여 배열을 필터링 했기 때문이다.