JS의 스프레드 연산자

 

스프레드 연산자(Spread Operator)는 자바스크립트의 배열이나 객체를 개별 요소로 분리하는 데 사용하는 문법입니다.

형태는 점 3개(...)로 이루어져 있습니다.

...배열  // 배열의 각 요소를 펼침
...객체  // 객체의 프로퍼티를 펼침

스프레드 연산자는 배열이나 객체의 요소를 하나씩 펼쳐서 복사하거나 병합할 때 사용하는 문법 입니다.

배열

배열을 쉽게 복사하거나 결합할 때 매우 유용합니다.

배열 복사

const arr = [1, 2, 3];
const copy = [...arr];

console.log(copy); // [1, 2, 3] (복사본 생성)

위 코드에서 arr 배열이 [...arr]로 복사되어 완전히 동일한 배열이 새롭게 만들어졌습니다. 두 배열은 서로 독립적입니다.

배열 병합

const a = [1, 2];
const b = [3, 4];

const merged = [...a, ...b];

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

두 배열을 간단히 하나의 배열로 만들 수 있습니다.

• 좀 더 살펴보기

    const colors = ["빨강", "초록"];
  
    const moreColors = [...colors, "파랑", "노랑"];
  
    console.log(moreColors); 
    // ["빨강", "초록", "파랑", "노랑"]

• 배열에 값 추가하기

객체

객체를 복사하거나 프로퍼티를 추가할 때 매우 편리하게 사용할 수 있습니다.

객체 복사

const original = { name: "Alice", age: 30 };

// 객체를 복사하고 새 속성 추가
const copied = { ...original, city: "Seoul" };

console.log(copied);
// { name: "Alice", age: 30, city: "Seoul" }

위 코드에서 original 객체를 복사한 후 추가로 city 프로퍼티를 덧붙여 새 객체가 만들어졌습니다. 원본과는 별개의 독립된 객체가 만들어집니다.

객체 프로퍼티 수정(업데이트)

const person = { name: "민수", age: 25 };

// 스프레드를 이용한 프로퍼티 수정
const updatedPerson = { ...person, age: 26 };

console.log(updatedPerson);
// { name: "민수", age: 26 }

프로퍼티가 이미 존재하면 덮어쓰기됩니다.

• 좀 더 살펴보기

    const obj1 = { a: 1, b: 2 };
    const obj2 = { b: 3, c: 4 };
  
    // 같은 프로퍼티가 있으면, 뒤에 있는 객체의 값이 덮어씁니다.
    const combined = { ...obj1, ...obj2 };
  
    console.log(combined);
    // { a: 1, b: 3, c: 4 }

  여기서 obj1 과 obj2 모두 b 라는 프로퍼티를 가지고 있습니다.
• 병합하는 두 객체에 같은 프로퍼티가 있으면 뒤에 있는 값으로 덮어씁니다.
• 객체 프로퍼티 업데이트 시 주의할 점

스프레드 연산자는 원본 데이터를 변경하는 것이 아닌 새로운 복사본을 만든다는 것을 잊지 말아주세요!