자바스크립트 스프레드 연산자(spread operator)

자바스크립트 스프레드 연산자는 배열의 요소들이나 객체 속성들의 각각의 값을 복사해서 나열해 줍니다. 원본 배열의 요소들과 원본 객체의 속성들의 값은 변하지 않습니다. 용도는 배열을 복사해서 새로운 배열을 생성하거나, 객체를 복사해서 새로운 객체를 생성하거나, 여러 개의 배열을 합치거나, 여러 개의 객체를 합치는 등 다양하게 활용할 수 있습니다.

 

사용법

 

const nums = [1, 2, 3, 4, 5];
console.log(...nums); // 1 2 3 4 5
console.log(Math.max(...nums)); // 5
console.log(Math.min(...nums)); // 1

const newNums1 = [...nums];
const newNums2 = [...nums, ...nums];
console.log(newNums1); // [ 1, 2, 3, 4, 5 ]
console.log(newNums2); // [ 1, 2, 3, 4, 5, 1, 2, 3, 4, 5 ]

const user1 = {
  id: "user01",
  pw: 123,
};
const user2 = {
  id: "user02",
  pw: 456,
  email: "user02@gmail.com",
};
const newUser = { ...user1, ...user2, isAdmin: false };
console.log(newUser); // { id: 'user02', pw: 456, email: 'user02@gmail.com', isAdmin: false }

 

스프레드 연산자는 쉽게 생각해서 배열은 대괄호를 제거하고 요소들을 나열한다라고 생각하면 되고 객체는 중괄호를 제거하고 속성들을 나열한다라고 생각하면 됩니다. 객체 여러 개를 합쳐서 새로운 객체를 생성할 때 속성이 중복되면 뒤에 추가한 객체의 값으로 됩니다.