First class function in JavaScript


JavaScript treats functions as objects and allow us to pass functions as parameter to another function and even return functions from other functions. In JavaScript the functions are first class functions meaning we can store them in variable, objects and array. The higher order functions can take function, return them or do both.

Following is the code to implement first class functions in JavaScript −

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result,
   .sample {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
   .result {
      color: red;
   }
</style>
</head>
<body>
<h1>First class function in Javascript</h1>
<div class="sample">[22,33,44,55]</div>
<br />
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to double each element of the above array</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   let doubleNum = (ele) => {
      return ele * 2;
   };
   let arr = [22, 33, 44, 55];
   function doubleArray(arr, fn) {
      let doubleArr = [];
      arr.forEach((element) => {
         doubleArr.push(doubleNum(element));
      });
      return doubleArr;
   }
   BtnEle.addEventListener("click", () => {
      resEle.innerHTML = "New array = " + doubleArray(arr, doubleNum);
   });
</script>
</body>
</html>

Output

On clicking the ‘CLICK HERE’ button −

Updated on: 22-Jul-2020

537 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements