jsb

7/16 lessons44%

First-Class Citizens Functions

In JavaScript, functions are first-class citizens, a concept central to functional programming. Understanding this concept unlocks powerful programming techniques like passing functions as arguments, returning functions from other functions, and storing functions in variables or data structures.

What Does It Mean to Be a First-Class Citizen?

A programming language treats functions as first-class citizens if they can:

  1. 1
    Be assigned to a variable.
  2. 2
    Be passed as an argument to other functions.
  3. 3
    Be returned from other functions.

JavaScript fulfills all these criteria, enabling a functional programming paradigm.

Assigning Functions to Variables

Functions in JavaScript can be treated as values and assigned to variables.

javascript
1
2
3
4
5
6
7
          // Assigning a function to a variable
const greet = function (name) {
  return `Hello, ${name}!`;
};

// Using the function
console.log(greet("Mahmoud")); // Hello, Mahmoud!

Passing Functions as Arguments

You can pass a function as an argument to another function, enabling dynamic behavior.

javascript
1
2
3
4
5
6
7
8
9
          function operate(a, b, operation) {
  return operation(a, b);
}

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

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

Returning Functions from Functions

Functions can return other functions, enabling the creation of customizable and reusable logic.

javascript
1
2
3
4
5
6
7
8
9
10
11
          function createMultiplier(multiplier) {
  return function (num) {
    return num * multiplier;
  };
}

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

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

Benefits of First-Class Functions

  1. 1
    Reusability: Enables modular, reusable code.
  2. 2
    Flexibility: Dynamic behaviors through function arguments and returns.
  3. 3
    Foundation for Functional Programming: Essential for techniques like higher-order functions and function composition.

Use Cases of First-Class Functions

Callbacks in Asynchronous Code

javascript
1
          setTimeout(() => console.log("Time's up!"), 1000);

Event Listeners

javascript
1
2
3
          document.querySelector("#btn").addEventListener("click", () => {
  console.log("Button clicked!");
});

Array Methods

javascript
1
2
3
          const numbers = [1, 2, 3];
const squared = numbers.map((num) => num * num);
console.log(squared); // [1, 4, 9]