If you want to take a closer look on how JS works and how we created our own filter function, you can see my earlier post:
I think this two posts combined are a good way to find out how standard array methods work in JS.
It's very important to know that Array.prototype.map() returns a new array which means that the old array is not mutated. (Mutation is a very important concept when you start to work with React and Redux libraries). Enough talking, now let's code. Here is a simple example how map works.
var arr = [1,2,3];
var newArr = arr.map(function(element){
return element + 1;
});
console.log('arr: ', arr);
// arr is not mutated and returns [1,2,3]
console.log('newArr: ', newArr );
//newArr returns [2,3,4]
Now, Let's go code our own map function
In this example we will not check if the first parameter is an array or if the second parameter is a callback function, and so on. Detailed syntax of map function you can find on developer.mozilla.org.
let arr = [1,2,3];
Array.prototype.ownMap = function(callback) {
let mappedArr = [];
for(let i=0; i < this.length; i++) {
mappedArr.push(callback(this[i]))
}
return mappedArr;
}
let newArr = arr.ownMap(function(element) {
return element + 1;
});
console.log('arr: ', arr);
// not mutated and returns [1, 2, 3]
console.log('newArr: ', newArr);
// returns [2, 3, 4]
Now let's play with indexes because an index can be send as the second parameter in map callback function.
let arr = [1,2,3,4];
Array.prototype.ownMap = function(callback) {
let mappedArr = [];
for(let i=0; i < this.length; i++) {
mappedArr.push(callback(this[i], i)) // we defined i as second argument
}
return mappedArr;
}
let newArr = arr.ownMap(function(element, index) {
return element + index;
});
console.log('arr: ', arr);
// not mutated and returns [1, 2, 3, 4]
console.log('newArr: ', newArr);
// returns [1, 3, 5, 7]
Conclusion
When you are learning something it's always best to know how things work under the hood. Please, let me know, if there is something I didn't mention and it's good to know.
Top comments (6)
Very nice as an example, just remember is an example that doesn't fully replace the builtin function, so don't use it in production.
As a completion, here is the lodash map source code
Some side notes about the differences between the custom maps:
const result = new Array(length)
this.length
value for each iterationArray.prototype.ownMap
Yes, it's only for educational purpose. Thank you for giving a good example with notes and made this post better. I will certainly take a deeper look in lodash now.
Lodash is a good example of an open source library that adds a huge value in your project, especially in the pre-JS6 era.
As for its code, as with any big open-source project, it has the added value from many of its contributor expertise. Crowd anything is general better then what a small team can achieve on its own.
Yap, You are right. Take a look in some popular library code and learn in that way. I will personally take that path in future. Thank you for advice.
Very good example, can I use it to with my students?
Of course you can. It would be a pleasure.