[javascript] 객체 할당 시 주의사항.

11 Dec 2023

javascript

자바스크립트에서 객체 할당은 많은 개발자들에게 혼란을 줄 수 있는 주제입니다. 객체 할당 시 주의해야 할 몇 가지 사항이 있습니다.

1. 얕은 복사 vs. 깊은 복사

객체를 할당할 때, 얕은 복사(shallow copy)와 깊은 복사(deep copy) 개념을 이해해야 합니다. 얕은 복사는 객체의 참조만을 복사하는 반면, 깊은 복사는 객체의 내부 구조까지 모두 새로운 메모리에 복사하는 것입니다. 주의가 필요한 상황에서는 깊은 복사를 사용하여 객체를 안전하게 할당해야 합니다.

// 얕은 복사
const originalObj = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, originalObj);

// 깊은 복사
const deepCopy = JSON.parse(JSON.stringify(originalObj));

2. 참조 혼란

객체를 할당하면서 참조 혼란에 빠질 수 있습니다. 예를 들어, 객체 A를 B에 할당한 후 A를 수정하면 B도 같이 변화합니다. 이를 방지하기 위해서는 깊은 복사를 사용하거나 객체 불변성(immutable objects)을 유지해야 합니다.

// 참조 혼란
const objA = { x: 1 };
const objB = objA;
objA.x = 2;
console.log(objB.x); // 출력값: 2

// 객체 불변성
const newObjA = { x: 1 };
const newObjB = { ...newObjA };
newObjA.x = 2;
console.log(newObjB.x); // 출력값: 1

3. 프로퍼티 충돌

객체를 할당할 때, 프로퍼티 충돌에 주의해야 합니다. 동일한 프로퍼티를 가진 객체를 할당할 경우, 나중에 할당된 객체의 프로퍼티가 덮어씌워질 수 있습니다. 이를 방지하기 위해서는 객체 불변성을 유지하거나 충돌을 해결할 수 있는 방법을 고려해야 합니다.

// 프로퍼티 충돌
const obj1 = { x: 1, y: 2 };
const obj2 = { y: 3 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // 출력값: { x: 1, y: 3 }

결론

객체를 할당할 때 주의해야 할 점은 얕은 복사 vs. 깊은 복사, 참조 혼란, 프로퍼티 충돌입니다. 이러한 주의사항을 숙지하고 객체 할당을 안전하게 수행할 수 있도록 주의 깊은 개발이 필요합니다.

이상으로 JavaScript 객체 할당 시 주의사항에 대해 알아보았습니다.