And as devs build JavaScript applications for different companies and organizations, the size and complexity of these applications can pose interesting performance challenges.

As developers, we seek to create applications that not only have high performance but also have an enhanced user experience. To do this, we must fully understand how immutability works in Javascript, as this is one factor that contributes a lot to achieving the enhanced performance we seek.

Table of Contents:

1. What is immutability in JavaScript?
2. Benefits of Immutability in Applications
3. Techniques for Achieving Immutability
4. How to Use ES6 Features for Immutability – Spread Syntax and Object.freeze()
5. Performance Optimization through Immutability
6. Real-World Examples of Companies and Projects Benefiting from Immutability
7. Common Pitfalls of Immutable JavaScript
8. Best Practices for Overcoming Immutability-Related Issues
9. Conclusion

What is Immutability in JavaScript?

According to the Oxford English Learners Dictionary, immutability means "something that cannot be changed; that will never change," whereas on the other hand, we have mutability, which is the direct opposite of immutability and means something that can change.

If you want to grasp the full meaning of immutability, we have to differentiate it from mutability. Mutability, in JavaScript, refers to the ability to modify the value of a variable or a data type. Immutability, on the other hand, means that once a value is created, it cannot be changed. JavaScript differentiates data types by their default characters.

Primitive data types such as strings, numbers, booleans, and symbols are immutable, while reference data types such as objects, arrays, and functions are mutable.

To explain further, let's take a look at this simple example:

let person1 = 10;
person2 = person1
person2 = 8;

console.log(person2) // 8
console.log(person1) // 10

On examining this example, it would seem as if person1 was modified. But the variable person1 was reassigned to take the value of person2. But when we check the value of person1 in the console, we will notice that the value of person1 remains unchanged.

This means that the person2 variable is just a clone of the person1 variable that has been reassigned, and the actual value of the person1 variable was not modified.

On the other hand, if we were to try to do the same with a reference data type, here's what would happen:

let student1 = {
    name: "Kevin",
    age: 20,
};

student2 = student1;

student2.name = "Paul";

console.log(student1) // {name: 'Paul', age: 20}
console.log(student2) // {name: 'Paul', age: 20}

Mutable data example

On close inspection, you'll notice that as we set student2 to be equal to student1 and reassign the value of student2.name, it also changes the value of student1.name. This means that the value of student1 was not just reassigned but modified. This proves that reference data types are mutable.

Benefits of Immutability in Applications

You may already be wondering: Isn't it a good thing for your variable to be mutable rather than rigid? Though mutability comes with some perks, so does immutability. In this section, we will see the benefits of immutability in applications.

First of all, immutable data structures are more stable and predictable. They're immune to unexpected alterations, rendering the code more deterministic and less prone to unforeseen bugs or side effects, which is very useful in large-scale applications.

You also have fewer bugs and data races. Immutability eliminates the possibility of accidentally modifying data in place, which can lead to data races and concurrency issues. By preventing direct modifications, immutability promotes thread safety and ensures that data remains consistent across multiple threads or processes.

Memory management and optimization also improve with immutability. It improves memory utilization by enabling safe data structure sharing, eliminating concerns about unintended modifications.

While the idea of creating copies might seem counterintuitive in pursuit of immutability, it is balanced by the benefits of structural sharing, efficient garbage collection, and the design of data structures.

These elements work to ensure that, despite the initial creation of copies for immutability, the long-term memory optimization prevails. The utilization of structural sharing minimizes the need for complete data duplication, while efficient garbage collection promptly removes unused data structures, contributing to optimal memory usage over time.

This approach not only reduces memory overhead but also optimizes resource utilization, playing a crucial role in scaling applications efficiently.

And finally, immutability produces more effective testing and debugging. Immutable data simplifies testing and debugging by providing a stable and predictable environment. Since objects cannot be modified, tests can focus on specific behaviors without worrying about external changes. This makes it easier to isolate and fix bugs.

Techniques for Achieving Immutability

You can achieve immutability in JavaScript in a lot of ways, from using a persistent data structure to using ES6 features such as Object.freeze(). This section seeks to explain these techniques for achieving immutability and how you can use them.

Introduction to Persistent Data Structures

Persistence in data structures refers to the ability to retain the previous version while accommodating changes. In traditional mutable data structures, alterations directly modify the existing data. But in persistent data structures, any modification creates a new version of the structure, leaving the original intact.

This characteristic is what makes persistent data structures inherently immutable. This promotes code reliability, efficient memory utilization, and allows for concurrent operations.

JavaScript itself, as a language, does not inherently offer persistent data structures in its standard library. But libraries and frameworks in JavaScript, like Immutable.js, offer implementations of persistent data structures.

Immutable.js provides various persistent data structures, including:

• Persistent List
• Persistent Maps & Sets
• Persistent Trees

Persistent Lists

Persistent lists, like immutable linked lists, allow for efficient modifications by creating new versions while reusing the majority of the existing structure.
Let's consider this example:

class ShoppingList {
  constructor(item, next = null) {
    this.item = item;
    this.next = next;
  }

  addItem(newItem) {
    // Create a copy of the list
    const copiedList = this.copyList();
    // Add the new item to the copied list
    return copiedList.addItemToCopy(newItem);
  }

  addItemToCopy(newItem) {
    return new ShoppingList(newItem, this);
  }

  removeItem(itemToRemove) {
    // Create a copy of the list
    const copiedList = this.copyList();
    let current = copiedList;
    let previous = null;

    while (current !== null) {
      if (current.item === itemToRemove) {
        if (previous === null) {
          return current.next;
        } else {
          previous.next = current.next;
          return copiedList;
        }
      }
      previous = current;
      current = current.next;
    }
    return copiedList;
  }

  copyList() {
    // Create a copy of the list
    let current = this;
    let newList = null;
    let newListTail = null;

    while (current !== null) {
      if (newList === null) {
        newList = new ShoppingList(current.item);
        newListTail = newList;
      } else {
        newListTail.next = new ShoppingList(current.item);
        newListTail = newListTail.next;
      }
      current = current.next;
    }
    return newList;
  }
}

// Creating a persistent shopping list
const originalList = new ShoppingList("Milk").addItem("Eggs").addItem("Bread");
const updatedList = originalList.addItem("Butter").addItem("Cheese");

// Removing an item from the list
const removedItem = updatedList.removeItem("Eggs");

// Logging the original, updated, and list after removing an item
console.log("Original List:");
console.log(originalList);

console.log("\nUpdated List:");
console.log(updatedList);

console.log("\nList after removing an item:");
console.log(removedItem);

In our code above, we define a class called ShoppingList which we use as a representation of a persistent shopping list. This persistent shopping list is one that can be modified and added to over time.

We have a constructor constructor(item, next = null) which initializes a new list node with the specified item and an optional reference to the next node.

The addItem(newItem) method creates a copy of the current list, adds the new item to the copy, and returns the modified copy. This ensures that the original list remains unchanged. The private addItemToCopy(newItem) method appends the new item to the end of the copied list. It creates a new list node with the new item and links it to the end of the copied list.

Then we have the removeItem(itemToRemove) method which is used to create a copy of the current list. It then searches for the specified item to remove, and returns the modified copy. It handles the case of removing an item from the beginning or middle of the list.

The copyList() method recursively traverses the current list, creating new list nodes in the copied list and linking them together. It ensures that the copied list accurately represents the original list.

This example demonstrates using the ShoppingList class to create a persistent shopping list. It starts with an initial list of "Milk", "Eggs", and "Bread", adds "Butter" and "Cheese", and then removes "Eggs".

Here is the result of our code:

Persistent list Example

As you can see, despite updating the list, the original list still retains its original data and can be accessed.

Persistent Maps and Sets

Persistent maps and sets retain their previous versions when modified, offering efficient key-value pair storage or unique value collections with immutability.
Let's consider this example:

class TreasureChest {
  constructor(contents = {}) {
    this.contents = { ...contents };
  }

