JavaScript Functions Explained: Named vs. Anonymous vs. Arrow

Introduction

William Shakespeare once said, “What’s in a name?” but as a developer, we can disagree. We have to name variables, classes, functions, constructors, and others. Managing all the names and their scope within the code can be hectic and can create further complexity. Naming a function can be solved with the anonymous function in JavaScript (other languages also have this feature). Anonymous means an entity having no name or identity. The anonymous function is a function that has no name and can be executed immediately after being defined. In this article, we are going to look into the following topics:

• Named function
• Anonymous function
• Arrow function
• And their examples

So, let’s get started.

What is a Named Function?

Before getting to the Anonymous function, let’s discuss the Named function. Named functions are general functions that have a name. As you might know, functions are blocks of code that are used to perform a particular task.

Syntax of a Named function in Javascript

A named function is declared with the keyword function followed by the name of the function. The name is followed by a pair of parentheses and then a pair of curly brackets. Within the curly brackets, we define the code. These functions can be invoked with the use of the function's name.

function myFunction() {
    console.log('It’s a Named Function');
}

myFunction();

Benefits of Named Function

• A named function can be reusable.
• It can make code more readable as it has a clear separation between the function definition and its invocation.
• In case of an error, the call stack will include the name of the function, making it easier to debug.
• You can invoke a named function before you define it. When interpreting the code, JavaScript moves function declarations to the top. This is called Hoisting.

Drawbacks of Named Function

• Managing many different names for functions, variables, and components can become difficult in a large codebase.

What is an Anonymous Function?

Solving the problem of naming, the Anonymous function came into existence. As the name suggests, an anonymous function does not have a name.

function () {
    // Code
}

We start with the function keyword, followed by parentheses and curly brackets. Notice there is no name between the function keyword and the parentheses. This is the basic syntax of an anonymous function in JavaScript.

Implementation of an Anonymous Function in JavaScript

An anonymous function cannot be accessed after its creation unless it is stored in a variable. These are often referred to as "function expressions." It's a common practice to use const for the variable assignment.

const myFunction = function () {
    console.log('Hello World!');
};

myFunction();

You can also pass arguments to an Anonymous function. Here is an example:

const myFunction = function(str) {
    console.log(str);
};

myFunction("Hello World!");

Use of Anonymous Function in JavaScript

As we have seen the syntax and implementation, it’s time to learn about some common use cases.

a. Using anonymous functions as arguments for other functions JavaScript is a language with first-class functions, which means functions can be treated like any other variable, including being passed as arguments to other functions. Instead of declaring a named function and passing its name:

function myCallback(){
    console.log('5 seconds have passed');
}

setTimeout(myCallback, 5000);

You can pass the function directly as an argument without a name. This is useful for functions that are only used once.

setTimeout(function() {
    console.log('1 second has passed');
}, 1000);

This makes our code cleaner as one-time-use functions are defined right where they are used.

b. Immediately Invoked Function Execution (IIFE) An anonymous function can be declared and immediately invoked. This is a common pattern to create a local scope for variables to avoid polluting the global scope.

(function(){
    console.log('Hello World!');
})();

In the above example, the anonymous function is wrapped in parentheses, and then immediately invoked with another pair of parentheses (). You can also pass arguments into an IIFE.

const firstName = "John";
const lastName = "Doe";

(function(fName, lName){
    console.log(fName, lName);
})(firstName, lastName);

What is an Arrow Function?

The Arrow function was introduced in ES6 to provide a more concise syntax for writing function expressions. This function is also anonymous but has a different syntax. The syntax is simple: a pair of parentheses for arguments (), followed by a "fat arrow" =>. After that, you can define the code. For a single expression, you can omit the curly brackets {}, and the expression will be implicitly returned. For multiple statements, you must use curly brackets.

The difference between an Arrow function and an Anonymous function

An arrow function can be defined on a single line, making it more concise.

// Anonymous Function
const myFunction = function () {
    // Code
}

// Arrow Function (single line)
const myArrowFunction = () => (/* Code */);

Example of an Arrow Function

Arrow functions can be stored in a variable, just like anonymous functions.

const myFunction = () => console.log("Arrow Functions are awesome");

myFunction();

Like anonymous functions, arrow functions are excellent for use as arguments in other functions.

setTimeout(() => console.log('5 seconds have passed'), 5000);

We can also pass arguments to an arrow function.

const printName = (firstName, lastName) => console.log(firstName, lastName);

printName('John', 'Doe');

Conclusion

We have come so far, from Named functions to Anonymous Functions to Arrow Functions. All these types of functions have a variety of use cases in certain conditions. We have discussed many examples with arguments and the benefits of using these functions. All the function types are useful. I hope this article has helped you in deciding which function to use according to different scenarios. Thanks for reading!