I am stuck on this trying to understand it but i cant

JavaScript
1

Tell us what’s happening:
Hi.So i am stuck on this challenge so hard even when i looked the solution on the forum i still could not get it right.Why do we use this keyword here,can you tell me where exactly does it refers to when we use it in our prototype?Also i am confused with passing the item and then use this line newArray.push(callback(this[i])); to fill the newArray.Final question,is it bad that i cant understand this challenge at this point of the curriculum and i had to check the forums solution (and still dont get it :frowning: )?
Thanks!

Your code so far


// The global variable
var s = [23, 65, 98, 5];

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

};

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36.

Challenge: Implement map on a Prototype

Link to the challenge:

2

Okay, first, don’t feel bad–at all! This is really tough. I think you have to be pretty knowledgeable to thoroughly understand “this.”

What “this” means varies depending on where the “this” appears.

For example, if you go into the console and type “this,” you get:

Window {parent: Window, opener: null, top: Window, length: 13, frames: Window, …}

What if you make a function?

function thisly() {
    console.log(this);
}
//Window {parent: Window, opener: null, top: Window, length: 13, frames: Window, …}

Same result.

Okay, but what about if you made exact same function, but put it inside an object?

let obj = {
    thisly: function() {
        console.log(this);
    }
}
//now call the method
obj.thisly()
//thisly: ƒ ()__proto__: Object
//??! different answer

So when I’m just in the basic console, this is the Window. When I call a function in the Window, it’s Window. But the exact same function in an object, this becomes the object!

How about this–I’ll make a new object, and its method will point to the method in the first object.

let newObj = {
    thisThisly: obj.thisly} //its method points to the method defined in the other object, called obj.
//now I call its method
newObj.thisThisly
//ƒ () {
        console.log(this);
    }
the result is that this has changed to the function itself.

Does that help? Probably not, right? Basically, this changes depending on from where it’s called. It’s pretty hard to understand, imo. There are plenty of articles and vids explaining it, but it’s probably best to just keep coding, experimenting, and using a lot of console.log. Good luck!

3 Likes
3

Well it helps a bit cause i understand now that this keyword refers on different things depends where you find it.But still,i think i dont understand it yet on the challenge of the curriculum. :confused: i will look at it again.Thanks!

1 Like
4

For this part of the solution:

You can visualize it like this:

for (let i = 0; i < this.length; i++) {
    newArray.push(function(item) {
      return item * 2;
    }(s[i]));
  }

Callbacks are functions that get called into another function. In this case, function(item) { return item * 2; } is the callback function. This refers to var s . From here, s[i] is the argument that gets passed into the item parameter of the callback function, which then returns the value times 2. Finally, that value would be pushed into newArray.

5

I have often wondered why this challenge seems to assume the camper would know to use this inside the callback. The challenge does not even hint at it or take into account this rather important piece of the puzzle. It should be updated in my opinion. I should open an issue.

Edit: I opened an issue and updated the Hits page with some links as well.

2 Likes
6

Should i mark it as a solution :smiley: hahahahah Same happens with filter 2 challenges next,just saying. Thanks

7

That is up to you.

I have included the filter challenge in the issue and will update its hints page as well with the same links.

1 Like