객체나 배열을 복살할 때, 두 가지 개념이 존재한다.
Shallow Copy(얕은 복사)와 Deep Copy(깊은 복사)로 나누어 진다.
Shallow Copy(얕은 복사)
얕은 복사는 객체나 배열의 복사를 할 때 사용한다.
객체 또는 배열은 메모리 주소를 참조하고 있기 때문에 문자열이나 숫자 같은 값을 복사하는 것과는 다르다.
const profile = {
name: "철수",
age: 8,
school: "다람쥐초등하교"
}
const friendprofile = profile
console.log(friendprofile) // { name: '철수', age: 8, school: '다람쥐초등학교' }
profile.name = "영희"
console.log(friendprofile) // { name: '영희', age: 8, school: '다람쥐초등학교' }
console.log(profile) // { name: '영희', age: 8, school: '다람쥐초등학교' }위 코드를 보면 새로운 변수에 객체를 할당해주었지만 두개의 밸류가 같이 변형이 되는 것을 확인할 수 있다.
둘이 같은 메모리 주소를 참조하고 있기에 위와 같은 결과가 나오는 것이다.
그래서 이때 할 수 있는 좋은 방법이 전개 구문(spread) 이다.
const profile = {
name: "철수",
age: 8,
school: "다람쥐초등학교"
}
const friendprofile = {...profile}
console.log(friendprofile) // { name: '철수', age: 8, school: '다람쥐초등학교' }
profile.name = "영희"
console.log(friendprofile) // { name: '철수', age: 8, school: '다람쥐초등학교' }
console.log(profile) // { name: '영희', age: 8, school: '다람쥐초등학교' }위와 같이 전개구문을 사용하면 객체 또는 배열의 요소들이 나열이 된다.
새로운 객체를 선언할 때 새로운 메모리 주소를 참조하기 때문에 새로운 객체를 만들고 그 객체안에 전개 구문을 이용해서 배열 또는 객체를 나열 해주는 것 뿐이다.
이렇게 되면 복사가 되었다고 할 수 있다.
하지만 여기에는 문제가 있다.
객체 안에 객체가 또 있다면 그것까지는 메모리 주소가 바뀌지 않는다.
그래서 이를 얕은 복사라고 하고 이를 해결하기 위해 깊은 복사를 사용한다.
Deep Copy(깊은 복사)
깊은 복사는 객체를 문자열로 바꾸고 그것을 다시 객체로 바꾸는 방법을 사용한다.
let profile = {
name: "철수",
age: 8,
school: "다람쥐초등학교"
}
let friendprofile = JSON.parse(JSON.stringify(profile))
console.log(friendprofile) // { name: '철수', age: 8, school: '다람쥐초등학교' }
profile.name = "영희"
console.log(friendprofile) // { name: '철수', age: 8, school: '다람쥐초등학교' }
console.log(profile) // { name: '영희', age: 8, school: '다람쥐초등학교' }먼저 객체를 문자열로 바꿔준 후에 그 문자열을 객체로 다시 바꾸어 새로운 변수에 담아준것 이다.
이렇게 되면 문자열로 바뀐것이 다시 객체로 바뀌면서 안에 있는 객체까지 새로운 메모리 주소를 참조하게 되는 것이다.
하지만 이것 또한 단점이 있다.
데이터 양이 많아지면 객체를 문자로 바꾸고 다시 그것을 객체로 바꾸는데 이로 인해 속도가 조금 느릴 수가 있다.
- JSON.parse - 문자열을 객체로 바꾸어준다.
- JSON.stringfy - 객체를 문자열로 바꾸어준다.
