First Class Functions and High Order Functions in JavaScript

JavaScript has all those abilities or features that requires to be a language having First Class Functions, hence functions are treated as first class citizens. Well the meaning of “first class citizens(objects)” is that in programming language given entity (function) supports all the operational properties inherent to other entities; properties such as being able to be assigned to a variable, passed around as a function argument, returned from a function... Basically, first-class citizenship simply means “being able to do what everyone else can do.” As a result, programming language is said to have First-class functions when functions in that language are treated like any other variable.

Let’s look at what functions being a First Class Citizen provide to us on JavaScript and which doors it open to us that all kinds of programmatic paradigms and techniques that wouldn’t otherwise be possible.

• Ability to store functions into a variable

const summation = function (a,b) {
return a+b
}
summation(1,2) // 3

• Ability to store functions into a method

const foo = {
 value: 1,
 summation: function(a,b) {
   return a+b+this.value
 }   
}
const sum = foo.summation(2,3)
console.log(sum) // 6

• Ability to pass functions as an argument to other functions

function sayHello() {
  return "Hello ";
}
function sayHelloWorld(sayHello, param) {
  console.log(sayHello() + param);
}

sayHelloWorld(sayHello, "World!") // "Hello World"

• Ability to return functions from functions

function sayHelloWorld() {
  return () => {
    console.log("Hello World!");
  };
}

// First Approach
sayHelloWorld()() // "Hello World!"

// Second Approach
const greeting = sayHelloWorld()
greeting() // "Hello World!"

• Ability to functions calling itself

const fibonacci = (n) => (n <= 2 ? 1 : fibonacci(n - 1) + fibonacci(n - 2));

console.log(fibonacci(10)) // 55

• Ability to apply methods on functions

function sayHelloWorld() {
  console.log(`${this.firstWord} ${this.secondWord}`);
}

const obj = {
  firstWord: "Hello",
  secondWord: "World!",
};

sayHelloWorld.call(obj) // "Hello World!"

When we look at the second sub-topic “High Order Functions” it may sound complicated but it can be defined as simply, functions that have multi-levels. In other words, high order functions are functions that can give back functions as an output or they can take another functions as an input or doing both. Behaviour of high order functions is only possible because of the first class functions. In JavaScript, there are a lot of built-in high order functions which empower the use of language such as reduce() , map() , filter() methods and also, the addEventListener() method can be classified as a high order function.

• reduce() example

const arr = [1, 2, 3, 4];

const initialValue = 0;
const sumWithInitial = arr.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial) // 10

• addEventListener() example

const sayHelloWorld = () => console.log("Hello World")
btn.addEventListener("onclick" , sayHelloWorld)

As a final touch, to reveal the relation in between them, it is crucial to say that “First Class Functions” is just a concept or feature that a programming language either has or does not have. It means all functions are just any other variable and there is no first class function in practice but there are “High Order Functions” if the programming language has the first class function concept.