javaScript(얕은 복사, 깊은 복사)

얕은 복사(Shallow copy)

---

얕은 복사란 객체를 복사할 때 위의 예제처럼 원래값과 복사된 값이 같은 참조를 가리키고있는 것을 말한다. 객체안에 객체가 있을 경우 한개의 객체라도 원본 객체를 참조하고 있다면 이를 얕은 복사라고 한다.

• 객체를 복사할 때, 해당 객체만 복사하여 새 객체를 생성한다.
• 복사된 객체의 인스턴스 변수는 원본 객체의 인스턴스 변수와 같은 메모리 주소를 참조하며 해당 메모리 주소의 값이 변경되면 다른 객체의 변수 값 역시 동일하게 변경된다.

얕은 복사 방법

1. Object.assign()

---

Object.assign(생성할 객체, 복사할 객체)
메소드의 첫 번째 인자로 빈 객체를 넣어주고 두 번째 인자로 복사할 객체를 넣어주면 된다.

const user = {
  name: 'Winnie',
  age: 20,
  emails: ['qwe3364@gmail.com']
}
const copyUser = Object.assign({}, user)
console.log(copyUser === user)

user.age = 22
console.log('user', user)
console.log('copyUser', copyUser)

결과

2. Spread 연산자 (전개 연산자)

---

const user = {
  name: 'Winnie',
  age: 20,
  emails: ['qwe3364@gmail.com']
}
const copyUser = { ...user }
console.log(copyUser === user)

user.age = 22
console.log('user', user)
console.log('copyUser', copyUser)

결과

얕은 복사의 문제점 : 복사하려는 객체의 내부에 존재하는 객체는 완전한 복사가 이루어지지 않는다.

깊은 복사(Deep copy)

---

원시값을 복사할 때 그 값은 또 다른 독립적인 메모리 공간에 할당하기 때문에, 복사를 하고 값을 수정해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않는다. 이처럼 실제 값을 복사하는 것을 깊은 복사라고 한다

• 객체를 복사할 때 해당 객체와 인스턴스 변수까지 복사한다.
• 데이터 참조가 아닌 객체의 형태를 그대로 복사함으로써 한 객체가 변경되어도 다른 객체의 데이터에는 영향을 주지 않는다.

Lodash 라이브러리 사용

---

라이브러리를 사용하면 더 쉽고 안전하게 깊은 복사를 할 수 있습니다. 설치를 해야 한다는 점과 일반적인 개발에는 효율적이겠지만, 코딩 테스트에는 사용할 수 없다는 것이 단점이다.

import _ from 'lodash'

const user = {
  name: 'Winnie',
  age: 20,
  emails: ['qwe3364@gmail.com']
}

// cloneDeep-깊은 복제
const copyUser = _.cloneDeep(user)
console.log(copyUser === user)

user.age = 22
console.log('user', user)
console.log('copyUser', copyUser)

user.emails.push('qwe3364@naver.com')
console.log(user.emails === copyUser.emails)
console.log('user', user)
console.log('copyUser', copyUser)