DEV Community: Michał Brzoza

Functional JavaScript in 3 minutes: Is this function pure? Quick checklist ✅

Michał Brzoza — Thu, 08 Feb 2024 17:50:08 +0000

Remember functions from math class?

For every x, there is a corresponding y.

FP paradigm is based on this idea of treating functions as mathematical functions.

Functions should:

consistently produces the same output for a given input
does not cause observable side effects.

Everything that is not a function is a procedure.

Programming is not math. But certainly, we can take advantage of math in programming. There are many benefits of doing so, such as:

Easier to reason about
Easier to test
Easier to debug

The whys are a separate discussion. But for now, let's focus on what the headline of this article promised - the pure functions.

Pure Function

Always has output, for every input.

Check out the code below: What if the input is null or undefined? Or it's anything other than 'sunny,' 'rainy', or 'snowy'?

❌

function getWeatherIcon(weather) {
  if (weather === 'sunny') {
    return '🌞';
  } else if (weather === 'rainy') {
    return '🌧';
  } else if (weather === 'snowy') {
    return '⛄';
  }
}

Below, we added a fallback. Now, we have an output for every input.

✅

function getWeatherIcon(weather) {
  if (weather === 'sunny') {
    return '🌞';
  } else if (weather === 'rainy') {
    return '🌧';
  } else if (weather === 'snowy') {
    return '⛄';
  } else {
    return '🤷'; // fallback 
  }
}

What about narrowing the range with TypeScript?

function getWeatherIcon(weather: 'sunny' | 'rainy' | 'snowy') {
  if (weather === 'sunny') {
    return '🌞';
  } else if (weather === 'rainy') {
    return '🌧';
  } else if (weather === 'snowy') {
    return '⛄';
  }
}

This function is pure - you are not allowed to pass anything other than 'sunny', 'rainy' or 'snowy' ✅

Of course, technically speaking, TypeScript is just a linter, and we are all going to hell for doing FP in JS, but this solution is good enough. This is a contract for developers, making it clear what the function can accept and what it returns.

The output is always the same for the same input.

Pure function - same input, same output:

✅

function add(a, b) {  
  return a + b;
}

Impure function - same input, different output:

❌

function getRandomEmojii(emojis) { 
  return emojis[Math.floor(Math.random() * emojis.length)];
}

getRandomEmojii(['🌞', '🌧', '⛄']);

No side effects

What is a side effect? Any change in the system that is observable to the outside world, such as:

Modifying shared state (such as global variables, variables in parent functions scope)

❌

let post = {
  title: 'Pure functions are awesome!',
  comments: [],
};

function addComment() {
  post.comments.push('Great post!');
}

addComment(post);

addComment(post) is impure call - it modifies the outside world - global variable post

❌

function addComment(post, comment) {
  post.comments.push(comment);
}

addComment(post);

Still impure - comments.push() modifies the input object

What can we do about it?

✅

function addComment({post, comment}: CommentDTO) {
  return {
    ...post,
    comments: [...post.comments, comment],
  } 
}

Now, we are not modifying the input, we create a new copy of an object with the new copy of comments array. ✅

Making a network request:

❌

function createComment({title, body, author}: Comment) {
  return someAjax('https://api/comments', {
    method: 'POST',
    body: JSON.stringify({title, body, author})
  });
}

As side effects are not avoidable in real-world applications, the way we often deal with that is by isolating pure and impure parts of the code.
For instance, instead of calling someAjax directly, we could return a function that will eventually make a network request:

✅

function createComment({title, body, author}: Comment) {
  return () => someAjax('https://api/comments', {
    method: 'POST',
    body: JSON.stringify({title, body, author})
  });
}

const createCommentRequest = createComment({
  title: '...', body: '...', author: '...'
});
// no side effects yet

By doing so, we can handle all side effects in one place, in a controlled way, and keep the rest of the code pure. ✅

Those were some examples of side effects, but there are many more. The point is, pure function should not alter, rely on, or interfere with anything outside of itself, in a way that is observable to the outside.

