In this article, we are going to learn in JavaScript, as well as see the ways you can use them. higher-order functions The key feature of higher-order functions is that they can accept other functions as arguments and/or specify a function as a return value. Extraordinary functional methods like these are strong constructs available to you in JavaScript and other high-level languages like Python, Lisp, etc. The JavaScript function is a first-class object. There is the concept of in programming languages. This refers to the values that can be passed to a function, returned from a function, and assigned to variables or constants. These values include data of all types, such as numbers, strings, arrays, booleans, etc. first-kind (or class) objects One should take into account that the variable or constant itself does not fall under this concept, since only the data contained in the variable or constant is considered a first-class object. Against this background, the following statements will be correct: We can pass the first-class object to a function as an argument We can pass other functions to a higher-order function as an argument Let’s have a look at the example below: const function1 = () => {
    console.log("I'm the function1 result");
};

const function2 = (callback) => {
    console.log("I'm the function2 result");

    callback();
};

function2(function1);
// I'm the function2 result
// I'm the function1 result The function passed as an argument to a higher-order function is called callback. Here, we are passing as an argument to . acts as a callback and it is worth diving deeper into this. But prior to that, let's look at an example that doesn't use a callback: function1 function2 function1 const calculate = (x, y, operation) => {
    if (operation === 'subtract') {
        return x - y;
    } else if (operation === 'divide') {
        return x / y;
    }
};

console.log(calculate(10, 3, 'subtract'));
// 7 Suppose the above calculate function makes a part of a library like jQuery. In the current implementation, the function supports 2 types of calculations: division and subtraction. But what if we also need, for example, addition or multiplication operations? In this case, you will have to search for another library, since we cannot add the required calculation methods to the library. But there is another option, which lies in making the function more abstract. For this, we need to expose the functionality through a callback. calculate Let's add a callback to the example mentioned above. This will not only improve our code but also allow us to visually evaluate the callback features: // Library function
const calculate = (x, y, callback) => {
    if (typeof callback === 'function') {
        return callback(x, y);
    };
};

// Functions that we will pass as callback
const add = (x, y) => {
    return x + y;
};

const substract = (x, y) => {
    return x - y;
};

const multiplay = (x, y) => {
    return x * y;
};

const divide = (x, y) => {
    return x / y;
};

// We call the function from the library and pass the callback
console.log(calculate(12, 8, add));
// 20 Under this approach, we transfer not just a specific operation to the library but a function that implements this operation. And now it only takes to run it to get the result. Take a look at a real-life example: let’s sort the array by keys in ascending order using the method: sort() const someArray = [
    {
        key: 12,
        value: 'Hello',
    },
    {
        key: 14,
        value: 'Something',
    },
    {
        key: 13,
        value: 'World',
    },
];

someArray.sort((valueA, valueB) => {
    if (valueA.key < valueB.key) {
        return -1;
    } else {
        return 1;
    }
});

someArray.forEach((value) => {
    console.log(`${value.key} ${value.value}`)
});
// 12 Hello
// 13 World
// 14 Something If we need to sort the array in descending order by values, the code would look like this: someArray.sort((valueA, valueB) => {
    if (valueA.value > valueB.value) {
        return -1;
    } else {
        return 1;
    }
});

simpleArray.forEach((value) =>
    console.log(`${value.key} ${value.value}`)
);

// 13 World
// 14 Something
// 12 Hello In the above examples, we used simple functions. However, when they are passed as arguments to other functions, they can take part in more complex functions in an unexpected way. I hope this article was helpful and you will use callbacks more frequently in your projects.

How Memoization Can Help You Boost Your Javascript Code

Higher-Order Function in JavaScript with ES6 Examples

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Eliminating Event Storms With Debouncing in JavaScript

Exploring Differences Between Promises And Callbacks in JavaScript

Fluent Interface With Callbacks

How to Convert a Javascript Callback to Promise

Is JavaScript a Single Threaded Language?

Javascript: No More callbacks, Use Promisify to Convert Callback to Promise

Eliminating Event Storms With Debouncing in JavaScript

Exploring Differences Between Promises And Callbacks in JavaScript

Fluent Interface With Callbacks

How to Convert a Javascript Callback to Promise

Is JavaScript a Single Threaded Language?

Javascript: No More callbacks, Use Promisify to Convert Callback to Promise

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps