깊은복사 얕은복사 정리

백아름·2023년 5월 1일
0

프론트엔드

목록 보기
7/80

깊은복사: JSON.parse(JSON.stringify(object));

let obj = { 
  a: 1,
  b: { 
    c: 2,
  },
}

let newObj = JSON.parse(JSON.stringify(obj));

obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } } (New Object Intact!)

얕은복사: Object.assign({}. obj); ...spread

1) 얕은 복사는 top property는 복사(고유 값을 가짐)가 되지만,

2) 그 안에 내장된 속성에 대해서는 주소를 공유하게 됨.

  • 즉, 윗단계는 고유값과 고유의 주소를 가져서 복사한 녀석을 바꾸면 복사한 녀석의 값만 바뀌고 원본 자료는 영향을 받지 않음. 하지만, 하위 단계의 것들은 주소를 공유해서 하위 속성의 값을 바꾸는 것은 그 주소를 공유하기에 복사본이나 원본이나 똑같이 변경이 됨.

1) 예시

let obj = {
  a: 1,
  b: 2,
};
let objCopy = Object.assign({}, obj);

console.log(objCopy); // result - { a: 1, b: 2 }
objCopy.b = 89;
console.log(objCopy); // result - { a: 1, b: 89 }
console.log(obj); // result - { a: 1, b: 2 }

2-1) 예시


    delete obj.twins['Jared Leto']; 
    // 얕은 복사라서 nested된 사항에 대해서는 주소가 공유됨. 원본에서 삭제해서 복사본에서도 삭제됨.
    //즉, 얕은 복사는 top-property는 복사되어 고유한 값(value)을 갖게 되지만, 
    // 그 이하의 property에 대해서는 reference가 됨
    expect('Jared Leto' in copiedObj.twins).to.equal(false);

2-2) 예시

let obj = {
  a: 1,
  b: {
    c: 2,
  },
}
let newObj = Object.assign({}, obj);
console.log(newObj); // { a: 1, b: { c: 2} }

obj.a = 10;
console.log(obj); // { a: 10, b: { c: 2} }
console.log(newObj); // { a: 1, b: { c: 2} }

newObj.a = 20;
console.log(obj); // { a: 10, b: { c: 2} }
console.log(newObj); // { a: 20, b: { c: 2} }

newObj.b.c = 30;
console.log(obj); // { a: 10, b: { c: 30} }
console.log(newObj); // { a: 20, b: { c: 30} }

// Note: newObj.b.c = 30; Read why..
profile
곧 훌륭해질 거에요!

0개의 댓글

관련 채용 정보