[js] { ...data } 와 data 대입의 차이

JavaScript에서 객체를 복사하는 방법에는 여러 가지가 있습니다.

주어진 예제에서 let cvtData = { ...data };와 let cvtData = data;의 차이점은 다음과 같습니다:

 

 

Spread 문법을 사용한 객체 복사 ({ ...data }):

• 복사 방식: Spread 문법을 사용하여 객체 data를 복사합니다.
• 동작: 새로운 객체가 생성되며, data 객체의 속성들이 새로운 객체에 복사됩니다. 이 과정에서 깊은 복사(deep copy)가 이루어지지 않으며, 속성 값이 객체나 배열인 경우에는 참조 관계가 유지될 수 있습니다.

let data = { foo: 'bar' };
let cvtData = { ...data };

 

 

단순 대입을 통한 객체 참조 (data):

• 복사 방식: 단순히 data 변수를 cvtData에 할당합니다.
• 동작: data와 cvtData는 동일한 객체를 참조하게 됩니다. 따라서 한 객체의 변경 사항이 다른 객체에도 반영됩니다.

let data = { foo: 'bar' };
let cvtData = data;

 

 

결론

• Spread 문법을 사용한 객체 복사는 원본 객체의 속성들을 새로운 객체로 복사하여 새로운 객체를 만드는 반면,
• 단순 대입을 통한 객체 참조는 같은 객체를 참조하게 됩니다.

따라서 객체를 변경해야 하지만 원본 객체는 그대로 유지하고 싶을 때는 Spread 문법을 사용하여 새로운 객체를 생성하는 것이 좋습니다.