Mutating a const?

It’s important to know that although we can’t reassign an object declared with const , we can still mutate it, meaning we can add new properties and change the properties that are there.
The above confuses me:
If you can mutate the value of a const how is it a const?

The idea is to prevent a complete overwrite of an object. In most cases you don’t want a completely constant, never changing object and so this is expected behaviour. However it’s important to understand what the value of a constant is. If we look at a couple of examples:

const singleNumber = 5; singleNumber = 8; console.log(singleNumber);

We can see from the above that trying to change singleNumber throws an error. We could consider this trying to change the value of the variable, but it’s really just trying to reassign the variable to a new value. As such, the const keyword prevents this.

const singleObject = {"key": "value", "keyNum": 5}; singleObject = {"newKey": "newValue", "newKeyNum": 6}; console.log(singleObject);

If we look at this, we can see the same thing happens as above. We tried to reassign the singleObject object to a completely new value and we were prevented by the const variable.

const singleObject = {"key": "value", "keyNum": 5}; singleObject.key = "newValue"; console.log(singleObject); singleObject.newKey = "anotherValue"; console.log(singleObject);

Here however we can see the changes happening as we would not necessarily expect from a const. However this is perfectly consistent. The variable is not being reassigned to a new object, a specific property of the object is having it’s value changed, and that does matter. As stated initially, it’s very rare you have an object that is completely fixed and unchanging and therefore you want to be able to change properties, however that doesn’t mean you want to overwrite the object entirely. So const comes in handy there, keeping the object from being reassigned without preventing you from altering properties. It may seem strange as technically it’s not constant however from the scripts perspective it is, as it’s the same object in the same block of memory.

If you want a truly fixed object that cannot be changed at all, you can actually use Object.freeze() to have a truly constant object that cannot be changed. However it’s unlikely this will be necessary in most JS applications, as they will usually be web based and therefore object changes can be prevented by using the UI effectively. See below for the freeze() example.

const singleObject = {"key": "value", "keyNum": 5}; singleObject.key = "newValue"; console.log(singleObject); singleObject.newKey = "anotherValue"; console.log(singleObject); Object.freeze(singleObject); singleObject.newKey = "aFurtherValue"; console.log(singleObject);
1 Like

Thanks for this exhaustive explanation.
Very informative.
Being a beginner I am not sure about the practical application of this.
But I can see the principal.
Excellent explanation.
Thank you

Just as a quick example to hopefully illustrate, lets say you have a School object:

const ridgemontHigh = {
   name: "Ridgemont High",
   type: "High School",
   numberOfStudents: 650,
   subjects: ["Mathematics", "English", "French", "Geography"]
}

Now of course, you make this a constant because the last thing you want is someone overwriting your school data! But say you expand the school, and you can now take 800 students, and you also now teach music. Well, you can make these changes even though it’s a constant.

ridgemontHigh.numberOfStudents = 800;
ridgemontHigh.subjects.push("Music");

With this, you have amended the properties of the school to accurately reflect the new expansion of the school. However if you tried to overwrite the variable with a new object, then this wouldn’t be possible as it would be disallowed by the const keyword. I’ve also included the full code in a codebyte below if you want to see it in action.

const ridgemontHigh = { name: "Ridgemont High", type: "High School", numberOfStudents: 650, subjects: ["Mathematics", "English", "French", "Geography"] } console.log(ridgemontHigh); ridgemontHigh.numberOfStudents = 800; ridgemontHigh.subjects.push("Music"); console.log(ridgemontHigh);
1 Like

Thank you for taking the time and giveng a good explanation