JavaScript 객체와 불변성이란 ?

아주그냐앙·2022년 7월 21일
0

기본형 데이터와 참조형 데이터

  • 기본형 데이터 immutable value
    Number
    String
    Boolean
    null
    undefined
    Symbol
  • 참조형 데이터 mutable value
    Object - Array
    Object - Funciton
    Object - RegExp
    Object - Set/WeakSet
    Object - Map/WeakMap

a = "hello" 를 지정해주면

메모리에 a = 'hello' 를 저장 해주는것이아니라 a라는 변수가 'hello' 가 저장된 메모리의 주소를 가리키는것이다.

또한 메모리는 한번 저장되면 메모리영역안에서 변경이 불가능하기에

a = "world" 로 바꾸어 주면 'hello'를 저장한 메모리가 바뀌는게 아니라 새로운 "world"를 저장한 메모리를 만들어 주소를 바꿔주는것이다

a가 본래 1이라는 주소를 가르켰다면 2를 가르키는것

예시1)

let name = 'hello'
let neme2 = name
name = 'world'

console.log(name) // world를 출력
console.log(name2) // hello를 출력

name = 'world'를 선언 할때 name 새로운 메모리('world')를 가르키지만
name2 는 어전히 예전 'hello'를 가진 메모리를 가르키고 있다

이것이 기본형 immutable value 타입을 가진 데이터이다

예시2)

let man = {
  name : '홍길동'
};

let people = man

man.name = '고길동'

console.log(man) // name: '고길동'을 출력
console.log(people) // name: '고길동'을 출력

man.name people.name 둘다 고길동을 출력한다.
그 이유는 둘다 name 의 값을 가르키는게 아니라
name을 먼저 찾기때문이다 name을 찾으면 name에서 고길동의 주소를 주기에 변화된 값을 출력한다.

이것이 mutable value 타입을 가진 데이터이다.

얕은 복사와 깊은 복사

위에서 보여준 예시2의 경우가 얕은 복사라고 할 수 있다.

mutable 타입의 데이터를 복사 할 때 원본과 상관없이
새로운 속성의 객체로 사용하는 방법은 없을까?

바로 스프레드 연산자나 Object.assign()메소드를 사용하는 방법이 있다.

이 두개를 사용해서 복사를 하면 깊은 복사 가된다.

(원본의 값의 주소를 복사하는게 아니라 새로운 값을 만들어 복사해오기 때문에 원본의 변화에 영향을 받지 않는다.)

불변 객체를 만드는 방법

const와 Object.freeze()의 조합을 사용하면 객체를 불변객체로 만들수 있다.

Reference

https://velog.io/@mmzgpgp/JavaScript-%EA%B8%B0%EB%B3%B8%ED%98%95-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%99%80-%EC%B0%B8%EC%A1%B0%ED%98%95-%EB%8D%B0%EC%9D%B4%ED%84%B0

0개의 댓글