JavaScript 객체와 불변성

JS의 데이터 타입인 원시타입은 

(primitive data type)은 변경 불가능한 값(immutable value)이며

예를 들면

• Number
• String
• Boolean
• null
• undefined
• Symbol

등이 있다.

원시 타입 이외의 모든 값은 객체(Object) 타입이며 객체 타입 은 변경 가능한 값(mutable value)이다.

즉 객체는 값을 직접 바꿀 수 있는 변경 가능한 타입이라 볼 수 있다.

 

여러 예시들

간단한 예시를 한줄씩 실행되는 인터프리터 기반 언어인 js 는 위의 예시처럼

메모리에 'Hi'는 문자열을 생성 1번째 a라는 변수에 저장(메모리주소가 저장)

이후 2번째 줄에서 메모리에서 'Bye'라는 문자열 생성 a에 재할당 해준다.//그래서 찍어보면 Bye가 출력된다.

(즉 a가 가리키는 주소만 바뀌었을뿐 a가 새로 생성된것은 아니다.

즉 원시타입은 불변값이기에)

 

slice()메소드를 사용해 잘라온 문자열인 '난'은 새로 생성된 문자열이다. 저장된 불변값의 '난 변하지 않아'를 잘른게 아닌...

문자열string은 원시타입이기에(즉 !복사본을 반환해주기 때문)

 

객체인 배열, 원본 자체를 변경하는 배열 매소드 push()를 사용해 기존 원본 배열 index에 0,1번째 위치에 1,2를 추가해주었다.

배열은 객체, 즉 객체는 변경 가능한 값이기에...

 

객체의 문제 예시

이와 같이 person1과 person2는 값이 변할수 있는 객체이면서 person2=person1의 구문을 보면 결국 동일한 값인 person2.gender='woman'이므로 콘솔값을 person1의 성별을 출력해봤을 때 실행 결과값은 man이아닌 woman이 출력된다.

(같은 메모리주소(변수)를 가리키기에)

*위와 같은 예시를 방지하기위해 해야할 것은 얕은 복사, 깊은 복사를 알 필요가 있다.

 

얕은 복사,깊은 복사

객체의 방어적 복사

1. 얕은 복사 Shallow copy
   • 객체를 복사해 2개의 객체가 생성 기존의 객체를 변경하지 않고도 사용 가능하나 메모리 주소가 같음 
2. 깊은 복사 Deep copy
   • 객체를 복사해 2개의 객체가 생성 기존의 객체를 변경하지 않고도 사용 가능 메모리 주소가 다름

목표 객체를 복사(반환)하기위한 Oject.assign()메서드 

메서드 사용 예시

merge2 기존객체 변경하지않고 새로운 객체 생성 복사 Shallow copy

복사해준 객체를 변경해도 기존의 객체의 요소들은 바뀌지 않는다. 단 기존객체 변경시 변경 될 수 있음..

이렇게 객체를 복사해 여러객체를 변경 사용 가능하다.

 

그렇다면 객체가 바뀌는 실수를 범하지 않기 위해 불변하는 객체는 어떻게 만들까?

freeze()메서드를 이용해 불변 객체를 만들 수 있다.

Oject.freeze() 메서드는 원시타입의 불변 객체를 만든다.

객체가 변하지 않게 기능을 고정 시킬수도 있다.

단 내부객체는 바뀔 수 있음 고정시켜주려면 내부도 설정 freeze해줘야함

* 객체가 불변인지(동결상태 인지)확인하는 메서드 Object.isFrozen()