강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Programming Language

Life Coding - JavaScript Immutability

This is a JavaScript-related lecture provided by Life Coding. It is a class on how to handle data immutably in JavaScript.

(4.9) 95 reviews

2,772 learners

  • Egoing Lee
JavaScript

Reviews from Early Learners

What you will learn!

  • How to handle data immutably in JavaScript

  • Differences between how primitive data types and objects behave

  • How to clone an object

  • How to modify a clone without modifying the original object

1. Lecture Introduction

Life Coding's JavaScript Immutability course covers how to handle data immutably in JavaScript. Targeted at learners familiar with basic JavaScript syntax, this course explores how to prevent data corruption by making it immutable.

This course covers the following topics:

  • Differences between how primitive data types and objects behave
  • How to clone an object
  • How to modify a clone without modifying the original object

The following is not covered:

  • immutable library

2. Lecture target

Treating data immutably significantly reduces the likelihood of bugs caused by interference between data. It also makes it much easier to check whether data has changed. It also serves as the foundation for implementing advanced techniques like hot module reloading and time travel.

If you can predict the results of all the code below, you don't need to take this class.

var n1 = 1;
var n2 = 1;
console.log(n1 === n2);
=> It is true. Of course.

var o1 = {name:'kim'}
var o2 = {name:'kim'}
console.log(o1 === o2);
=> false . It's a bit ambiguous. JavaScript treats primitive data types, which don't change, differently from objects, which can.

var o1 = {name:'kim'}
var o2 = o1;
o2.name = 'lee';
console.log(o1.name);
=> This is lee. o1 doesn't even know English and the value of the name it is pointing to has changed.

var o1 = {name:'kim'}
var o2 = Object.assign({}, o1); // Copy o1 to an empty object.
o2.name = 'lee';
console.log(o1.name);
=> This is Kim. Changing o2 does not affect o1. This allows o1 to remain invariant with respect to o2.

var o1 = {score:[1,2]}
var o2 = Object.assign({}, o1);
o2.score.push(3);
console.log(o1.score)
=> [1,2,3]. I don't know English, so o1 changed again. This is because score is an array, which is a type of object.

var o1 = {score:[1,2]}
var o2 = Object.assign({}, o1);
o2.score = o2.score.concat(); // Copy the array.
o2.score.push(3);
console.log(o1.score)
=> [1,2].

There is another way: copy everything.
var o1 = {score:[1,2]}
var o2 = JSON.parse(JSON.stringify(o1));
o2.score.push(3);
console.log(o1.score)
=> [1,2].

It's a good idea to be careful not to change the original, but it's also possible to prevent the original from changing at all.
var o1 = {name:'kim'}
Object.freeze(o1);
o1.name = 'lee';
console.log(o1.name);
=> It's 'kim'.

But objects don't do this.
var o1 = {score:[1,2]}
Object.freeze(o1);
o1.score.push(3);
console.log(o1.score);
// [1,2,3].

Defensive freezing is required.
var o1 = {score:[1,2]}
Object.freeze(o1);
Object.freeze(o1.score);
o1.score.push(3);
console.log(o1.score);
// It doesn't change. It even causes a protest error.

3. Lecture participation conditions

To take this course, you need the following prerequisite knowledge:
(You can study either one.)

4. Total playback time

This is a one-hour class consisting of 12 videos.

5. Class Copyright

This lecture is licensed under a Creative Commons license and can be viewed at the link below.
https://opentutorials.org/module/4075 I would like to thank Life Coding for sharing valuable knowledge.

Recommended for
these people

Who is this course right for?

  • For those who want to handle data immutably and reduce the possibility of bugs

  • Anyone who wants to build a foundation for implementing advanced JS techniques

Need to know before starting?

  • JavaScript

  • NodeJS (optional)

Hello
This is

306,463

Learners

8,143

Reviews

1

Answers

4.9

Rating

44

Courses

Curriculum

All

12 lectures ∙ (1hr 0min)

Published: 
Last updated: 

Reviews

All

95 reviews

4.9

95 reviews

  • bhjang45440679님의 프로필 이미지
    bhjang45440679

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    Egoing you...

    • happyvirus77778679님의 프로필 이미지
      happyvirus77778679

      Reviews 27

      Average Rating 5.0

      5

      33% enrolled

      • leeebug님의 프로필 이미지
        leeebug

        Reviews 11

        Average Rating 5.0

        5

        100% enrolled

        • sunnyji님의 프로필 이미지
          sunnyji

          Reviews 5

          Average Rating 5.0

          5

          100% enrolled

          Life Coding is the best.

          • yw89choi0146님의 프로필 이미지
            yw89choi0146

            Reviews 1

            Average Rating 5.0

            5

            100% enrolled

            It was a fun learning experience. Thank you.

            Free

            Egoing Lee's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!