객체의 얕은 복사와 깊은 복사
객체를 프로퍼티 값으로 갖는 객체의 경우
얕은 복사는 한 단계까지만 복사하는 것을 말하고
깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 말한다.
얕은 복사
복사본의 중첩된 구조를 변경하면 원본과 복사본 모두 영향을 받는다.
🙄 얕은 복사가 되는 경우들 (참조 값말고 객체를 복사)
1. 반복문 이용하기
- copyPerson은 반복문을 이용해 person 객체를 복사한 것 이다.
- person과 copyPerson은 같지 않다고 나온다.
- 하지만 person 안의 객체 like와 복사된 copyPerson 안의 like는 같다고 나온다.
- copyPerson안의 like는 원본 person인 like 참조 값을 복사한다.
- 따라서 copyPerson의 like를 변경하게 되면 원본 person의 like도 변경된다!
2. Object.assign()
(참고) Object.assign()이란?
메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다.
ex1)
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 },
//대상 객체 자체가 변경됨.ex2)
const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
//속성은 파라미터 순서에서 더 뒤에 위치한
//동일한 속성을 가진 다른 객체에 의해 덮어쓰입니다.
- copyPerson은 person 객체를 Object.assign()을 사용해서 복사한 것이다.
- copyPerson과 person은 다르다고 나오고 copyPerson.like.food와 person.like.food는 같다고 나온다.
- copyPerson안의 like는 원본 person인 like 참조 값을 복사한다.
- copyPerson.name을 변경하면 원본 person에는 변경되지 않지만
- copyPerson안의 객체인 like를 변경하면 원본 person에도 변경된 것을 확인 할 수 있다.
3. spread 연산자
- spread 연산자를 사용해서 복사한 copyPerson도 객체에 중첩되어 있는 객체까지 모두 복사되지는 않는다.
깊은 복사
두 변수가 완전히 독립성을 갖는 것
깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.
🙄 깊은 복사가 되는 경우들
1. lodash 라이브러리
- copyPerson은 lodash를 사용하여 person을 복사한 것이다.
- person.like와 copyPerson.like가 다르다고 나왔다.
- copyPerson은 객체에 중첩되어 있는 객체까지 모두 복사해서 원시 값처럼 완전한 복사본을 만들었다.
- copyPerson의 like.food를 변경해도 원본 person의 값은 변하지 않는다.
2. 재귀함수를 이용한 복사
실행 결과
3. JSON 객체 사용 ( + eval() 메서드 사용)
- const copyPerson =
eval(JSON.stringify(person))을 해도 결과가 똑같다. - JSON.stringify() 메서드로 객체의 데이터를 JSON 형태의 문자열로(원시 데이터)로 만들어서 복사한 후 JSON.parse() 또는 eval() 메서드를 사용해서 다시 객체로 만드는 방법이다.
