This content originally appeared on DEV Community and was authored by muddassir
JavaScript is a functional programming language because, it accepts Higher Order functions.
Before going on to higher order functions. We can learn how we can make our code clean by using higher order functions
rather than normal functions.
Say we want to change all negative numbers in an array to positive and vice versa. Code using normal functions would be
similar like below :
const numbers = [1, 2, 3, 4, 5];
function changeSign(array) {
for (let index = 0; index < array.length; index++) {
console.log(array[index] * -1);
}
}
changeSign(numbers);
If we use Higher order functions like forEach() for the same problem, it would finish in a line.
numbers.forEach((value)=>console.log(value*-1));
Higher Order functions is a function that takes function as an argument or returns a function.
We can see some of the higher order functions in JavaScript:
- map()
- filter()
- reduce()
- forEach()
- every()
map()
- The map() method just maps the given function to every value in an array and it return backs a new array.
- map() method can be used when we want to go through every value in the array and alter if a specific condition occurs.
- Say we want to square each element in an array, we can do that without worrying about index of the array or even without a for-loop
let numbers=[1,2,3,4,5];
const squares=numbers.map(value=>value*value);
filter()
- The filter() method creates a new array from the values that satisfies the condition provided inside the function.
- It filters the required item from the array and creates a new array from it.
- filter() method comes in handy when you want to eliminate un-necessary elements from the array.
- Let's say if we want to return even elements from the array.
let numbers=[2,3,17,18,4,6];
const even=numbers.filter(value=>value%2==0); //returns 2,18,4,6
reduce()
- The reduce() method reduces array into a single entity
- It takes four parameters at maximum in its function -
previousValue, currentValue, currentIndex, array
- reduce() method can be easily understood by implementing sum of all values in an array.
let numbers = [1, 2, 3];
let initialValue=0;
let sum = numbers.reduce(function (previousValue, currentValue) {
return previousValue + currentValue;
},initialValue);
- The reduce method starts with initial value as 0 , initially previousValue will be 0(initialValue) and currentValue will be array's first element. Then, currentValue will be added to previousValue and the result will be stored in previousValue. This process will repeat until the end of the array and the previousValue will be returned and it will be stored in sum.
forEach()
- The forEach() method executes a given function atleast once for every element.
- Normally, it is used to print the elements in the array. But the usage of forEach() didn't stop there. Since it can be applied to every element in an array. We can even use it to change the individual elements in the array.
let students = ['John', 'Sara', 'Jack'];
// using forEach
students.forEach(myFunction);
function myFunction(item, index, arr) {
// adding strings to the array elements
arr[index] = 'Hello ' + item;
}
//["Hello John", "Hello Sara", "Hello Jack"]
every()
- The every() method tests whether all elements in the array satisfies the condition in the provided function
- If condition satisifes all the elements in the array then the method will return true otherwise it will return false.
- Let's say we want to check if all the elements is greater than 10 or given number.
function isBigEnough(element, index, array) {
return element >= 10;
}
let numbers=[12, 5, 8, 130, 44];
numbers.every(isBig);
- These are not the only higher order functions in JavaScript. Learning how to use these functions will help you write better code and also you will have a good grasp in the fundamentals of the language.
This content originally appeared on DEV Community and was authored by muddassir
muddassir | Sciencx (2022-02-18T16:58:43+00:00) Higher Order Functions. Retrieved from https://www.scien.cx/2022/02/18/higher-order-functions-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.