Don’t write an anonymous function in JavaScript

This is a warning for you that never try to write an anonymous function on JavaScript!

A featured image

Basically the “Anonymous” we know it properly, like someone we don’t know the exact information about who they are? where’s them? and so on. In this article, we will try to explain the relation of the “Anonymous” term in JavaScript.

Mostly we work with JavaSript day-by-day cannot be separated from writing “function” either we just do a sum like a + b + cor handle something like a side-effect. Basically, there’s no exact pattern that “hey, you should write your function like this” there’s not, but JavaScript served some type that we can follow, such as:

1. Function as declaration
2. Function as expression
3. Function as constructor

In this article, we will not try to understand the meaning of each type above, it depends on us which type fits on our team or make use comfortable to write it on, but we try bold the term “Anonymous” in JavaScript, for example

(function () {
  throw new Error("here");
})();

Aforecode, we use IIFE (Immediately Invoked Function Expression) it tells the browser to run this as soon as possible, and when we try to open the console on the browser we gonna see this

Imagine that our code is large and has 1001 functions that must be executed and then there is an unwanted error in the function no 900th, because we wrote the function anonymously so we don’t know what the name of the function is and where the error is.

This will be difficult for us to debug. This is what I said that anonymous functions can even be an enemy during development even when we wrote that function by ourself maybe in the back time.

Mostly we will have this question on our mind, what that function means? when that function has been executed? where that function we place it on our repository? perhaps this question will rarely comes up if we just build by ourself (freelance) but, let say we coming from a big team? and then another member try to fix that problem, it will much took their time to find the root cause of the error.

But, its a different story if we try give the name of our function something like this

(function thisIsOurFunction() {
  throw new Error("oops");
})();

Then, if we try to take a look on the console browser

Aforeimage, we see that error also print our function name which is thisIsOurfunction that indicates where we can fix that error.

Is this just applied on React, Vue, Angular or Svelte only? No, this is the agnostic approach that we must applied it on our code to make sure if there’s something hiccup on the production, we can trace it easily even for ourself on other members that trying to fix that bug.

If your project/repo coming with the ESLint config you can try to install this plugins eslint-plugin-import/no-anonymous it can make us easy to detect it while we writing our code.