객체를 대입연산자로 다른 변수에 대입하면 이 둘은 같은 객체이므로 둘 중 하나의 내용을 다르게 하면 둘의 내용은 모두 변하게 된다.
의도치 않게 이런 경우를 방지하기 위해 '복사'에 대해 배워보자.
ex.
let x = {
name: 'honey',
age: 30,
}
const y = Object.assign({}, x)
console.log(y === x)
y.age = 20
console.log(x)
console.log(y)Object.assign(target, src) 메소드는 target에 src와 같은 key의 value는 src의 value로,
target에 없는 key, value쌍은 target에 새로 생기는 메소드이다.
이는 target의 레퍼런스도 리턴하므로 이를 이용하여 위와 같이 복사를 할 수 있다.
전개 연산자를 통해서도 이러한 복사를 할 수 있다.
ex.
let x = {
name: 'honey',
age: 30
}
const y = {...x}
console.log(y === x)
y.age = 20
console.log(x)
console.log(y)이들은 얕은 복사라는 개념이다.
얕은 복사는 두 객체데이터는 다른 객체데이터이나 안의 성분들은 모두 같다.
즉, 안에 배열이 있다면 배열은 그대로 복사되어 x와 y모두 같은 메모리 주소의 배열을 가지게 된다.
그래서 두개는 다른 객체임에도 불구하고 하나의 배열을 수정하면 둘 다 내용이 바뀌게 된다.
이럴 때 필요한 것이 깊은 복사이다.
이러한 깊은 복사는 자바스크립트로 직접 구현하기 힘드므로 lodash 패키지를 이용할 것이다.
(패키지가 없다면?)
ex.
let x = {
name: 'honey',
age: 30,
arr: [1, 2, 3]
}
const y = {...x}
y.arr = [...y.arr]
x.arr.push(4)
console.log(x)
console.log(y)콘솔에 출력되는 내용
그리고 lodash 라는 모듈을 이용하면 간편하게 깊은 복사를 쓸 수 있다.
ex.
import _ from 'lodash'
let x = {
name: 'honey',
age: 30,
arr: [1, 2, 3]
}
const y = _.cloneDeep(x)
x.arr.push(4)
console.log(x)
console.log(y)콘솔
