자바스크립트으로 개발을 하다보면 객체를 복사할 일이 있다. 복사 중에는 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 개념이 있다. 두 개념의 차이를 간단하게 말하면 얕은 복사는 객체의 참조값(주소값)을 복사하고, 깊은 복사는 객체의 실제 값(value)를 복사한다.
얕은 복사 (Shallow Copy)
주소값을 복사한다. 즉 원본의 값이나 복사된 값이 변경될 경우 두 값 모두 변경된다.
let profile = {
name: '철수',
age: 8,
school: '다람쥐초등학교'
}
let friendprofile = profile
friendprofile
// { name: '철수', age: 8, school: '다람쥐초등학교' }
profile.name = '영희'
profile
// { name: '영희', age: 8, school: '다람쥐초등학교' }
friendprofile
// { name: '영희', age: 8, school: '다람쥐초등학교' }
깊은 복사 (Deep Copy)
한 데이터의 공유가 아닌, 똑같은 구조의 객체를 하나 더 생성하여 따로 사용하고자 할 때가 있다. 이럴 때 우리는 '깊은 복사'라는 개념을 사용한다.
데이터 참조가 아닌 객체의 형태를 그대로 복사하게 함으로써, 한 객체가 변경되도 다른 객체의 데이터에는 영향이 없게 된다.
즉, 얕은 복사와 달리 주소값을 복사하는 것이 아닌, 깊은 복사는 전부를 복사해 새 주소에 담아주어 참조를 공유하지 않게 된다.
깊은 복사의 방법으로 전체를 문자열로 만든 뒤, 그 문자열을 객체로 돌리는 방법이 있다.
JSON.stringfy() 와 JSON.parse() 를 사용한다.
const profile = {
name: '철수',
age: 8,
school: '다람쥐초등학교',
like:{
one:"사탕",
two:"초콜릿"
}
}
const myfriendprofile = {
name: profile.name,
age: profile.age,
school: profile.school,
like: profile.like
}
myfriendprofile
//결과
{
name: '철수',
age: 8,
school: '다람쥐초등학교',
like: { one: '사탕', two: '초콜릿' }
}
myfriendprofile(JSON.parse(JSON.stringfy(profile)))
//결과
{
name: '철수',
age: 8,
school: '다람쥐초등학교',
like: { one: '사탕', two: '초콜릿' }
}깊은 복사와 얕은 복사에 대해 공부하면서 동기한테 물어본 적이 있다. 당시 동기가 적절하게 비유를 해줘서 이해 하는데 많은 도움이 되어 대화 내용을 남겨본다.
"깊은 복사는 변수가 가지고 있는 값을 복사하는거고,
얕은 복사는 주소 값을 복사하는 의미인데요.
깊은 복사로 복사한 값을 변경하면 원본 값이 안바뀌고
얕은 복사로 복사한 값을 변경하면 원본 값도 바뀐다고 적혀있는데
쉽게 생각하면, 깊은 복사는 다른 사람의 공책에 적힌 필기를 자기 공책에 베끼고 자기공책의 내용을 수정해도 원본공책은 바뀌지않는 것과 같습니다.
얕은 복사는 제 공책에 친구 공책이 있는 위치만 옮겨적은 거라
수정하는 명령을 내리면 javscript가 제 공책에 적힌 친구 공책 위치로 가서
직접 친구공책을 수정하는 것과 같아용"
참고 및 출처
https://jess2.xyz/JavaScript/copy/
https://helloinyong.tistory.com/267
