[Js] 객체 확장 문법

JavaScript를 쓰다 보면 객체를 복사하거나, 병합하거나, 일부 속성만 바꾸고 싶을 때가 많다.

이때 아주 간단하고 강력하게 사용할 수 있는 문법이 바로 객체 확장 문법(spread syntax) 이다.

 

Spread 문법이란?

• 객체 앞에 ...을 붙이면, 해당 객체의 속성들을 펼쳐서 복사하거나 병합할 수 있다.
• ES6 이후부터 지원된다.

 

1. 객체 복사 (Spread)

const user = { name: 'Tom', age: 30 };
const newUser = { ...user };

console.log(newUser); 
// { name: 'Tom', age: 30 }

• ...user는 user 객체의 모든 키-값을 펼쳐서 새로운 객체를 만든다.

 

2. 객체 병합 (Spread)

const user = { name: 'Tom' };
const info = { age: 30, city: 'Seoul' };

const merged = { ...user, ...info };

console.log(merged);
// { name: 'Tom', age: 30, city: 'Seoul' }

• 나중에 오는 값이 앞의 값을 덮어쓴다.

 

3. 객체 필드 분리 (Rest)

const user = { name: 'Tom', age: 30, city: 'Seoul' };

const { name, ...rest } = user;

console.log(name); // 'Tom'
console.log(rest); // { age: 30, city: 'Seoul' }

• name만 빼고 나머지를 rest라는 새 객체에 담음.

 

4. 주의사항

• 얕은 복사(shallow copy) 만 된다. (즉, 내부 객체는 공유됨)

 

> 얕은 복사(shallow copy)

얕은 복사(shallow copy)

• 객체의 1단계(1 depth)까지만 복사
• 내부에 또 객체(Object)가 있으면 그 객체는 복사하지 않고 '참조'만 복사

 

[예시]

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

shallowCopy.a = 100;     // → 숫자는 바뀜
shallowCopy.b.c = 200;   // → 내부 객체는 원본에도 영향 줌

console.log(original.a); // 1 (변화 없음)
console.log(original.b.c); // 200 (변화 있음)

 

[그림]

 

→ 내부 객체는 복사 안 되고 연결(shared)되어 있음

 

• 중첩 객체까지 완전히 복사하려면 별도 deep copy 작업 필요.

const obj = { a: { b: 1 } };
const copy = { ...obj };
copy.a.b = 2;
console.log(obj.a.b); // 2 (같이 변함)

 

> 깊은 복사(Deep Copy)

깊은 복사(Deep Copy)

• 모든 내부 객체까지 통째로 복사하는 것
• 복사본과 원본이 완전히 독립
• structuredClone(), JSON.parse(JSON.stringify(obj)), 라이브러리 등으로 가능

 

 

출처 : chatGPT