Hướng dẫn mutable and immutable javascript - javascript có thể thay đổi và không thể thay đổi

Bắt kịp với xu hướng mới, trong Video này chúng ta cùng tìm hiểu về 2 khái niệm Mutable Object và Immutable Object khác nhau như thế nào? Và tại sao chúng ta nên sử dụng chúng? Nhất là xu thế hiện tại rất chuộng bộ đôi "sát thủ" React + Redux. Hãy cùng tôi tìm hiểu nó các bạn nhé!

(Visited 1,595 times, 1 visits today)

Các bài viết liên quan

  • Hướng dẫn mutable and immutable javascript - javascript có thể thay đổi và không thể thay đổi
    Redux Video Series
  • Hướng dẫn mutable and immutable javascript - javascript có thể thay đổi và không thể thay đổi
    Tìm hiểu Reducer là gì trong Javascript
  • Hướng dẫn mutable and immutable javascript - javascript có thể thay đổi và không thể thay đổi
    Bài 2: Phạm vi hoạt động của biến trong Javascript
  • Hướng dẫn mutable and immutable javascript - javascript có thể thay đổi và không thể thay đổi
    Tìm hiểu Component trong ReactJS

Trong JS có ít nhất hơn 10 loại dữ liệu bao gồm kiểu cơ bản và mở rộng. Nhưng chung quy lại thì chỉ có 2 đặc tính là có thể thay đổi được (mutable) và không thể thay đổi được (immutable)mutable) và không thể thay đổi được (immutable)

Đoạn mã sau trình bày khái niệm immutable và mutableimmutable mutable

let A = [1, 2, 3];
let B = A;
// đây là lệnh thay đổi giá trị của array
A[0] = 5; // A = B = [5, 2, 3]
// nhưng đây là lệnh thay đổi giá trị của biến
A = []; // A = [], B = [5, 2, 3]
let str = 'Hello World';
// lệnh gán sau không làm thay đổi giá trị của str
str[1] = 'a'; // str = 'Hello World'
// tương tự vậy, kết quả không phải là 200 như mong đợi
let num = 100;
num[0] = 2; // num = 100

Đa phần các primitive type

undefined = 100; // gán giá trị cho undefined vẫn hợp lệ
// nhưng nó vẫn không thay đổi
typeof undefined; // undefined
undefined === 100; // false
// gán giá trị cho null, string hoặc boolean là ăn hành ngay
null = 100; // Uncaught ReferenceError: Invalid left-hand side in assignment
0:
undefined = 100; // gán giá trị cho undefined vẫn hợp lệ
// nhưng nó vẫn không thay đổi
typeof undefined; // undefined
undefined === 100; // false
// gán giá trị cho null, string hoặc boolean là ăn hành ngay
null = 100; // Uncaught ReferenceError: Invalid left-hand side in assignment
1,
undefined = 100; // gán giá trị cho undefined vẫn hợp lệ
// nhưng nó vẫn không thay đổi
typeof undefined; // undefined
undefined === 100; // false
// gán giá trị cho null, string hoặc boolean là ăn hành ngay
null = 100; // Uncaught ReferenceError: Invalid left-hand side in assignment
2,
undefined = 100; // gán giá trị cho undefined vẫn hợp lệ
// nhưng nó vẫn không thay đổi
typeof undefined; // undefined
undefined === 100; // false
// gán giá trị cho null, string hoặc boolean là ăn hành ngay
null = 100; // Uncaught ReferenceError: Invalid left-hand side in assignment
3,
undefined = 100; // gán giá trị cho undefined vẫn hợp lệ
// nhưng nó vẫn không thay đổi
typeof undefined; // undefined
undefined === 100; // false
// gán giá trị cho null, string hoặc boolean là ăn hành ngay
null = 100; // Uncaught ReferenceError: Invalid left-hand side in assignment
4,
undefined = 100; // gán giá trị cho undefined vẫn hợp lệ
// nhưng nó vẫn không thay đổi
typeof undefined; // undefined
undefined === 100; // false
// gán giá trị cho null, string hoặc boolean là ăn hành ngay
null = 100; // Uncaught ReferenceError: Invalid left-hand side in assignment
5. Có một vài ngoại lệ như

