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.

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:

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:

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.

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:

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.