JavaScript 객체와 불변성

지난 포스팅에서는 JavaScript의 자료형과 특성에 대해 알아보았다.

https://ksw0627.tistory.com/21

이번 포스팅에서는 JavaScript 객체와 불변성에 대해서 알아보고자 한다.

 

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

== 기본형 데이터 타입 ==
 - 논리형(boolean), 정수형(int), 실수형(double), 문자형(char)
== 참조형 데이터 타입 ==
 - 배열(Array), 클래스(Class), 인터페이스(Interface)

 

2. 불변 객체를 만드는 방법

'불변 객체'란, 변하지 않는 객체, 즉 이미 할당된 객체가 변하지 않는다는 뜻을 가지고 있다.

자바스크립트에서 불변 객체를 만들 수 있는 방법은 기본적으로  const와 Object.feeze()를 사용하는 것이다.

 

2-1. const

자바스크립트 키워드 중 하나인 const로, ES6(ECMA 2015)부터 let과 const를 지원한다.

const 키워드는 변수를 상수로 선언 할 수 있다. 일반적으로 상수는 선언된 변수는 값을 바꾸지 못하는 것으로 알려져 있다. 

그러나 상수로 선언된 a의 값은 변경이 불가능하지만, a의 객체의 값은 변경이 가능하다는 것을 알 수 있다.

const는 할당된 값이 상수가 되는 것이 아니고, 바인딩 된 값이 상수가 된다.

 

 

2-2. Object.freeze()

자바스크립트에서 기본적으로 제공하는 메소드인 Object.freeze() 메소드는, 공식 문서에서는 "객체를 동결하기 위한 메소드"라고 적혀있다.

Object.freeze() 메소드는 바인딩된 변수를 동결 객체로 만들었다. 따라서 test 객체는 객체의 속성을 변경하는 시도는 불가능하다.

그러나 객체의 재할당은 가능하다. test 변수에 name를 age로 재할당함으로써 완전하게 불변이 아니라는 것을 확인 할 수 있다.

 

결과적으로 불변 객체를 사용하는 방법은 둘 다 사용하면 되겠다.

바인딩 된 값이 상수가 되는 const와 바인딩된 변수를 동결 객체로 만드는 Object.freeze()를 동시에 사용해보겠다.

위와같이, const 선언된 test의 name값인 Kim이 Park로 변경되지 않음을 확인할 수 있고,

Object.freeze()로 동결 객체가 된 test의 객체 속성을 변경하려고 할 시에 에러 메세지가 뜨는 것을 볼 수 있다.

Assignment to constant variable 에러는 JavaScript ES6 이상을 사용하면 어디서든 발생할 수 있는 에러이고,
이미 선언한 const 변수는 재할당을 허용하지 않음므로, 변경이 불가능한 것임을 알 수 있다.

https://itprogramming119.tistory.com/entry/Javascript-Assignment-to-constant-variable-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

 

3. 얕은 복사와 깊은 복사

3-1. 얕은 복사(Shallow Copy)

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

3-2. 깊은 복사(Deep Copy)

• 객체를 복사할 때, 해당 객체와 인스턴스 변수까지 복사하는 방식
• 전부를 복사하여 새 주소에 담기 때문에 참조를 공유하지 않는다.

 

== Reference ==

불변 객체 만들기

https://spiderwebcoding.tistory.com/8

[JavaScript] 불변 객체 만들기(const, Object.freeze())