스프레드 연산자

Source: Dev.to

스프레드 연산자를 이용한 배열 병합

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const mergedArray = [...array1, ...array2];

console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]

스프레드 연산자는 array1과 array2의 요소들을 새로운 배열에 펼쳐서 원본 배열을 변경하지 않고 결합된 리스트를 생성합니다.

스프레드 연산자를 이용한 객체 병합

속성 덮어쓰기 규칙

객체를 병합할 때, 같은 키를 가진 경우 오른쪽(가장 뒤)의 객체 속성이 왼쪽 객체의 속성을 덮어씁니다.

const obj1 = { name: "Alice", age: 30 };
const obj2 = { city: "New York", age: 35 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj);
// Output: { name: "Alice", age: 35, city: "New York" }

위 예시에서 obj2의 age가 obj1의 age를 대체합니다.

얕은 복사 동작

스프레드 연산자는 얕은 복사를 수행합니다. 중첩된 객체는 여전히 원본에 대한 참조를 유지합니다.

const obj1 = { name: "Alice", details: { hobby: "reading" } };
const obj2 = { city: "New York", details: { hobby: "hiking" } };

const mergedObj = { ...obj1, ...obj2 };

mergedObj.details.hobby = "painting";

console.log(obj1.details.hobby); // Output: "painting"

mergedObj의 중첩 속성을 수정하면 중첩 객체가 깊게 복제되지 않았기 때문에 obj1에도 영향을 미칩니다.

예시: 사용자 객체 병합

const user1 = {
  name: "John",
  age: 40,
  admin: true,
};

const user2 = {
  name: "Dow",
  age: 35,
};

const mergedUser = {
  ...user1,
  ...user2,
};

console.log(mergedUser);
// Output: { name: 'Dow', age: 35, admin: true }

여기서는 user2의 name과 age가 user1의 값을 덮어쓰고, admin 플래그는 user1에서 그대로 유지됩니다.

Note: 스프레드 연산자는 배열과 객체를 병합할 때 간결하지만, 얕은 복사 특성 때문에 중첩 구조는 여전히 원본과 연결됩니다. 깊은 병합이 필요하다면 Object.assign(수동 재귀 사용)이나 lodash.merge와 같은 유틸리티 라이브러리를 고려하세요.