JavaScript functional goodness

Using some functional principals and using immutable data can really make your JavaScript a lot better and easier to test. While using immutable data in JavaScript seems like something really complex it turns out is really isn’t that hard to get started with if you are already using Babel. And while libraries like Immutable.js are highly recommended we can start even simpler.

Babel does a lot of things for you as it lets you use all sorts of next generation JavaScript, or ECMAScript 2015 to be more correct. And it is quite easy to use whatever your build pipeline is or even as a standalone transpiler if you are not using a build pipeline yet.

When you want to use immutable data the functional array functions map() and filter() as well as spread properties are really useful. Here are a few examples to get you started.

Changing a property on an object

var originalPerson = {
  firstName: 'Maurice',
  lastName: ''
};

var newPerson = {
  ...originalPerson,
  lastName: 'de Beijer'
};

console.log(newPerson);

The …originalPerson is using the spread properties which expands all properties. The lastName: ‘de Beijer’ comes after it so it overrules the lastName from the originalPerson object. And the result is a new object.

{
  firstName: "Maurice",
  lastName: "de Beijer"
}

Simple and easy. And as we are never changing objects we can replace the var keyword with the new const keyword to indicate variables are never reassigned.

const originalPerson = {
  firstName: 'Maurice',
  lastName: ''
};

const newPerson = {
  ...originalPerson,
  lastName: 'de Beijer'
};

console.log(newPerson);

Adding something to an array

Usually when adding something to an array either an assignment or a push() function is used. But both just mutate the existing array instead of creating a new one. And with the pure functional approach we do not want to modify the existing array but create a new one instead. Again really simple using spread properties.

const originalPeople = [{
  firstName: 'Maurice'
}];

const newPeople = [
  ...originalPeople,
  {firstName: 'Jack'}
];

console.log(newPeople);

In this case we end up with a new array with two objects:

[{
  firstName: "Maurice"
}, {
  firstName: "Jack"
}]

Removing something from an array

Deleting from an array is just as simple using the array filter() function.

const originalPeople = [{
  firstName: 'Maurice'
},  {
  firstName: 'Jack'
}];

const newPeople = originalPeople.filter(p => p.firstName !== 'Jack');

console.log(newPeople);

And we end up with an array with just a single person.

[{
  firstName: 'Maurice'
}]

Updating an existing item in an array

Changing an existing items is just as easy when we combine spread properties with the array map() function.

const originalPeople = [{
  firstName: 'Maurice'
},  {
  firstName: 'Jack'
}];

const newPeople = originalPeople.map(p => {
  if (p.firstName !== 'Jack') {
    return p;
  }
  
  return {
    ...p,
    firstName: 'Bill'
  };
});

console.log(newPeople);

And that is all it takes to change Jack to Bill.

[{
  firstName: "Maurice"
}, {
  firstName: "Bill"
}]

Really nice and easy and it makes for very easy to read code once you are familiar with the new spread properties.