Object Mutability in Javascript

Object Mutability

Mutability is the ability to change a value. A mutable value can be changed, and an immutable value cannot be changed. A common misconception is that the "const" keyword makes a variable immutable.

const

In actuality, "const" only prevents reassignment. For non-object types, values can only be changed via reassignment, so declaring them with "const" actually makes them immutable. Consider, for example, the following code:

const num = 5;
num = 7; // illegal reassignment of const variable

There is no way to change the value of num in this code. Note that using ++ or -- are still considered to be reassignments, and that is indicated in the error message if we try to use them on a variable declared with const.

const num = 5;
num++;//illegal reassignment of constant

The resulting error is:

Uncaught TypeError: Assignment to constant variable.

const objects can be mutable

Objects are fundamentally different in regard to mutability in that their values can change without reassignment of the variable. Note that reassignment of properties is not prevented by "const". Only the variable name is prevented from reassignment.

const obj = {num: 5};
obj.num = 7; //legal
obj = {num: 7}; //illegal reassignment 

Objects can also have methods that change the internal values.

const obj = {
    num: 5,
    increment(){
        this.num++;
    }
}
obj.increment();
console.log(obj.num); //6

Making an object immutable

It is possible to make an object actually immutable by declaring it with "const" and using Object.freeze().

const obj = {num: 5};
Object.freeze(obj);
obj.num = 7; // doesn't change
console.log(obj.num);// still 5

Note that if we use strict mode, the attempt to change the num value would actually cause a crash with the following error message:

Cannot assign to read only property 'num'

The use of Object.freeze() without "const" is already sufficient to make this object immutable. However, it doesn't make the variable name immutable.

let obj = {num: 5};
Object.freeze(obj);
obj = {num: 5}; // new object with old name
obj.num = 7; // changes successfully
console.log(obj.num);// 7

What happens in this version of the code is that obj gets reassigned. The freeze() was applied to the previous object that shared the same name, but the new object was never frozen, so it is mutable.

Sealing objects

There are times when you might want to allow values in an object to change, but you don't want to allow adding or removing properties. This can be achieved by using Object.seal().

let obj = {num: 5};
Object.seal(obj);
obj.num = 7; // changes
console.log(obj.num);// 7
obj.newValue = 42; //cannot add new property to sealed object
console.log(obj.newValue);//undefined
delete obj.num; //cannot delete property from sealed object
console.log(obj.num);// still exists and is 7

Granular control

Freezing and sealing apply to the whole object. If you want to make specific properties immutable, that can be done using defineProperty() or defineProperties(). The choice between these two depends on if you want to affect a single property or multiple properties.

const obj = {};
Object.defineProperty(obj, 'num',{
    value: 5,
    writable: false,
    configurable: false
});
obj.num = 7; // Cannot change value because writable is false
delete obj.num; // Cannot delete because configurable is false
console.log(obj.num);//Still exists and is 5

A new property is being defined in this example, but defineProperty() can also be used on an existing property. Note that if "configurable" was previously set to false, it cannot be changed to true, but if it was originally true, it can be set to false, since this change counts as a type of configuring.

Conclusion

In most cases, you won't need to guarantee that an object is immutable. When such a need arises, it's generally sufficient to freeze the object, but we have additional options for finer controls if such needs arise.

The above is the detailed content of Object Mutability in Javascript. For more information, please follow other related articles on the PHP Chinese website!