JS | 데이터 불변성과 데이터 복사

🔍 데이터 불변성 (immutability)

기존의 데이터가 변하지 않는 성질

---

• 원시형(Primitive) 데이터 : String , Number, Boolean, Undefined, Null
• 참조형(Object) 데이터 : Object, Array, function ...
  
  이미지 출처

✒️ 원시형 데이터

let a = 1
let b = 4
console.log(a, b, a===b) // 1 4 false

b=a 
console.log(a, b, a===b) // 1 1 true

a=7
console.log(a,b, a===b) // 7 1 false

let c = 1
console.log(b,c, b===c) // 1 1 true

c 선언한 마지막 코드를 살펴보면,

새로운 데이터를 생성할 때, 원시 데이터가 기존의 메모리 주소에 들어있다면, 새로운 메모리 주소를 사용하지 않고 기존의 메모리 주소만 바라보도록 되어있다.

이것이 데이터의 불변성이며, 사실상 원시형 에서는 (쉽게 생각하면) 값의 생김새가 같으면 같은 데이터라는 것이다.

✒️ 참조형 데이터

• 변수를 새로 선언하면, 생김새가 같은 값이라도 새로운 메모리를 할당 받아 값을 저장하게 된다.
• 같은 메모리 주소를 참조하여 값을 공유한다. ⇒ 불변성이 없다 (변경 가능)

// 다른 메모리 주소를 가리키기 때문에 다른 데이터임.
let a = {k:1}
let b = {k:1}
console.log(a, b, a===b) // {k: 1} {k: 1} true

// a 의 k 를 7로 변경하고, b의 메모리 주소를 a 메모리 주소로 할당
// 같은 메모리 주소로 변경 되었기 때문에, 같은 데이터임
a.k = 7
b=a
console.log(a, b, a===b) // {k: 7} {k: 7} true

// a 의 k 를 2로 변경하면, 이젠 b 도 같이 바뀜 
a.k =2
console.log(a, b, a===b) // {k: 2} {k: 2} true

이처럼 참조형 데이터에서 주의해야 할 점은 같은 메모리 주소를 공유하는 데이터라면, 하나의 데이터를 변경해도 함께 주르륵 변경된다는 점이다.

그렇기 때문에 참조형 데이터를 복사해서 새로운 메모리 주소를 할당 받는 방법에는 얕은 복사와 깊은 복사가 존재한다.

🔍 복사

---

✒️ 얕은 복사

복사는 참조(주소)값의 복사

const user = {
        name :'sungwoon',
        age: 29,
				email:'gooreumseng@gmail.com',
      }

새로운 객체를 반들어 복사하여 사용

1. Object.assign () 활용 : 새로운 객체를 만들어 복사하여 사용

const copyUser = Object.assign({}, user)

2. 펼침 연산자

const copyUser = {...user}

하지만, 얕은 복사는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값(메모리 주소)를 전달하여 결국 한 데이터를 공유하는 것이기 때문에

새로운 참조형 데이터를 추가하면, 값이 공유된다는 점을 주의해야한다.

✒️ 깊은 복사

값 자체를 복사하는 것이며, 독립적인 메모리에 값 자체를 할당하여 생성하는 것

lodash 모듈의 _.cloneDeep()

& npm i lodash

import _ from 'lodash'

const copyUser = _.cloneDeep(user)