DEV Community

machy44
machy44

Posted on

Let's create our map method

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
bgadrian profile image
Adrian B.G. • Edited

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

function map(array, iteratee) {
  let index = -1
  const length = array == null ? 0 : array.length
  const result = new Array(length)

  while (++index < length) {
    result[index] = iteratee(array[index], index, array)
  }
  return result
}

Some side notes about the differences between the custom maps:

  • it pre-allocates the result array (we already know its length) const result = new Array(length)
  • it uses const where the values don't change (like the result and length)
  • both implementation lacks the last 2 optional parameters from the builtin Map functionality
  • by not using a for loop and storing the length, is not required to fetch the this.length value for each iteration
  • it doesn't pollute the global space (lodash export the functions, and you use them as you need), and most important it doesn't "modify" all instances of arrays from the entire project, I mean for many reasons it is bad to do Array.prototype.ownMap
Collapse
 
machy44 profile image
machy44

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.

Collapse
 
bgadrian profile image
Adrian B.G.

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.

Thread Thread
 
machy44 profile image
machy44

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.

Collapse
 
pekosog profile image
Israel García

Very good example, can I use it to with my students?

Collapse
 
machy44 profile image
machy44 • Edited

Of course you can. It would be a pleasure.