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

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 và 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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Immutable và Mutable trong Javascript

5/5 1 votes/5 1 votes