Introduction

HOF stands for Higher Order Functions that is Array method and take callback as an argument and call it on each array iteration. Understanding how each Array methods work under the hood makes you a better Js developer. And in today' post I'm going to teach how Array methods work behind the scenes. Enjoy!

1. ForEach

ForEach method is used for side effects but the thing to note is that it does not mutate the original Array.
Steps

call forEach on array
pass callback to it
followings happen within the forEach method body
1. loop over the length of the current array
2. on each iteration pass current item to the callback
3. when loop ends, it returns undefined
followings happen within the callback function body
1. name the parameter passed by HOF
2. do certain thing within the body

const names = ["Jaxongir", "Sarah", "Robert", "Joseph"];
Array.prototype.customForEach = function (callback) {
  for (const item of this) {
    callback(item);
  }
};
names.customForEach((name) => {
  console.log(`Hi ${name}`);
});
/**
Hi Jaxongir
Hi Sarah 
Hi Robert
Hi Joseph
 */

2. Filter

Filter method is used to filter out not wanted items by setting conditional test and only keep the items that pass the test. And it does not mutate original array but returns the new filtered array
How it works

call filter on the array
pass callback to it
followings happen within the filter method body
1. create the empty array
2. loop over the length of the current array
3. call callback passed to it with the current item, and if returned value is truthy push current item to the new array else continue to the next iteration
4. when the loop ends, return the new array
followings happen within the callback function body
1. name the parameter
2. return either true or false based on which item you want to keep

const years = [2002, 1959, 2015, 2022, 1999];
Array.prototype.customFilter = function (callback) {
  const newArray = [];
  for (const item of this) {
    const isTrue = callback(item);
    if (isTrue) {
      newArray.push(item);
    }
  }
  return newArray;
};
const filteredYears = years.customFilter((year) => {
  return year >= 2000;
});
console.log(filteredYears);
// [2002, 2015, 2022]

3. Map

Map method used to return new array that has the same length as the original array. Value of each item is decided by what's returned within the callback function's body
How it works

call map on the array
pass callback to it
followings happen within the map method body
1. create the empty array
2. loop over the length of the current array
3. call callback passed to it with the current item, and store the value returned by the callback on the array
4. when the loop ends, return the new array
followings happen within the callback function body
1. name the parameter
2. do some operation with the value passed to it and return it

const numbers = [5, 3, 9, 50, 200];
Array.prototype.customMap = function (callback) {
  const newArray = [];
  for (const item of this) {
    const newItem = callback(item);
    newArray.push(newItem);
  }
  return newArray;
};
const numbersMultipliedByTwo = numbers.customMap((number) => {
  return number * 2;
});
console.log(numbersMultipliedByTwo);
// [10, 6, 18, 100, 400]

4. Some

Some method used to return true if only one of the items of the array satisfy conditional test in the callback function body.
How it works

call some on the array
pass callback to it
followings happen within the some method body
1. loop over the length of the current array
2. call callback passed to it with the current item, and if returned value is truthy return true
3. when the loop ends if none of the values pass the conditional test, return false to the next iteration
followings happen within the callback function body
1. name the parameter
2. set up the conditional and return the result

const grades = [50, 40, 90, 20];
Array.prototype.customSome = function (callback) {
  for (const item of this) {
    const isTrue = callback(item);
    if (isTrue) {
      return true;
    }
  }
  return false;
};
const isEligible = grades.customSome((grade) => {
  return grade >= 75;
});
console.log(isEligible);
// true

5. Every

Every method used to check if each array item passes the conditional test set up on the callback function body.
How it works

call every on the array
pass callback to it
followings happen within the every method body
1. loop over the length of the current array
2. call callback passed to it with the current item, and if returned value is falsy then return false
3. when the loop ends if each single item passed the test then return true
followings happen within the callback function body
1. name the parameter
2. set up conditional and return the result

const grades = [50, 40, 90, 20];
Array.prototype.customEvery = function (callback) {
  for (const item of this) {
    const isFalse = callback(item);
    if (!isFalse) {
      return false;
    }
  }
  return true;
};
const isEligible = grades.customEvery((grade) => {
  return grade >= 40;
});
console.log(isEligible);
// true

6. Find

Find method used to find single item from within the array.
How it works

call find on the array
pass callback to it
followings happen within the find method body
1. loop over the length of the current array
2. pass current item the callback, and if returned value by callback is true then return current item else move to the next iteration
followings happen within the callback function body
1. name the parameter
2. set up conditional test and return the result

