This is the first Array method implementation from this series. In this article we are going to implement forEach() method and it will be a little bit lengthy. So, let's get started.
Note: This is not the official implementation, every browser and run time environment has their own implementation system.
At the very beginning we create a simple code snippet to understand how and what does a forEach() do?
// Create a simple array
let arr = [1, 2, 3, 4, 5, 6, 7];
// Try build-in forEach
arr.forEach((item) => {
console.log(item + 2); // Output: 3 4 5 6 7 8 9
});
In above code snippet, we are watching that forEach can traverse every single element from array and can modify them. If your wounder how to make your own build-in method or property, then check out my article on Prototype !
Let's see another code snippet.
let arr = [1, 2, 3];
arr.forEach((value, index, array) => {
console.log(
`value is = ${value}, index number is = ${index} and the whole array is = [${array}]`
);
});
// Output:
// value is = 1, index number is = 0 and the whole array is = [1,2,3]
// value is = 2, index number is = 1 and the whole array is = [1,2,3]
// value is = 3, index number is = 2 and the whole array is = [1,2,3]
If you don't know how many parameters, you should pass or what the method or the property will do then hover on the method or property. If you use vs code editor, then you will find a popup which will define the method's job. Let's get back to our code snippet.
In above two code snippets, there are shown what a minimum work can done by a forEach method. You might be known more than I do.
Now this is the time to implement our own forEach. At the very beginning we will try to traverse an Array. Just do it.
let arr = [1, 2, 3];
// Traverse the array using a for loop
let arrayLength = arr.length,
i;
for (i = 0; i < arrayLength; i++) {
console.log(
`value is = ${arr[i]}, index number is = ${i} and the whole array is = [${arr}]`
);
}
// Output:
// value is = 1, index number is = 0 and the whole array is = [1,2,3]
// value is = 2, index number is = 1 and the whole array is = [1,2,3]
// value is = 3, index number is = 2 and the whole array is = [1,2,3]
By using the above code snippet, we can traverse the array and extract the value, index number and the whole array. Just like we did before use forEach.
Now we will wrap the loop in a function to reuse the code for multiple arrays.
function ourForEach(arr) {
let arrayLength = arr.length,
i;
for (i = 0; i < arrayLength; i++) {
console.log(
`value is = ${arr[i]}, index number is = ${i} and the whole array is = [${arr}]`
);
}
}
let arr1 = [1, 2, 3];
let arr2 = ["Torjuman", "Sakib", "Tamim"];
let arr3 = [true, false, true];
ourForEach(arr1);
ourForEach(arr2);
ourForEach(arr3);
// Output:
// for arr1
// value is = 1, index number is = 0 and the whole array is = [1,2,3]
// value is = 2, index number is = 1 and the whole array is = [1,2,3]
// value is = 3, index number is = 2 and the whole array is = [1,2,3]
// for arr2
// value is = Torjuman, index number is = 0 and the whole array is = [Torjuman,Sakib,Tamim]
// value is = Sakib, index number is = 1 and the whole array is = [Torjuman,Sakib,Tamim]
// value is = Tamim, index number is = 2 and the whole array is = [Torjuman,Sakib,Tamim]
// for arr3
// value is = true, index number is = 0 and the whole array is = [true,false,true]
// value is = false, index number is = 1 and the whole array is = [true,false,true]
// value is = true, index number is = 2 and the whole array is = [true,false,true]
Now we can easily reuse the code as we saw in above code. But we don't need console.log() for every time. So, what should we do now?
Nothing just let the user decide what they want to do with this ourForEach . How could we give this power to user?
You might think it is difficult. But not actually. Just remove console.log() and invoke a call-back function there. Just look at the bellow code.
function ourForEach(arr, callbackFun) {
let arrayLength = arr.length,
i;
for (i = 0; i < arrayLength; i++) {
callbackFun(arr[i], i, arr);
}
}
let arr1 = [1, 2, 3];
ourForEach(arr1, (item) => {
console.log(`Added 2 to the value and the result is = ${item + 2}`);
});
console.log(arr1);
// Output:
// Added 2 to the value and the result is = 3
// Added 2 to the value and the result is = 4
// Added 2 to the value and the result is = 5
// [ 1, 2, 3 ]
As we already know from our prototype article that how to put any method in built-in object. Let's do this again.
Array.prototype.ourForEach = function ourForEach(callbackFun) {
let arrayLength = this.length,
i;
for (i = 0; i < arrayLength; i++) {
callbackFun(this[i], i, this);
}
};
let arr1 = [1, 2, 3];
arr1.ourForEach((value, index, array) => {
console.log(
`value = ${value + 2}, index number = ${index} and array = [${array}]`
);
});
// Output:
// value = 3, index number = 0 and array = [1,2,3]
// value = 4, index number = 1 and array = [1,2,3]
// value = 5, index number = 2 and array = [1,2,3]
That's it for today. If you find this helpful and interesting, then share this with your friend and tag me also in LinkedIn.