Functions: First-Class Citizens in JavaScript

Functions are treated as 'First-class citizens' in JavaScript. What does that mean? They can be assigned to variables, passed as arguments to other functions, returned from functions, and stored in data structures like arrays and objects. In this article, I will explain these four cases with examples.

1. Functions can be assigned to variables

Functions can be assigned like any other value like number or string.

const num = 5  // Assigning a number to a variable
const str = 'Five' // Assigning a string to a variable

In the below code, function (a, b) => { return a + b } is assigned to a variable sum.

const sum = (a,b) => { // Assigning a function to a variable
  return a + b;
}

const summation = sum(2, 3); // Storing the result of `sum` function call in a variable
console.log(summation) // Output: 5

2. Functions can be passed as arguments to other functions

Functions can be used as arguments to other functions like we pass numbers or strings. I will explain this case by using two approaches.

In the first approach, I used a named function i.e., sum as argument to another function i.e., multiply. Firstly, I defined the sum function. Then I defined the multiply function and passed two arguments to it namely 2 and sum(2, 3). Finally, I stored the result of the multiply function in a variable multiplication and printed it on the console.

// APPROACH 1: Passing a'Named Function' to function as argument
const sum = (a,b) => { 
  return a + b;
}

const multiply = (c, d) => {
 return c * d;
}

const multiplication = multiply(2, sum(2, 3)) // Passing a function as an argument
console.log(multiplication) // Output: 10

There is another way to pass the function as an argument. Here, I will pass the function directly. So, I will use an anonymous function i.e., (a, b) => {return a + b} which is opposite of the named function that I used in the first approach.

// APPROACH 2: Passing a'Anonymous Function' to function as argument
const multiply = (c, d, sum) => {
  let summation = sum(c, d);
  return c * summation;
 }

 const multiplication = multiply(2, 3, (a, b) => {return a + b}); // Passing a function as an argument
 console.log(multiplication); // Output: 10

3. Functions can be returned from other functions

Function can be returned from another function like a variable or an expression.

In the below code snippet, an anonymous function i.e., (number) => {return sum(number, multiplier)} is returned from another function i.e., function makeSumMultiplier.

const sum = (a,b) => { 
  return a + b;
}

const makeSumMultiplier = (multiplier) => {
  return (number) => { // Returning a function from another function
    return sum(number, multiplier);
  };
}

const addAndDouble = makeSumMultiplier(2); // Get a function that adds and doubles
const addAndTriple = makeSumMultiplier(3); // Get a function that adds and triples

const addedAndDoubled = addAndDouble(4);
const addedAndTripled = addAndTriple(4);

console.log(addedAndDoubled); // Output: 6
console.log(addedAndTripled); // Output: 7

4. Functions can be stored in data structures

Functions can be stored in data structures like an array and an object.

I will store an anonymous function i.e., (a, b) => { return a / b } in an array then I will call it using the index of the array on which it is stored i.e., arr[1](15, 3).

const arr = [
             'division', 
              (a, b) => { return a / b } // Storing a function in an array
            ];
const division = arr[1](15, 3);
console.log(division) // Output: 5

Now, I will store an anonymous function i.e., (a, b) => { return a - b } in an object then I will call it using the key i.e., obj.sub(5, 3) which value is the stored function.

const obj = {
  name: 'subtraction',
  sub: (a, b) => { // Storing a function in an object
    return a - b;
  } 
}

const subtraction = obj.sub(5, 3);
console.log(subtraction); // Output: 2

In conclusion, functions are treated as any other values in JavaScript. They can be assigned to variables like number and string, passed as arguments to other functions like number and string, returned from functions like any variable or expression, and stored in data structures like array and object.