얕은복사와 깊은복사
중첩객체(객체안의객체)를 복사할때 얕은 복사가 발생된다.
얕은복사를 해올때는 객체안에있는 값이아닌 메모리 주소를 참조해 오는것!
깊은복사는 원본객체에 할당된 값 자체를 복사해 사본객체에 할당해준다
let child2=child1
했을때 내용만 복사가 아닌 그냥 주소만 복사..
child2.name이 바뀌면 차일드1도 바뀌어버림
통째로 복사하면 이런 단점이생김
그래서
아래와 같이 객체를 새로 만들어준 후 안의 내용을 하나하나 복사해야함!! 깊은복사!
let profile = {
name : '철수',
age : 8,
school : '다람쥐 초등학교'
}
undefined
let profile2 = {name : profile.name,
age : profile.name,
school : profile.school}
undefined
profile2
{name: '철수', age: '철수', school: '다람쥐 초등학교'}
profile2.name = '영희'
'영희'
profile2
{name: '영희', age: '철수', school: '다람쥐 초등학교'}
profile
{name: '철수', age: 8, school: '다람쥐 초등학교'}
근데...복사가 복사가 아니야..너무 길오...
그래서 나온게 있다!!
스프레드 연산자!!!{...profile}
profile3 = {...profile}
{name: '철수', age: 8, school: '다람쥐 초등학교'}
profile3.name = '후니'
'후니'
profile3
{name: '후니', age: 8, school: '다람쥐 초등학교'}
profile
{name: '철수', age: 8, school: '다람쥐 초등학교'}
스프레드 연산자가....완벽할깝..????아니다...안에있는 객체/배열은 복사가안됨
결국 얕은복사!
let profile = {
name : '철수',
age : 8,
school : '다람쥐 초등학교',
hobby :{ hobby1 :'수영',
hobby2 : '게임하기'}
}
undefined
let profile2 = {...profile}
undefined
profile2
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '수영', hobby2: '게임하기'}
name: "철수"
school: "다람쥐 초등학교"
[[Prototype]]: Object
profile
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '수영', hobby2: '게임하기'}
name: "철수"
school: "다람쥐 초등학교"
[[Prototype]]: Object
profile2.hobby.hobby1='독서'
'독서'
profile2
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '독서', hobby2: '게임하기'}
name: "철수"
school: "다람쥐 초등학교"
[[Prototype]]: Object
profile
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '독서', hobby2: '게임하기'}
name: "철수"
school: "다람쥐 초등학교"
[[Prototype]]: Object
프로필1의 하비 객체안의 값이 바뀌어버려뜨아..... 프로필2만 바뀌었으면했는데 ㅠㅠㅠ
프로필의 하비는 하비안희 주소까지 가지고온것...!!
그럼 깊은복사에 스프레드 연산자 할려묜??
안의 내용을 전부다 스트링으로 바꾸고(JSON.stringify()) 카피하고 다시 객체형태로 돌리면 되지!!(JSON.parse()사용)
let profile2=JSON.parse(JSON.stringify(profile))
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
이것이 바로.깊은복사!!!!!!
하면 이렇게 객체안의 객체값 까지 완벽히 가져옴!! 주소형식아니게
let profile2 = JSON.parse(JSON.stringify(profile))
undefined
profile2
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
profile2.hobby.hobby1='댄스'
'댄스'
profile2
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '댄스', hobby2: '게임하기'}
name: "철수"
school: "다람쥐 초등학교"
[[Prototype]]: Object
profile
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '독서', hobby2: '게임하기'}
name: "철수"
school: "다람쥐 초등학교"
[[Prototype]]: Object
더 많은 팁들!!
npm에서 lodash!!!
import from 'lodash'
로데쉬는 임포트시 로 하는게 관례
사용할때 _.clonedeep 같이 씀
