Functional Programming - Implement map on a Prototype

Tell us what’s happening:
Could someone verify my understanding of ‘this’ in the context of array calling it ? (I’m assuming now “this” can be replaced with “original array” in following code.)

the reason i came to this conclusion is after reading Solution 1 where
....... newArray.push(callback(this[i], i, this));

my problem is with Solution 2

this.forEach((element, index, originalArr) =>
    newArray.push(callback(element, index, originalArr))

replacing originalArr with this

this.forEach((element,index, this) => newArray.push(callback(element,index,this)));
  // Only change code above this line
  return newArray;
};

fails with


SyntaxError: unknown: Binding invalid left-hand side in function parameter list. (4:28)

  2 |   const newArray = [];
  3 |   // Only change code below this line
> 4 | this.forEach((element,index,this) =>newArray.push(callback(element,index,this)));
    |                             ^
  5 |   // Only change code above this line
  6 |   return newArray;

but removing the ‘this’ on left works fine?


this.forEach((element,index) =>newArray.push(callback(element,index,this)));

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Challenge: Functional Programming - Implement map on a Prototype

Link to the challenge:

this is a reserved keyword in JS, so you can’t use it as a variable name. The foreach callback method can take up to three arguments: the current element being processed, the index of the current element being processed, and the array that is being acted upon. The values for these three arguments are supplied by the forEach method. You just need to provide names for them, just like you would any other function. But you can’t use this because it’s a reserved word.

Thanks for replying,

Also for the question about removing the ‘this’ on left works fine?
this.forEach((element,index) =>newArray.push(callback(element,index,this)));

if i understand correctly from

the arrow function “inherits” the context from the function where it is defined.

it is because without the ‘this’ on left of arrow function as input parameter, the ‘this’ on right act as context of ‘this’ outside the arrow function (which is the original array). Kindly correct me if I’m wrong.

You are right about the this you are passing into callback. That this is the same this that forEach is being executed on because the arrow function doesn’t have its own this. But it has nothing to do with removing this as the third parameter name in the forEach callback function’s parameter list. Again, the callback function you provide to the forEach method can take up to three arguments (as I described above). You have to give each of those arguments a name, just like you would any other function. But you can’t use this as one of those names because this is a reserved keyword.

Personally, I would use all three arguments in the forEach callback’s parameter list (as is done in the original solution 2) instead of only two arguments and then using this as the third argument when invoking callback. This is traditionally how you would use forEach and I think it makes it much clearer what is going on instead of potential confusion over what this is doing.

Thanks again for the clarification! =D

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.