Đầu tiên, hãy cùng nhau tìm hiểu về khái niệm của constant. Constant đơn giản là cách chúng ta sử dụng để khai báo một biến hoặc một đối tượng mà giá trị của nó không thay đổi kể từ khi nó được khởi tạo.
Trong ngôn ngữ lập trình JavaScript, từ khóa const được sử dụng để định nghĩa một biến là constant. Tuy nhiên, điều này chỉ có hiệu lực đối với các dữ liệu kiểu nguyên thủy như chuỗi, số… Đối với các dữ liệu kiểu Object hay Array, phương pháp này không có tác dụng.
Ví dụ:
- const person = {
- name: “Dương Anh Sơn”,
- age: 30,
- website: “https://vinascript.com”
- }
- // Thử thay đổi giá trị trong object
- person.age = 33;
- // In ra xem giá trị có bị thay đổi không?
- console.log(person);
- // in ra: {age: 33, name: “Dương Anh Sơn”, website: “https://vinascript.com”}
Bạn thấy không?
Mặc dù đã sử dụng từ khóa const nhưng chúng ta vẫn thay đổi được giá trị bên trong object như bình thường, không hề có một lỗi lầm nào cả.
Chúng ta phải làm thế nào? Bởi vì có rất nhiều trường hợp chúng ta phải định nghĩa một Object bất biến, không cho phép thay đổi giá trị. Ví dụ như chúng ta định nghĩa một config – cấu hình của ứng dụng chẳng hạn…
Giải pháp cho bạn đây! Đó là sử dụng Object.freeze()
Nội dung chính của bài viết
Sử dụng Object.freeze()
Theo định nghĩa, một “đối tượng bị đóng băng” (hay frozen object) là một đối tượng không thể thay đổi, nghĩa là không thể cập nhật giá trị của các thuộc tính và không thể thêm hoặc xoá thuộc tính. Đây tương tự như khái niệm của hằng số (constant) mà chúng ta thường sử dụng.
Đặc biệt, frozen object cũng khóa luôn cả prototype trong nó, luôn trả về cùng một object được truyền vào.
Chúng ta quay trở lại ví dụ trên, và thử đóng băng đối tượng person bằng Object.freeze nhé.
- const person = {
- name: “Dương Anh Sơn”,
- age: 30,
- website: “https://vinascript.com”
- }
- // Đóng băng đối tượng lại
- Object.freeze(person);
- // Thử thay đổi giá trị trong object
- person.age = 35;
- console.log(person);
- // in ra: {age: 30, name: “Dương Anh Sơn”, website: “https://vinascript.com”}
Kết quả vẫn là giá trị cũ. Đúng ý đồ của mình rồi.
Khai báo constant có object lồng nhau
Nâng cao một chút nhé. Giờ đối tượng không đơn giản là “phẳng” như trên mà đối tượng lồng nhau thì sao?
Lúc nào sử dụng Object.freeze() không còn tác dụng nữa.
- const person = {
- name: “Dương Anh Sơn”,
- age: 30,
- website: “https://vinascript.com”,
- company: {
- companyName: “vinascript inc”,
- address: “Hà Nội”
- }
- }
- // Đóng băng đối tượng lại
- Object.freeze(person);
- // Thử thay đổi giá trị trong object
- person.age = 35;
- person.company.companyName = “SMOBILE TEAM”;
- console.log(person);
- // in ra: {age: 30, name: “Dương Anh Sơn”, website: “https://vinascript.com”, company: {companyName: “SMOBILE TEAM”, address: “Hà Nội”}}
Như bạn cũng thấy ở trên, mặc dù đã freeze nhưng chúng ta vẫn có thể thay đổi được giá trị của companyName.
Để có thể freeze được toàn bộ object kiểu lồng nhau như này, giải pháp là sử dụng deep freeze. Dưới đây là đoạn code minh họa.
- const deepFreeze = (obj) => {
- const propNames = Object.getOwnPropertyNames(obj)
- for (const name of propNames) {
- const value = obj[name];
- if (value && typeof value === “object”) {
- deepFreeze(value);
- }
- }
- return Object.freeze(obj);
- }
- const person = {
- name: “Dương Anh Sơn”,
- age: 30,
- website: “https://vinascript.com”,
- company: {
- companyName: “vinascript inc”,
- address: “Hà Nội”
- }
- }
- // Đóng băng đối tượng lại
- deepFreeze(person);
- // Thử thay đổi giá trị trong object
- person.age = 35;
- person.company.companyName = “SMOBILE TEAM”;
- console.log(person);
- // in ra: {age: 30, name: “Dương Anh Sơn”, website: “https://vinascript.com”, company: {companyName: “vinascript inc”, address: “Hà Nội”}}
Đã đóng băng toàn bộ đối tượng, ngăn không cho việc sửa đổi giá trị của các thuộc tính bên trong, kể cả trong các đối tượng lồng nhau.
Bài hướng dẫn trên đã cung cấp cách khai báo hằng nâng cao trong JavaScript bằng cách sử dụng Object.freeze, hy vọng rằng nó sẽ hữu ích cho dự án của bạn.