undefined = 100; // gán giá trị cho undefined vẫn hợp lệ
// nhưng nó vẫn không thay đổi
typeof undefined; // undefined
undefined === 100; // false
// gán giá trị cho null, string hoặc boolean là ăn hành ngay
null = 100; // Uncaught ReferenceError: Invalid left-hand side in assignment

Và đặc biệt hơn

let str = '100';
let num = Number(str); // num = 100
// nhưng
let otherNum = new Number(str);
typeof otherNumber; // object
typeof num; // number
otherNumber == 100; // true
otherNumber === 100; // false
otherNumber == num; // true
otherNumber === num; // false
// cố gắng tạo một vài thuộc tính
num.isOdd = true;
num.isOdd; // undefined
otherNumber.isOdd = true;
otherNumber.isOdd; // true

Vậy khi sử dụng

undefined = 100; // gán giá trị cho undefined vẫn hợp lệ
// nhưng nó vẫn không thay đổi
typeof undefined; // undefined
undefined === 100; // false
// gán giá trị cho null, string hoặc boolean là ăn hành ngay
null = 100; // Uncaught ReferenceError: Invalid left-hand side in assignment
6 với những function
undefined = 100; // gán giá trị cho undefined vẫn hợp lệ
// nhưng nó vẫn không thay đổi
typeof undefined; // undefined
undefined === 100; // false
// gán giá trị cho null, string hoặc boolean là ăn hành ngay
null = 100; // Uncaught ReferenceError: Invalid left-hand side in assignment
7,
undefined = 100; // gán giá trị cho undefined vẫn hợp lệ
// nhưng nó vẫn không thay đổi
typeof undefined; // undefined
undefined === 100; // false
// gán giá trị cho null, string hoặc boolean là ăn hành ngay
null = 100; // Uncaught ReferenceError: Invalid left-hand side in assignment
8,
undefined = 100; // gán giá trị cho undefined vẫn hợp lệ
// nhưng nó vẫn không thay đổi
typeof undefined; // undefined
undefined === 100; // false
// gán giá trị cho null, string hoặc boolean là ăn hành ngay
null = 100; // Uncaught ReferenceError: Invalid left-hand side in assignment
9 chúng ta luôn nhận về object và nó có thể thay đổi được.

Hầu hết các kiểu dữ liệu object đề u có thể thay đổi được nhưng, thiệt tình là trong JS luôn có chữ nhưng cho đời rắc rối

let nullValue = null;
typeof nullValue; // object
nullValue.prop = 100; // ăn hành ngay

undefined = 100; // gán giá trị cho undefined vẫn hợp lệ
// nhưng nó vẫn không thay đổi
typeof undefined; // undefined
undefined === 100; // false
// gán giá trị cho null, string hoặc boolean là ăn hành ngay
null = 100; // Uncaught ReferenceError: Invalid left-hand side in assignment
2 là một thằng khá đặc biệt, nó có type là
let str = '100';
let num = Number(str); // num = 100
// nhưng
let otherNum = new Number(str);
typeof otherNumber; // object
typeof num; // number
otherNumber == 100; // true
otherNumber === 100; // false
otherNumber == num; // true
otherNumber === num; // false
// cố gắng tạo một vài thuộc tính
num.isOdd = true;
num.isOdd; // undefined
otherNumber.isOdd = true;
otherNumber.isOdd; // true
1 nhưng lại không thể làm gì với nó được cả và chú ý là
undefined = 100; // gán giá trị cho undefined vẫn hợp lệ
// nhưng nó vẫn không thay đổi
typeof undefined; // undefined
undefined === 100; // false
// gán giá trị cho null, string hoặc boolean là ăn hành ngay
null = 100; // Uncaught ReferenceError: Invalid left-hand side in assignment
2 không phải là undefined nhưng (lại nhưng)

