JavaScript Higher Order Functions

I don't think I ever got any more gittier than the time I figured out ways on how to manipulate, change and construct Arrays and Objects. It was one of the best revelations in my JS learning career and are essential for understanding modern Javascript. So I thought I would explain some of the ones I actually understand and use on a daily basis.

When do you use them? An example of of the top of my head is when an API returns a JSON object in a certain structure that doesn't work with how your component renders data. In this case you would take the returned API data and transform it with let's say map to create a new array that suits your component render.

MAP

I've looked at a lot of other peoples code over the years and the use of map is large. So what is it, except a higher order function? Well map loops over an array and returns a new array is the simplest answer I can give. It takes a callback function as a parameter, which itself takes a parameter (I usually go with the naming of item to reference the current item in the array) referencing the current value of the array and the second parameter being the index at which that value is held.

let arr = [3, 6, 9, 12, 15, 18];

arr.map((item, index)=>{
  console.log(item * 4) //12, 24, 36, 48, 60, 72
  console.log(index) //0, 1, 2, 3, 4, 5
})

The beauty of higher order functions such as map is using them is pure functional programming so you can continue appending other functions at the end of map for instance:

let arr = [3, 6, 9, 12, 15, 18];

arr.map((item, index)=>{
  console.log(item * 4) //12, 24, 36, 48, 60, 72
  console.log(index) //0, 1, 2, 3, 4, 5
}).filter((item)=>{
  if (item < 12){ //filters out all numbers that are lower than 12
    return false;
  } else {
    return true;
  }
});

Or something regarding react state and mapping into a new object to later use in render:

fetch('http://example.com/movies.json')
  .then((response)=>{ //Response is [ {id:1, name:First Name}, {id:2, name:Second Name}, {id:3, name:Third Name} ]
    this.setState({
      fieldsForComponent : response.map((item)=>{
                              return {
                                id : item.id,
                                name : item.name
                              }
                            });
    });
  })

FILTER

We briefly used the filter function in an above example. What is it? It's another higher order function that filters the passed data structure based on the test you provide in the callback function. So you might use it with if..else statements often.

let arr = ['aaa', 'bbbb', 'ccccc'];

arr.filter((item, index)=>{
  if (item.length < 3){
    return true;
  } else {
    return false;
  }
  console.log(index); //0, 1, 2
});

The callback in the filter function takes the parameters of the current item in the array, the index of the item and it can also take the array object on which the filter is being made.

FOREACH

forEach is one of my most used functions when it comes to arrays. At first sight it looks the same as map with the exception that map creates a brand new array which you usually have to assign back to the original array, whereas forEach mutates the existing array, changing it's structure and values.

let arr = [5, 10, 15];

arr.forEach((item)=>{
  console.log(item * 2); //10, 20, 30
});
console.log(arr); //[10, 20, 30]

The same as filter forEach takes as parameters current item in the array, the index of the item and it can also take the array object on which the loop is being made.

OBJECT.KEYS / OBJECT.VALUES

Moving on to Object manipulation for a bit are two very useful ways to get objects to where you want them. Object.keys is useful for when you want to treat your object like it's an array and you don't want to do some complex converting code to make that happen. For instance: you want to use map on a data structure, but your structure is an Object. You simply use Object.keys(yourObject).map() or Object.keys(yourObject).filter(). Why? Because it creates an ARRAY of your keys.

const obj = {
  1 : 'somestring',
  2 : 42,
  3 : false
};

console.log(Object.keys(obj)); //["1", "2", "3"]

Object.values() is the same thing only with the values of the object.

const obj = {
  1 : 'somestring',
  2 : 42,
  3 : false
};

console.log(Object.keys(obj)); //['somestring', 42, false]

And yes both of these return the keys and values in the same order as they are written in the initial object.

OBJECT.ENTRIES

To combine both Object.keys() and Object.values() we have Object.entries(). It again returns an array, but this time with the [key, value] pairs. This method does not return the new array in the same order tho, for that you have to sort the array yourself.

const obj = {
  1 : 'somestring',
  2 : 42,
  3 : false
};

console.log(Object.entries(obj)); //[[1, 2, 3], ['somestring', 42, false]] -> ORDER NOT GUARANTEED 

OBJECT.ASSIGN

Object.assign() uses two objects and combines them together. That was a really oversimplified answer since there is a lot more that goes on under the hood, but generally that is the target solution this method is going for. You have a target object, so the object you want to copy into and a source object which is the object that is copied to the target object.

const obj1 = {1: a, 2: b};
const obj2 = {1: c, 2: d};

const returned = Object.assign(obj1, obj2);

console.log(returned); //{1:a, 2:b, 3:c, 4:d} 

That's all for now. I will be expanding this post probably in the future or coming back and correcting mistakes since this topic is something I've been extensively learning about for the last year. The goal of the post was to refresh my memory on how these things work and to hopefully explain them in simple terms for people that are struggling to understand them. I highly recommend you also check MDN for more detailed explanations for all of these functions and methods.

Thank you for reading!