Why do you need to invoke an anonymous function on the same line?

javascript

function-expression

iife

first-class-citizenship

byAlex Kataev·Jan 3, 2025

The crux is that (function() {})(), also known as IIFE, encapsulates variables and functions, shielding them from the global scope.

// Anonymous function, do you copy? 
(function() {
    let secret = 'It\'s chilly in here!'; // Passing message
    console.log(secret); // 'It's chilly in here!'
})(); 
// Houston, we have a problem - 'secret' is lost in space.

This technique prevents global scope pollution, a somewhat messy problem, ensuring your code is safe and readable. So, short answer: self-preservation.

The Art of Function

You need to grasp the difference between JavaScript's way of declaring and expressing a function. Function declarations are hoisted, but function expressions are not. When you wrap a function in parentheses (), it becomes the anonymous function, ready-to-launch.

// Not just looking good but executing immediately as well.
(function(message) {
    console.log(message);
})('Message delivered!');

Remember to append a semicolon at the end to prevent our code from crashing unexpectedly.

No Namespace Left Behind

Ensuring your code is feasible and maintainable is essential. IIFE provides encapsulation and prevents dreaded variable collisions.

Secret Agent Closure

Closures store their private state, and they're closure-r than you think.

const secretAgent = (function() {
    let secretCounter = 0;
    const twinkle = val => secretCounter += val; 
    return {
        up: () => twinkle(1),
        down: () => twinkle(-1),
        status: () => secretCounter
   };   
})();

// secretAgent.status() is indecipherable.

Anonymous: The Unseen Hero

Anonymous functions are often used as arguments when you don't intend to reuse that function elsewhere. Less repetition, more action!

Temporal Dead Zone and Liftoff!

IIFEs simulate block-like scope in JavaScript: a caring guardian before let and const came to the rescue in ES6.

A Galaxy of Patterns

Function Species: A Field Guide

Different types of functions inhabit the JavaScript universe: function constructors, declarations, and expressions. Each has a unique syntax, invocation pattern, and scope.

// Function constructor
var hello = new Function('console.log("Hello, Jupiter!")');

// Function declaration
function hello() {
    console.log('Hello, Mars!');
}

// Function expression
var hello = function() {
    console.log('Hello, Venus!');
};

First-Class Space Travel

In JavaScript, functions enjoy the privilege of first-class citizenship—they can be assigned as variables and passed as arguments, enabling a functional programming style.