Anonymous vs closure functions

Written byPhuoc Nguyen

Created

05 Sep, 2023

#Anonymous functions

An anonymous function is simply a function without a name. You define it using the `function` keyword and a set of parentheses and curly braces that contain the function's code. These functions can be assigned to a variable, passed as an argument to another function, or used as a callback function.

// Example of an anonymous function assigned to a variable
let add = function (a, b) {
    return a + b;
};

// Example of an anonymous function
// passed as an argument to another function
const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(function(number) {
    return number > 3;
});

Anonymous functions are useful when you need to define a function that is only used once. They can help to keep your code concise and easy to read. However, they can be difficult to debug because they have no name.

Good practice

To make it easier to debug anonymous functions, it's a good practice to give them a name that reflects their purpose. There is a couple of way to do that.

You can either use descriptive names that reflect the function's purpose. For example, instead of using `function(a, b) {...}`, you could use `function calculateSum(a, b) {...}`.
js
let add = function calculateSum(a, b) {
   return a + b;
};
The other way is to assign the function to a variable or by using the `name` property of the function object. For example:
js
let add = function(a, b) {
   return a + b;
};

add.name = 'calculateSum';
It's also recommended to use `camelCase` naming conventions for consistency with other JavaScript code, and avoid using reserved keywords as function names.

By giving your anonymous function a name, you'll be able to see its name in stack traces and debugging tools.

#Closure functions

A closure function is a special type of function that can access variables in its outer scope, even after the outer function has finished running. This is because the closure function "closes over" the variables in its outer scope, creating a "closure". It's like a little bubble that keeps those variables safe and accessible to the closure function. Pretty cool, right?

JavaScript closure functions have a great benefit: they can create private variables and methods. These private variables and methods are only accessible within the function, which helps to organize code and avoid naming conflicts.

Creating a private variable or method in a closure function is easy. Simply define it within the outer function's scope, and the inner function will have access to it due to the closure that's created.

Here's a cool example: you can create a function that only runs once by defining it inside another function and then immediately invoking it. This can come in handy when you only need to run a function once.

function initialize() {
    let isInitialized = false;

    return function() {
        if (!isInitialized) {
            isInitialized = true;
            console.log('Initializing...');
            // Do something ...
        }
    };
};

let init = initialize();
init();     // Output: "Initializing..."
init();     // Nothing happens

In this example, the `initialize` function returns an anonymous closure function that can access the `isInitialized` variable from its outer scope. The first time the closure function is called with `init()`, it logs `Initializing...` to the console and sets the `isInitialized` variable to `true`, indicating that the initialization task is done.

Any subsequent calls to `init()` will not do anything because the `isInitialized` variable has already been set to `true`. This allows us to ensure that certain code runs only once, even if the closure function is called multiple times. In other words, we can prevent unnecessary repetition of code.

#Using anonymous and closure functions together

Anonymous and closure functions can be combined to create powerful and flexible code in JavaScript. Let's take a look at an example:

function counter() {
    // Private variable
    let count = 0;

    return {
        // Public methods
        increase: function () {
            count++;
            console.log(count);
        },
        decrease: function () {
            count--;
            console.log(count);
        },
    };
};

let myCounter = counter();
myCounter.increase();   // Logs 1
myCounter.increase();   // Logs 2
myCounter.decrease();   // Logs 1

In this example, we define a closure function that creates a private `count` variable and two public methods, `increase` and `decrease`, that operate on it.

The `increase` and `decrease` methods are anonymous functions that have access to the private `count` variable in their outer scope. By defining these methods as anonymous functions within the closure, we can keep our code organized and avoid naming conflicts with other code outside of the closure.

#Conclusion

In JavaScript programming, both anonymous and closure functions are important. Anonymous functions are handy when you need to create a function that's only used once. On the other hand, closure functions are useful when you want to create functions that can access variables in their outer scope.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn