Implement map on a Prototype: detailed description

I will be grateful if anyone looks at how I understand Solution 1 (with forEach) and say whether such an understanding is correct, especially in understanding what the keyword this is doing there.

My description:

This is a prototype of a method called myMap. The method calls a certain function named “callback” (it could be any other name), which:

  1. creates a newArray;
  2. using the key word this, it sets the property, as usual in a constructor, and in this case the property is the function (forEach method);
  3. it iterates through [some] array using the forEach method;
  4. on each element of [some] array it executes the function named “callback”;
  5. the result of the every function execution step is pushed into the created newArray;
  6. the method returns newArray.

When we call the myMap() method on the source array s, it performs all these actions, plus the callback(a) performs item*2, in this example, and returns the general result.

1 Like

Can you post your current progress?

Array.prototype.myMap = function() { ????

The this is what the function is called on… so for your example s.myMapthis is s

[0,1,2,3].myMap for example, this would be [0,1,2,3]

1 Like

I’m not sure this is correct description. My advice would be to use “we” instead of “it” when you’re referring to the algorithm, something like that:

“STEP 2: We apply forEach() method on this, that holds a reference to the caller array”

Thank you, now I think that I understand better. So, is this editing of my p.2 (below) correct?

  • the keyword this is here, because it refers to the array, which the forEach() method should be called on. In our case, this is [23, 65, 98, 5] in s.myMap(function(item){return item*2});

My question was about recommended Solution 1 from here freeCodeCamp Challenge Guide: Implement map on a Prototype, not about my own solution.

My code works properly, this is the same approach like in Solution 1. Here it is:

// Add your code below this line
  this.forEach(element => newArray.push(callback(element)));
// Add your code above this line

Thank you. Probably you can also suggest the better answer to my question: “What the keyword this does here”?

1 Like

This is still not quite correct, considering both forEach() and map() expect more than one argument, proper code should be somewhat like this:

this.forEach((...arg) => newArray.push(callback(...arg)));

this in JS refers to a current execution context, which is in other words - what object executes current function. Consider this function:

function showContext() {
  console.log(this);
}

Now we will run in from different places:

showContext(); // Window - Global object

const objectA = {};
objectA.showContext = showContext;
objectA.showContext(); // objectA

const objectB = {};
objectB.showContext(); // TypeError :( 

What if you want this function to be invoked from any object?

Object.prototype.showContext = showContext;
objectB.showContext(); // objectB

So we learned 2 things:

  1. this keyword refers to execution context (in case with methods - it’s what goes to the left of the dot)
  2. If we want our function to apply to all Objects or Arrays we need to add it to prototype

Hope this will clear things a bit :slight_smile:

13 Likes

Thank you so much. this is exactly the answer I needed.

Happy New Year! )

This stuff is mind-blowing but I really appreciate how clearly FCC teaches these concepts

Thank you so much, It was very good explanation.

1 Like

using while loop

var s = [23, 65, 98, 5];

Array.prototype.myMap = function(callback) {
  var newArray = [];
  let i = 0;
  // Only change code below this line
   while(i < this.length){
        newArray.push(callback(this[i]));
    i++
   }
  // Only change code above this line
  return newArray;
};

var new_s = s.myMap(function(item) {
  return item * 2;
});

console.log(new_s);