얕은 복사와 깊은 복사

Coddy JavaScript 여정의 논리 & 흐름 섹션에 포함된 레슨. 65개 중 25번째.

objects를 복사할 때는 두 가지 복사 유형이 있습니다:

얕은 복사 - 첫 번째 수준만 복사
깊은 복사 - 모든 nested 수준을 복사

얕은 복사 방법:

스프레드 연산자 사용:

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); // 3

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 (완전히 독립적)

챌린지

쉬움

processCart라는 이름의 함수를 만들어 쇼핑 카트를 나타내는 JSON string을 받도록 하세요. cart에는 이름과 가격이 포함된 제품 배열이 들어 있습니다. 여러분의 과제는 다음과 같습니다:

JSON string을 JavaScript object로 Parse합니다
이 cart에서 서로 독립적인 두 개의 cart를 Create합니다
두 번째 cart에서:
1. 각 항목에 discounted 속성을 추가하고 false로 설정합니다
2. price가 50보다 큰 모든 항목에 10% 할인을 적용합니다
3. 할인을 받은 항목의 'discounted'를 true로 설정합니다
두 cart를 모두 포함하는 배열을 return합니다

REQUIRED OUTPUT FORMAT: [Your translated content here]

직접 해보기

function processCart(jsonString) {
    // 여기에 코드를 작성하세요
}
// 함수 외부에는 아무것도 작성하지 마세요

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

논리 & 흐름의 모든 레슨

1문자열 심화

문자열 기초 문자열 순회 템플릿 리터럴 문자열 메서드 요약 - String Weaver

4JSON 파트 2

JSON 순회하기 중첩된 JSON JSON 옵셔널 체이닝얕은 복사와 깊은 복사복습 - 자전거 상점 복습 - 태양계

7도서 관리 시스템

10축제 시스템 관리하기

프로젝트 개요 영화 및 상영관 추가하기

직접 연습해 보세요: 온라인 JavaScript 컴파일러