Let's create our map method

#javascript #beginners #programming

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:

Let's create our own filter method in JS

machy44 ・ Feb 26 '18

#javascript #filter #webdev

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)

Adrian B.G. • Jun 25 '18 • 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

machy44 • Jul 12 '18

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.

Adrian B.G. • Jul 12 '18

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.