Is it possible to have constant value for a javascript object?

Question

I am beginner with javascript and I try to stick to good programing practices, like the use of constants for values that don't change.

For example, I would like to store the settings in a constant:

const settings = {};
settings.backgroundColor = '#FFF'; 
settings.textColor       = '#333'; 
settings.shadowColor     = '#DDD';

I noticed that even though "settings" is a constant, I can re-assign other values later during the execution of the program for example I can reassign values here without triggering errors:

settings.backgroundColor= '#FFF';
if ( test === 1) {
    // my block of code
}
settings.backgroundColor= '#F00';
settings.backgroundColor= '#00F';
settings.backgroundColor= '#123';

This code is valid and the console does not throw any kind of error.

Is there a solution to have real constants stored inside my object "const settings"?

I tried this but it did not work:

const settings = {};
const settings.backgroundColor = '#123';
const settings.textColor       = '#333'; 
const settings.shadowColor     = '#DDD';

It throws an error "Uncaught SyntaxError: Identifier 'settings' has already been declared"

This question is not very important since my code works properly, I just try to have good practice of development.

Thank you for the help !

Amardeep Bhowmick · Accepted Answer · 2020-12-05 13:34:59Z

This can be achieved by using passing the object to the Object#freeze method.

From MDN docs:

The Object.freeze() method freezes an object. A frozen object can no longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed. In addition, freezing an object also prevents its prototype from being changed. freeze() returns the same object that was passed in.

const settings = {};
settings.backgroundColor = '#FFF'; 
settings.textColor       = '#333'; 
settings.shadowColor     = '#DDD';

Object.freeze(settings)

settings.textColor = "#FFF";
console.log(settings)

settings.newColor = "#FFF";
console.log(settings)

delete settings.textColor
console.log(settings)

Note - The operations above throws TypeError in strict mode

The above method makes a shallow freezing of the object, but any child object property can be modified:

const obj1 = {
  internal: {}
};

Object.freeze(obj1);
obj1.internal.a = 'aValue';

console.log(obj1.internal.a)

To freeze the entire object graph you need to freeze individual object properties of the object recursively:

function deepFreeze(object) {
  // Retrieve the property names defined on object
  const propNames = Object.getOwnPropertyNames(object);
  // Freeze properties before freezing self
  propNames.forEach(name => {
    const value = object[name];

    if (value && typeof value === "object") {
      deepFreeze(value);
    }
  });
  return Object.freeze(object);
}

const obj2 = {
  internal: {
    a: null
  }
};

deepFreeze(obj2);

obj2.internal.a = 'anotherValue'; 
console.log(obj2.internal.a)

Collectives™ on Stack Overflow

Is it possible to have constant value for a javascript object?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related