Tech/Javascript

[Javascript] Javascript immutability

lonnie(동현) 2020. 12. 24. 21:07

immutability : 무질서한 수정과 삭제 속에서 데이터의 원본이 훼손되는 것을 막는 것

1. 변수 할당 방식

① case에서, primitive data type은 선언된 p1과 p2가 같은 곳을 가리키기 때문에 p1과 p2의 비교 연산자 ==의 값은 True가 나오게 된다.

 

② case에서, object data type은 같은 객체라고 하더라도 별도로 생성을 해서 따로따로 보관하는 특성으로 인해 다른 공간으로 할당되기 때문에, o1과 o2의 비교 연산자 ==의 값는 false가 나오게 된다.

 

③ case에서, primitive data type은 처음에 p3는 p3 = p1에 의해 '1' 쪽에 할당되어 있다가,  p3 = 2를 선언하면서 다른 곳을 할당시키게 된다.

 

④ case에서, object data type은 o3 = o1에 의해 같은 곳을 할당한다. 그리고 o3.name = 'dongri' 를 선언하니, 처음에 o1에 의해 먼저 할당된 곳의 값이 'dongle' 에서 'dongri' 로 바뀌게 된다. 이 때문에 초기에 o1이 가지고 있는 데이터 값인 'dongle' 값을 보존할 수 없게 되는 것이다.

 

그렇다면, o1이 가리키고 있는 원본 데이터 값을 유지할 수는 없을까? 객체의 복사를 이용하면 된다.

 

 위와 같이 Object.assign을 이용하게 되는 데, 이는 괄호의 첫번째 인자, 두번째 인자의 객체를 병합하여 하나의 객체로 만들어서 o2로 리턴해 주는 것이다. 이를 통해서, 원본 데이터의 불변함을 유지할 수있고, 복제본을 변경시키는 것을 통해서 가변성을 유지할 수 있게된다.

 

코드를 통해서 살펴보면, 이 처럼 o1 과 o2는 값은 같지만, 서로 다른 값을 가리키는 것을 볼 수 있다.

이 상태에서 값을 변경시켜주면, 바뀐 부분은 자기 자신에게만 영향을 주고 원본 데이터에는 어떠한 영향도 주지 않는 것을 볼 수 있다. 이를 통해서 원본을 immutable 하게 유지할 수 있게 된 것이다.

 

 

 

728x90
반응형

'Tech > Javascript' 카테고리의 다른 글

[Javascript] 객체의 기본  (0) 2020.12.30
[Javascript]Javascript Immutability -2  (0) 2020.12.27
[Javascript] 객체  (0) 2020.12.22
[Javascript] 함수  (0) 2020.12.22
[Javascript] Javascript 기본 정리  (0) 2020.12.21