Functional Programming: Implement map on a Prototype//How is this code working?

Tell us what’s happening:

Hello peoples, I need help understanding some things.

I understand what a map does which is that it takes each element of an array and applies whatever the function says, and returns a new array of the results applied to each element. (i hope i explained that right).
i understand the for loop.

What i don’t understand is where the callback is coming from? I’m thinking that its the function at the bottom that multiplies the items by 2. is this right? So call back is pretty much another function?

Another thing i dont understand is why is there the Array.prototype.myMap? From previous challenges, my understanding of .prototype is creating a recipe for an object. then with the .myMap its creating a method. I get that we’re creating a method myMap that will act like map, but what about the Array.prototype?

Please help~

Your code so far


// the global Array
var s = [23, 65, 98, 5];

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

};

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

console.log(new_s)

Your browser information:

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

Challenge: Implement map on a Prototype

Link to the challenge:
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype

Hello!

The callback is coming from the user of your function and a callback is a function:

function main(callback) {
  console.log('Type of callback:', typeof callback);
  if (typeof callback === 'function') callback('calling you');
}

// Here I'm the creator and the user of the function 'main'
main((callingYou) => console.log('The result:', callingYou));
// Output:
// Type of callback: function
// The result: calling you

Basically, a callback, in wherever language you’re using (usually, dynamic languages), is a reference to a function that is applied within the context. In the previous case, main() is the context.

The prototype is where we define the methods a class, in JavaScript will have. In this specific case, you’re adding a method to an already defined object (Array), whereas if you were defining a new object/class, you could just add the methods inside:

/**
  * Car class
  */
function Car() {
  function honk() {
    return 'Honk!';
  }

  this.honk = honk;
  // This is implicit, but I'm being explicit
  // meaning this return is redundant
  return this;
}

const car = new Car();
console.log(car.honk());

// We can define/modify existing objects by adding methods to its prototype:
Car.prototype.getMaxSpeed = () => '200km';

console.log(car.getMaxSpeed());
// Output: 200km

That way, the car gets a new method without having to define a new Car class.

I hope it helps you better understand prototypes :slight_smile:.

1 Like

In programming, people tend to use term ‘callback’ for a function that is passed as an argument to another function. I personally don’t like this naming, as callback has very specific meaning “Call me back when it’s done”:

function (callback) {
  const result = {};
  // do something to get result
  return callback(result);
}

MDN and W3Schools have helpful articles on Array.prototype.map and Array.prototype, respectively.

1 Like

The specific meaning is really helpful! So in the challenge that i did, the function at the bottom for new_s is called when the function for Array.prototype.myMap is done?

No, in this case following applies:

In the challenge function that you pass just being called on every item in the array. In your implementation, however it’s being called on every item of very specific array - s, which is not going to work, I’m afraid.

what happens when the method is used on an array called b instead?

try refreshing your memory with this challenge:
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/object-oriented-programming/make-code-more-reusable-with-the-this-keyword