  addTreasure(key, value) {
    const newContents = { ...this.contents, [key]: value };
    return new TreasureChest(newContents);
  }
}

// Creating a persistent treasure chest (map-like)
const originalChest = new TreasureChest({ gold: 100, gems: 5 });
const updatedChest = originalChest.addTreasure("diamonds", 10);

// Logging the original and updated chests
console.log("Original Chest:");
console.log(originalChest);

console.log("\nUpdated Chest:");
console.log(updatedChest);

Above, we have a real-world code example. I like to call her Treasure Chest. In the code, we define a class called TreasureChest to represent a treasure chest that holds various items. The constructor method initializes the treasure chest with an optional contents object, which represents the initial items in the chest. If no contents object is provided, an empty object is used.

The addTreasure method adds a new item to the treasure chest. It takes two arguments: the name of the item (key) and the quantity (value). It creates a new contents object by merging the current contents with a new entry for the specified item, ensuring that the new item is added without modifying the original contents. It then creates a new TreasureChest object using the updated contents and returns it.

From the code, you can see we created two instances for the TreasureChest class. First the originalChest and then the updatedChest. originalChest is initialized with { gold: 100, gems: 5 }, representing a chest with 100 gold coins and 5 gems. updatedChest is created using originalChest.addTreasure('diamonds', 10), adding 10 diamonds to the chest.

Persistent Maps and Sets Example

From our console, we can confirm that this immutability technique works as our original Chest value is retrieved.

Persistent Trees

Persistent trees, such as binary trees or trie structures, are yet another technique for achieving immutability. They maintain previous versions during operations like insertion, deletion, or search. They create new tree instances upon modifications while reusing unchanged parts from the original tree.

This preservation of versions enables efficient manipulation and retrieval of data without mutating the original tree. Aside from immutability, a persistent tree also has some key characteristics, such as shared structure and efficient modifications.

These two features let us share unchanged parts between versions of our tree and enable efficient operations (such as insertion, deletion, or traversal) by reusing existing nodes and creating new branches only when necessary, respectively.
Here is an example:

class TreeNode {
  constructor(value, left = null, right = null) {
    this.value = value;
    this.left = left;
    this.right = right;
  }

  insert(newValue) {
    if (newValue < this.value) {
      // Insert to the left
      return new TreeNode(
        this.value,
        this.left ? this.left.insert(newValue) : new TreeNode(newValue),
        this.right
      );
    } else {
      // Insert to the right
      return new TreeNode(
        this.value,
        this.left,
        this.right ? this.right.insert(newValue) : new TreeNode(newValue)
      );
    }
  }
}

// Creating a simplified tree structure
const root = new TreeNode(5);
root.left = new TreeNode(3);
root.right = new TreeNode(8);

// Logging the original tree
console.log("Original Tree:");
console.log(root);

// Creating an updated tree by inserting a new value (in this case, 10)
const updatedRoot = root.insert(10);

// Logging the updated tree
console.log("\nUpdated Tree:");
console.log(updatedRoot);

In the code above, we focused on creating and modifying a TreeNode. We defined a TreeNode class that represents a node in a binary tree. A binary tree is a hierarchical data structure where each node can have up to two child nodes, referred to as the left child and the right child.

Our TreeNode class has two constructors: the default constructor, which creates a node with the specified value, and two child nodes, which can also be null. The left and right properties represent the left and right child nodes, respectively.

The TreeNode class also has the insert method, which is used to insert a new value into the tree. The method takes a single argument, which is the value to be inserted.

The insert method first compares the new value to the value of the current node. If the new value is less than the value of the current node, it is inserted to the left of the current node. If the new value is greater than the value of the current node, it is inserted to the right of the current node.

If the current node does not have a child node corresponding to the insertion direction, a new node is created and inserted as the child node. If the current node already has a child node in that direction, the insertion method is recursively called on that child node to handle the insertion.

The code then creates a simplified tree structure with the root node having value 5, a left child node with value 3, and a right child node with value 8. Later on, we insert a new value of 10 into the tree using the insert method of the root node.

Persistent Tree Example

How to Use ES6 Features for Immutability – Spread Syntax and Object.freeze()

At the start of this tutorial, I explained the difference between mutable and immutable data types, and we saw some examples illustrating how they work.

Mutable data types such as arrays and objects are still super useful, and through the use of some ES6 features such as the spread operator and Object.freeze, we can utilize data types like arrays and objects while maintaining a degree of immutability.

The Spread Syntax

The spread operator (…) in JavaScript is a powerful tool that facilitates the creation of shallow copies of arrays, objects, and iterables. When it comes to immutability, the spread operator plays a crucial role in ensuring that the original data remains unchanged while allowing the creation of new, independent data structures.

Let's consider an array in JavaScript:

const originalArray = [1, 2, 3, 4];

Using the spread operator, you can create an immutable copy of this array:

const immutableCopy = [...originalArray];

Here, immutableCopy holds a new array with the same elements as originalArray. Any modifications to immutableCopy won't affect originalArray, ensuring the immutability of the original data. This technique has been adopted by a lot of developers in modern-day software development.

The Object.freeze() method

Object.freeze() is a method that can be used on reference data types. It prevents any form of modification or addition to an object, thereby creating an object with a read-only type.

Let's consider this example:

// Creating an immutable object using Object.freeze()
const originalObj = { name: "Alice", age: 25 };
const immutableObj = Object.freeze(originalObj); // Freezes the object

// Attempting to modify a frozen object (in strict mode)
immutableObj.age = 30; // This change will not take effect (in strict mode)
console.log(originalObj);
console.log(immutableObj);

In the code, the originalObj is a simple object with two properties: name and age. The immutableObj is created by calling Object.freeze(originalObj). This effectively freezes the originalObj, preventing any further modifications to its properties.

We then try to code to modify the immutableObj by changing its age property to 30. However, since the object is frozen, this change will not take effect. In strict mode, attempting to modify a frozen object will result in a type error.

Without strict mode, the immutableObj object remains immutable.

Object.freeze for javaScript immutability.

Performance Optimization through Immutability

Immutability, unchangeability—you might wonder, does this cause more harm than good? Well, let's see.

Let's consider a few more steps in the process, like safeguarding your data. These steps are an investment in stability and predictability.

In mutable structures, whenever data changes, it involves copying or altering existing data, which can get messy, especially in large-scale applications.

When you're dealing with tons of data and constantly modifying it in a mutable structure, your code has to keep track of those changes. This constant tracking and altering can add up, leading to higher computational costs.

On the other hand, with immutable data, once created, it stays put. This means fewer surprises and less overhead in managing changes.

Comparison of mutable vs. immutable data

When comparing mutable and immutable data structures in large-scale applications, it's essential to highlight the fundamental differences that affect performance, memory usage, and overall stability.

Here's a breakdown in a more technical manner:

As you can see from the table, there is a lot to benefit from adopting immutability.

Real-World Examples of Companies and Projects Benefiting from Immutability

Immutability in programming is a concept that has several advantages, and several companies and projects have benefited from it. Some of the companies are Facebook, Github, Netflix, WhatsApp, and Uber.

React, a Facebook library, uses immutability as a major principle, providing improved performance and responsiveness. Github, a collaborative tool, also makes use of React in its user interface, thereby benefiting from immutability. Netflix, WhatsApp, and Uber also benefit from immutability by making use of immutable data structures to produce consistent and reliable applications.

These are a few of the many examples of companies benefiting from immutability.

Common Pitfalls of Immutable JavaScript

Although immutability has its advantages, it can also be quite challenging if you don't use it properly. Most of the time, many beneficial things come with a cost.

Immutability may cause a decrease in performance if used on large datasets, because new data structures are created instead of modifying existing ones.
Also totally learning the immutable approach to programming can be quite tasking, since it may involve learning how to use new libraries and techniques. But it's definitely worth it.

Since immutability works hand in hand with functional programming, it's also a good idea for someone implementing immutability to learn functional programming.

Data races and concurrency issues

When working with immutable data, data races and concurrency issues can still be potential issues. Some of these issues relate to shared reference, asynchronous operations, and state management.

