생활코딩 - React
Egoing Lee
리액트의 컴포넌트를 만드는 법과 리액트와 불변의 관계를 알아봅니다.
初級
React
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.
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.)
- JavaScript ( WEB2 JavaScript class )
- NodeJS ( WEB2 Nodejs class )
4. Total playback time
This is a one-hour class consisting of 12 videos.
5. Class Copyright
.jpg?w=960)
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)
Curriculum
All
12 lectures ∙ (1hr 0min)
6. Copy of an object
04:14
Published:
Last updated:
Reviews
All
97 reviews
Free
Egoing Lee's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
![제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]講義サムネイル](https://cdn.inflearn.com/public/files/courses/336176/cover/01jqhh8293f4c24r6zpzcvskcr?f=avif&w=420)
![[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스講義サムネイル](https://cdn.inflearn.com/public/courses/329996/cover/2be99a0c-5d5a-4e15-b85b-53c09879058a/thumbnail-backnew.png?f=avif&w=420)
![[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core講義サムネイル](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?f=avif&w=420)
