In the previous lesson, we discussed the concept of immutability, which is fundamental in functional programming. Now, let’s explore how to work with immutable data structures in JavaScript. Immutable data structures ensure that once data is created, it cannot be modified. In this lesson, we’ll explore how to handle immutable arrays, objects, and how we can leverage third-party libraries to make this process more efficient.

Immutable Data Structures

An immutable data structure is a structure whose state cannot be changed once it’s created. When we try to modify an immutable object or array, a new version of the object/array is created with the modification, leaving the original structure unchanged.

Some common immutable data structures in JavaScript include:

• Immutable Arrays

Immutable Arrays

In JavaScript, arrays are mutable by default, meaning you can modify the original array. To make arrays immutable, you need to avoid methods like push(), pop(), or shift(). Instead, you can use methods like concat(), slice(), or map(), which return new arrays instead of modifying the original one.

Using `concat()` to Add Items javascript

          const numbers = [1, 2, 3];
const newNumbers = numbers.concat(4); // Returns a new array
console.log(numbers);    // [1, 2, 3]
console.log(newNumbers); // [1, 2, 3, 4]
        

Using `map()` to Modify Elements

          const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // Creates a new array
console.log(doubled); // [2, 4, 6]
        

Using `slice()` to Copy an Array

          const numbers = [1, 2, 3];
const numbersCopy = numbers.slice(); // Creates a new copy of the array
numbersCopy.push(4); 
console.log(numbers);      // [1, 2, 3]
console.log(numbersCopy);  // [1, 2, 3, 4]
        

Immutable Objects

JavaScript objects are also mutable by default. To make objects immutable, we can use methods like Object.freeze() or employ libraries such as Immutable.js or Immer. The Object.freeze() method prevents modification of the object’s properties.

Using `Object.freeze()`

          const person = Object.freeze({
  name: 'Alice',
  age: 25
});

person.age = 26; // No effect because the object is frozen
console.log(person.age); // 25
        

Note: Object.freeze() only prevents direct modification of the object's properties. It does not make nested objects immutable. To achieve deep immutability, we need to use additional techniques or libraries like Immutable.js.

Immutable.js for Advanced Data Structures

While JavaScript provides basic immutability tools like Object.freeze(), third-party libraries like Immutable.js offer more advanced features for working with immutable data structures. These libraries provide persistent data structures that are optimized for performance.

Using Immutable.js

          const { Map } = require('immutable'); // Importing Immutable.js Map

const person = Map({
  name: 'Alice',
  age: 25
});

const updatedPerson = person.set('age', 26); // Returns a new Map
console.log(person.get('age'));       // 25
console.log(updatedPerson.get('age')); // 26
        

With Immutable.js, methods like .set(), .update(), and .delete() allow you to modify the state while keeping the original object intact.

Immer for Immutable Updates

Another popular library for immutability is Immer. It allows you to work with mutable-like syntax but applies immutability behind the scenes.

Using Immer

          const produce = require('immer').produce;

let state = {
  name: 'Alice',
  age: 25
};

const nextState = produce(state, draft => {
  draft.age = 26; // Modifies the draft, which Immer converts into an immutable update
});

console.log(state.age);      // 25
console.log(nextState.age);  // 26
        

Immer is an excellent choice for handling complex, deeply nested data structures with ease.

Immutable Data Structures Benefits

1. 1
   Consistency: No side effects or unexpected mutations of data.
2. 2
   History Tracking: It’s easy to track the changes in data since previous versions remain unchanged.
3. 3
   Simplifies Debugging: With immutable structures, bugs caused by data mutation become less frequent.
4. 4
   Concurrency: Immutable data structures work well in multi-threaded environments (like web workers).

Immutability Challenges

1. 1
   Performance Overhead: Copying large data structures instead of modifying them can sometimes cause performance issues.
2. 2
   Learning Curve: It may take time to get used to thinking in terms of immutable data.
3. 3
   Memory Usage: Multiple copies of data can lead to increased memory consumption.

Conclusion

In the next lesson, we’ll apply what we’ve learned by looking at real-world examples and how immutability benefits functional programming.