While the data itself might be immutable, references to that data can still be shared among different parts of the code. And if multiple parts of the codebase hold references to the same immutable data and one of them attempts to modify it (even though it can't change the original data), it can cause unintended consequences or unexpected behavior elsewhere in the code that relies on the unchanged data.

In JavaScript, asynchronous operations can introduce concurrency issues. Even though JavaScript is single-threaded, asynchronous functions (like fetching data from APIs or handling events) can create scenarios where different parts of the code operate at different times.

If these asynchronous operations involve shared state, even with immutable data, managing the changes or handling the state updates can lead to unexpected behavior or bugs.

While immutability helps in maintaining predictable state changes, managing the state across an application can still be a challenge. Libraries like Redux in React applications, for instance, rely heavily on immutable data principles to manage state changes effectively. But improper handling of state updates or mutations within such libraries can lead to unexpected behavior.

Best Practices for Overcoming Immutability-Related Issues

Since immutability can pose some challenges, especially when used in a large-scale applications, it's a good idea to learn ways that we can overcome these challenges.

• Selective usage: To avoid decreased performance in your projects, you can choose where to use immutable data. Since immutability relies on creating new datasets instead of modifying them, you should use it in parts of your projects that do not require high performance.
• Avoid deep cloning: Deep clones of data structures can be resource-intensive, so it's best to make use of shallow or partial updates if they can also provide the same results for you.
• Implement Copy-on-Write strategy: The creation of new copies of data should only be used when you need data in a data structure to be modified. This can reduce copies that could be avoided, thereby increasing performance.

Conclusion

The benefits of leveraging immutability in your applications are clear. Immutability serves as a powerful tool that can help you reduce bugs, improve responsiveness, and prevent unnecessary re-renders.

It may still pose some challenges, but through practicing the right strategies, you can handle them and use them to develop very high-quality as well as cost-effective applications.

Immutability remains an essential component of the optimization and responsiveness of large-scale applications being built in the JavaScript community, an area where JavaScript is still growing.

As a developer, learning to apply the immutable method of programming will go a long way toward optimizing most of your projects and reducing the occurrence of bugs and errors. Learning this method of programming would be an investment that yields long-term benefits.

We often hear the terms: immutable and immutability. But what do they mean, and, as developers, why should we care?

Immutable basically means something that cannot be changed. In programming, immutable is used to describe a value that cannot be changed after it's been set.

But, most programs require creating, updating, and deleting data. So why would we ever want to work with data that can't be changed?

In this tutorial, we'll look at immutability of primitives, arrays, and objects with JavaScript examples. And I'll explain why immutability is important for programming.

You can also watch the associated video here:

And here is a JavaScript example (which you can also view on Stackblitz):

// Import stylesheets
import './style.css';

// Write JavaScript code!
const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>Open the console to see results</h1>`;

class Person {
  //_name = "Nee";
  //_name = ["Nee", "Ra"];
  _name = { first: "Nee", middle: "L" };

  get name() {
    return this._name;
  }

  set name(value) {
    console.log('In setter', value);
    this._name = value;
  }
}

let p = new Person();
//p.name = "Ra";                        // Setter executes
//p.name.push("Lee");                   // Setter doesn't execute
//p.name = [...p.name, "Lee"];          // Setter executes
//p.name.middle = "Lee";                // Setter doesn't execute
p.name = { ...p.name, middle: "Lee" };  // Setter executes

Let's start with primitives.

Primitives in JavaScript: Naturally Immutable

In JavaScript, primitives, like strings and numbers, are immutable by default. This means that once a primitive value is created, it can't be changed. Wait a minute, you might think – I change primitive variable values all the time!

Well, it might seem like you're modifying a value. But that's not actually the case. Here's an example.

let greet = "Hello";
greet += ", World";  
console.log(greet);

The first line of this code creates the string Hello and assigns it to the greet variable. The second line appends , World to that string. So it looks like we're changing the greet string. But JavaScript does not change the string. Rather, it creates a new string.

Let's look at an illustration. Here we have a greet variable assigned to the Hello string.

Figure 1. The code creates the string Hello and assigns it to the greet variable.

When the code appends text, JavaScript creates a new string. It then assigns the greet variable to this new string. The original Hello string is not modified.

Figure 2. Appending text creates a new string and assigns it to the greet variable.

So strings and other primitives are immutable by default in JavaScript.

How about arrays?

JavaScript Arrays are Mutable

In JavaScript, arrays are mutable by default. This means that the array can be altered after the array is created. We can modify it "in place", adding, removing, or changing elements.

Let's look at an example.

let ages = [42, 22, 35];
ages.push(8);  
console.log(ages);

The first line of code defines an array and assigns a variable to that array. But in JavaScript, the variable doesn't store the array. It stores the memory address where the array resides, as illustrated in Figure 3 here:

Figure 3. A variable doesn't store an array – it stores the memory address of the array.

In the second line of code in the prior example, we use the push method to modify the original array. In this case, we add 8 to the end of the array. This is shown in Figure 4:

Figure 4. A JavaScript array is changed "in place".

Notice that the memory address of the array doesn't change, but the array itself does change. So the array value is mutable.

This mutability provides flexibility. But mutability can lead to unintended side-effects, especially in larger applications or those involving concurrent operations.

And mutability has issues. Say you have code in a setter that should execute when the array is changed. Or you're working with a framework, such as Angular, that provides change detection. Or you're using a state library, such as Redux, that requires immutability.

As we saw in this example our array is changed...but our ages variable didn't actually change, since it's referencing the memory address. So the setter or change detection or state management might not be aware that the array was changed.

To avoid these pitfalls of mutability, we, as JavaScript developers, often use patterns or methods that do not alter the original array but instead return a new array. This embraces immutability.

How to Embrace Immutability with Arrays

Let's look at an alternate example:

let ages = [42, 22, 35];
ages = [...ages, 8];  
console.log(ages);

In this code, we start with the same array. But when we add an element, we use the JavaScript spread operator. The spread operator makes a copy of the existing array at a new address by "spreading" the existing array.

We then add the new element to that copy. We also reassign the ages variable to the address of the new array (Figure 5).

Figure 5. Using the spread operator, we create a new array at a new address and assign it to the ages variable.

Notice that the original array is not changed. By using the spread operator, we achieve immutability.

In addition to the spread operator, many of the array methods also create a new array and therefore treat an array as immutable. Other array methods modify the array in place and are therefore mutable. Here are some examples.

• Map creates a new array from the existing array, mapping each element using a function we provide. It leaves the original array unchanged. So it supports immutability.

ages.map(x => x + 1);

• Push modifies the original array in place, mutating the array.

ages.push(8);

• Filter creates a new array with items matching the defined criteria. It leaves the original array unchanged.

ages.filter(x => x > 21);

• Sort sorts the array elements in place, thereby mutating the array.

ages.sort();

• Slice creates a new array from a portion of an existing array. Here we copy the original array elements starting at index 1 through index 3 to a new array.

ages.slice(1, 3);

• Splice changes the contents of an array in place, adding, removing, or replacing existing elements. In this example, the code starts replacing elements at index 2, only replaces 1 element, and replaces the element with "18".

ages.splice(2, 1, 18);

So even though by default arrays are mutable, we can use immutability techniques to better manage our arrays.

What about objects?

The Mutable Nature of JavaScript Objects

Objects in JavaScript are also mutable by default. We can add or delete properties and change property values "in place" after an object is created.

let p = {name:"Nee", age: 30};
p.age = 31;
console.log(p);

The first line of this code example declares a person object with name and age properties. When a variable is assigned to that object, the variable doesn't store the object, but rather a memory address where the object resides.

Figure 6. A variable doesn't store an object. Rather, it stores the memory address of the object.

The second line of code in the prior example modifies the value of an object property, changing the age. This modification directly alters the original person object.

Figure 7. A JavaScript object is changed "in place".

Notice that the memory address of the object doesn't change, but the object itself changes. This is similar to array mutability, and that makes sense because arrays in JavaScript are basically objects.

Mutability provides flexibility but can lead to complex bugs if not carefully managed.

And as with an array, mutability has issues. Say you have code in a setter that should execute when the object changes. Or you're working with a framework, such as Angular, that provides change detection. Or you're using a state library, such as Redux, that requires immutability.

In this example, our object changed but our p variable didn't actually change, since it's referencing the memory address. So the setter or change detection or state management may not see that the object was changed.

It's often better to handle objects in an immutable manner. JavaScript provides features to aid with immutable objects.

Immutability with Objects

Here is an alternate example:

let p = {name:"Nee", age: 30};
p = {...p, age: 31};
console.log(p);

We start with the same object. But instead of changing an object's property value directly, we again use the spread operator. The spread operator makes a copy of the object by spreading it into a new object at a new address. We update the property in that new object. We then reassign the p variable to the address of the new object.

Figure 8. Using the spread operator, we create a new object at a new address and assign it to the p variable.

Notice that the original object is not changed. By using the spread operator, we achieve immutability.

So we've seen how primitives are immutable by default. And that arrays and objects are mutable, but we can work with them in an immutable way.

Nice! But why do we care?

Why Is Immutability Important?

There are several reasons that immutability is important to our everyday coding.

• Once an immutable value is set, it isn't changed. Rather a new value is created. This makes the value predictable and consistent throughout the code. So it aids in managing state throughout the application. Plus immutability is a key principle in state management frameworks, such as Redux.
• Code becomes simpler and less error-prone when data structures don't change unexpectedly. This also simplifies debugging and maintenance.
• Embracing immutability is in line with functional programming principles, leading to fewer side effects and more predictable code.

Wrapping Up

Immutability is a fundamental concept in programming. An immutable value is a value that can not be changed after it has been created.

This concept is important to functional programming and state management. It's a valuable concept, especially when dealing with concurrency and large, complex codebases.

To see these concepts with animations, check out the video here:

Or try my stackblitz link: https://stackblitz.com/edit/immutability-deborahk. Be sure to fork my project to try out your own changes.

While JavaScript objects and arrays are mutable by default, adopting an immutable approach to handling them can lead to cleaner, more reliable, and easier-to-maintain code.

In JavaScript, different data types have different behaviors and locations in memory. So to reduce the chances of having bugs in your code, you need to understand the concept of mutability and immutability in JavaScript.

Mutability refers to data types that can be accessed and changed after they've been created and stored in memory. Immutability, on the other hand, refers to data types that you can't change after creating them – but that you can still access in the memory.

This article will help you to fully grasp the concept of mutability and immutability of data in JavaScript. We'll begin with understanding the different data types and go from there.

Prerequisites

• Knowledge of how variables work in JavaScript
• Knowledge of how objects work in JavaScript

Table of Contents

• What are Primitve Data Types in JavaScript?
• What are Reference Data Types in JavaScript?
• How to Clone Object Properties
• What is Immutability in JavaScript?
• How to Prevent Object Mutability
• const != Immutability
• Final Thoughts

Data Types in JavaScript

Data types are categorized into Primitive and Reference types in JavaScript. Before explaining these categories, let's look at two important terms with regards to memory that you will need to know: the Stack and Heap.

What is the Stack?

Stack is a data structure that obeys the Last In First Out (LIFO) principle. This implies that the last item to enter the stack goes out first.

Imagine a pile of books stacked up on a shelf. The last book ends up being the first to be removed. Data stored inside the stack can still be accessed easily.

What is the Heap?

Reference data are stored inside the heap. When reference data is created, the variable of the data is placed on the stack but the actual value is placed on the heap.

What are Primitve Data Types in JavaScript?

Primitive data types are immutable and are not objects because they lack properties and methods.

To determine the kind of data you are working with, use the typeof operator. The typeof operator works perfectly with all primitive data types except null.

Primitive Data Type Examples

Let's look at some examples of primitive data types now to get a better understanding of what they are and how they work

Here's an example of a number:

let num = 23;

console.log(typeof num)

Here's an example of a string:

let str = "Table"

Here's an example of an undefined variable. A variable is said to be undefined if there are no values attached to it.

let figure;

 `null`

   let fig = null

   console.log(fig)

   console.log(fig === null)

Keep in mind that null is not same as Null or NULL.

Here's an example of a boolean. This primitive data type is either true or false.

   let student = true;

   let married = false;

Booleans are not strings – notice that true or false are not in quotes.

Here's an example of a symbol. As a primitive data type, symbols are unique. The values that are returned are also guaranteed to be unique.

   const mySymbol = Symbol();

   console.log(typeof mySymbol) //Symbol

Here's an example of BigInit. Use BigInt when the values you are working on are too big for the number data types.

   const myBigInt = 12n;

   console.log(typeof myBigInt) //BigInt

   const check = BigInt(414242532)

   console.log(typeof check)

What are Reference Data Types in JavaScript?

By default, reference data types are mutable. Reference data types consist of Functions, Arrays, and Objects.

Let's look at some examples of reference data types to help you understand better:

Here's an example of a function:

   function favorite(question) {
      console.log(`Hi dear, do you like ${question} programming language?`)
   }

   favorite('JavaScript')

Here's an example of an array:

   const countriesVisited = ['Nigeria', 'Japan', 'Australia']

   console.log(countriesVisited)

Here's an example of an object:

   const touristData = {
      firstname: 'Camila',
      lastname: 'Pedro',
      Nationality: 'Spanish'
   }
   console.log(touristData)

Just for clarity, the firstname is called the key while Camila is the value.

Reference data types place the variable on the stack. The variable serves as a pointer that points to the object located on the heap.

The main distinction between these categories is that Primitives are immutable but References are mutable. Now, let's get to the meat of the matter.

What is Mutability in JavaScript?

If a data type is mutable, that means that you can change it. Mutability allows you to modify existing values without creating new ones.

For every object, a pointer is added to the stack, and this pointer points to the object on the heap.

Take, for example, the following code:

    const staff = {
         name: "Strengthened",
         age: 43,
         Hobbies: ["reading", "Swimming"]
   }

On the stack you will find staff which is a pointer to the actual object on the heap.

   const staff2 = staff;

   console.log(staff);

   console.log(staff2);

Another pointer is placed on the stack when staff was assigned to staff2. Now, these pointers point to a single object on the heap.

Reference data does not copy values, but rather pointers.

   staff2.age = 53;

   console.log(staff)

   console.log(staff2)

Changing the age of staff2 updates the age of the staff object. Now you know it is because both point to the same object.

How to Clone Object Properties

You can clone the properties of an object using the Object. assign() method and the spread operator. With these, you can change the properties of the cloned object without changing the properties of the object from which it was cloned.

How the Object.assign() method Works

The object.assign method copies properties from an object (the source) into another object (the target) and returns the modified target object.

Here's the syntax:

Object.assign(target, source)

The method has two arguments, target and source. The target is the object that receives new properties, while the source is where the properties come from. The target can be an empty object {}.

In a situation where the source and target share the same key, the source object overwrites the value of the key on the target.

   const staff = {
      name: "Strengthened",
      age: 43,
      Hobbies: ["reading", "Swimming"]
   }

   const staff2 = Object.assign({}, staff);

The properties on the staff object were cloned into an empty target.

staff2 now has its own properties. You can prove this by changing the value of any of its properties. Making this change will not affect the values of the properties on the staff object.

   staff2.age = 53;

   console.log(staff)

   console.log(staff2)

The value of staff2.age that was changed to 53 does not in any way affect the value of staff.age because they both have their own properties.

How the Spread Operator Works

Here's the syntax of the spread operator:

   const newObj = {...obj}

Using the spread operator is quite simple. You need to place three dots ... before the name of the object whose properties you intend to clone:

   const staff = {
    name: "Strengthened",
    age: 43,
    Hobbies: ["reading", "Swimming"]
   }

   const staff2 = {...staff};


   staff2.age = 53;

   console.log(staff)

   console.log(staff2)

What is Immutability in JavaScript?

Immutability is the state where values are immutable (that is, not able to be changed). A value is immutable when altering it is impossible. Primitive data types are immutable, as we discussed above.

Let's look at an example:

   const num = 46;
   const newNum = num;

Looking at the code above, num was reassigned to newNum. Now both num and newNum have a value of 46. Changing the value on newNum will not alter the value on `num.

      let student1 = "Halina";

      let student2 = student1;

In the code above, a variable called student1 was created and assigned to student2.

      student1 = "Brookes"

      console.log(student1);

      console.log(student2)

Changing student1 to Brookes does not change the initial value on student2. This proves that in primitive data types, actual values are copied, so both have their own. On the stack memory, student1 and student2 are distinct.

The stack obeys the Last-In-First-Out principle. The first item that enters the stack is the last item to go out and vice versa. Accessing items stored in the stack is easy.

How to Prevent Object Mutability

So far you have learned that objects are mutable by default.

   const studentNames = {
           student1: 'Halina',
           student2: "Brookes",
           student3:"Anthony"
   }


   Object.defineProperty(studentNames, "student4", {
      value: "Mirabel",
   })

   console.log(studentNames);

Now we've added student4.

To prevent object mutability, you can use the Object.preventExtensions(), Object.seal(), and Object.freeze() methods.

For all three methods, we will explore adding properties using dot notation and the define property, modifying properties using defineProperty, and deleting properties.

This will give you a better understanding of the capabilities and limitations of each method, and ultimately help you in determining which method may be best suited for a particular use case.

So, let's dive in and explore these methods in more detail.

How to Use the Object.preventExtensions Method

Here's the syntax of this method:

Object.preventExtensions(obj)

Using Object.preventExtensions stops new properties from entering the object. The object does not increase in size and maintains its properties. By default, all objects in JavaScript are extensible. With this method, you can delete properties from your object.

How to add new properties

• using dot notation:

   const makeNonExtensive = {
           firstname: "Charles",
           lastname: "Chandlier"
   }

   Object.preventExtensions(makeNonExtensive)

   makeNonExtensive.designation = "Software Engineer";

   console.log(makeNonExtensive)

Check the console – the designation property was not added and there's no error message.

   const obj = {
           firstname: "Derek",
           designation: "Software Engineer"
   }

• using the defineProperty method

Here's the syntax:

   Object.defineProperty(obj, prop, descriptor)

Here's what's going on in that code:

• obj: The object you want to add properties to.
• prop: You define the name of the property you want to add or change. It should be either a string or symbol
• Descriptor: You include the value of the property.

   const makeNonExtensive = {
           firstname: "Charles",
           lastname: "Chandlier"
   }

   Object.preventExtensions(makeNonExtensive)

   Object.defineProperty(makeNonExtensive, "age", {
      value: "twenty",
   })

   console.log(makeNonExtensive)

• Adding new properties using the define property throws this error message: index.js:361 Uncaught TypeError: Cannot define property age, object is not extensible.

How to modify an existing property using the define Property

    const makeNonExtensive = {
            firstname: "Charles",
            lastname: "Chandlier"
    }

   Object.preventExtensions(makeNonExtensive)

   Object.defineProperty(makeNonExtensive, 'firstname', {
    value: 'Jason',
    })
    console.log(makeNonExtensive)

The value of the property of a non-extensible object can be changed as demonstrated with the above line of code.

How to delete a property

Here's the syntax:

   delete object.propertyname

   const makeNonExtensive = {
           firstname: "Charles",
           lastname: "Chandlier"
   }

   Object.preventExtensions(makeNonExtensive)

   delete makeNonExtensive.lastname

   console.log(makeNonExtensive)

In spite of the object being non-extensible, the lastname property was deleted.

How to Use Object.seal()

All objects in Javascript are extensible by default. Just as the name suggests, this method seals an object. You cannot add new properties to a sealed object or delete an existing property from a sealed object. But object.seal permits modifying existing properties.

Here's the syntax:

Object.seal()

How to add new properties

   const studentNames = {
           student1: 'Halina',
           student2: "Brookes", 
           student3:"Alina"
   }

   Object.seal(studentNames)

   console.log(Object.isSealed(studentNames))

Object.isSealed(studentNames) is used to check if an object is sealed.

How to use dot notation

   studentNames.student4 = "Barbara";

   console.log(studentNames)

Without producing an error, the dot notation fails when adding the new property student4.

How to use the defineProperty method

      const studentNames = {
              student1: 'Halina',
              student2: "Brookes",
              student3:"Alina"
      }

      Object.seal(studentNames)

      Object.defineProperty(studentNames, 'student4', {
         value: 'Barbara'
      })

      console.log(studentNames)

The error message "Uncaught TypeError: Cannot define property student4, the object is not extendable" is thrown when attempting to add the same property using the define property method.

How to modify an existing property using define Property

      const studentNames = {
              student1: 'Halina',
              student2: "Brookes",
              student3:"Alina"
      }

         Object.seal(studentNames)

      Object.defineProperty(studentNames, 'student2', {
         value: "Water-Brookes",
      })

      console.log(studentNames)

Now student2 has been changed from "Brookes" to "Water-Brookes".

How to delete a property

   const studentNames = {
           student1: 'Halina',
           student2: "Brookes",
           Student3:"Alina"
   }

   Object.seal(studentNames)

   delete studentNames.student1

   console.log(studentNames)

Properties cannot be removed from sealed objects. In the console, student1 still remains.

How to Use Object.freeze()

Here's the syntax:

   Object.freeze()

The Object.freeze() method freezes an object. Using this method guarantees high integrity by ensuring that pulling out, modifying existing properties, or adding new properties to the object will not be possible.

To check if an object is frozen, use the syntax below:

   Object.isFrozen(obj);

Even when you apply the object.freeze to an object, you can add new property, modify an existing property, or delete properties from objects nested under it.

Just as we have done for other methods, let's explore the object.freeze method in relation to adding new properties, modifying values, or deleting properties from an object.

How to add new properties

• Using dot notation

   const teamplayers = {
           player1: "Andrey",
           player2: "Abundance"
   }


   Object.freeze(teamplayers)

   teamplayers.player3 = "Finder";

   console.log(teamplayers)

Notice that player3 was not added.

• Using the defineProperty method

   const teamplayers = {
           player1: "Andrey",
           player2: "Abundance"
   }


   Object.freeze(teamplayers)

   Object.defineProperty(teamplayers, 'player3', {
      value: 'Charis'
      })
      console.log(teamplayers)

   console.log(teamplayers)

Dot notation fails silently when trying to add a property, but defineproperty throws a TypeError instead.

How to modify an existing property

   const teamplayers = {
           player1: "Andrey",
           player2: "Abundance"
   }


   Object.freeze(teamplayers)


   teamplayers.player1 = "Christabel"

   console.log(teamplayers)

This will fail silently. But with the define property below a typeError is thrown.

      const teamplayers = {
              player1: "Andrey",
              player2: "Abundance"
      }


      Object.freeze(teamplayers)


      Object.defineProperty(teamplayers, 'player1', {
         value: "Anne"
      })

      console.log(teamplayers)

Uncaught TypeError: Cannot redefine property: player1

How to delete a property

   const teamplayers = {
           player1: "Andrey",
           player2: "Abundance"
   }


   Object.freeze(teamplayers)


   delete teamplayers.player2

   console.log(teamplayers)

Attempting to delete a property on a frozen object also fails silently.

How to use Deep Freeze

   const teamplayers = {
           player1: "Andrey",
           player2: "Abundance",
                   substitutes: {
                   player3: "Jeremiah",
                   player4: "Jayden"
            }
   }

   const squad = teamplayers;

   Object.freeze(teamplayers)


   Object.defineProperty(teamplayers.substitutes, 'player5', {
      value: "Woodland"
   })

   console.log(teamplayers)

Player5 has been added to the nested substitutes even though the object.freeze method was applied to the parent teamplayers.

You can also modify the value of the properties in the nested object.

• How to delete a property

   delete teamplayers.substitutes.player3

   console.log(teamplayers)

Player3 has been removed. Everything that the object.freeze prevents on the parent object is obtainable on the child object that is nested.

To prevent this, we employ the deep freeze technique as shown below:

   const deepVal = obj => {
        Object.keys(obj).forEach(prop => {
        if (typeof obj[prop] === 'object') deepVal(obj[prop]);
        });
        return Object.freeze(obj);
    };

    const teamplayers = deepVal( {
            player1: "Andrey",
            player2: "Abundance",
                    substitutes: {
                        player3: "Jeremiah",
                        player4: "Jayden"
                    }
            }
    )
   const squad = teamplayers;

   Object.freeze(teamplayers)

   console.log(Object.isFrozen(teamplayers));

   console.log(Object.isFrozen(squad));

• How to add a new property to the child object.

const deepVal = obj => {
        Object.keys(obj).forEach(prop => {
        if (typeof obj[prop] === 'object') deepVal(obj[prop]);
        });
        return Object.freeze(obj);
 };

    const teamplayers = deepVal( {
            player1: "Andrey",
            player2: "Abundance",
                    substitutes: {
                        player3: "Jeremiah",
                        player4: "Jayden"
                    }
            }
    )

   Object.freeze(teamplayers)

   Object.defineProperty(teamplayers.substitutes, 'player5', {
      value: "Alice"
   })

   console.log(teamplayers)

Now when you attempt adding a property, you will get this error Uncaught TypeError: Cannot define property player5, object is not extensible

Also deep freeze prevents you from changing and deleting properties of an object.

const != Immutability

A variable declared using the let keyword can be reassigned using the assignment operator (=). Take a look at the code below to understand what I mean.

   let num = 34;
   num = 50;

   console.log(num);

Here, after declaring variable num using the let keyword, the value was reassigned from 34 to 50.

However, you cannot achieve the same thing on the same variable declared using the const keyword.

 const num = 34;
 num = 50;

 console.log(num);

You will get this error Uncaught TypeError: Assignment to constant variable.

But that is not the case with objects. An object that you declared using const is still mutable, so you can still modify the properties of that particular object as you can see below:

   const getObj = {
           color1: "Green",
           color2: "Blue",
           color3: "Yellow"
   }

   getObj.color1 = "Brown";

   console.log(getObj.color1)

The value of color1 was altered from Green to Brown, even when declared with const.

Final Thoughts

You've now learned about the various data types and whether they are immutable or mutable by default.

Objects can be changed by default. But using specific methods like the Object.seal, Object.freeze, and preventExtensions can prevent mutability.

The level of immutability provided by these methods varies, so make sure you use the one that corresponds to the integrity level you want to accomplish. Until next time, keep exploring JavaScript.

An object can have one or more properties. Each of the properties is a key-value pair separated by a colon(:). The key must be a string or JavaScript symbol type. The value can be of any type, including another object.

With that explanation of an object, let's create one to see how it works:

const user = {
 'name': 'Bob',
 'age': 27   
}

Here we have created an object with two properties (name, age) and their respective values. We have created a variable called user with the const keyword and we've assigned the object to it as a value.

By default, objects are mutable. This means once they're created, you can add a new property to them, modify the value of an existing property, or delete a property.

In my early years of programming, I found the terms mutable and immutable very confusing. Let me try explaining it in simple English.

Mutable is something you can change. Immutable is just the opposite of that. So, mutability is the ability to change over time. Immutability means something is unchanging over time.

There could be situations where you may not want an object to change programmatically. Therefore you'll want to make it immutable.

When an object is immutable, you can't add a new property to it, modify it, or delete an existing property. There is no way even to extend it.

This is what a Frozen Object is, which we'll learn about, practice with, and understand in this article.

I discussed frozen objects in a Twitter thread recently. Please feel free to have a look. This article will expand on the thread with more details and examples.

How to Create a Frozen Object in JavaScript

You can freeze (make immutable) an object using the function Object.freeze(obj). The object passed to the freeze method will become immutable. The freeze() method also returns the same object.

Let's create an object of supported languages:

const supportedLanguages = {
  'af': 'Afrikaans',
  'bn': 'Bengali',
  'de': 'German',
  'en': 'English',
  'fr': 'French'
}

If you don't want this object to change after it is created, just use the freeze method to make it immutable.

const frozenSupportedLanguages = Object.freeze(supportedLanguages);

// The supportedLanguages and frozenSupportedLanguages are same

frozenSupportedLanguages === supportedLanguages; // returns true

Now let's try changing either of the objects and see what happens:

// Add a new property
supportedLanguages['kn'] = 'Kannada';

// Modify an existing property
supportedLanguages["af"] = 'something else';

// Delete a property
delete supportedLanguages.bn; // returns false

// log the object to the console
console.log(supportedLanguages); // Unchanged => {af: "Afrikaans", bn: "Bengali", en: "English", fr: "French"}

You'll get errors when you try changing a frozen object (immutable object) in the JavaScript strict environment.

Hold On – doesn't the const keyword do the same thing?

Ah, not quite. The const keyword and Object.freeze() are not the same things. When you assign an object to a variable created with the const keyword, you can not reassign another value. However, you can modify the assigned objects in whatever way you want.

Let's understand the difference with an example. This time, we will take the same supportedLanguages object but will not freeze it.

const supportedLanguages = {
  'af': 'Afrikaans',
  'bn': 'Bengali',
  'de': 'German',
  'en': 'English',
  'fr': 'French'
}

Now you can modify it like this:

// Add a new property
supportedLanguages['kn'] = 'Kannada';

// Modify an existing property
supportedLanguages["af"] = 'something else';

// Delete a property
delete supportedLanguages.bn; // returns true

// log the object to the console
console.log(supportedLanguages);

Now the supportedLanguages object is changed to the following:

So, this change is allowed. But if you try to assign a new object to the supportedLanguages variable:

supportedLanguages = {'id': 'Indonesian'};

You will get this error:

I hope the difference is clear now – it's also a frequently asked interview question.

Why Do We Need Frozen Objects in JavaScript?

Again, we need frozen objects when we need immutability. In object-oriented programming, it is common to have APIs that we can not extend or modify outside the current context.

Do you remember the final keyword in Java? Or how in the Kotlin programming language, lists are immutable by default? Trying to mutate them at run time causes errors. Immutability is an essential concept to use in functional programming.

Immutability is often important in the JavaScript programming language as well. You may want a configuration object to be immutable, a fixed set of supported language for your applications, or anything else that you don't want to change at the run time.

You Can Freeze an Array, Too

In JavaScript, Arrays are objects under the hood. So you can also apply Object.freeze()to arrays to make them immutable.

Let's take an array of human senses:

const senses = ['touch', 'sight', 'hearing', 'smell', 'taste'];

We can now make it immutable like this:

Object.freeze(senses);

Now, try to push an element to that array. It's not possible.

senses.push('walking');

The output will be the following error:

Try to remove an element from the array:

senses.pop();

You'll get this error:

Please notice the error in both the cases. It clearly says, the add and delete property is not allowed as the underlying object is not extensible.

Object Freeze is Shallow

A JavaScript object property can have another object as its value. It can go to a deeper level down.

When we freeze an object, it is a shallow freeze. This means that only the top-level properties are frozen. If any of the property's values are another object, that inner object is not frozen. You can still make changes to it.

Let's understand this with the example of a configuration object:

const config = {
  'db': 'postgresql',
  'host': 'acme-ind.com',
  'password': 'fake-password',
  'port': 512,
  'admin': {
    'name': 'Tapas',
    'rights': ['create', 'update', 'delete']
  }
}

The config object has properties like db, host, password, and port with simple string types values. However, the admin property has an object as the value. Now, let's freeze the config object.

Object.freeze(config);

Now, let's try to change the db name.

config.db = 'redis';

It is not allowed as the object is frozen. However, you can do this:

config.admin.name = 'atapas';

Here we have changed the property of the nested object. As the object freezing is shallow in nature, it is not going to stop us from changing the nested object. So, if you log the object in the console, this is what you'll get:

How to Deep Freeze an Object in JavaScript

But how do you deep freeze an object if you need or want to? You may want to freeze all the properties of the object to the deepest level possible, right? We can do that using recursion.

In programming, recursion is a methodology that uses a procedure, function, or algorithm to call itself. Check out this article for an in-depth understanding.

So, we can iterate through every property and recursively apply the freeze method to everything. It will make sure that the nested objects are also frozen.

To do that, you can write a simple function like this:

const deepFreeze = obj => {
  Object.keys(obj).forEach(prop => {
    if (typeof obj[prop] === 'object') deepFreeze(obj[prop]);
  });
  return Object.freeze(obj);
};

deepFreeze(config);

What's the Diffecrence Between freeze(), seal(), and preventExtentions()?

With Object.freeze we achieve full immutability. But there are two other methods that provide object immutability, only partially.

• Object.seal – We can not add a new property or delete existing properties of an object sealed with this method. But we can still update the value of existing properties.
• Object.preventExtensions – This method prevents new property creation. But you can update and delete existing properties.

Here is a table to compare them:

How to UnFreeze a Frozen Object

There is no straightforward ways to unfreeze a frozen object in JavaScript.

You can probably simulate an unfreeze by making a copy of the object maintaining the prototype.

Here is an NPM package that does the same with a shallow copy.

In Summary

To Summarize,

• We can freeze an object to make it immutable.
• You use the method Object.freeze to freeze an object.
• You can not create a new property, modify or delete an existing property, or extend the object when a freeze is applied.
• Declaring a variable with the const keyword with an object value is not same as freezing the object.
• You can freeze an array using the same freeze method.
• The freeze method does a shallow freeze. Use recursion to do a deep freeze.
• The seal() and preventExtentions() methods provide partial immutability.
• Unfreezing is not supported in the language (yet).

Before We End...

That's all for now. I hope you've found this article insightful, and that it helps you understand object immutability more clearly.

Let's connect. You will find me active on Twitter (@tapasadhikary). Feel free to give a follow. I've also started sharing knowledge using my YouTube channel, so you can check it out, too.

You may also like these articles:

• The JavaScript Array Handbook – JS Array Methods Explained with Examples
• A practical guide to object destructuring in JavaScript
• JavaScript: Equality comparison with ==, === and Object.is
• How NOT to use Git in Practice. Ten Git usages, you should know to avoid.

Experienced programmers use Python all the time as well, thanks to its wide community, abundance of packages, and clear syntax.

But there's one issue that seems to confuse beginners as well as some experienced developers: Python objects. Specifically, the difference between mutable and immutable objects.

In this post we will deepen our knowledge of Python objects, learn the difference between mutable and immutable objects, and see how we can use the interpreter to better understand how Python operates.

We will use important functions and keywords such as id and is, and we'll understand the difference between x == y and x is y.

Are you up for it? Let's get started.

In Python, everything is an object

Unlike other programming languages where the language supports objects, in Python really everything is an object – including integers, lists, and even functions.

We can use our interpreter to verify that:

>>> isinstance(1, object)
True

>>> isinstance(False, object)
True

def my_func():
   return "hello"

>>> isinstance(my_func, object)
True

Python has a built-in function, id, which returns the address of an object in memory. For example:

>>> x = 1
>>> id(x)
1470416816

Above, we created an object by the name of x, and assigned it the value of 1. We then used id(x) and discovered that this object is found at the address 1470416816 in memory.

This allows us to check interesting things about Python. Let's say we create two variables in Python – one by the name of x, and one by the name of y – and assign them the same value. For example, here:

>>> x = "I love Python!"
>>> y = "I love Python!"

We can use the equality operator (==) to verify that they indeed have the same value in Python's eyes:

>>> x == y
True

But are these the same object in memory? In theory, there can be two very different scenarios here.

According to scenario (1), we really have two different objects, one by the name of x, and another by the name of y, that just happen to have the same value.

Yet, it could also be the case that Python actually stores here only one object, which has two names that reference it – as shown in scenario (2):

We can use the id function introduced above to check this:

>>> x = "I love Python!"
>>> y = "I love Python!"
>>> x == y
True

>>> id(x)
52889984

>>> id(y)
52889384

So as we can see, Python's behavior matches scenario (1) described above. Even though x == y in this example (that is, x and y have the same values), they are different objects in memory. This is because id(x) != id(y), as we can verify explicitly:

>>> id(x) == id(y)
False

There is a shorter way to make the comparison above, and that is to use Python's is operator. Checking whether x is y is the same as checking id(x) == id(y), which means whether x and y are the same object in memory:

>>> x == y
True

>>> id(x) == id(y)
False

>>> x is y
False

This sheds light on the important difference between the equality operator == and the identity operator is.

As you can see in the example above, it is completely possible for two names in Python (x and y) to be bound to two different objects (and thus, x is y is False), where these two objects have the same value (so x == y is True).

How can we create another variable that points to the same object that x is pointing to? We can simply use the assignment operator =, like so:

>>> x = "I love Python!"
>>> z = x

To verify that they indeed point to the same object, we can use the is operator:

>>> x is z
True

Of course, this means they have the same address in memory, as we can verify explicitly by using id:

>>> id(x)
54221824

>>> id(z)
54221824

And, of course, they have the same value, so we expect x == z to return True as well:

>>> x == z
True

Mutable and immutable objects in Python

We have said that everything in Python is an object, yet there is an important distinction between objects. Some objects are mutable while some are immutable.

As I mentioned before, this fact causes confusion for many people who are new to Python, so we are going to make sure it's clear.

Immutable objects in Python

For some types in Python, once we have created instances of those types, they never change. They are immutable.

For example, int objects are immutable in Python. What will happen if we try to change the value of an int object?

>>> x = 24601
>>> x
24601

>>> x = 24602
>>> x
24602

Well, it seems that we changed x successfully. This is exactly where many people get confused. What exactly happened under the hood here? Let's use id to further investigate:

>>> x = 24601
>>> x
24601

>>> id(x)
1470416816

>>> x = 24602
>>> x
24602

>>> id(x)
1470416832

So we can see that by assigning x = 24602, we didn't change the value of the object that x had been bound to before. Rather, we created a new object, and bound the name x to it.

So after assigning 24601 to x by using x = 24601, we had the following state:

And after using x = 24602, we created a new object, and bound the name x to this new object. The other object with the value of 24601 is no longer reachable by x (or any other name in this case):

Whenever we assign a new value to a name (in the above example - x) that is bound to an int object, we actually change the binding of that name to another object.

The same applies for tuples, strings (str objects), and bools as well. In other words, int (and other number types such as float), tuple, bool, and str objects are immutable.

Let's test this hypothesis. What happens if we create a tuple object, and then give it a different value?

>>> my_tuple = (1, 2, 3)
>>> id(my_tuple)
54263304

>>> my_tuple = (3, 4, 5)
>>> id(my_tuple)
56898184

Just like an int object, we can see that our assignment actually changed the object that the name my_tuple is bound to.

What happens if we try to change one of the tuple's elements?

>>> my_tuple[0] = 'a new value'
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: 'tuple' object does not support item assignment

As we can see, Python doesn't allow us to modify my_tuple's contents, as it is immutable.

Mutable objects in Python

Some types in Python can be modified after creation, and they are called mutable. For example, we know that we can modify the contents of a list object:

>>> my_list = [1, 2, 3]
>>> my_list[0] = 'a new value'
>>> my_list
['a new value', 2, 3]

Does that mean we actually created a new object when assigning a new value to the first element of my_list? Again, we can use id to check:

>>> my_list = [1, 2, 3]
>>> id(my_list)
55834760

>>> my_list
[1, 2, 3]

>>> my_list[0] = 'a new value'
>>> id(my_list)
55834760

>>> my_list
['a new value', 2, 3]

So our first assignment my_list = [1, 2, 3] created an object in the address 55834760, with the values of 1, 2, and 3:

We then modified the first element of this list object using my_list[0] = 'a new value', that is - without creating a new list object:

Now, let us create two names – x and y, both bound to the same list object. We can verify that either by using is, or by explicitly checking their ids:

>>> x = y = [1, 2]
>>> x is y
True

>>> id(x)
18349096

>>> id(y)
18349096

>>> id(x) == id(y)
True

What happens now if we use x.append(3)? That is, if we add a new element (3) to the object by the name of x?

Will x by changed? Will y?

Well, as we already know, they are basically two names of the same object:

Since this object is changed, when we check its names we can see the new value:

>>> x.append(3)
>>> x
[1, 2, 3]

>>> y
[1, 2, 3]

Note that x and y have the same id as before – as they are still bound to the same list object:

>>> id(x)
18349096

>>> id(y)
18349096

In addition to lists, other Python types that are mutable include sets and dicts.

Implications for dictionary keys in Python

Dictionaries (dict objects) are commonly used in Python. As a quick reminder, we define them like so:

my_dict = {"name": "Omer", "number_of_pets": 1}

We can then access a specific element by its key name:

>>> my_dict["name"]
'Omer'

Dictionaries are mutable, so we can change their content after creation. At any given moment, a key in the dictionary can point to one element only:

>>> my_dict["name"] = "John"
>>> my_dict["name"]
'John'

It is interesting to note that a dictionary's keys must be immutable:

>>> my_dict = {[1,2]: "Hello"}
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: unhashable type: 'list'

Why is that so?

Let's consider the following hypothetical scenario (note: the snippet below can't really be run in Python):

