JavaScript Functions are First-Class Functions

In JavaScript, the statement that “Functions are First-Class Citizens” (or First-Class Functions) is the cornerstone of the language’s functional programming capabilities. This means that functions are treated like any other variable: they have a type (Object), they can be passed around, and they can be manipulated at runtime.

The “First-Class” designation is not merely a title; it refers to four specific functional behaviors that distinguish JavaScript from languages where functions are rigid, static blocks of code.

1. Defining “First-Class” behavior

To be considered first-class, a language entity must support several key operations. In JavaScript, functions fulfill all of these criteria:

A. Functions as Variables (Assignment)

Just as you can assign a number or a string to a variable, you can assign a function to a variable. In this context, the function is often referred to as a Function Expression.

// Assigning a function to a variable
const greet = function(name) {
  return `Hello, ${name}`;
};

console.log(greet("Gemini"));

Because functions are assigned to variables, they follow the same scoping and hoisting rules as let, const, and var. This allows for dynamic “plug-and-play” logic where a variable might hold one function at the start of a program and a different one later.

B. Functions as Arguments (Callbacks)

A first-class function can be passed as an argument to another function. This is the mechanism behind Callbacks, which are essential for asynchronous programming (like fetch requests) and array methods (like .map() or .filter()).

function processInput(input, callback) {
  const result = input.toUpperCase();
  return callback(result);
}

const display = (msg) => `Result: ${msg}`;

// Passing 'display' function as an argument
console.log(processInput("hello", display));

In this scenario, processInput is a Higher-Order Function because it accepts another function as a parameter. This allows developers to write highly generic code that delegates specific behavior to the caller.

C. Functions as Return Values

A function can return another function as its output. This capability enables Closures and Functional Composition. When a function returns another function, the inner function maintains access to the outer function’s scope, even after the outer function has finished executing.

function createMultiplier(multiplier) {
  // Returns a new function
  return function(number) {
    return number * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(10)); // 20
console.log(triple(10)); // 30

This pattern is widely used in “Factory Functions” and “Currying,” where you partially configure a function and receive a more specialized version in return.

D. Functions as Objects

In JavaScript, functions are technically specialized objects (specifically Function objects). They can have their own properties and methods.

function sayHi() {
  console.log("Hi");
}

sayHi.counter = 0; // Adding a custom property to a function
console.log(sayHi.name); // Internal property: "sayHi"

setTimeout(() => {
  console.log("Executed after 2 seconds");
}, 2000);

function counter() {
  let count = 0; // "Private" variable
  return () => ++count;
}

const myCounter = counter();
myCounter(); // 1
myCounter(); // 2

function createCounter() {
  let count = 0; // Private variable
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
// 'count' cannot be accessed from the outside; it is protected.

const trim = s => s.trim();
const capitalize = s => s.toUpperCase();
const exclaim = s => `${s}!`;

// Composing the functions
const transform = (s) => exclaim(capitalize(trim(s)));

console.log(transform("  hello  ")); // "HELLO!"