Higher-Order Functions - Exploring the Power of Higher-Order Functions in JavaScript

Higher Order Function - 

A function that takes another function as an argument and/or returns a function from it is known as a higher-order function.

Let's learn the difference between the Normal function and the Higher-order function 
  • The Traditional Approach: Normal Functions

Before we explore higher-order functions, let's take a look at the traditional approach to calculating the area, circumference, and diameter of an array of radius using normal functions.

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


//Area

const calculateArea = function(radius){

  const output = [];

    for(let i = 0; i < radius.lenght; i++){

      output.push( Math.PI * radius[i] * radius[i] )

   }

  return output;

}

console.log(calculateArea(radius));


// Circumference

const calculateCircumference = function(radius){

    const output = [];

    for(let i= 0; i < radius.length; i++){

        output.push( 2 * Math.PI * radius[i] )

    }

     return output;

}

console.log(calculateCircumference(radius));


// Diameter

const calculateDiameter = function(radius){

    const output = [];

    for(let i= 0; i < radius.length; i++){

        output.push( 2 * radius[i] )

    }

     return output;

}

console.log(calculateDiameter(radius));

This approach works, but it involves repetitive code for each calculation, making it less maintainable and harder to read.


  • The Modern Approach: Higher-Order Functions


Now, let's explore a more elegant and efficient solution using higher-order functions in JavaScript.


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


// Helper functions


const area = function(radius){

    return Math.PI * radius * radius;

}


const circumference = function(radius){

    return 2 * Math.PI * radius;

}


const diameter = function(radius){

    return 2 * radius;

}




// Higher-order function


const calculate = function(radius, logic){

    const output = [];


    for(let i= 0; i < radius.length; i++){

        output.push(logic(radius[i]))

    }

    return output;

}


console.log(calculate(radius, area));

console.log(calculate(radius, circumference));

console.log(calculate(radius, diameter));


In this modern approach, we define three helper functions for area, circumference, and diameter calculations. Then, we create a higher-order function called calculate, which takes an array of radius and a logic function as arguments. The calculate function iterates through the array of radius and applies the provided logic function to each element, resulting in a concise and reusable code.




Comments

Post a Comment

Popular posts from this blog

Understanding Classes, Objects, Prototype, Inheritance, Constructors, super(), and this in JavaScript

JavaScript, is an object-oriented language, with various principles such as classes, inheritance, constructors, super(), and this facilitates the creation and organization of code. Let's dive into these concepts and understand their significance through simple examples. Classes in JavaScript JavaScript introduced the concept of classes in ECMAScript 2015 (ES6), providing a more structured way to create objects. A class is a blueprint for creating objects with shared properties and methods. Example: Creating a Simple JavaScript Class Let's consider a Vehicle class: class Vehicle {   constructor(make, model) {     this.make = make;     this.model = model;   }   displayInfo() {     console.log(`Make: ${this.make}, Model: ${this.model}`);   } } In this example, a Vehicle is a class with a constructor that initializes its make and model properties. It also contains a displayInfo() method to show the vehicle's information. Objects in JavaScrip...
Read more

Loops in JavaScript - Exploring Their Differences and Best Use Cases

In JavaScript, there are various loop structures, each with its unique characteristics and best use cases. In this blog post, we'll delve into some of the most commonly used loops: (for-of vs for-in), (for loop vs while loop), (while loop vs do-while loop), and more. Let's explore their differences, advantages, and when to use each type. 1. for-of vs for-in Loop for-of Loop The for-of loop is used for iterating over iterable objects like arrays, strings, maps, and sets, focusing on their values. Example: const myArray = [1, 2, 3, 4, 5]; for (const element of myArray) {     console.log(element); } for-in Loop The for-in loop is Used for iterating over object properties (keys), including inherited ones, focusing on keys rather than values. Example: const myObject = { a: 1, b: 2, c: 3 }; for (const key in myObject) {     console.log(key, myObject[key]); } 2. for Loop vs while Loop for Loop The for loop is versatile and commonly used when you know the number of iteration...
Read more

Mastering JavaScript - A Comprehensive Guide to JavaScript Development with all Javascript Topic

Whether you’re a beginner just getting started or an experienced developer looking to deepen your knowledge, this comprehensive guide will walk you through the key concepts and topics in JavaScript development. Table of Contents: Getting Started with JavaScript Understanding the Basics: Variables, Data Types, and Operators. Control Flow: Conditional Statements and Loops. Functions: Building Reusable Code Blocks. Objects and Arrays: Essential Data Structures. Advanced JavaScript Closures: Understanding Function Scope. Asynchronous JavaScript: Promises and Callbacks. ES6+ Features: Arrow Functions, Template Literals, and More. Modules: Organizing Your Code with Imports and Exports. Working with the Document Object Model (DOM) DOM Overview: What is the DOM? Selecting and Modifying Elements in the DOM. Event Handling: Responding to User Interactions. Dynamic Web Pages: Creating and Deleting DOM Elements. Web APIs and Client-Side Development Making HTTP Requests with the Fetch API. Local St...
Read more