Skip to main content

Immutability in JavaScript

 Immutability is a popular concept not just in JavaScript, but most programming languages in general. The reason behind this of course is functional programming which gives software developers a brand new paradigm to utilize when coding. Let’s dive into the details of mutability and immutability.

What is Mutability?

A mutable value is one that can be changed without creating an entirely new value. In JavaScript, objects and arrays are mutable by default, but primitive values are not. Once a primitive value is created, it cannot be changed, although the variable that holds it may be reassigned. There is nothing wrong with mutability. Take a look at the code below:

const dog = {
   name: 'turtle',
   age: 10
} 
// Make a copy of dog object 
const newDog = dog; 
// Changing the age of the new dog
newDog.age = 12; 
console.log(newDog === dog); // true

As you can see, we’re copying the object to another object and changing the dogs age. The problem is that the change happens everywhere.

This happens because the object is a reference type. Change it in one place and it is changed everywhere due to it being tied in the same memory location.

const newDog = dog

Since you are copying the reference (and not the real values), both values change.

Immutability in Object

The main objective of immutability is the object should not change and should create a new object.

const dog = {
   name: 'turtle',
   age: 10
} 
const newDog = { ...dog, age: 12 } 
console.log(newDog === dog); // false

We use the spread operator to copy all of the properties and create an entirely different object. Immutability is about maintaining the state of an object and making development simple. The whole idea is an update should not change the object but create a new object with entirely new data.

Immutability in Arrays

Arrays work very similar to objects and you can also use the spread operator.

const dogs = [ 'corgi', 'frenchi' ];
const newDogs = [ ...dogs, 'labradoodle' ];
console.log(dogs === newDogs) // false 
console.log(dogs)    // [ 'corgi', 'frenchi' ];
console.log(newDogs) // [ 'corgi', 'frenchi', 'labradoodle' ];

Comments

Post a Comment

Popular posts from this blog

Higher Order Functions in JavaScript Explained Simply

  What is a higher order function? In JavaScript, a higher-order function is a function that  takes one or more functions as arguments,  or returns a function as output. These functions are a powerful feature of the language that allow you to write concise and expressive code. The best way to learn higher order functions (and likely the most “real-world”) is to look at “map()” and “filter()”. Both take functions as arguments where the function is applied to each element in an array. Map For example, consider the  map  function, which is used to apply a function to each element of an array and return a new array containing the results. The  map   function is a higher-order function because it takes a function as its argumen t, in this case the function to apply to each element of the array. const numbers = [1, 2, 3, 4, 5]; const squares = numbers.map(x => x * x); Filter Another common higher-order function is  filter , which is used to select el...
Post a Comment
Read more

Basic CRUD Array Operations in JavaScript

  Sometimes it pays just to stick to the basics. Here are CRUD operations for a basic array: 1. Create an element to the end of an array let clubs = ['baseball','running','computer club']; clubs.push('tennis'); console.log(clubs); 2. Delete an element from the end of an array let clubs = ['baseball','running','computer club']; const lastElement = seas.pop(); console.log(lastElement); 3. Reading an index from an element in an array let clubs = ['baseball','running','computer club']; let index = clubs.indexOf("running"); console.log(index); 4. Update an index from an element in an array let clubs = ['baseball','running','computer club']; clubs.splice(1, 0, 'tennis'); console.log(clubs);
Post a Comment
Read more

Spring Data JPA Many-To-Many Explained Simply

  At a certain point in your Java career, it is inevitable to arrive at a point where you have models that are related to each other but cannot be solved with foreign keys. A good example of a many-to-many relationships is the relationship between rice and sauces. I love ALL types of different rice with different types of sauces. Sometimes I like Jasmine rice with spicy curry, while other times I like sticky rice with soy sauce. In a pinch, I’ve even ate Jasmine rice with soy sauce! *crowd gasps* Overall, many-to-many is a relationship that has infinite amounts of different combinations. Try to apply the rice analogy to a  one-to-many relationship  and it will not work. Many-To-Many Relationships To maintain a many-to-many relationship between two tables in a database, the only way is to have a third table which has a reference to both sides of the table. This table is called a “join” table and each entry in this table will connect the source table and target table. Many-...
Post a Comment
Read more