Make JavaScript Objects Immutable with Object.freeze()

There's some confusion about how to make an object immutable in JavaScript. The ES6 const keyword prevents you from overwriting an object, but it does not prevent you from changing an object's properties.

const obj = { answer : 42 }; obj.answer = 43 ; ++obj.answer; obj.otherProperty = 'test' ; Object .assign(obj, { anotherProperty : 'test2' }); obj = { answer : 41 };

Freezing an Object

The Object.freeze() function "freezes" an object. JavaScript prevents you from adding, removing, or modifying the properties of a frozen object.

const obj = Object .freeze({ answer : 42 }); obj.answer = 43 ;

However, Object.freeze() is not recursive. You can still modify nested object properties.

const obj = Object .freeze({ nested : { answer : 42 } }); obj.nested.answer = 43 ;

There are numerous utilities for recursively freezing objects, including deep-freeze.

Strict Mode

Be very careful relying on Object.freeze() : Object.freeze() does not throw an error outside of strict mode. Even if you freeze() an object in a function that uses strict mode, modifying that object outside of strict mode won't throw an error.

function strict ( ) { ; return Object .freeze({ answer : 42 }); } function run ( ) { const obj = strict(); ++obj.answer; obj.answer; } run();

More Fundamentals Tutorials