깊은 복사, 얕은 복사

얕은 복사

shallow copy은 얕은 복사이다. 얕은 복사은 참조자료형에서 사용이 된다.

const profile = {
	name: "철수",
    age: 10,
  	school: "코드초등학교"
}

const profile2 = profile

console.log(profile2)

// {name: "철수", age:10, school:"코드초등학교"}

profile이라는 객체가 있고 profile2에 profile을 할당 했다.
그리고 profile2를 호출을 하면 profile하고 같은 값이 나온다.

profile2.name ="영희"

console.log(profile)

//{name: "영희", age: 10, school:"코드초등학교"}

profile2의 name을 영희로 변경하였다. 그러면 profile2의 name은 영희로 값이 들어갈 것이다.

그런데 profile을 호출 해보니 profile의 name 또한 영희로 변경이 되었다. 복사본에서 변경을 했는데 원본에서 변경이 일어닜다.
그 이유는 객체데이터는 참조자료형이다. 그래서 값에 객체데이터 자체가 저장된 것 처럼 보이지만 사실 객체는 메모리안에 저장이 되고 profile의 값에는 메모리의 주소가 저장이 된 것이다. 그래서 profile2에 profile을 넣어주면 profile의 저장된 메모리의 주소가 들어가고 profile과 profile2는 같은 메모리 주소를 바라보게 된다.

그래서 profile2을 변경하게 되면 profile의 값도 변경이 되게 된다.

그래서 이를 막아주기 위해서 스프레드 연산자를 통해서 복사를 해주면 새로운 메모리에 그 값들을 만들어 주게 돤다.

const profile3 = {...profile} 

---

깊은 복사

깊은 복사는 얕은 복사와 이어지는 부분이다.

const profile = {
	name: "철수",
    age: 10,
  	school: "코드초등학교",
  	hobby: {
    	hobby1: "독서",
      	hobby2: "수영"
    		}
}

const profile2 = {...profile}

profile이라는 갹체 안에 hobby라는 객체가 들어가 있다. 그리고 profile2에서 profile를 얕은 복사를 해주고 있다

profile2.name = "영희"
profile2.hobby.hobby1 = "축구"

console.log(profile)

// {
	name: "철수",
    age: 10,
  	school: "코드초등학교",
  	hobby: {
    	hobby1: "축구",
      	hobby2: "수영"
    		}

profile2에 name과 hobby의 hobby1의 값을 변경주고 profile을 호출해 주었는데 name은 변경이 되지 않았지만 hobby1은 변경이 되었다.
그 이유는 profile2 라는 hobby는 메모리 주소가 저장이 된 것이다.

그래서 이를 막기 위해서는 깊은 복사가 필요하다.

profile =JSON.stringify(profile)
profile3 =JSON.parse(profile) 

갚은 복사는 profile를 문자열로 만든 뒤에 JSON.parse 를 이용해서 복사를 해준다. 혹은 lodash라는 라이브러리를 이용해서 복사를 해주는 방법도 있다.