LinkedIn Hook

In most languages, a function is a special thing — a block of code you call by name. In JavaScript, a function is just a value.

That single design choice is why array.map(fn), Redux reducers, Express middleware, and React hooks exist. Functions in JavaScript can be assigned to variables, passed as arguments, returned from other functions, and stored in arrays and objects — exactly like numbers, strings, or booleans.

This is what "first-class citizen" really means: a function has the same rights as any other value.

In this lesson you'll see four concrete proofs that functions are first-class — assignment, passing, returning, and storing — and why this property is the foundation for every callback, HOF, and functional pattern in JS.

If you've ever wondered why setTimeout(doWork, 100) works without parentheses after doWork, this lesson explains it.

Read the full lesson -> [link]

#JavaScript #InterviewPrep #FirstClassFunctions #Functions #Frontend #CodingInterview #WebDevelopment

First-Class Functions thumbnail

What You'll Learn

What "first-class citizen" means for functions in JavaScript
The four things you can do with a function that prove it's first-class
Why this property is the foundation of callbacks, HOFs, and functional patterns

Functions Are Values

In JavaScript, functions are first-class citizens. This means functions are treated exactly like any other value — like a number, a string, or an object. You can assign them to variables, pass them as arguments, return them from other functions, and store them in data structures.

Think of it like this: in a democracy, every citizen has the same rights. A first-class citizen can go anywhere, do anything any other citizen can. In JavaScript, functions have the same "rights" as numbers and strings — they can be stored, passed around, and returned.

Proof 1: Assign a Function to a Variable

// Function expression — assigned to a variable
const greet = function(name) {
  return "Hello, " + name;
};

console.log(greet("Rakibul")); // "Hello, Rakibul"
console.log(typeof greet);      // "function"

// You can reassign it like any variable
let operation = function(a, b) { return a + b; };
console.log(operation(2, 3)); // 5

operation = function(a, b) { return a * b; };
console.log(operation(2, 3)); // 6

Proof 2: Pass a Function as an Argument

function executeOperation(fn, a, b) {
  return fn(a, b);
}

const add = (x, y) => x + y;
const multiply = (x, y) => x * y;

console.log(executeOperation(add, 5, 3));      // 8
console.log(executeOperation(multiply, 5, 3));  // 15

// The function itself is the argument — not the result of calling it

Proof 3: Return a Function from Another Function

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

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

console.log(double(5));  // 10
console.log(triple(5));  // 15

// double and triple are functions created by another function
console.log(typeof double); // "function"

Proof 4: Store Functions in an Array / Object

// Functions in an array
const operations = [
  (a, b) => a + b,
  (a, b) => a - b,
  (a, b) => a * b,
  (a, b) => a / b
];

console.log(operations[0](10, 5)); // 15 (add)
console.log(operations[2](10, 5)); // 50 (multiply)

// Functions in an object (strategy pattern)
const strategies = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b
};

const action = "multiply";
console.log(strategies[action](4, 5)); // 20

First-Class Functions visual 1

Common Mistakes

Calling the function instead of passing it: setTimeout(doWork(), 100) runs doWork immediately and passes its return value. You almost always want setTimeout(doWork, 100) — pass the function reference, not the result of calling it.
Assuming function declarations and function expressions behave identically — declarations are hoisted with their body, expressions are not (the variable is hoisted as undefined until the assignment line runs).
Forgetting that functions are also objects — you can add properties like myFn.version = "1.0" and they stick, which is occasionally useful for metadata or caching.

Interview Questions

Q: What does "first-class function" mean in JavaScript?

It means functions are treated as values. They can be assigned to variables, passed as arguments to other functions, returned from functions, and stored in data structures like arrays and objects — just like any other value (number, string, object).

Q: What is the difference between a function declaration and a function expression?

A function declaration (function foo() {}) is hoisted — you can call it before the line it's defined on. A function expression (const foo = function() {}) is NOT hoisted as a function — the variable is hoisted but initialized to undefined until the assignment line is reached.

Q: If functions are objects in JavaScript, can they have properties?

Yes. Functions are objects. You can add properties to them: myFn.version = "1.0". Every function already has built-in properties like .name, .length (number of expected parameters), and .prototype.

Q: Can you store a function in an array? In an object?

Yes to both. Arrays can hold functions like any value ([(a,b) => a+b, (a,b) => a-b]), and objects can use them as method values — this is the foundation of the strategy pattern (strategies[action](x, y)).

Q: What property tells you how many parameters a function expects?

.length — it returns the number of declared parameters before the first default value or rest parameter. For example, ((a, b, c) => {}).length === 3.

Quick Reference — Cheat Sheet

FIRST-CLASS FUNCTIONS — QUICK MAP

Definition:
  A function is a VALUE — same rights as numbers, strings, objects.

The 4 Proofs:
  1. ASSIGN    const fn = function() {}
  2. PASS      arr.map(fn)           // note: no parens on fn
  3. RETURN    return function() {}
  4. STORE     [fn1, fn2]   or   { action: fn1 }

Function is also an Object:
  fn.name      -> declared name
  fn.length    -> # of declared params
  fn.prototype -> prototype object
  fn.custom    -> you can attach anything

Declaration vs Expression:
  function foo() {}          // hoisted with body
  const foo = function() {}  // variable hoisted as undefined

Previous: instanceof & typeof Next: Higher-Order Functions -> Functions That Manage Functions

This is Lesson 6.1 of the JavaScript Interview Prep Course — 14 chapters, 87 lessons.

First-Class Functions