JavaScript Immutability

JavaScript Immutability

| 공개

 

 

 

수업소개

자바스크립트에서 데이터를 불변하게 다루는 방법에 대한 수업입니다. 이 수업에서는 아래와 같은 내용을 다루고 있습니다. 

  • 원시 데이터 타입과 객체의 동작방법 간의 차이
  • 객체를 복제하는 방법
  • 원본 객체를 수정하지 않고 복제본을 수정하는 방법

아래 내용은 다루고 있지 않습니다. 

  • 불변 라이브러리

 

 

 

수업대상

데이터를 불변하게 다루면 데이터들간의 간섭으로 인한 버그의 가능성을 획기적으로 낮출 수 있습니다. 또 데이터가 변경 되었는지 여부를 매우 쉽게 체크할 수 있습니다. 그 외에 Hot module reloading, time travel과 같은 고급 기법을 구현하는데 기초가 되기도 합니다. 

아래 코드의 결과를 모두 예상할 수 있다면 이 수업은 듣지 않아도 됩니다.

var n1 = 1;
var n2 = 1;
console.log(n1 === n2);
=> true입니다. 당연합니다.

var o1 = {name:'kim'}
var o2 = {name:'kim'}
console.log(o1 === o2);
=> false 입니다. 조금 애매하죠. JavaScript는 값이 바뀌지 않는 원시 데이터 타입과 값이 바뀔 수 있는 객체를 다르게 취급합니다.

var o1 = {name:'kim'}
var o2 = o1;
o2.name = 'lee';
console.log(o1.name);
=> lee 입니다. o1은 영문도 모르고 자신이 가르키고 있는 name의 값이 바뀌어 버렸습니다.

var o1 = {name:'kim'}
var o2 = Object.assign({}, o1); // 빈 객체에 o1을 복사합니다.
o2.name = 'lee';
console.log(o1.name);
=> kim입니다. o2를 변경해도 o1이 영향을 받지 않습니다. o2에 대해서 o1은 불변한 상태를 유지할 수 있게 됩니다.

var o1 = {score:[1,2]}
var o2 = Object.assign({}, o1);
o2.score.push(3);
console.log(o1.score)
=> [1,2,3] 입니다. 영문도 모르고 o1이 또 바뀌었습니다. score는 객체의 일종인 배열이기 때문입니다.

var o1 = {score:[1,2]}
var o2 = Object.assign({}, o1);
o2.score = o2.score.concat(); // 배열을 복사합니다.
o2.score.push(3);
console.log(o1.score)
=> [1,2] 입니다.

다른 방법도 있습니다. 몽땅 다 복사를 하는 것입니다.
var o1 = {score:[1,2]}
var o2 = JSON.parse(JSON.stringify(o1));
o2.score.push(3);
console.log(o1.score)
=> [1,2] 입니다.

원본이 바뀌지 않게 조심하는 것도 좋지만, 원본이 아예 안바뀌게 하는 것도 가능합니다.
var o1 = {name:'kim'}
Object.freeze(o1);
o1.name = 'lee';
console.log(o1.name);
=> 'kim' 입니다.

하지만 객체는 이게 안됩니다.
var o1 = {score:[1,2]}
Object.freeze(o1);
o1.score.push(3);
console.log(o1.score);
// [1,2,3] 입니다.

방어적으로 냉동을 해야 합니다.
var o1 = {score:[1,2]}
Object.freeze(o1);
Object.freeze(o1.score);
o1.score.push(3);
console.log(o1.score);
// 변경이 안됩니다. 심지어 항의성 에러를 발생시켜버립니다.

 

 

 

 

수업을 보는 다른 방법

JavaScript Immutability Youtube 재생목록

 

 

 

수업에 참여조건

이 수업을 듣기 위해서는 아래와 같은 선행 지식이 필요합니다.
(둘 중에 하나를 공부하시면 됩니다.) 

전체 지식의 맥락은 아래 지식 지도 서말을 참고해주세요.

 

 

 

전체 재생시간

12개의 동영상으로 이루어져 있는 총 1시간 분량의 수업입니다. 

 

 

 

수업의 저작권 정책

이 수업은 CCL 라이선스 BY를 따르고 있습니다. 이 수업의 출처를 표시해주신다면 컨텐츠의 수정을 할 수 있고, 상업적인 용도로도 사용할 수 있습니다. 상업적인 용도로 사용하는 경우는 거래 관계가 없다는 것을 인지 가능하도록 표시해주셔야 합니다. 

 

 

 

컨설팅 / 교육 문의

git과 관련된 컨설팅/교육 문의는 로 연락 주세요. 기술 관련된 질문은 이메일과 같은 사적인 방법 보다는 댓글이나, 커뮤니티를 이용해주시면 모두에게 더 좋은 결과를 얻을 수 있습니다. 

 

 

 

 

댓글

댓글 본문
작성자
비밀번호
  1. 따끈한 수업 기대됩니다 감사합니다
graphittie 자세히 보기