В чём разница между использованием const и Object.freeze() для объектов?

Когда мы говорим о работе с объектами в JavaScript, важно понимать, как различные методы управления ими влияют на их изменяемость. Два распространённых подхода - это использование ключевого слова const и метода Object.freeze(). Хотя они оба направлены на ограничение изменений, они работают совершенно по-разному.

Объяснение const

• Определение: Ключевое слово const используется для объявления переменной, значение которой не может быть переопределено. Однако это не означает, что объект, на который указывает ссылка, не может быть изменён.
• Пример:

  const user = { name: "Alice" };
  user.name = "Bob"; // Это допустимо, объект может быть изменён
  console.log(user.name); // "Bob"
  
  // user = { name: "Charlie" }; // Это вызовет ошибку, т.к. мы пытаемся переопределить переменную
  

Объяснение Object.freeze()

• Определение: Метод Object.freeze() делает объект неизменяемым, что означает, что нельзя изменять, добавлять или удалять его свойства.
• Пример:

  const user = Object.freeze({ name: "Alice" });
  user.name = "Bob"; // Это не изменит объект
  console.log(user.name); // "Alice"
  
  // user.age = 30; // Это также не добавит новое свойство
  

Ключевые отличия

1. Изменяемость объекта:

   • const ограничивает только переопределение переменной, но сам объект может быть изменён.
   • Object.freeze() предотвращает любые изменения в объекте, включая добавление и удаление свойств.

2. Область применения:

   • const можно использовать для любых типов данных, включая примитивы и объекты.
   • Object.freeze() применим только к объектам.

3. Глубокая заморозка:

   • Object.freeze() работает только на верхнем уровне объекта. Если объект имеет вложенные объекты, они по-прежнему могут быть изменены.
   • Для полной (глубокой) заморозки объекта нужно использовать рекурсивный подход:

     function deepFreeze(obj) {
       Object.freeze(obj);
       Object.keys(obj).forEach(key => {
         if (obj[key] && typeof obj[key] === 'object') {
           deepFreeze(obj[key]);
         }
       });
     }
     
     const user = { name: "Alice", address: { city: "Wonderland" } };
     deepFreeze(user);
     user.address.city = "New City"; // Это не сработает
     

Практические советы

• Используйте const для защиты от переопределения переменных, но помните, что это не защищает от изменений внутри объектов.
• Используйте Object.freeze(), когда вам нужно гарантировать, что объект не будет изменён в дальнейшем. Это особенно полезно для конфигурационных объектов или состояний, которые должны оставаться постоянными.
• Если вам нужна полноценная защита от изменений во вложенных объектах, используйте глубокую заморозку с рекурсией.

Распространённые ошибки

• Путать const с неизменяемостью объекта. Многие разработчики считают, что использование const делает объект постоянным, что не так.
• Не использовать глубокую заморозку, когда объект содержит вложенные структуры, что может привести к неожиданным изменениям.

Знание различий между const и Object.freeze() помогает писать более безопасный и предсказуемый код, что особенно важно в больших и сложных приложениях.