Javascript – Khai báo Object Constant bằng cách sử dụng Object.freeze()

Trước hết, chúng ta đều hiểu constant là cách chúng ta khai báo một biến, một đối tượng không thể thay đổi giá trị từ khi nó được khởi tạo.

Với Javascript, chúng ta có từ khóa const để khai báo một biến là constant. Tuy nhiên, “phép” này chỉ có tác dụng với các dữ liệu kiểu nguyên thủy như string, number… Còn với dữ liệu kiểu Object, Array thì không có tác dụng.

Ví dụ:

const person = {
  name: "Dương Anh Sơn",
  age: 30,
  website: "https://vntalking.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://vntalking.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()

Sử dụng Object.freeze()

Theo như định nghĩa frozen object (dịch nôm na là một đối tượng bị đóng băng – gần tương tự với khái niệm constant mà chúng ta hay dùng) là một đối tượng không thể thay đổi như cập nhật giá trị cho các thuộc tính, không được thêm hay bớt thuộc tính.

Đặ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://vntalking.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://vntalking.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://vntalking.com",
  company: {
    companyName: "VNTALKING 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://vntalking.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://vntalking.com",
  company: {
    companyName: "VNTALKING 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://vntalking.com", company: {companyName: "VNTALKING inc", address: "Hà Nội"}}

Đã khóa được toàn bộ object, không cho phép thay đổi giá trị của các thuộc tính bên trong nữa, kể cả trong các object lồng nhau.

Trên đây là hướng dẫn các bạn cách khai báo constant nâng cao trong javascript sử dụng Object.freeze, hi vọng rằng sẽ có ích cho dự án của bạn.

💥 Đọc thêm thủ thuật hay khác về Javascript:

• Cách sử dụng Javascript Classes
• [JavaScript] Kinh nghiệm truy xuất giá trị trong object lồng nhau
• Làm việc với Date/Time trong Javascript – Tưởng dễ mà khó không tưởng