Higher-Order JS Functions
Tags: javascript, codenewbie, functions
Published: 2020-12-14 04:57:23

---
title: Higher-Order JS Functions
published: true
description: A brief overview of a view higher-order JS functions.
tags: javascript, codenewbie, functions
//cover_image: https://direct_url_to_image.jpg
---

# Functions
JavaScript may be the source of headaches for many, but there are some seriously cool features thanks to the years and years it has been around. JS would be nothing without functions (in fact most languages would be next to useless without the ability to create functions). One awesome feature of JS and a few other languages is the ability to pass functions to other functions. Function-ception. ![Inception of a Gameboy Color](https://media.giphy.com/media/b7lp44pNiRqsU/giphy.gif)
# An Order of Functions
Higher-order functions are functions that either return a function or accept a function as an argument. Obviously we can write our own higher-order function but there are also important and extremely useful built-in functions at our disposal.
# forEach
As coders we often like to loop through arrays and do something useful with the information (check if two elements equal a target value, find the largest/smallest value in an array, etc.) We may be tempted to just use the good old for loop we learned when we started our coding journey:
```javascript
for(let i = 0; i < nums.length; i++){
  console.log(nums[i]);
}
```
But thanks to higher-order functions we can simplify our code down to this:
```javascript
nums.forEach(element => console.log(element));
```
Here we are calling the function console.log (yes it's a function) and we are calling that function on each element of the nums array. Technically we could give our elements any name: word, letter, price, etc. We start to see how valuable higher-order functions can be (and clean thanks to arrow functions).
# map
Another fantastic higher-order function is map. Map works in a slightly different way because it returns a new array based on the function passed in. You can do anything as simple as multiplying each array element by a number or creating a new array of components with multiple props.
```javascript
const doubledNums = nums.map(x => x * 2);
// react/JSX code
{this.props.cards.data.map( card => {
  return (
    <div key={card.id}>
      <Question
        front={card.attributes.front} 
        back={card.attributes.back} 
        id={card.id} 
        isSubmitted={this.state.submitted} 
        handleChange={this.handleChange}/>
      </div>
     )}
)} 
```
# reduce
The last built-in function I would like to talk about is probably the most abstract/complicated, but definitely plays a critical role in many applications. Reduce takes a function as an argument (called the reducer) and well... it reduces the elements of an array to a single value. Our reducer function takes 4 arguments:
1. Accumulator
2. Current Value
3. Current Index
4. Source Array

We don't have to use all of these arguments but they are there for us to use. The accumulator is the value that will ultimately be returned and remembers itself upon each function call. The simplest example I can give you is combining all the values of an array:
```javascript
const total = nums.reduce((accumator, currentValue) => {
  return accumator + currentValue;
}
```
And there you have it. A few basic higher-order functions to improve your code readability and expand your mind.