자바스크립트에서 객체를 다룰 때 가장 흔히 하는 실수 중 하나는 객체의 내용을 복사하는 것과 객체의 참조를 복사하는 것을 혼동하는 것입니다. 객체의 내용을 복사할 때는 원본 객체와는 독립적인 복사본을 만들어야 하며, 객체의 참조를 복사할 때는 동일한 객체를 가리키는 참조만을 복사해야 합니다.

객체의 내용 복사

객체의 내용을 복사할 때는 Object.assign() 메서드를 사용할 수 있습니다. 이 메서드를 사용하면 새로운 객체에 다른 객체의 속성과 값을 복사하여 새로운 독립적인 객체를 만들 수 있습니다.

예를 들어, 다음과 같이 코드를 작성할 수 있습니다.

const originalObj = { name: 'John', age: 30 };
const copiedObj = Object.assign({}, originalObj);

위 예제에서 copiedObj는 originalObj와 독립적인 복사본입니다. 따라서 copiedObj의 속성을 변경해도 originalObj에는 영향을 주지 않습니다.

객체의 참조 복사

객체의 참조를 복사할 때는 단순히 동일한 객체에 대한 참조를 복사하면 됩니다. 이는 다음과 같이 할 수 있습니다.

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

이 경우에 referencedObj는 originalObj를 가리키는 참조를 복사한 것이므로, 두 변수 모두 동일한 객체를 가리킵니다. 따라서 referencedObj나 originalObj 중 하나를 통해 속성을 변경하면, 다른 변수를 통해서도 변경된 내용을 확인할 수 있습니다.

객체를 복사하거나 참조를 복사할 때 어떤 방식으로 복사하는지에 따라서 원하는 동작을 하지 않을 수 있으므로, 이를 잘 구분하여 사용해야 합니다.

결론

자바스크립트에서 객체를 다룰 때는 객체의 내용을 복사하는 방법과 객체의 참조를 복사하는 방법을 명확히 이해하고 사용해야 합니다. Object.assign()을 사용하여 객체의 내용을 복사하고, 단순히 동일한 객체에 대한 참조를 복사하여 객체의 참조를 복사할 수 있습니다.

링크: MDN web docs