[React]리액트 학습 기록 - 스프레드 연산자

스프레드 연산자

배열 복사

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

// console
[1, 2, 3, 4] 

• numNumbers의 값에 ...numbers를 넣게 되면 numbers의 모든 인수를 newNumbers가 갖게 된다.
• 배열을 복사하거나, 안전하게 이전 객체를 복사해서 객체에 프로퍼티를 추가할 때 사용된다.

🤷‍♀️만약 점3개를 붙이지 않는다면 어떻게 되나요?

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

// console
[[1, 2, 3], 4]

numbers가 newNumbers의 하나의 원소로 포함된다.

객체 전달

const person = {
  name : 'Max'
};

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

console.log(newPerson);


// console
[object Object] {
  age: 28,
  name: "Max"
}

person 객체를 취해서 스프레드 연산자가 있는 newPerson에 전달해준다.

filter 사용해보기

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

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

// console
[1, 1]

• 스프레드 연산자를 사용하여 args 배열을 받는다.
• 배열에 있는 모든 인자들을 가지고 와서 filter를 사용한다.
• 화살표 함수로 인자를 하나씩 꺼내서 숫자 1과 비교해준다.
• 숫자 1과 다르다면 필터링이 되어 걸러지게 되고, 같다면 배열에 담겨 return 되게 된다.