얕은 복사와 깊은 복사
Coddy JavaScript 여정의 논리 & 흐름 섹션에 포함된 레슨 — 65개 중 25번째.
객체를 복사할 때, 두 가지 유형의 복사가 있습니다:
- 얕은 복사(Shallow Copy) - 첫 번째 레벨만 복사합니다
- 깊은 복사(Deep Copy) - 모든 중첩된 레벨을 복사합니다
얕은 복사 메서드:
전개 연산자(spread operator) 사용:
const original = { a: 1, b: { x: 2 } };
const spreadCopy = { ...original };소스 객체에서 대상 객체로 속성을 복사하여 새 객체를 생성하는 Object.assign() 사용하기:
const assignCopy = Object.assign({}, original);얕은 복사의 문제점:
original.b.x = 3;
console.log(spreadCopy.b.x); // 3
// (중첩된 객체는 참조를 공유함)
console.log(assignCopy.b.x); // 3JSON 메서드 및 깊은 복사 이해하기
JSON.stringify()는 JavaScript 객체를 JSON 문자열로 변환합니다:
const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30}"JSON.parse()는 JSON 문자열을 JavaScript 객체로 다시 변환합니다:
const backToObject = JSON.parse(jsonString);
console.log(backToObject); // { name: "John", age: 30 }JSON을 사용한 깊은 복사:
const original = { a: 1, b: { x: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
original.b.x = 3;
console.log(deepCopy.b.x); // 2 (완전히 독립적)
챌린지
쉬움쇼핑 카트를 나타내는 JSON 문자열을 인자로 받는 processCart라는 이름의 함수를 생성하세요. 카트에는 이름과 가격이 포함된 제품 배열이 들어 있습니다. 여러분의 작업은 다음과 같습니다:
- JSON 문자열을 JavaScript 객체로 파싱합니다.
- 이를 통해 두 개의 별도 카트를 생성합니다.
- 두 번째 카트에서:
- 각 항목에
discounted속성을 추가하고 false로 설정합니다. price가 50보다 큰 모든 항목에 10% 할인을 적용합니다.- 할인을 받은 항목에 대해 'discounted'를 true로 설정합니다.
- 각 항목에
- 두 카트를 모두 포함하는 배열을 반환합니다.
치트 시트
객체를 복사할 때, 두 가지 유형의 복사가 있습니다:
- 얕은 복사 (Shallow Copy) - 첫 번째 레벨만 복사합니다
- 깊은 복사 (Deep Copy) - 모든 중첩된 레벨을 복사합니다
얕은 복사 방법:
전개 연산자(spread operator) 사용:
const original = { a: 1, b: { x: 2 } };
const spreadCopy = { ...original };Object.assign() 사용:
const assignCopy = Object.assign({}, original);얕은 복사의 문제점:
original.b.x = 3;
console.log(spreadCopy.b.x); // 3 (nested objects share reference)JSON 메서드:
JSON.stringify()는 JavaScript 객체를 JSON 문자열로 변환합니다:
const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30}"JSON.parse()는 JSON 문자열을 다시 JavaScript 객체로 변환합니다:
const backToObject = JSON.parse(jsonString);
console.log(backToObject); // { name: "John", age: 30 }JSON을 이용한 깊은 복사:
const original = { a: 1, b: { x: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
original.b.x = 3;
console.log(deepCopy.b.x); // 2 (completely independent)직접 해보기
function processCart(jsonString) {
// 여기에 코드를 작성하세요
}
// 함수 외부에는 아무것도 작성하지 마세요
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
