A Guide to Building Javascript Array Methods (Functions 2)

Now, you might understand these array methods like map, filter, and even reduce but have you once tried to build them? is it even possible? can I increase my existing knowledge about it? yes, yes, and a big yes.

To build array methods like map and reduce we need to leverage something in javascript called higher-order functions. If you do not know much about functions, well it is okay, you can take my previous article "Javascript Functions Explained to a 5-year-old" to bring you up to speed. Okay, now let's get started, the first we will start with is Array.map.

The Map Array Method

Now, before we build it, let's quickly understand what we are building. What is the map array method really doing? Well, it is just going through every element in the array and applying a function to them, (this is important make sure you pay attention) and returning a new array not and I repeat not mutating the original.

function map(array, fn){ 
      let counter = 0 
}

Now, this is the starting point of our code, what we are going to do is loop over the array elements using the counter variable and run our function for each element in the array.

function map(array, fn){ 
      let counter = 0 
   while(counter < array.length){
       fn(array[counter], counter)

   }
}

You might be wondering, why we pass the counter variable? because this is the index, and the map array method has access to this stuff, do not worry I will explain later. Now, since we are looping over the code, let's take it up a notch. The problem now is that we are not returning a new array. So let's do exactly that, we make a new array variable and return it. (Note: we can't return a new array inside a loop, we technically can but it is not ideal)

function map(array, fn){ 
      let counter = 0 
      let newArray = []
   while(counter < array.length){
      newArray = [...newArray , fn(array[counter], counter)]
       //oops almost forgot to increment the counter so we don't get an
        // infinte loop
        counter++
   }
   return newArray
}

Now, that our array function is complete let's talk about 3 things

The iterating function needs to return something (i.e fn) which is why when you run the real array map it gives an error or does not even run at all when you do not return anything

    newArray = [...newArray , fn(array[counter], counter)]

IS EQUIVALENT TO

```
   newArray.push(fn(array[counter], counter))
```
I used the spread operator(...) to be cool and it just sets the array to what it was before, you can read it up somewhere.

Now, Let's Test and Reverse Engineer

We are going to test it in 3 use cases

  let intialArray = [1,2,3]
   function plusone(n) { 
      return n + 1;
   }
  map(intialArray, plusone)
  // => [2,3,4]

  // function increase each element by its index 
  // arrow functions are possible
  map([1,2,3], (array, index) => {
      return array + index
  })
  //remember the indexes are 0, 1, 2
  // => [1,3,5]

  // The function always returns 42
  map([1,2,3] , () => 42)
  // => [42,42,42]

That is it for the map array Method and I hope this gave you a deeper understanding of the array. map method.

The Filter Array Method

Again, what does it do? it simply goes through every element in an array ([5,6,3]) and checks if it agrees to a condition (let's say less than 4) and returns those who are true (say greater than 4) and does not return those who are false (less than 4). So ([5,6] is returned since they are greater than 4)

A Guide to Building Javascript Array Methods (Functions 2)

The Map Array Method

The Filter Array Method

TO BE CONTINUED