Study
자바스크립트 퀴즈북 리마인드 Day 5: 참조, 복사,.
객체 참조와 얕은 복사, Object와 Map/Set의 차이, WeakMap/WeakSet이 필요한 메모리 상황을 프론트엔드 코드 리뷰 관점에서 정리합니다.
const user = { name: "Jingyu", profile: { level: 1 } };
const copied = { ...user };
copied.name = "SEOJing";
copied.profile.level = 2;
const cache = new Map();
cache.set(user, "cached");
console.log(user.name
Post Q&A
자바스크립트 퀴즈북 리마인드 Day 5: 참조, 복사, Map/Set의 메모리 감각 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!
정답은 Jingyu, 2, undefined입니다. 최상위 name은 새 객체에서만 바뀌었지만, profile은 원본과 복사본이 같은 내부 객체를 보고 있습니다. copied도 user와 내용은 비슷해 보여도 Map의 key로는 다른 객체입니다.
오늘은 “객체를 복사했다”를 더 잘게 읽습니다. 새 껍데기만 만든 것인지, 내부 객체까지 새로 만든 것인지, 컬렉션이 어떤 참조를 붙잡고 있는지까지 봐야 프론트엔드 버그가 보입니다.
객체 대입은 값을 하나 더 만드는 게 아니라 같은 객체를 가리키는 이름을 하나 더 만드는 일에 가깝습니다.
const a = { count: 1 };
const b = a;
b.count = 2;
console.log(a.count); // 2
spread도 안심하면 안 됩니다. { ...obj }, Object.assign, 배열 spread는 보통 얕은 복사입니다.
const original = { settings: { theme: "dark" } };
const next = { ...original };
next.settings.theme = "light";
console.log(original.settings.theme); // "light"
리뷰 질문은 이렇습니다.
| 질문 | 확인할 것 | 자주 생기는 버그 |
|---|---|---|
| 같은 객체인가? | a === b | 한쪽 수정이 다른 UI 상태까지 바꿈 |
| 얕은 복사인가? | nested object 공유 여부 | spread 후 내부 필드 수정이 원본에 반영됨 |
| 컬렉션이 붙잡는가? | Map/Set의 강한 참조 | 캐시가 객체를 계속 잡아 메모리 누수 |
일반 객체를 key-value 저장소처럼 쓸 수는 있지만, key는 기본적으로 문자열 또는 Symbol 중심입니다.
const a = { id: 1 };
const b = { id: 2 };
const store = {};
store[a] = "A";
store[b] = "B";
console.log(store); // { "[object Object]": "B" }
객체 자체를 key로 구분해야 하면 Map이 더 솔직합니다.
const store = new Map();
store.set(a, "A");
store.set(b, "B");
Set은 “중복 없는 배열”보다 “존재 여부 모델”로 읽는 편이 좋습니다. 다만 객체를 넣을 때는 내용 비교가 아니라 참조 비교입니다.
new Set([{ id: 1 }, { id: 1 }]).size; // 2
id 기준 중복 제거가 목적이면 객체를 그대로 Set에 넣는 게 아니라 id를 key로 삼아야 합니다.
Map과 Set은 객체를 강하게 참조합니다. 로컬 변수에서 놓아도 컬렉션이 key나 value로 붙잡고 있으면 객체가 바로 사라졌다고 말할 수 없습니다.
const metadata = new WeakMap();
function attachMetadata(element, data) {
metadata.set(element, data);
}
DOM element나 임시 객체별 metadata처럼 “객체가 사라지면 부가 정보도 사라져야 하는” 경우에는 WeakMap이 후보입니다. 대신 key를 순회할 수 없습니다. 순회가 필요하면 WeakMap이 아니라 명시적인 cleanup 설계를 먼저 봐야 합니다.
[0225] 객체 마무리, 2 객체 질문 정리Map, Set, WeakMap, WeakSetconst a = { nested: { n: 1 } };
const b = { ...a };
b.nested.n = 2;
console.log(a.nested.n);
객체 프로퍼티를 key/value가 아니라 descriptor로 읽는 법, getter/setter와 defineProperty, preventExtensions/seal/freeze의 경계를 코드 리뷰 관점에서 정리합니다.
