ReviseAlgo Logo

Functional Programming

First-Class Functions

Master first-class functions in JavaScript. Learn to assign functions to variables, pass them as arguments, and return them from other functions.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

In JavaScript, functions are First-Class Citizens. This means functions are treated like any other variable: they can be assigned to variables, passed as arguments to other functions, and returned from functions.

2. Why It Matters

First-class functions enable functional programming patterns in JavaScript. Without them, you couldn't use callbacks for asynchronous events (like addEventListener or setTimeout) or pass iterator functions to array methods (like map or filter).

3. Real-World Analogy

Think of a Voucher Coupon Code:

  • First-Class Citizen (The Coupon): A coupon code is physical paper data. You can place it inside a wallet (assign to variable), mail it to a friend as a gift (pass as argument to function), or have a store print and hand you a coupon when you buy items (return function from function). The coupon is handled just like money.

4. First-Class Capabilities

Let's explore the three capabilities of first-class functions:

1. Assign to Variables:

Assign function declarations or anonymous function expressions to variables.

2. Pass as Arguments:

Pass a function as an argument to another function (commonly called a callback function).

3. Return from Functions:

Return a function from another function, creating a closure scope.

5. Practical Example

This script demonstrates using first-class functions to build a dynamic math operations calculator:

6. Common Mistakes

  • Invoking a function when passing it as a callback: Writing executeAction(greet(), 'Bob') executes the function immediately, passing the returned value instead of the function reference itself. Omit the parentheses to pass the function reference.

7. Quick Quiz

Q1: What does it mean for a language to treat functions as 'First-Class Citizens'?

A) Functions must be compiled before execution

B) Functions can be assigned to variables, passed as arguments, and returned from other functions

Answer: B — First-class functions can be manipulated and passed around like any other value, enabling functional programming patterns.

8. Scenario-Based Challenge

The Custom Event Logger Router:

An application tracks event actions. You want to write a function logManager(loggerFunction) that accepts a custom logging function. The returned function accepts a message and passes it to the logger with a timestamp. Write this generator helper.

9. Debugging Exercise

Explain why this setTimeout callback logs NaN, and how to fix it:

function getDouble(x) {
  return x * 2;
}

// Objective: execute calculation after 100ms
// Bug: invoking the callback immediately!
setTimeout(getDouble(5), 100); // logs NaN or error! Why?
View Solution

Diagnosis: The expression getDouble(5) is evaluated immediately, passing the number 10 to setTimeout instead of a function reference. When setTimeout attempts to execute the number 10 as a function, it fails.

Fix: Wrap the function call inside an anonymous function wrapper, or pass the arguments using setTimeout's parameter list:

// Option 1: Anonymous function wrapper
setTimeout(() => console.log(getDouble(5)), 100);


// Option 2: Pass arguments in setTimeout parameter list
setTimeout(console.log, 100, getDouble(5));

10. Interview Questions

🟢 Q1: Explain the difference between First-Class Functions and Higher-Order Functions.

Answer:
• First-Class Functions: A language feature. It means the language treats functions like any other variable (supporting assignment, argument passing, and returns).
• Higher-Order Functions: A programming pattern. A function is higher-order if it accepts a function as an argument, returns a function, or both. First-class functions are what make writing higher-order functions possible.

11. Production Considerations

  • • Avoid Anonymous Callbacks in Loops: Creating anonymous arrow functions inside high-frequency loops (like arr.map(x => ...) inside rendering functions) creates a new function instance on every execution, increasing memory usage. For performance-critical code, define callback functions outside the loop scope.