What it should do is reliably produce the same output for the same input, every time.

TLDR, is this function pure?

Always has an output for every input. ✅
The output is always the same for the same input. ✅
Does not alter/rely on the outside world ✅

4 New Copying Array Methods That Come in Handy in React

Michał Brzoza — Wed, 07 Feb 2024 17:00:04 +0000

Arrays in JavaScript are either copying or mutating. This means that when you use a method on an array, it returns a new array or changes the original one.

Some codebases prefer to work with immutable data. For instance, in React applications, if you use useState with array

const [fruits, setFruits] = useState(['banana', 'apple', 'orange']);

You should never change the state arrays (and objects) directly; instead, create a new array and then set it with the setter function.

setFruits(fruits.sort()); // ❌

setFruits([...fruits].sort()); // ✅

That's when copying methods come in handy. They don't change the original array but instead return a new one - so you don't have to copy it manually with the spread operator ....

One important caveat is that these methods only create a shallow array copy. So, if you have, for example, an array of arrays, you should still be careful to not mutate the inner arrays.

ECMAScript 2023 release introduces four new copying array methods that allow data manipulation while preserving the original arrays. This update makes life easier for developers who adhere to functional programming principles in their codebases.

toSorted(), toReversed(), toSpliced(), and with() — Let's dive into how these methods compare with their traditional counterparts.

1. Array.prototype.toSorted() vs. Array.prototype.sort()

The traditional sort() method sorts an array in place, changing the original array.

let animals = ['tiger', 'zebra', 'elephant', 'cat'];
animals.sort();
animals // ['cat', 'elephant', 'tiger', 'zebra']

In contrast, toSorted() creates a new sorted array

let animals = ['tiger', 'zebra', 'elephant', 'cat'];
let sortedAnimals = animals.toSorted();
sortedAnimals // ['cat', 'elephant', 'tiger', 'zebra']
animals // ['tiger', 'zebra', 'elephant', 'cat']

2. Array.prototype.toReversed() vs. Array.prototype.reverse()

While reverse() modifies the original array

let animals = ['tiger', 'zebra', 'elephant', 'cat'];
animals.reverse();
animals // ['cat', 'elephant', 'zebra', 'tiger']

toReversed() returns a new array that is the reverse of the original

let animals = ['tiger', 'zebra', 'elephant', 'cat'];
let reversedAnimals = animals.toReversed();
reversedAnimals // ['cat', 'elephant', 'zebra', 'tiger']
animals // ['tiger', 'zebra', 'elephant', 'cat'];

3. Array.prototype.toSpliced() vs. Array.prototype.splice()

splice() changes the array by removing or replacing existing elements and/or adding new ones.

let animals = ['tiger', 'zebra', 'elephant', 'cat'];
animals.splice(1, 2, 'monkey', 'giraffe');
animals // ['tiger', 'monkey', 'giraffe', 'cat']

toSpliced() is the copying version of splice()

let animals = ['tiger', 'zebra', 'elephant', 'cat'];
let splicedAnimals = animals.toSpliced(1, 2, 'monkey', 'giraffe');
splicedAnimals // ['tiger', 'monkey', 'giraffe', 'cat']
animals // ['tiger', 'zebra', 'elephant', 'cat']

4. Direct assignment vs. Array.prototype.with()

let animals = ['tiger', 'zebra', 'elephant', 'cat'];
animals[2] = 'lion';
animals // ['tiger', 'zebra', 'lion', 'cat']

Unlike a direct assignment, with() produces a new array with the specified change.

let animals = ['tiger', 'zebra', 'elephant', 'cat'];
let newAnimals = animals.with(2, 'lion');
newAnimals // ['tiger', 'zebra', 'lion', 'cat']
animals // ['tiger', 'zebra', 'elephant', 'cat']

live code

These methods are nice improvements that make it easier to work with immutable data 🎉

As a wrap up, here's joke, cuz why not?

My wife asked me the other day: "Are you even listening to me?"

Which is a really weird way to start a conversation if you ask me.