[Javascript] 얕은 복사, 깊은 복사
1. 얕은 복사(Shallow copy)Permalink
const user = {
name: 'LWW',
age: 45,
emails: ['abcdefg@gmail.com']
}
const copyUser = user
console.log(copyUser === user) // true
// user 데이터를 수정했는데, copyUser 데이터도 같이 변경됨
user.age = 29
console.log('user', user) // user {name: "LWW", age: 29, emails: Array(1)}
console.log('copyUser', copyUser) // copyUser {name: "LWW", age: 29, emails: Array(1)}
user.emails.push('opqrstu@naver.com')
console.log(user.emails === copyUser.emails) // true
const user = {
name: 'LWW',
age: 45,
emails: ['abcdefg@gmail.com']
}
// Object.assign(대상객체, 출처객체) 활용
const copyUser = Object.assign({}, user)
console.log(copyUser === user) // false
user.age = 29
console.log('user', user) // user {name: "LWW", age: 29, emails: Array(1)}
console.log('copyUser', copyUser) // copyUser {name: "LWW", age: 45, emails: Array(1)}
user.emails.push('opqrstu@naver.com')
console.log(user.emails === copyUser.emails) // true
const user = {
name: 'LWW',
age: 45,
emails: ['abcdefg@gmail.com']
}
// 전개 연산자 활용
const copyUser = {...user}
console.log(copyUser === user) // false
user.age = 29
console.log('user', user) // user {name: "LWW", age: 29, emails: Array(1)}
console.log('copyUser', copyUser) // copyUser {name: "LWW", age: 45, emails: Array(1)}
user.emails.push('opqrstu@naver.com')
console.log(user.emails === copyUser.emails) // true
2. 깊은 복사(Deep copy)Permalink
- 참조 데이터 내부에 또 다른 참조 데이터가 있는 경우 깊은 복사 고려
const user = {
name: 'LWW',
age: 45,
emails: ['abcdefg@gmail.com']
}
const copyUser = {...user}
console.log(copyUser === user) // false
user.age = 29
console.log('user', user) // user {name: "LWW", age: 29, emails: Array(1)}
console.log('copyUser', copyUser) // copyUser {name: "LWW", age: 45, emails: Array(1)}
// 얕은 복사로는 속의 내용까지 복사되지 않음
user.emails.push('opqrstu@naver.com')
console.log(user.emails === copyUser.emails) // true
console.log('user', user) // user {name: "LWW", age: 29, emails: Array(2)}
console.log('copyUser', copyUser) // copyUser {name: "LWW", age: 45, emails: Array(2)}
- 깊은 복사는 javascript로 직접 구현하기 복잡하기 때문에 lodash 패키지 활용
$ npm i lodash
$ npm run dev
// lodash 패키지 import
import _ from 'lodash'
const user = {
name: 'LWW',
age: 45,
emails: ['abcdefg@gmail.com']
}
// lodash 패키지의 깊은 복사 cloneDeep 메서드 사용
const copyUser = _.cloneDeep(user)
console.log(copyUser === user) // false
user.age = 29
console.log('user', user) // user {name: "LWW", age: 29, emails: Array(1)}
console.log('copyUser', copyUser) // copyUser {name: "LWW", age: 45, emails: Array(1)}
user.emails.push('opqrstu@naver.com')
console.log(user.emails === copyUser.emails) // false
console.log('user', user) // user {name: "LWW", age: 29, emails: Array(2)}
console.log('copyUser', copyUser) // copyUser {name: "LWW", age: 45, emails: Array(1)}
- 참고
- lodash 검색
- documentation 버튼 누름
- clone 검색
결론! 얕은복사 : Object.assign, 전개 연산자 사용 // 깊은복사 : lodash 패키지 사용
댓글남기기