First-Class Functions in Javascript

Usage of First-Class Function

• Assign to Variables: Functions can be assigned to variables, allowing them to be used as any other value.
• Pass as Arguments: Functions can be passed as arguments to other functions, enabling callbacks and event handling.
• Return from Functions: Functions can be returned from other functions, allowing the creation of higher-order functions and closures.
• Stored in Data Structures: Functions can be stored in arrays or objects, enabling dynamic and flexible function management.
• Used in Function Composition: Functions can be composed to create more complex operations by chaining or nesting them.
   

Assigning to Variable

const foo = function() {
   console.log("foobar");
}
foo(); 

You can also try this code with Online Javascript Compiler

Run Code

Output

foobar

You can also try this code with Online Javascript Compiler

Run Code

Passed as arguments to functions

When functions can be passed like any parameter/arguments to a function, like:

const nums = [1, 2, 3, 4, 5]

const addone = (n) => n + 1

const addedOne = nums.map(addone)

You can also try this code with Online Javascript Compiler

Run Code

Output

2, 4, 5, 6

You can also try this code with Online Javascript Compiler

Run Code

We have an addone function that is treated as a variable and passed to the .map function. That's being said, the addone function is a first-class function.

Returned as results of functions

When functions can return another function, like:

function sayHello() {
   return function() {
      console.log("Hello Coders");
   }
}

You can also try this code with Online Javascript Compiler

Run Code

Output

Hello Coders

You can also try this code with Online Javascript Compiler

Run Code

In this example, We have returned a function from another function - We can return a function because we treated a function in JS as a value.

Note: A function is called a Higher-Order Function that returns a function.

Included in any data structures

When these functions can be stored in any data structure(stack, queue), like:

const wakeUp = name => `${name}, wake up early!`
const takeShower = name => `${name}, take shower!`
const workout = name => `${name}, workout!`
const shutUp = name => `${name}, shut up!`

const morningRoutines = [
    wakeUp,
    takeShower,
    workout,
    shutUp
]

morningRoutines.forEach(routine => routine('Harry'))

You can also try this code with Online Javascript Compiler

Run Code

Output

Harry, wake up early!
Harry, take a shower!
Harry, workout!
Harry, shut up!

You can also try this code with Online Javascript Compiler

Run Code

You can practice by yourself on an online javascript compiler.

Frequently Asked Questions

Why do we need the First-class function?

First-class functions enable flexible and powerful programming techniques in JavaScript. They allow functions to be passed around, stored, and manipulated just like any other value. This capability supports higher-order functions, callbacks, and functional programming, leading to more concise, modular, and reusable code.

What is a First-class function in JavaScript medium?

In JavaScript, a first-class function is a function treated like any other variable. It can be assigned to variables, passed as arguments, returned from other functions, and stored in data structures. This characteristic allows for dynamic and flexible programming, enabling patterns like callbacks and function composition.

What is the difference between First-Class and Higher-Order Functions in JavaScript?

• A function is treated as a variable that can be assigned to any other variable or passed as an argument.
• The function receives another function as an argument or returns First-order a new function.

Conclusion

In conclusion, first-class functions in JavaScript are a foundational concept that significantly enhances the language's flexibility and power. By treating functions as first-class citizens, JavaScript enables developers to write more modular, reusable, and expressive code. This capability is crucial for advanced programming techniques like higher-order functions, callbacks, and functional programming, making first-class functions essential for mastering JavaScript development.