Functional Programming and Immutability in JavaScript

Copy Link LinkedIn Message Facebook Email X

In this lesson, you'll take a look at the functional style of programming. The functional style of programming often refers to building software with pure functions and having immutable data.

Pure functions are functions that are self-contained. They work with what you give them, but they don't change anything, they give you a new thing.

Pure Functions and Immutable Data

Imagine you are in pre-internet, pre-computer times, and you have a friend who writes articles. They send you an article draft to read over and give some feedback. So you grab another sheet of paper and start writing feedback, but you don't change the original manuscript. This is functional. You treat the original manuscript as immutable, and unchangeable.

If you weren't bothered about being functional, you would just comment on top of the manuscript. This might be fine. It really depends on the context.

Example of Functional Programming

When you are manipulating lists and objects in functional style JavaScript, instead of mutating the lists and objects themselves, you create new versions of the lists or objects.

For example, adding an item to a list with .push() is not functional:

const peopleComingToParty = ['Jeff', 'Janet', 'Joe'];
peopleComingToParty.push('Jane');

It's fine, but if you are being strictly functional you would do something like this:

const peopleComingToParty = ['Jeff', 'Janet', 'Joe'];
const peopleComingToPartyV2 = [...peopleComingToParty, 'Jane'];
peopleComingToPartyV2; // ['Jeff', 'Janet', 'Joe', 'Jane']

The ... spread syntax you will cover shortly. This line just creates a copy of the array with the new value and assigns it to another variable.

It's easy to get caught up in being purely functional but it never works out completely. It's not practical to use 100% pure functions 100% of the time. One of the great strengths of JavaScript is that you can use a combination of paradigms to best suit your needs. Some use cases call for a different paradigm.

Immutability

If something is mutable, it means that it's changeable.

const name = 'nomad';

This is an immutable variable. You can't change it.

name = 'nómada'; // Uncaught TypeError: Assignment to constant variable.

However, in JavaScript, for instance, a const object is still mutable.

const person = {
	name: 'nomad',
	age: '100'
};

person.name = 'nómada'; // Successfully changes name

You may not be able to change the whole object, but the properties within it are still changeable.

So, in JavaScript, if you want to adopt a more functional style, you often have to set up a convention that you won't mutate objects. There are ways to freeze objects, such as Object.freeze(), but there are no perfect solutions. That said, there is a library called Immutable.js that provides immutable data structures if you want to go deeper.

Advantages of Immutability

Immutability is advantageous when you have an object that may need to be referenced by many sources.

To keep immutability, any changes to that object will need to be made on new immutable copies. Therefore, all changes are kept nicely isolated and can be tracked if necessary. This can have many advantageous side effects. For example, if you suddenly needed to implement an "undo" feature, this would make things much easier, because you are always creating a brand new image of the state.

Many say that functional programming simply doesn't have to worry about a whole "class of bugs" that object oriented programming does. This is because you are always creating new versions of data structures instead of altering the originals. If you've got many different parts of your code that make changes to one object, it can be hard to keep track of what's going on. If you are always creating new versions of the object, it can be easier to track down where things went awry.

It is easy to get carried away with being perfectly functional and immutable. As with everything, take the functional style as another tool in your toolbox to use when the time is right.

Summary: What Is Data Immutability in Functional Programming

In this lesson you:

• Remembered pure functions that don't cause side effects.
• Compared functional programming to non-functional by thinking of how you provide feedback on an article without altering the original manuscript.
• Looked at some JavaScript examples where a non-functional .push() mutates an array and a functional approach that creates a new array with spread syntax.
• Realized that while const variables can't be reassigned, the properties of a const object can still be mutated, and that conventions or utilities like Object.freeze() can enforce immutability.
• Learned about some of the benefits of immutability, such as easy tracking of changes and facilitating features like "undo" because new versions of the data are created instead of mutating the original.