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:

Let's create our own filter method in JS

machy44

#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.