[JavaScript] 변경불가성(Immutability)

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.

---

 

1.변경불가성(Immutability)

객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴

 

 

1-1.원시타입,객체 타입

JavaScript의 원시타입은 변경 불가능한 값이다.(Boolean,null,undefined,Number,String,Symbol)
원시타입 외의 값은 객체 타입으로 변경 가능한값이다.(객체는 새로운 값을 다시만들필요없이 변경가능하다.)

 

 

 

변경 불가능한 값인 문자열은 다음 코드의 str 값은 문자열 hello의 메모리 주소를 가르키고있다가 hi문자열의 메모리 주소를 가르키도록 변경한다.
slice 메소드를 사용할때도 직접 str의 문자열을 변경할수없기에 새로운 문자열을 생성하여 반환한다.

var str="hello";
str="hi";
document.write(str.slice(1)+"<br>")
document.write(str+"<br>")

 

 

 

객체의 경우에는 변경가능한값이다.
아래 코드의 객체 bb는 변경불가능한값이 아니므로 aa.name이 바뀌었을때 같은 어드레스를 참조하기에 바뀐다.
하지만 변수 cc의 경우 변경불가능한 "KIM"의 메모리를 참조하기에 바뀌지않는다.

var aa={
    name:"KIM"
}
var bb=aa;
var cc=aa.name;
aa.name="PARK";
document.write(aa.name+"<br>");
document.write(bb.name+"<br>");
document.write(cc+"<br>");

 

 

 

 

 

 

2.불변 데이터 패턴(immutable data pattern)

2-1.객체의 방어적 복사(defensive copy)

Object.assign는 타깃 객체로 소스객체의 프로퍼티를 복사한다.
이를 통해 기존 객체를 변경하지않고 객체를 복사하여 사용할수있다.
단 객체 내부의 객체는 얕은 복사가 이뤄지기때문에 아래 코드에서 
test1의 객체 내부의 adress 객체는 얕은 복사가 된다.

var test1={
    name:"asa",
    adress:{
        contry:"korea"
    }
}

var test2=Object.assign({},test1)
document.write((test1==test2)+"<br>");
document.write((test1.adress==test2.adress)+"<br>")

 

 

 

 

2-2.불변객체화를 통한 객체 변경 방지

Object.freeze를 사용하여 불변객체로 만든다.
하지만 객체 내부의 객체는 변경가능하다.

Object.freeze(test1)
test1.name="bab" //무시
test1.adress.contry="Japan"
document.write(test1.name+"<br>")
document.write(test1.adress.contry)

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/js-immutability