객체의 복사 - 얕은 복사 (shallow copy) & 깊은 복사 (deep copy)

얕은 복사 (shallow copy)

: 객체의 최상위 속성을 복사하여 새 객체를 생성
: , 중첩된 객체는 원본 객체를 참조

- 속성 값이 원시 타입(문자열, 숫자, 불린 등)인 경우 그 값이 직접 복사
- 속성 값이 참조 타입(다른 객체, 배열 등)인 경우 해당 참조(메모리 주소)만 복사

예제

let animal1 = {
  name: '푸들이',
  owner: {
    name: '테드',
    job: 'FrontEnd-developer',
  },
};

let animal2 = animal1; // 동일한 객체를 참조
animal2.name = '멍멍이';
animal2.owner.name = 'Ted';

console.log(animal1.name); // 멍멍이
console.log(animal1.owner.name); // Ted
console.log(animal1); // { name: '멍멍이', owner: { name: 'Ted', job: 'FrontEnd-developer' } }
console.log(animal2); // { name: '멍멍이', owner: { name: 'Ted', job: 'FrontEnd-developer' } }

• 제일 아래 animal2는 수정한 적이 없지만 animal1과 같은 객체를 참조하기 때문에 animal1과 같은 객체가 나오는 것을 확인할 수 있음

---

깊은 복사 (deep copy)

: 원본 객체의 값을 완전히 복제하여 새로운 객체를 생성
: 원본 객체와 복사본이 서로 독립적
JSON.parse(JSON.stringfy(obj)) 메서드를 사용

JSON.stringify()
: 입력받은 객체를 JSON 문자열로 변환

JSON.parse()
: JSON 문자열을 다시 JS 객체로 변환 >> 새로운 메모리 위치에 할당

예제

let animal3 = JSON.parse(JSON.stringify(animal1));
console.log(animal1.name); // 멍멍이
console.log(animal3.name); // 멍멍이

animal3.name = '딸기';
console.log(animal1.name); // 멍멍이
console.log(animal3.name); // 딸기

---

 

자바스크립트 속성 존재 확인

• 속성이 객체에 존재하는지 확인을 위해서 in 연산자 사용
• 반환값은 존재의 유무에 따라 boolean 값으로 반환

let book = {
  title: '어린왕자',
  author: '생택쥐페리',
  publishYear: 1943,
};

console.log('title' in book); // true
console.log('publishYear' in book); // true
console.log('hello' in book); // false

속성 삭제

• 속성 삭제 시 값이 자동으로 삭제
• delete 연산자를 사용

delete book.author;
console.log('author' in book); // false

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/shallow-copy-deep-copy-4401c1f6b2b44274ae362d2b44302b46?pvs=4

객체의 복사 - 얕은 복사 (shallow copy) & 깊은 복사 (deep copy) | Notion