null == null; // true
null === null; // true
null == undefined; // true, không phải nhưng sao lại bằng
null === undefined; // false

let str = '100';
let num = Number(str); // num = 100
// nhưng
let otherNum = new Number(str);
typeof otherNumber; // object
typeof num; // number
otherNumber == 100; // true
otherNumber === 100; // false
otherNumber == num; // true
otherNumber === num; // false
// cố gắng tạo một vài thuộc tính
num.isOdd = true;
num.isOdd; // undefined
otherNumber.isOdd = true;
otherNumber.isOdd; // true
3 không phải là một kiểu dữ liệu, nhưng nó có những đặc tính quái dị nhất

NaN == NaN; // false, oạch, sao lại không bằng nhau
NaN === NaN; // false
typeof NaN; // number
typeof NaN == typeof NaN; // true
let myNaN = NaN;
myNaN == myNaN; // false, gắt thế, so sánh chính mình cũng không được
myNaN === myNaN; // false

Kiểu dữ liệu

let str = '100';
let num = Number(str); // num = 100
// nhưng
let otherNum = new Number(str);
typeof otherNumber; // object
typeof num; // number
otherNumber == 100; // true
otherNumber === 100; // false
otherNumber == num; // true
otherNumber === num; // false
// cố gắng tạo một vài thuộc tính
num.isOdd = true;
num.isOdd; // undefined
otherNumber.isOdd = true;
otherNumber.isOdd; // true
4 mới được giới thiệu trong ES6 cũng thú vị không kémES6 cũng thú vị không kém

let mySymbol = Symbol('Test');
Symbol('Test') == Symbol('Test'); // false
Symbol('Test') === Symbol('Test'); // false
mySymbol == Symbol('Test'); // false
mySymbol === Symbol('Test'); // false
mySymbol == mySymbol; // true
mySymbol === mySymbol; // true

Không giống như

let str = '100';
let num = Number(str); // num = 100
// nhưng
let otherNum = new Number(str);
typeof otherNumber; // object
typeof num; // number
otherNumber == 100; // true
otherNumber === 100; // false
otherNumber == num; // true
otherNumber === num; // false
// cố gắng tạo một vài thuộc tính
num.isOdd = true;
num.isOdd; // undefined
otherNumber.isOdd = true;
otherNumber.isOdd; // true
3,
let str = '100';
let num = Number(str); // num = 100
// nhưng
let otherNum = new Number(str);
typeof otherNumber; // object
typeof num; // number
otherNumber == 100; // true
otherNumber === 100; // false
otherNumber == num; // true
otherNumber === num; // false
// cố gắng tạo một vài thuộc tính
num.isOdd = true;
num.isOdd; // undefined
otherNumber.isOdd = true;
otherNumber.isOdd; // true
4 vẫn dễ chịu ở một số điểm nhất định

let str = '100';
let num = Number(str); // num = 100
// nhưng
let otherNum = new Number(str);
typeof otherNumber; // object
typeof num; // number
otherNumber == 100; // true
otherNumber === 100; // false
otherNumber == num; // true
otherNumber === num; // false
// cố gắng tạo một vài thuộc tính
num.isOdd = true;
num.isOdd; // undefined
otherNumber.isOdd = true;
otherNumber.isOdd; // true
7 và
let str = '100';
let num = Number(str); // num = 100
// nhưng
let otherNum = new Number(str);
typeof otherNumber; // object
typeof num; // number
otherNumber == 100; // true
otherNumber === 100; // false
otherNumber == num; // true
otherNumber === num; // false
// cố gắng tạo một vài thuộc tính
num.isOdd = true;
num.isOdd; // undefined
otherNumber.isOdd = true;
otherNumber.isOdd; // true
8 là
let str = '100';
let num = Number(str); // num = 100
// nhưng
let otherNum = new Number(str);
typeof otherNumber; // object
typeof num; // number
otherNumber == 100; // true
otherNumber === 100; // false
otherNumber == num; // true
otherNumber === num; // false
// cố gắng tạo một vài thuộc tính
num.isOdd = true;
num.isOdd; // undefined
otherNumber.isOdd = true;
otherNumber.isOdd; // true
9, nên dùng rất dễ dàng

