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) 93 reviews

2,733 students

JavaScript

This course is prepared for Basic 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

The JavaScript Immutability class of Life Coding is a lecture on how to handle data immutably in JavaScript. It is aimed at learners who know the basic grammar of JavaScript and looks at how to prevent the original from being damaged by making data 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 as immutable can drastically reduce the possibility of bugs caused by interference between data. It also makes it very easy to check whether data has changed. It also serves as a basis for implementing advanced techniques such as 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, whose values cannot change, differently from objects, whose values can change.

var o1 = {name:'kim'}
var o2 = o1;
o2.name = 'lee';
console.log(o1.name);
=> This is lee. o1 doesn't 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. Even if o2 is changed, o1 is not affected. o1 can remain in an invariant state with respect to o2.

var o1 = {score:[1,2]}
var o2 = Object.assign({}, o1);
o2.score.push(3);
console.log(o1.score)
=> It's [1,2,3]. I don't know English, and 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)
=> It is [1,2].

There is another way, which is to copy everything.
var o1 = {score:[1,2]}
var o2 = JSON.parse(JSON.stringify(o1));
o2.score.push(3);
console.log(o1.score)
=> It is [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 can't do this.
var o1 = {score:[1,2]}
Object.freeze(o1);
o1.score.push(3);
console.log(o1.score);
// It is [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 anything. It even causes a protest error.

3. Conditions for participation in the lecture

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. Copyright of the class

This lecture is licensed under a Creative Commons license and can also be viewed at the link below.
https://opentutorials.org/module/4075 I would like to thank Life Coding for sharing good 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 egoing5162

298,830

Students

7,661

Reviews

1

Answers

4.9

Rating

44

Courses

Reviews

All

93 reviews

4.9

93 reviews

  • bhjang45440679

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    Egoing you...

    • sunnyji

      Reviews 4

      Average Rating 5.0

      5

      100% enrolled

      Life Coding is the best.

      • yw89choi0146

        Reviews 1

        Average Rating 5.0

        5

        100% enrolled

        It was a fun learning experience. Thank you.

        • jorabbit82

          Reviews 1

          Average Rating 5.0

          5

          100% enrolled

          • su8206503495

            Reviews 5

            Average Rating 5.0

            5

            33% enrolled

            I think this is hope!

            egoing5162's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!

            Free