>>> x = [1, 2]
>>> y = [1, 2, 3]
>>> my_dict = {x: 'a', y: 'b'}

So far, things don't seem that bad. We'd assume that if we access my_dict with the key of [1, 2], we will get the corresponding value of 'a', and if we access the key [1, 2, 3], we will get the value 'b'.

Now, what would happen if we attempted to use:

>>> x.append(3)

In this case, x would have the value of [1, 2, 3], and y would also have the value of [1, 2, 3]. What should we get when we ask for my_dict[[1, 2, 3]]? Will it be 'a' or 'b'? To avoid such cases, Python simply doesn't allow dictionary keys to be mutable.

Taking things a bit further

Let's try to apply our knowledge to a case that is a bit more interesting.

Below, we define a list (a mutable object) and a tuple (an immutable object). The list includes a tuple, and the tuple includes a list:

>>> my_list = [(1, 1), 2, 3]
>>> my_tuple = ([1, 1], 2, 3)
>>> type(my_list)
<class 'list'>

>>> type(my_list[0])
<class 'tuple'>

>>> type(my_tuple)
<class 'tuple'>

>>> type(my_tuple[0])
<class 'list'>

So far so good. Now, try to think for yourself – what will happen when we try to execute each of the following statements?

(1) >>> my_list[0][0] = 'Changed!'