const people = [
  { id: "1", name: "Jaxongir", country: "Uzbekistan" },
  { id: "2", name: "Sarah", country: "Poland" },
  { id: "3", name: "Arthur", country: "England" },
  { id: "4", name: "Jonathan", country: "USA" },
];
Array.prototype.customFind = function (callback) {
  for (const item of this) {
    const isFound = callback(item);
    if (isFound) {
      return item;
    }
  }
};
const person = people.customFind((person) => {
  return person.id === "1";
});
console.log(person);
// { id: "1", name: "Jaxongir", country: "Uzbekistan" },

7. FindIndex

FindIndex method used to find the index of the first occurence of item that passes the conditional test set up by callback function.
How it works

call findIndex on the array
pass callback to it
followings happen within the findIndex method body
1. loop over the length of the current array
2. pass current item to the callback, and if returned value by callback is true then return current item index
3. when the loop ends, if item is not found the return -1
followings happen within the callback function body
1. name the parameter
2. set up conditional and return the result

const people = [
  { id: "1", name: "Jaxongir", country: "Uzbekistan" },
  { id: "2", name: "Sarah", country: "Poland" },
  { id: "3", name: "Arthur", country: "England" },
  { id: "4", name: "Jonathan", country: "USA" },
];
Array.prototype.customFindIndex = function (callback) {
  for (let i = 0; i < this.length; i++) {
    const isFound = callback(this[i]);
    if (isFound) {
      return i;
    }
  }
};
const personIndex = people.customFindIndex((person) => {
  return person.id === "3";
});
console.log(personIndex);
// 2

8. Push

Push method used to add new item to the end of the array and return the new array length. It mutates the original array
How it works

call push on the array
pass value or array of values that you want to add to the array
followings happen within the push method body
1. use rest operator to contain all values passed to push in the array
2. loop over each item and push that item to the end of the current array
3. when the loop ends, return the new length of the array

const hobbies = ["Cooking", "Reading"];
Array.prototype.customPush = function (...values) {
  for (const item of values) {
    this[this.length] = item;
  }
  return this.length;
};
console.log(hobbies);
// ["Cooking", "Reading"]
console.log(hobbies.customPush("Calisthenics", "Hiking", "Skiing"));
// 5
console.log(hobbies);
// [ 'Cooking', 'Reading', 'Calisthenics', 'Hiking', 'Skiing', 'Ring' ]

9. Pop

Pop method used to remove item in the last index of the current array and return the removed item. And modifies the original array
How it works

call pop on the array
followings happen within the push method body
1. store removed item in the variable
2. remove the last item of the array
3. return the removed array

const hobbies = ["Cooking", "Reading"];
Array.prototype.customPop = function () {
  const removedItem = this[this.length - 1];
  this.splice(this.length - 1, 1);
  return removedItem;
};
console.log(hobbies);
// ["Cooking", "Reading"]
console.log(hobbies.customPop());
// Reading
console.log(hobbies.customPop());
// Cooking
console.log(hobbies.customPop());
// undefined
console.log(hobbies);
// [ ]

Unshift Unshift method used to add new item to the beginning of the array and return the new array length How it works
call unshift on the array
pass value or array of values that you want to add to the array
followings happen within the unshift method body
1. use rest operator to contain all values passed to unshift in the array
2. loop over each item and push that item to the beginning of the current array
3. when the loop ends, return the new length of the array

const hobbies = ["Cooking", "Reading"];
Array.prototype.customUnshift = function (...values) {
  for (const item of values) {
    this.splice(0, 0, item);
  }
  return this.length;
};
console.log(hobbies);
// ["Cooking", "Reading"]
console.log(hobbies.customUnshift("Juggling", "Running"));
// 4
console.log(hobbies);
// ["Cooking", "Reading", "Juggling", "Running"]

Shift Shift method used to remove the first item in the array and return the removed item How it works
call shift on the array
followings happen within the shift method body
1. store removed item in the variable
2. remove the first item of the array
3. return the removed array

const hobbies = ["Cooking", "Reading"];
Array.prototype.customShift = function () {
  const removedItem = this[0];
  this.splice(0, 1);
  return removedItem;
};
console.log(hobbies);
// ["Cooking", "Reading"]
console.log(hobbies.customShift("Juggling", "Running"));
// Juggling
console.log(hobbies);
// ["Running"

Summary
So in this post we've learned how Array methods work under the hood. now as the challenge I want you guys, implement custom Array methods for methods not mentioned in here and share the result with me. I'm sure that you guys'll do it.

How JavaScript Higher Order Functions Work Under the Hood