생활코딩 - JavaScript Immutability
생활코딩 - JavaScript Immutability
수강정보
(22개의 수강평)
845명의 수강생
스킬태그 #JavaScript
무료
지식공유자 : Egoing Lee
12회 수업
기간 : 평생 무제한 시청
수료증 : 미발급 강의
수강 난이도 : 초급

이 강의는

생활코딩에서 제공하는 자바스크립트 관련 강의로, 자바스크립트에서 데이터를 불변하게 다루는 방법에 대한 수업입니다.

이런 걸 배워요

  • 자바스크립트에서 데이터를 불변하게 다루는 방법
  • 원시 데이터 타입과 객체의 동작방법 간의 차이
  • 객체를 복제하는 방법
  • 원본 객체를 수정하지 않고 복제본을 수정하는 방법

1. 강의 소개

생활코딩의 JavaScript Immutability 수업은 자바스크립트에서 데이터를 불변하게 다루는 방법에 대한 강의입니다. JavaScript 기본 문법을 알고 있는 학습자를 대상으로 데이터를 불변하게 하여 원본이 훼손되는 것을 막는 방법을 살펴봅니다.

이 강의는 아래와 같은 내용을 다루고 있습니다. 

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

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

  • 불변 라이브러리

2. 강의 대상

데이터를 불변하게 다루면 데이터들간의 간섭으로 인한 버그의 가능성을 획기적으로 낮출 수 있습니다. 또 데이터가 변경 되었는지 여부를 매우 쉽게 체크할 수 있습니다. 그 외에 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);
// 변경이 안됩니다. 심지어 항의성 에러를 발생시켜버립니다.

3. 강의 참여 조건

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

4. 전체 재생시간

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

5. 수업 저작권

이 강의는 CC 라이센스를 따르고 있으며, 아래 링크에서도 볼 수 있습니다.
https://opentutorials.org/module/4075 좋은 지식을 공유해주시는 생활코딩에 감사의 말씀을 전합니다.

도움 되는 분들

  • 데이터를 불변하게 다뤄 버그의 가능성을 낮추고 싶은 분
  • 고급 JS 기법을 구현하는 기초를 쌓고 싶은 분

선수 지식

  • JavaScript
  • NodeJS(선택)

공개 일자

2020년 2월 16일 (마지막 업데이트 일자 : 2020년 2월 18일)
4.9
22개의 수강평
default_profile.png
장병훈 4달 전
이고잉 당신은...
default_profile.png
uni4love 8일 전
코드 작성 중 발생할 수 있는 이슈를 예를 들어 그 의미를 잘 설명해주셨습니다.

교육과정

모두 펼치기 12 강의
섹션 0. JavaScript Immutability
12 강의
수업 소개
이름에 대한 불변함: const vs. var
변수 할당 방식 비교
초기 값의 비교
객체의 가변성
객체의 복사
중첩된 개체의 복사
불변의 함수 만들기
가변과 불변 API 비교
Object freeze로 객체를 불면하게 만들기
const vs. object freeze
수업을 마치며
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스