(2) >>> my_tuple[0][0] = 'Changed!'

In statement (1), what we are trying to do is change my_list's first element, that is, a tuple. Since a tuple is immutable, this attempt is destined to fail:

>>> my_list[0][0] = 'Changed!'
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: 'tuple' object does not support item assignment

Note that what we were trying to do is not change the list, but rather – change the contents of its first element.

Let's consider statement (2). In this case, we are accessing my_tuple's first element, which happens to be a list, and modify it. Let's further investigate this case and look at the addresses of these elements:

>>> my_tuple = ([1, 1], 2, 3)
>>> id(my_tuple)
20551816

>>> type(my_tuple[0])
<class 'list'>

>>> id(my_tuple[0])
20446248

When we change my_tuple[0][0], we do not really change my_tuple at all! Indeed, after the change, my_tuple's first element will still be the object whose address in memory is 20446248. We do, however, change the value of that object:

>>> my_tuple[0][0] = 'Changed!'
>>> id(my_tuple)
20551816

>>> id(my_tuple[0])
20446248

>>> my_tuple
(['Changed!', 1], 2, 3)

Since we only modified the value of my_tuple[0], which is a mutable list object, this operation was indeed allowed by Python.

Recap

In this post we learned about Python objects. We said that in Python everything is an object, and got to use id and is to deepen our understanding of what's happening under the hood when using Python to create and modify objects.

