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?

Daily short news for you
  • For over a week now, I haven't posted anything, not because I have nothing to write about, but because I'm looking for ways to distribute more valuable content in this rapidly exploding AI era.

    As I shared earlier this year, the number of visitors to my blog is gradually declining. When I looked at the statistics, the number of users in the first six months of 2025 has dropped by 30% compared to the same period last year, and by 15% compared to the last six months of 2024. This indicates a reality that users are gradually leaving. What is the reason for this?

    I think the biggest reason is that user habits have changed. They primarily discover the blog through search engines, with Google being the largest. Almost half of the users return to the blog without going through the search step. This is a positive signal, but it's still not enough to increase the number of new users. Not to mention that now, Google has launched the AI Search Labs feature, which means AI displays summarized content when users search, further reducing the likelihood of users accessing the website. Interestingly, when Search Labs was introduced, English articles have taken over the rankings for the most accessed content.

    My articles are usually very long, sometimes reaching up to 2000 words. Writing such an article takes a lot of time. It's normal for many articles to go unread. I know and accept this because not everyone encounters the issues being discussed. For me, writing is a way to cultivate patience and thoughtfulness. Being able to help someone through my writing is a wonderful thing.

    Therefore, I am thinking of focusing on shorter and medium-length content to be able to write more. Long content will only be used when I want to write in detail or delve deeply into a particular topic. So, I am looking for ways to redesign the blog. Everyone, please stay tuned! 😄

    » Read more
  • CloudFlare has introduced the pay per crawl feature to charge for each time AI "crawls" data from your website. What does that mean 🤔?

    The purpose of SEO is to help search engines see the website. When users search for relevant content, your website appears in the search results. This is almost a win-win situation where Google helps more people discover your site, and in return, Google gets more users.

    Now, the game with AI Agents is different. AI Agents have to actively seek out information sources and conveniently "crawl" your data, then mix it up or do something with it that we can't even know. So this is almost a game that benefits only one side 🤔!?

    CloudFlare's move is to make AI Agents pay for each time they retrieve data from your website. If they don’t pay, then I won’t let them read my data. Something like that. Let’s wait a bit longer and see 🤓.

    » Read more
  • Continuing to update on the lawsuit between the Deno group and Oracle over the name JavaScript: It seems that Deno is at a disadvantage as the court has dismissed the Deno group's complaint. However, in August, they (Oracle) must be held accountable for each reason, acknowledging or denying the allegations presented by the Deno group in the lawsuit.

    JavaScript™ Trademark Update

    » 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.

Premium
Hello

5 profound lessons

Every product comes with stories. The success of others is an inspiration for many to follow. 5 lessons learned have changed me forever. How about you? Click now!

Every product comes with stories. The success of others is an inspiration for many to follow. 5 lessons learned have changed me forever. How about you? Click now!

View all

Subscribe to receive new article notifications

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

Comments (1)

Leave a comment...
Avatar
Trịnh Cường4 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ống4 years ago

Nhớ ghé blog của mình để đọc những bài mới hơn nhé bạn.