스프레드 연산자 `...` - 자바스크립트

JavaScript에서 스프레드 연산자는 ...으로 표현되며, 객체, 배열, 문자열 등의 이터러블(iterable) 객체를 하나씩 펼쳐서 개별적인 값으로 만들어줍니다.

 

배열에서의 스프레드 연산자

배열에서의 스프레드 연산자는 배열의 모든 요소들을 하나씩 펼쳐서 개별적인 값으로 만들어줍니다.

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

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

const newArray = [...numbers, 6, 7, 8];
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8]

[...numbers]는 스프레드 연산자를 사용하여 배열의 요소들을 복사하고 새로운 배열을 만드는 방법입니다.
numbers 배열의 모든 요소를 스프레드 연산자로 복사하여 copyOfNumbers 변수에 할당했습니다.
따라서 copyOfNumbers 배열은 numbers 배열과 완전히 동일한 값을 가집니다.

 

newArray처럼 스프레드 연산자를 사용하고 6,7,8을 배열에 추가하여 새로운 배열을 만들수도 있습니다. 

객체에서의 스프레드 연산자

객체에서의 스프레드 연산자는 객체의 속성을 하나씩 펼쳐서 새로운 객체를 만들어줍니다.

const person = {
  name: 'John',
  age: 30,
};

const newPerson = {
  ...person,
  city: 'New York',
};

console.log(newPerson); // {name: "John", age: 30, city: "New York"}

...person을 사용하여 person 객체의 속성을 하나씩 펼쳐서 newPerson 객체에 추가했습니다. 
따라서 newPerson 객체는 person 객체와 동일한 속성을 가지면서, city 속성이 추가된 객체가 됩니다.

스프레드 연산자를 사용하면 배열과 객체에서 모두 간편하게 요소나 속성을 추가하거나 복사할 수 있습니다.