얕은 복사와 깊은 복사

얕은 복사와 깊은 복사

얕은 복사(Shallow Copy)

자바스크립트에서 원시 타입(primitive type)의 값은 새로운 메모리 공간에 독립적인 값을 저장하기 때문에 깊은 복사가 되고 참조 타입(reference type)값은 얕은 복사가 된다. 원시 타입과 참조 타입의 가장 큰 차이점은 원본이 바뀌면 참조 타입은 같이 변경 되지만, 원시 타입은 변경되지 않는다.

const profile ={
   name: "철수",
   age : 12,
   school: "다람쥐초등학교"
} // 1번지 저장

const profile01 = profile

profile01.name = "영희"
profile01 // { name: '영희', age: 12, school: '다람쥐초등학교' }

깊은 복사 (Deep Copy)

깊은 복사된 객체는 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다. 복사를 하는 목적은 기존의 객체 값만 복사본으로 가져와 별도로 활용하기 위함이 대부분이다.

• 객체를 복사 할 때, 해당 객체와 인스턴스 변수까지 복사한다.
• 전부를 복사하여 새 주소에 담기 때문에 참조를 공유하지 않는다.

const profile ={
    name: "철수",
    age : 12,
    school: "다람쥐초등학교",
    hobby:{
        hobby1: "수영",
        hobby2: "독서"
    }
}

JSON.stringify(profile) // 문자열로 변환 
'{"name":"철수","age":12,"school":"다람쥐초등학교","hobby":{"hobby1":"수영","hobby2":"독서"}}'
const newprofile = JSON.parse(JSON.stringify(profile))
// 새로운 객체 생성

newprofile.name = "훈이"
profile.name === newprofile.name // false

JSON.stringify()는 객체를 json 문자열로 변환하는데 이 과정에서 원본 객체와의 참조가 모두 끊어진다. 객체를 json 문자열로 변환 후, JSON.parse()를 이용해 다시 원래 객체(자바스크립트 객체)로 만들어준다.

💡 const 는 재할당 할 수 없지만, 객체의 키값, 벨류는 다른 주소로 저장되어 있기 때문에 바뀌게 된다. 만약 바꾸는 것을 막게하려면 object.freeze(변수명) 해서 얼게 만든다. 하지만 변수의 {}값만 얼리게 되고, 객체의 객체는 얼지 않아 바뀔 수 있다.