We also learned the difference between mutable objects, that can be modified after creation, and immutable objects, which cannot.

We saw that when we ask Python to modify an immutable object that is bound to a certain name, we actually create a new object and bind that name to it.

We then learned why dictionary keys have to be immutable in Python.

Understanding how Python "sees" objects is a key to becoming a better Python programmer. I hope this post has helped you on your journey to mastering Python.

Omer Rosenbaum, Swimm’s Chief Technology Officer. Cyber training expert and Founder of Checkpoint Security Academy. Author of Computer Networks (in Hebrew). Visit My YouTube Channel.

30 Seconds of Code is a brilliant collection of JavaScript snippets, digestible in ≤ 30 seconds. Anyone looking to master JavaScript should go through the entire thing.

The list didn’t contain a function to rename multiple object keys, however, so I created a pull request that thankfully got merged!

Here’s the official entry: https://30secondsofcode.org/object#renamekeys

I’ve previously written on renaming object keys, but we only changed one key at a time.

Then Adam Rowe kindly commented, asking how we might rename multiple object keys. I replied with this code sample after some thought and research.

renameKeys = (keysMap, obj) =>
  Object.keys(obj).reduce(
    (acc, key) => ({
      ...acc,
      ...{ [keysMap[key] || key]: obj[key] }
    }),
    {}
  );