let array = [1, 2, 3];
array[0] = 4; // array = [4, 2, 3]
let date = new Date(2018, 1, 1); // 2018-01-01
date.setFullYear(2019); // 2019-01-01

Vậy nếu muốn sử dụng

let str = '100';
let num = Number(str); // num = 100
// nhưng
let otherNum = new Number(str);
typeof otherNumber; // object
typeof num; // number
otherNumber == 100; // true
otherNumber === 100; // false
otherNumber == num; // true
otherNumber === num; // false
// cố gắng tạo một vài thuộc tính
num.isOdd = true;
num.isOdd; // undefined
otherNumber.isOdd = true;
otherNumber.isOdd; // true
7 và
let str = '100';
let num = Number(str); // num = 100
// nhưng
let otherNum = new Number(str);
typeof otherNumber; // object
typeof num; // number
otherNumber == 100; // true
otherNumber === 100; // false
otherNumber == num; // true
otherNumber === num; // false
// cố gắng tạo một vài thuộc tính
num.isOdd = true;
num.isOdd; // undefined
otherNumber.isOdd = true;
otherNumber.isOdd; // true
8 như immutable object thì sao ? Đơn giản chúng ta cần sao chép chúng trước khi thay đổiimmutable object thì sao ? Đơn giản chúng ta cần sao chép chúng trước khi thay đổi

let A = [1, 2, 3];
let B = A.concat(4); // A = [1, 2, 3], B = [1, 2, 3, 4]
let C = A.slice(1).concat(5); // A = [1, 2, 3], C = [2, 3, 5]
let A = new Date(2018, 1, 1);
let B = new Date(new Date(A).setFullYear(2019)); // A = 2018-01-01, B = 2019-01-01

Kết

Hiểu rõ được immutable và mutable giúp chúng ta sử dụng linh hoạt các kiểu dữ liệu trong JS cũng như phòng tránh được những lỗi không mong muốn khi

Nguồn: JS Land

Ủng hộ Chung Nguyễn Blog

Chung Nguyễn Blog sử dụng FlashVPS - Dịch vụ quản trị máy chủ chuyên nghiệp để quản lý VPS

#FlashVPS là dịch vụ cloud panel trên nền tảng web hỗ trợ khách hàng:

  • * Quản lý máy chủ số lượng nhiều
  • * Không có kinh nghiệm quản lý máy chủ
  • * Thích sử dụng giao diện web đơn giản, trực quan hơn terminal
  • * Quá nhàm chán với việc ghi nhớ và lặp lại việc gõ các câu lệnh
  • * Muốn tự động hóa mọi thao tác
  • * Muốn tiết kiệm thời gian quản trị máy chủ
  • * Muốn tiết kiệm tiền bạc, nhân lực quản trị máy chủ
  • 👉 https://flashvps.dev

Các bài viết trên website thường xuyên được đăng tải và cập nhật trên trang Facebook Chung Nguyễn Blog hãy tặng cho Chung một LIKE nhé! Mãi yêu các bạn!LIKE nhé! Mãi yêu các bạn!

813 👍

Đánh giá bài viết

Hướng dẫn mutable and immutable javascript - javascript có thể thay đổi và không thể thay đổi

Immutable và Mutable trong Javascript

5/5 1 votes/5 1 votes