object.freeze() trong JavaScript có gì hay?

JavaScript Object.freeze()

Method Object.freeze() giúp chúng ta chuyển một object thông thường sang trạng thái không thể modified(sửa đổi).

Về cơ bản, ta sẽ không thể thêm các thuộc tính mới vào object này nữa và không thể xóa các thuộc tính hiện có.

Cùng xem các sử dụng Object.freeze():

Object.freeze(obj)

Trong đó obj là object mà bạn muốn chuyển sang trạng thái freeze(Không thể modified).

Ta sẽ xem một ví dụ dưới đây để hiểu rõ hơn về method này, đầu tiên mình sẽ tạo hai object user1 và user2:

let user1 = {
  username: "user1",
  age: 22,
};

let user2 = {
  username: "user2",
  age: 25,
};

Tiếp theo, ta sẽ thay đổi username ở user1:

user1.username = "username1";

console.log(user1); // {username: 'username1', age: 22}

Như các bạn có thể thấy, theo mặc định ta có thể sửa các giá trị của thuộc tính trong một object. Tiếp theo, ta sẽ thử freezing object user2 và xem kết quả nhé:

Object.freeze(user2); // {username: 'user2', age: 25}

Sau khi đã đưa user2 về trạng thái freeze. Ta thử thay đổi thuộc tính trong object này nhé 😅:

user2.age = 30;

console.log(user2); // {username: 'user2', age: 25}

Như các bạn thấy, sau khi sử dụng Object.freeze(user2), ta sẽ không thể thay đổi giá trị của thuộc tính hay xóa thuộc tính trong user2. Việc thêm thuộc tính mới vào object user2 lúc này cũng sẽ không hoạt động vì user2 lúc này ta không thể thay đổi.

Để kiểm tra xem một object có đang trong trạng thái freeze hay không ta có thể sử dụng Object.isFrozen():

Object.isFrozen(user1); // false
Object.isFrozen(user2); // true

Các bạn khi sử dụng method Object.isFrozen() cần lưu ý: freeze is shallow. Có nghĩa là nếu sử dụng method này cho một nested object, thì giá trị của thuộc tính trong object lồng nhau này có thể bị modified.

Ta cùng xem một ví dụ để hiểu rõ hơn, mình sẽ tạo một nested object như sau:

const employee = {
  name: "Nguyen Anh Vu",
  job: "Developer",
  address: {
    city: "Ho Chi Minh City"
  }
};

Object.freeze(employee);

Bây giờ ta sẽ thử thay đổi giá trị city trong object này:

employee.name = "devnav";
employee.address.city = "Saigon"; 

console.log(employee.address.city) 
// {name: 'Nguyen Anh Vu', job: 'Developer', address: {city: 'Saigon'}}

Như các bạn thấy vì employee là một nested object hay employee chứa các thuộc tính có value là object thì khi đó, ta có thể thay đổi giá trị city như trong ví dụ.

Để deep freeze một nested object các bạn có thể tham khảo hàm deepFreeze tại đây.

Kết luận

Như vậy là mình đã cùng các bạn tìm hiểu về method Object.freeze(), method này hữu ích trong trường hợp bạn muốn object của mình immutable(Bất biến).

Cảm ơn các bạn đã đọc bài viết 😁🐻. Chúc các bạn học tốt!

Một số bài viết liên quan:

1. Object.seal() trong JavaScript có gì hay?
2. Method Object.keys(), values, entries trong JavaScript
3. Object.is() trong Javascript là gì?
4. Check key exist in object javascript