Implement Map on prototype

[pavelshalnov]

Tell us what’s happening:
Describe your issue in detail here.

Hi! I really can’t get the idea, how these functions works. So I have 2 questions:
First — do I understand the logic of the programm correctly?`

1. const new_s = s.myMap(function(item) starts Array.prototype.myMap = function(callback)
2. Array.prototype.myMap = function(callback) takes const s as an array and item (new_s) as an argumet (callback)
3. Than it pushes all elements of array S to newArr
4. Array.prototype.myMap = function(callback) takes return newArr = [23, 65, 98, 5]. So it creates a copy of S and don’t change S
5. const new_s = s.myMap(function(item)* multiplies newArr which is returned as item into it and return it

Second — why s.myMap(function(item) inderstands that item is new_s? Why isn’t it S or something else?

  **Your code so far**

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

Array.prototype.myMap = function(callback) {
const 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;
};

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

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.84 Safari/537.36

Challenge: Implement map on a Prototype

Link to the challenge:

freeCodeCamp.org

[snowmonkey]

The function myMap has been defined on the Array.prototype, and thus is available on any array (as an array is automatically assigned to the Array class). So when we call s.myMap( myMappingFunc ), the this within that function refers to the array we’ve placed in s.

When your function completes, and an array is returned, we are assigning the returned value to new_s. We don’t know about that variable inside the function, we don’t need to. We just toss a value out of the mapping function, and leave it up to the user to do something with that value (like assigning it to a variable).

[kevinSmith]

We have this:

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

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

  for (let i = 0; i < this.length;  i++) {
    newArray.push(callback(this[i]));
  }

  return newArray;
};

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

const new_s = s.myMap(function(item) starts Array.prototype.myMap = function(callback)

Sure. The call to that method (myMap) calls the method that was stored on the prototype.

Array.prototype.myMap = function(callback) takes const s as an array and item (new_s) as an argumet (callback)

s is the this in that prototype. Since we are using the method on s, that is the this that is used. If we used it on a different array, then those values would be accessible through this.

Than it pushes all elements of array S to newArr

Not quite. This:

  for (let i = 0; i < this.length;  i++) {
    newArray.push(callback(this[i]));
  }

takes each element of the original array, pumps it through the callback and pushes that value into the new array. You end up with a new array where each element is made from the corresponding element in the original, transformed by the callback.

Array.prototype.myMap = function(callback) takes return newArr = [23, 65, 98, 5] . So it creates a copy of S and don’t change S

newArr was created brand new and that is where the data was pushed, so it returns that new array. The old array was not modified. We could have, but did not. (Which is usually a good idea.)

const new_s = s.myMap(function(item) * multiplies newArr which is returned as item into it and return it

It doesn’t multiply the array. It takes each element in s and applies the callback to each element (which multiplies) and stores those values in a new array and then returns that new array.

Second — why s.myMap(function(item) inderstands that item is new_s ? Why isn’t it S or something else?

It doesn’t know and doesn’t care. It is saying, “This function will be passed a parameter - let’s call it ‘item’.”

Inside your method, you have callback(this[i]), so you are passing this[i] to your callback. The callback doesn’t know what that data was called before and doesn’t care. The callback will accept that data and call it “item”.

[pavelshalnov]

Kevin thank you very much! You show me how to think more precise about the code, that is very important. Now it is more clear for me how it works

[pavelshalnov]

Thank you @snowmonkey!
I dont’t know a lot about classes still, but it seems to me that I got the idea that this refers to a higer context if we doesn’t set in a function or in a object. And here arr s is this for the Array.prototype.myMap

I understand also that I need to go deeply into callback functions.
Thank you again!)