Why Does The Error “Cannot Assign To Read Only Property Of Object” In JavaScript Appear On My Console?

Objects are useful because they allow us to easily access and modify their properties. However, we can’t change the properties of objects that are read-only. If we modify its property, it will throw an error “Cannot assign to read only property of object” in JavaScript. So, this article will explain why this error happens and guide you through some examples to clarify it.

What causes the “cannot assign to read only property of object” error in JavaScript?

This error occurs when you try to reassign a value to a property of a frozen object. So what is a frozen object?

The frozen object: cannot be changed in any way. It cannot add new properties or delete/change existing properties. And we can create a frozen object using the Object.freeze() function.

Here is an example of the error that happens when we modify a frozen object’s property:

'use strict'

const learnShareIT = {
  url: 'learnshareit.com',
  type: 'Programming Tutorial Website',
};

// Freeze learnShareIT object
Object.freeze(learnShareIT);

// Try to change the property of a frozen object
learnShareIT.type = 'Programming Guide'; // Error

Error:

TypeError: Cannot assign to read only property 'type' of object '#<Object>'

This error can also occurs when changing a property created by the Object.defineProperty() or Object.defineProperties(). Because by default, properties created with these two functions have the writable attribute false. It means we cannot change that property. For example:

'use strict'

const learnShareIT = {
  url: 'learnshareit.com',
  type: 'Programming Tutorial Website',
};

// Define a new property for the learnShareIT object
Object.defineProperty(learnShareIT, 'age', {
  value: 1,
});

// Try to change the property created by Object.defineProperty
learnShareIT.age = 2; // Error

Error:

TypeError: Cannot assign to read only property 'age' of object '#<Object>'

How to fix this error?

Make a copy of the frozen object

To fix the cannot assign to read-only property error, you must create a copy of the frozen object and change the property on the cloned object. And the simplest and fastest way to copy an object is to use the spread operator.

Just put three dots in front of an object like this {...obj}, and we can easily make a copy of that object. See the example below to understand better.

'use strict'

const learnShareIT = {
  url: 'learnshareit.com',
  type: 'Programming Tutorial Website',
};

// Freeze learnShareIT object
Object.freeze(learnShareIT);

// Make a copy of the frozen object
const copyOfLearnShareIT = {...learnShareIT};

// Change the property of copyOfLearnShareIT
copyOfLearnShareIT.type = 'Programming Guide';
console.log(copyOfLearnShareIT);

Output:

{ url: 'learnshareit.com', type: 'Programming Guide' }

Set the writable attribute to true

By default, the writable attribute of Object.defineProperty() is false. If we want to change the value of a property created by this method, we must change the writable attribute to true. Like this:

'use strict'

const learnShareIT = {
  url: 'learnshareit.com',
  type: 'Programming Tutorial Website',
};

// Define a new property for the learnShareIT object
Object.defineProperty(learnShareIT, 'age', {
  value: 1,
  
  // Remember to set writable to true
  writable: true,
});

// Change the property created by Object.defineProperty with writable: true
learnShareIT.age = 2;
console.log(learnShareIT.age); // Expected: 2

Output:

2

Summary

The error “Cannot assign to read only property of object” in JavaScript is caused by two main causes. One is changing the property of a frozen object, and the second is attempting to change the property of an object whose writable property is false. This article has helped you fix the above error. If you found this article helpful, share it with your friends.

Maybe you are interested:

• Access an Object Property with a Hyphen in JavaScript
• Check if an Object Property is Undefined in JavaScript
• Access the First Property of an Object in JavaScript

Cora Lopez

Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.

---

Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java