스프레드와 레스트 연산자

스프레드와 레스트 연산자

점 3개 ...으로 이루어져 있는 연산자이다. 또한 어디에 사용하는지에 따라 스프레드 또는 레스트라고 부른다. 프로퍼티의 값을 복사한다.

스프레드 연산자

• 배열의 원소나 객체의 프로퍼티를 나누는데 사용

  예시 :
  oldArray가 있는데 oldArray배열에 있는 모든 원소들을 새로운 배열에 추가하고 원소 1과 2를 더 추가하고 싶은 경우

// 배열 
const newArray = [...oldArray, 1, 2]

// 객체
const newObject = {...oldObject, newProp : 5}

• 배열
  oldArray앞에 ...이 있고, 모든 원소들을 꺼내서 대괄호로 새로 생성한 배열에 1, 2를 추가한다.

• 객체
  newProp와 함께 중괄호를 사용해서 새로운 객체를 만드는데 ...oldObject로 oldObject의 모든 프로퍼티와 값을 꺼내서 새 객체의 키 값으로 newProp에 추가한다. 참고로 oldObject가 새로운 프로퍼티를 가지게 되면 여기 있는 newProp에 덮어씌워진다. 이를 통해 우리가 가지고 있는 프로퍼티가 우선권을 갖게 된다.

코드 예시

// 배열 
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4];

console.log(newNumbers); // [1, 2, 3, 4]

// 객체
const person = {
  name : 'Max'
};

const newPerson = {
  ...person,
  age : 28
}

console.log(newPerson);
/* 답
[object Object] {
  age: 28,
  name: "Max"
} */

// 배열을 쉽게 복사하거나 안전하게 이전 객체를 복사할 수 있다.

레스트 연산자

• 함수의 인수 목록을 배열로 합치는데 사용된다. (함수의 인수 목록에서 사용한다)

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

sortArgs는 매개변수를 무제한으로 받는다. 매개변수가 몇 개이든 우리는 ...args라고 쓴다. 1개 이상의 매개변수를 가지게 되어도 모두 배열로 통합된다. 그런 다음 매개변수 목록에 배열 메소드를 적용하거나 무엇이든 원하는 방법으로 매개변수를 저장할 수 있다.

코드 예시

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

console.log(filter(1,2,3)); // [1]
// ...로 레스트 연산자를 생성해서 배열을 필터링함