[Intermediate] 데이터 - 얕은 복사와 깊은 복사

데이터 - 얕은 복사와 깊은 복사

1. 얕은 복사(Shallow copy)

Obejct.assign() 메소드나 전개 연산자(...)를 사용한 복사

const user = {
  name: 'Orosy',
  age: 33,
  emails: ['hanei100@naver.com]
}
const copyUser = user
console.log(copyUser === user) // 값: true

user.age = 22
console.log(user) // 값: {name: 'Orosy', age: 22, email: array(1)}
console.log(copyUser) // 값: {name: 'Orosy', age: 22, email: Array(1)}
// user와 copyUser가 바라보는 메모리 주소가 같으므로 copyUser의 age도 함께 바뀌어 있음

const shallowUser = Object.assign({}, user)
console.log(shallowUser === user) // 값: false
console.log(shallowUser) // 값: {name: 'Orosy', age: 33, email: Array(1)}

const spreadUser = {...user}
console.log(spreadUser === user) // 값: false
console.log(spreadUser) // 값: {name: 'Orosy', age: 33, email: Array(1)}

user.emails.push('hanei7632@gmail.com')
console.log(user.emails === spreadUser.emails) // 값: true
// user의 emails는 참조형 데이터 중 하나인 배열 데이터이므로
// 같은 메모리 주소를 바라보기 때문에 값이 true가 반환됨

2. 깊은 복사(Deep copy)

JavaScript로 직접적으로 구현하기엔 복잡함

따라서, Lodash 패키지를 이용하여 깊은 복사 구현

import _ from 'lodash'

const user = {
  name: 'Orosy',
  age: 33,
  emails: ['hanei100@naver.com]
}
const copyUser = _.cloneDeep(user)
console.log(copyUser === user) // 값: false

user.age = 22
console.log(user) // 값: {name: 'Orosy', age: 22, email: Array(1)}
console.log(copyUser) // 값: {name: 'Orosy', age: 33, email: Array(1)}

user.emails.push('hanei7632@gmail.com')
console.log(user.emails === copyUser.emails) // 값: false
console.log(user) // 값: {name: 'Orosy', age: 22, email: Array(2)}
console.log(copyUser) // 값: {name: 'Orosy', age: 33, email: Array(1)}

깊은 복사는 재귀(반복 실행)하며 복사를 처리!

결국, 객체나 배열 데이터를 간단히 복사할 때에는 얕은 복사를 사용하되 참조형 데이터 내에 또 다른 참조형 데이터가 포함되어 있을 때에는 깊은 복사를 이용해야 한다