Explaining First Class Functions in Javascript

Javascript Functions are First Class Functions, also called First-Class Citizens. This means they can be handled just like any other variable.

You can store them inside variables, pass them as arguments to other functions and return them from other functions.

Pass a Function as argument to an other Functions

We create a function that concatenates the first name and the last name called concatenateName.

function concatenateName(firstName, lastName) {
  return firstName + ' ' + lastName
}

Then we create a second function that will create a string that adds ‘Welcome’ before the name.

The parameters are the first name, last name and the function to use.

function greeting(firstName, lastName, myFunction) {
  return 'Welcome ' + myFunction(firstName, lastName);
}

And finally we invoke the greeting function and pass the parameters of “John”, “Doe” and the concatenateName function

const result = greeting("John", "Doe", concatenateName)
console.log(result) // Welcome John Doe

Complete code :

function concatenateName(firstName, lastName) {
  return firstName + ' ' + lastName
}

function greeting(firstName, lastName, myFunction) {
  return 'Welcome ' + myFunction(firstName, lastName);
}

const result = greeting("John", "Doe", concatenateName)

console.log(result) // Welcome John Doe

Storing functions in variables

We create a simple add function, and instead of storing the result of add(1,1) inside the calculate variable, we will pass the entire function. To do so, simply write the name of the function without the parenthesis.

function add(a, b) {
 return a + b
}

const calculate = add;

const result = calculate(1,1);

console.log(result); // 2

Then we can invoke “add” as a function and log the result.

You can also store a function inside an array or an object, but this is a bit more tricky.

Inside an array :

You store the functions add and subtract inside the “calculations” array.

To invoke them, you have to use their index and directly pass them parameters between parenthesis.

function add(a, b) {
 return a + b
}

function subtract(a, b) {
 return a - b
}

const calculations = [add, subtract];

const addition = calculations[0](1,1);
const subtraction = calculations[1](10,5);

console.log("addition", addition); // 2
console.log("subtraction", subtraction); // 5

Inside an object :

// Create functions
function addFunction(a, b) {
 return a + b
}

function subtractFunction(a, b) {
 return a - b
}

// Store them inside an object.
const calculations = {
  add: addFunction,
  subtract: subtractFunction
}

// Invoke the functions by accessing the value of the add key and 
// passing parameters between parenthesis
const addition = calculations.add(1,1);
const subtraction = calculations.subtract(10, 5);

// other way to write it

const addition = calculations["add"](1,1);
const subtraction = calculations.["subtract"](10, 5);

console.log("addition", addition); // 2
console.log("subtraction", subtraction); // 5

Returning functions from functions

Since functions are values, you can return a function from another function.

My multiplyBy function will multiply any number by the number it receives as a parameter.

Store in a variable “mutliplyByThree” the result of multiplyBy(3), the result being a function that will multiply by 3 any number you pass as parameter.

const multiplyBy = (multiplier) => {

  return function(nb) {
    return nb * multiplier
  }
}

const multiplyByThree = multiplyBy(3)
// multiplyByThree will do this :
// function(nb) {
//     return nb * 3
//  }

console.log(multiplyByThree(2)) // 6

By doing this, you are storing the state of the multiplyBy function with the multiplier parameter being 3.

This may seem odd, I know, but if you understand that sort of thing, Javascript will seem much easier for you. If you are interested, this is called a "closure". I would recommend you to read a bit more on that subject ! I will eventually write an article about it, so follow me to know when I'll publish it !

Side note

First Class Functions can also store properties and methods. I'm not a big fan of writing classes with Javascript (unless you create a library). So I won't really talk about it. Just know that you can.

---

I hope my article helped you understand Javascript a bit better ! Don't hesitate to leave a comment and follow me for more content on web development !