This is the second Array method implementation from this series. In this article we are going to implement map() method. 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 map
let newArr = arr.map((item) => {
return item + 5;
});
console.log(arr); // Output: [1, 2, 3, 4, 5, 6, 7]
console.log(newArr); // Output: [6, 7, 8, 9, 10, 11, 12]
Let me explain the above code snippet. In the above code, we first declare an array. Then try to modify the array by adding 5 to each element of the array and return the value. When the map method will return the value, we have to store the value in somewhere. So, we store the value in newArr. Print both the array. Let see another code snippet.
let arr = [1, 2, 3];
// Traverse the array using a for loop and push the modified elements to new array
let arrayLength = arr.length,
i,
tempArray = [];
for (i = 0; i < arrayLength; i++) {
tempArray[i] = arr[i] + 5;
}
console.log(arr); // Output: [ 1, 2, 3 ]
console.log(tempArray); // Output: [ 6, 7, 8 ]
Again, I am going to explain the above code snippet. We at first declare an array called arr at the very beginning of the code. Then take arr length and declare another empty array called tempArray to store the new modified value of arr. After that we just run a simple for loop to traverse the array. Assign all new value to last index every time till the loop goes on.
Now we are going to reusable the above code snippet by wrapping them in a function. So that we code use the code for different array.
function ourMap(arr) {
let arrayLength = arr.length,
i,
tempArray = [];
for (i = 0; i < arrayLength; i++) {
tempArray[i] = arr[i] + 5;
}
return tempArray;
}
let arr = [1, 2, 3];
let arr1 = [10, 20, 30];
let arr2 = ourMap(arr);
let arr3 = ourMap(arr1);
console.log(arr); // Output: [ 1, 2, 3 ]
console.log(arr2); // Output: [ 6, 7, 8 ]
console.log(arr1); // Output: [ 10, 20, 30 ]
console.log(arr3); // Output: [ 15, 25, 35 ]
You can see just wrapping into a function and returning the tempArray array we can make the code reusable.
But here comes another problem that we cannot reuse the code without just adding 5 to it. So, what should we do now?
No worries. I am telling you how to do so. Let's invoke a call-back function instead of adding 5 in for loop. See the below code.
function ourMap(arr, callbackFun) {
let arrayLength = arr.length,
i,
tempArray = [];
for (i = 0; i < arrayLength; i++) {
tempArray[i] = callbackFun(arr[i], i, arr);
}
return tempArray;
}
let arr = [1, 2, 3];
let arr1 = [10, 20, 30];
let arr2 = ourMap(arr, (item) => {
return item * 30;
});
let arr3 = ourMap(arr1, (item) => {
return item / 5;
});
console.log(arr2); // Output: [ 30, 60, 90 ]
console.log(arr3); // Output: [ 2, 4, 6 ]
That's it. We have done it. Now make this function available for everyone using Prototype. Don't know about Prototype then read the article about Prototype.
I'm just doing this. Let's see.
Array.prototype.ourMap = function ourMap(callbackFun) {
let arrayLength = this.length,
i,
tempArray = [];
for (i = 0; i < arrayLength; i++) {
tempArray[i] = callbackFun(this[i], i, this);
}
return tempArray;
};
let arr = [1, 2, 3];
let arr1 = [10, 20, 30];
let arr2 = arr.ourMap((item) => {
return item * 30;
});
let arr3 = arr1.ourMap((item) => {
return item / 5;
});
console.log(arr2); // Output: [ 30, 60, 90 ]
console.log(arr3); // Output: [ 2, 4, 6 ]
That's it for today. If you find this helpful and interesting, then share this with your friend and tag me also in LinkedIn.