Pure Functions in JavaScript. Why should we know about them as early as possible?

Pure Functions in JavaScript. Why should we know about them as early as possible?

Threads
  • Good news to start the day. GitHub has just widely announced GitHub Models to everyone. If you remember, more than 2 months ago, GitHub had a trial program for using LLMs models, and in my case, it took a month to get approved for use. Now, they have given everyone with a GitHub account access, no registration needed anymore 🥳

    GitHub Models is currently a lifesaver for me while building this blog 😆

    GitHub Models is now available in public preview | Github Blog

    » Read more
  • I came across a repository that uses Tauri and Svelte to rewrite an application like the Task Manager on Windows or the Monitor on Mac. I was curious, so I downloaded it and was surprised to find that the app is only a few MB in size and loads quickly. The app itself is also very smooth

    » Read more
  • I've noticed that whenever I'm enthusiastic about reading, I tend to be lazy about writing. This week, I'm reading three books at the same time, or rather, two and listening to one.

    The most haunting book so far is 'The Black Ocean' - a collection of 12 stories about people struggling with depression. I have a strong mental fortitude, but after reading just two stories, I felt suffocated and restless.

    The next story brought some relief, as the protagonist managed to control their emotions. However, as I continued reading, I felt like I was being choked again. It's terrifying, and I couldn't close my eyes while listening.

    One sentence that particularly resonated with me is when the parents of someone struggling with depression ask why they're like that, and the person responds, 'How am I supposed to know? It's like asking someone why they're sick. Nobody wants to be like that!'

    » Read more

Problem

I'm 26 years old this year, and I've been maintaining a few projects. Sometimes I come across cases where some of my teammates do things like this:

function convertBirthdayToAges(person) {
  const year = new Date().getFullYear(); // 2021
  return person.map(p => p.age = year - p.year);
}
...  
const persons = [{name: 'Nguyễn Văn A', year: 2000}];
convertBirthdayToAges(persons);
console.log(persons); // [{name: 'Nguyễn Văn A', year: 2000, age: 21}]

At first glance, the above function seems normal, but if you notice, after persons goes through the convertBirthdayToAges function, it is attached with an additional attribute age.

Or another example like this:

let year = 2020;
function afterManyYear(num) {
  return year + num;
}
afterManyYear(5) // 2025;

....  

year = 2025;
afterManyYear(5) // 2030;

In the example above, initially when calling afterManyYear(5), the result is 2025, but later, when year is changed to 2025, afterManyYear(5) now returns 2030.

This may seem normal, but imagine in a maintenance phase where you don't know where year was changed, it can be a disaster. You may argue why not declare year with const: const year = 2020;? Well, I think when they chose to declare with let, they already had it in mind that year could be changed at any time.

If you are someone who regularly does these things and see the inconvenience they bring, then it's time for you to know about the concept of Pure Functions.

What is a Pure Function?

Pure function is exactly what its name suggests: "Pure function".

It is a JS function that satisfies two conditions:

  • The same inputs always return the same outputs.
  • No side-effects.

The same inputs always return the same outputs

Pretty straightforward. For example:

function add(x, y) {
  return x + y;
}
add(1, 2); // 3
add(1, 2); // 3

For each pair of x,y passed in, the return value never changes.

This function won't satisfy:

let x = 1;
function add(y) {
  return x + y;
}
add(1); // 2
x = 2;
add(1); // 3

When a function guarantees this condition, understanding and debugging become much easier.

No side-effects

Side-effects are the "effects" that come along with a function, such as:

  • Changing the value of an input.
  • console.log
  • HTTP calls (fetch/AJAX).
  • Changing a file (fs).
  • Querying the DOM.
  • ...

In general, besides the things listed above, side-effects also include any tasks within a function that are unrelated to the final computation result.

In the example in the opening part, we saw that convertBirthdayToAges modified the value of the input persons. If by any chance, persons loses one of its attributes, then it becomes a hassle.

To solve this issue, instead of directly modifying persons, let's return a new object:

function convertBirthdayToAges(person) {
  const year = new Date().getFullYear();
  return [...person.map(p => p.age = year - p.year)];
}

const persons = [{name: 'Nguyễn Văn A', year: 2000}];
const newPersons = convertBirthdayToAges(persons);
console.log(persons); // [{name: 'Nguyễn Văn A', year: 2000}];

In the above example, I used the spread syntax (...) to create a new array object. Note that it can only create a "shallow" copy of an object. To create a "deep" copy, I recommend using the clone package available on npm.

An application cannot be without side effects

That's right, your application cannot function without including the "effects" listed above, except for extremely simple ones. They cannot function without reading/writing to a database or selecting an element in the DOM. But the important thing is to minimize as much as possible or structure independent side-effect code segments.

For example, an update data function:

// In this example, Person is a sequelize model

// This update function is the only one that directly has side-effects
function update(payload) {
  return Person.update(payload);
}

function updatePerson(body) {
  const name = body.name.trim();
  const year = +body.year;
  return update({ name, year });
}

Summary

Pure functions are not a new concept, but the benefits they bring during the development and maintenance of a product are extremely valuable based on my working experience.

Through the examples above, I hope you realize the benefits of applying pure functions to current and future projects. A slight change in expression can bring many benefits in maintaining code later on.

or
* The summary newsletter is sent every 1-2 weeks, cancel anytime.
Author

Hello, my name is Hoai - a developer who tells stories through writing ✍️ and creating products 🚀. With many years of programming experience, I have contributed to various products that bring value to users at my workplace as well as to myself. My hobbies include reading, writing, and researching... I created this blog with the mission of delivering quality articles to the readers of 2coffee.dev.Follow me through these channels LinkedIn, Facebook, Instagram, Telegram.

Did you find this article helpful?
NoYes

Comments (1)

Leave a comment...
Avatar
Trịnh Cường3 years ago
Bài viết rất hay và bổ ích. cảm ơn bạn rất nhiều vì đã chia sẻ. hóng những bài viết mới của bạn. Chúc blog ngày càng lớn mạnh. tặng bạn 1 share
Reply
Avatar
Xuân Hoài Tống3 years ago
Nhớ ghé blog của mình để đọc những bài mới hơn nhé bạn.