How to create truly const object in JavaScript?

Yoha — Mon, 27 Feb 2023 01:26:03 +0000

We create an object person with name Harry and try to reassign it to an object with name Ron.

const person = {
  name: 'Harry'
}

// Uncaught TypeError: Assignment to constant variable.
person = {
  name: 'Ron'
}

We can't do it and get an error because we use const statement.

But what if we change the property directly of this object?
Although we use const, we can do it, so we don't get a truly constant object.

const person = {
  name: 'Harry'
}

person.name = 'Ron'

console.log(person) // { name: 'Ron }

But good news, I will show you how to fix it.

We just need to wrap object by 'Object.freeze' from JavaScript standard library.

const person = Object.freeze({
  name: 'Harry'
})

person.name = 'Ron'

console.log(person) // { name: 'Harry' }

Now we can't change property of this object. Also, it's good to know that in JavaScript strict mode we get an error if we try to change a frozen object.

'use strict'

const person = Object.freeze({
  name: 'Harry'
})

// Uncaught TypeError: Cannot assign to read only property
person.name = 'Ron'

Deep objects

But what if we have an object with nested structured?

const person = Object.freeze({ 
  city: { name: 'London' } 
})

person.city.name = 'New York'

console.log(person) // { city: { name: 'New York' } }

Again we have the same problem. Object.freeze works only for first level properties, not affecting to deeper levels. Good news, that it's easy to fix. We just need to create function which recursively freeze all levels object.

function deepFreeze(obj) {
  Object.freeze(obj);
  Object.getOwnPropertyNames(obj).forEach((prop) => {
    const value = obj[prop];
    if (
      typeof value === 'object' && 
      value !== null && 
      !Object.isFrozen(value)
    ) {
      deepFreeze(value);
    }
  });
  return obj;
}

const person = Object.freeze({ 
  city: { name: 'London' } 
})

// Uncaught TypeError: Cannot assign to read only property
person.city.name = 'New York'

Now you can be sure that you create truly const objects.

P.S. I attached also version for TypeScript.

type DeepReadonly<T> = {
    readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

function deepFreeze<T>(obj: T): DeepReadonly<T> {
    Object.freeze(obj);
    Object.getOwnPropertyNames(obj).forEach(prop => {
        const value = obj[prop];
        if (typeof value === 'object' && value !== null && !Object.isFrozen(value)) {
            deepFreeze(value);
        }
    });
    return obj as DeepReadonly<T>;
}

Subscribe to know more tips about JavaScript and TypeScript.

Add variable to an object smart

Yoha — Sat, 25 Feb 2023 22:18:25 +0000

Sometimes we need to add to an object a variable which can contain value or be undefined.

const city = undefined // can be string or undefined

const person = {
  name: 'Harry',
}

In JavaScript we can do it easily, just by writing the variable name inside an object. But it has one problem. Now the object has two keys despite this variable being undefined.

const person = {
  name: 'Harry',
  city,
}

console.log(person) // { name: 'Harry', city: undefined }
console.log(Object.keys(person)) // [ 'name', 'city' ]

Of course we can check it manually in an if block and add it only if it contains a value.

const person = {
  name: 'Harry',
}

if (city) {
  person.city = city
}

But I will show you a more elegant way.

We can use a mix of the spread operator and ternary operator inside an object. If the variable has data we merge the object with the needed variable, if not we merge an empty object, so the object remains clear.

const city = undefined // can be string or undefined

const person = {
  name: 'Harry',
  ...(city ? {city} : {}),
}

console.log(person) // { name: 'Harry' }
console.log(Object.keys(person)) // [ 'name' ]

Subscribe to know more tips about JavaScript.

DEV Community: Yoha

How to create truly const object in JavaScript?

Deep objects

Add variable to an object smart