Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Learn ECMAScript

You're reading from   Learn ECMAScript Discover the latest ECMAScript features in order to write cleaner code and learn the fundamentals of JavaScript

Arrow left icon
Product type Paperback
Published in Feb 2018
Publisher
ISBN-13 9781788620062
Length 298 pages
Edition 2nd Edition
Languages
Arrow right icon
Authors (2):
Arrow left icon
Narayan Prusty Narayan Prusty
Author Profile Icon Narayan Prusty
Narayan Prusty
MEHUL MOHAN MEHUL MOHAN
Author Profile Icon MEHUL MOHAN
MEHUL MOHAN
Arrow right icon
View More author details
Toc

Table of Contents (14) Chapters Close

Preface 1. Getting Started with ECMAScript FREE CHAPTER 2. Knowing Your Library 3. Using Iterators 4. Asynchronous Programming 5. Modular Programming 6. Implementing the Reflect API 7. Proxies 8. Classes 9. JavaScript on the Web 10. Storage APIs in JavaScript 11. Web and Service Workers 12. Shared Memory and Atomics 13. Other Books You May Enjoy

Immutability in JavaScript

Immutability, defined in a single line, means that once that value is assigned, then it can never be changed

var string1 = "I am an immutable";
var string2 = string1.slice(4, 8);

string1.slice does not change the value of string1. In fact, no string methods change the string they operate on, they all return new strings. The reason is that strings are immutable—they cannot change.

Strings are not the only immutable entity in JavaScript. Numbers, too, are immutable.

Object.freeze versus const

Earlier, we saw that even if you create objects with const in front of them, a programmer is still able to modify its properties. This is because const creates an immutable binding, that is, you cannot assign a new value to the binding.

Therefore, in order to truly make objects constants (that is, unmodifiable properties), we have to use something called Object.freeze. However, Object.freeze is, again, a shallow method, that is, you need to recursively apply it on nested objects to protect them. Let's clear this up with a simple example.

Consider this example:

var ob1 = {
prop1 : 1,
prop2 : {
prop2_1 : 2
}
};
Object.freeze( ob1 );

const ob2 = {
prop1 : 1,
prop2 : {
prop2_1 : 2
}
}

ob1.prop1 = 4; // (frozen) ob1.prop1 is not modified
ob2.prop1 = 4; // (const) ob2.foo gets modified

ob1.prop2.prop2_1 = 4; // (frozen) modified, because ob1.prop2.prop2_1 is nested
ob2.bar.value = 4; // (const) modified

ob1.prop2 = 4; // (frozen) not modified, bar is a key of obj1
ob2.prop2 = 4; // (const) modified

ob1 = {}; // (frozen) ob1 redeclared (ob1's declaration is not frozen)
ob2 = {}; // (const) ob2 not redeclared (used const)

We froze ob1 so all of its first-level hierarchical properties got frozen (that is, cannot be modified). A frozen object will not throw an error when attempted to be modified, but rather it'll simply ignore the modification done.

However, as we go deeper, you'll observe that ob1.bar.value got modified because it's 2 levels down and is not frozen. So, you'll need to recursively freeze nested objects in order to make them constant.

Finally, if we look at the last two lines, you'll realize when to use Object.freeze and when to use const. The const declaration is not declared again, whereas ob1 is redeclared because it's not constant (it's var). Object.freeze does not freeze the original variable binding and hence is not a replacement for const. Similarly, const does not freeze properties and is not a replacement for Object.freeze.

Also, once an object is frozen, you can no longer add properties to it. However, you can add properties to nested objects (if present).
You have been reading a chapter from
Learn ECMAScript - Second Edition
Published in: Feb 2018
Publisher:
ISBN-13: 9781788620062
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image