JavaScript - freeze() method

revision:


Category : object

The Object.freeze() static method freezes an object. Freezing an object prevents extensions and makes existing properties non-writable and non-configurable. A frozen object can no longer be changed: new properties cannot be added, existing properties cannot be removed, their enumerability, configurability, writability, or value cannot be changed, and the object's prototype cannot be re-assigned. freeze() returns the same object that was passed in. Freezing an object is the highest integrity level that JavaScript provides.

Syntax :

        Object.freeze(obj)
    

Parameters:

obj : required. The object to freeze.

Examples:

        const obj = {
            prop: 42
          };
        Object.freeze(obj);
        obj.prop = 33;
          // Throws an error in strict mode
        console.log(obj.prop);
          // Expected output: 42

          Object.freeze(new Uint8Array(0)); // No elements
          // Uint8Array []
          
          Object.freeze(new Uint8Array(1)); // Has elements
          // TypeError: Cannot freeze array buffer views with elements
          
          Object.freeze(new DataView(new ArrayBuffer(32))); // No elements
          // DataView {}
          
          Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)); // No elements
          // Float64Array []
          
          Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)); // Has elements
          // TypeError: Cannot freeze array buffer views with elements
          
    

Practical examples

example: freezing objects

code:
                    <div>
                        <p id="freeze-1"></p>
                        <p id="freeze-2"></p>
                        <p id="freeze-3"></p>
                        <p id="freeze-4"></p>
                    </div>
                    <script>
                        const obj = {
                            prop() {},
                            foo: "bar",
                        };
                        // Before freezing: new properties may be added, and existing properties may be changed or removed
                        obj.foo = "baz";
                        obj.lumpy = "woof";
                        delete obj.prop;
                        // Freeze.
                        const o = Object.freeze(obj);
                        // The return value is just the same object we passed in.
                        o === obj; // true
                        console.log(o);
                        document.getElementById("freeze-1").innerHTML = "freeze object : " + JSON.stringify(o);
                        // The object has become frozen.
                        Object.isFrozen(obj); // === true
                        document.getElementById("freeze-2").innerHTML = "object is frozen : " + Object.isFrozen(o);
                        // Now any changes will fail
                        obj.foo = "quux"; // silently does nothing
                        // silently doesn't add the property
                        obj.quaxxor = "the friendly duck";
                        // In strict mode such attempts will throw TypeErrors
                        function fail() {
                            "use strict";
                            obj.foo = "sparky"; // throws a TypeError
                            delete obj.foo; // throws a TypeError
                            delete obj.quaxxor; // returns true since attribute 'quaxxor' was never added
                            obj.sparky = "arf"; // throws a TypeError
                        }
                        fail();
                        // Attempted changes through Object.defineProperty; both statements below throw a TypeError.
                        Object.defineProperty(obj, "ohai", { value: 17 });
                        Object.defineProperty(obj, "foo", { value: "eit" });
                        // It's also impossible to change the prototype; both statements below will throw a TypeError.
                        Object.setPrototypeOf(obj, { x: 20 });
                        obj.__proto__ = { x: 20 };
                    </script>
                

example: freeze an object, i.e. prevent the object from being modified.

code:
                    <div>
                        <p id="freeze-3"></p>
                        <p id="freeze-4"></p>
                        <p id="freeze-5"></p>
                        <p id="freeze-6"></p>
                    </div>
                    <script>
                        let obj1 = {
                            prop: function () {},
                            foo: "bar",
                        };
                        // freeze the object
                        Object.freeze(obj1)
                        console.log(obj1.foo)
                        document.getElementById("freeze-3").innerHTML = "freeze object : " + Object.freeze(obj1);
                        document.getElementById("freeze-4").innerHTML = "freeze object : " + JSON.stringify(Object.freeze(obj1));
                        // changes will not occur
                        obj1.foo = "bar1";
                        console.log(obj1.foo);
                        // Output: bar
                        document.getElementById("freeze-5").innerHTML = "freeze object : " + Object.freeze(obj1);
                        document.getElementById("freeze-6").innerHTML = "freeze object : " + JSON.stringify(Object.freeze(obj1));
                    </script>