Search code examples
javascriptarraysfunctionecmascript-6array.prototype.map

Creating my own array.prototype.map method. How can I access the array?


So I am trying to create a method that mimic exactly what the Array.prototype.map() method does and there is a lot I am confused about. The main problem I suppose comes down to its syntax. I know there are many different ways to utilitize the map method for instance:

example 1:

let say I have an array of objects -

var movieList = [
   {"Title" : "Inception",
   "Awards" : "4 oscars",
   "Language" : "English",
   "imdbRating" : "8.8"
   },

   {"Title" : "Inception2",
   "Awards" : "44 oscars",
   "Language" : "English and Spanish",
   "imdbRating" : "9.8"
   },

   {"Title" : "Interstellar",
   "Awards" : "10 oscars",
   "Language" : "English",
   "imdbRating" : "9.5"
   }
];

Lets say I want to make a function that returns a list of objects that contains only the title of the movie and its imdbRating. In this case, I can use the map() method:

let newList = movieList.map( (current) ({'title': current['Title'],     
               'rating': current['imdbRating'] }) );

the above line of code satisfies what i need to achieve my objective using the map method. However, the syntax can be different for other cases

example 2:

let s = [1, 2, 3, 4];

let s2 = s.map( function(item) {
   return item*2;
});

using the map function s2 will return an array that has for each element double the value of each element in the s array. Now, going back to the theme of this post, the problem I am working on gave me this outline to start with:

Array.prototype.myMap = function(callback) {
   let newArray = [];

I understand that when an array calls on the myMap method, it is inserting 2 arguments, the array and a function. But I cannot wrap my head around how I can concretely assign the value of each callback function on the element to the newArray in the myMap method. Especially because I do not know how to access the original array.

One of my attempts that I know is ridiculous because I do not know how I can access the length of the array as well as the array itself which calls on the myMap method-

Array.prototype.myMap = function(callback) {
   let newArray = [];
   let x = this.length();
   for(let i=0; i<x; i++){
       let counter = callback();
       newArray.push(counter);
   }
   return newArray;
};

the way I've understood the map() method thus far, is it takes 3 arguments, an array, a function, and the element that will be put thru the function and I do not know the syntax well enough to iterate over the array that calls on the map method and nowhere in my course have I been taught how to do this and I have not found any online resource either that offers a solution to this problem.


Solution

  • length is not a method - it's just a property. And you need to pass this[i] to the callback for the correct output.

    Array.prototype.myMap = function(callback) {
      let newArray = [];
      let x = this.length;
      for (let i = 0; i < x; i++) {
        let counter = callback(this[i]);
        newArray.push(counter);
      }
      return newArray;
    };
    
    let arr = [1, 2, 3];
    arr = arr.myMap(e => e * 2);
    console.log(arr);

    Please note it's quite bad practice to mutate the prototype methods - and especially creating a new one when an identical method exists. (map has all the functionality of myMap plus more).