This was inspired by Ramda Adjunct’s renameKeys function.

• keysMap contains key/value pairs of your old/new object keys.
• obj is the object to be changed.

You might use it like this:

keysMap = {
  name: 'firstName',
  job: 'passion'
};

obj = {
  name: 'Bobo',
  job: 'Front-End Master'
};

renameKeys(keysMap, obj);
// { firstName: 'Bobo', passion: 'Front-End Master' }

Let’s step through it! We can write an expanded, debugger-friendly version of this function:

renameKeys = (keysMap, obj) => {
  debugger;

  return Object.keys(obj).reduce((acc, key) => {
    debugger;

    const renamedObject = {
      [keysMap[key] || key]: obj[key]
    };

    debugger;

    return {
      ...acc,
      ...renamedObject
    };
  }, {});
};

And we’ll use it like this:

renameKeys(
  {
    name: 'firstName',
    job: 'passion'
  },
  {
    name: 'Bobo',
    job: 'Front-End Master'
  }
);

Pausing on line 2, we see that keysMap and obj have been properly assigned.

Here’s where the fun begins. Move to the next debugger.

Inspect our local variables on line 7:

• acc: {} because that’s Array.reduce()’s initial value (line 19).
• key: “name” because it’s the first key from Object.keys(obj).
• renamedObject: undefined

Also notice that we can access keysMap and obj from the parent function’s scope.

Guess what renamedObject will be. Like in my aforementioned post, we’re using computed property names to dynamically assign renamedObject's key.

If keysMap[key] exists, use it. Otherwise, use the original object key. In this case, keysMap[key] is “firstName”.

That’s renamedObject's key, what about its corresponding value?

It’s obj[key]: "Bobo". Hit the next debugger and check it out.

renamedObject is now { firstName: “Bobo” }.

Now using the spread operator, we’ll merge acc and renamedObject. Remember that acc is currently .reduce's initial value: an empty object.

So merging acc and renamedObject just results in a clone of renamedObject.

Since we’re returning this object, however, it becomes acc in .reduce’s next iteration. Move to the next debugger to see this.

We’re inside .reduce's again, because there’s one more key to process. We see that acc is now { firstName: "Bobo" }.

The same process runs again, and renamedObject is properly created.

This time, merging acc and renamedObject actually makes a difference.

Run past this debugger to return that object, and you’re done!

Here’s the final output:

Have fun renaming all the keys, until next time!