Implement map on a Prototype Can anyone explain this to me?

Implement map on a Prototype Can anyone explain this to me?
0.0 0

#1

Tell us what’s happening:
I really don’t understand this code. Why we put callback before (item)
This whole code is just too complex to me.
Can anyone please explain it to me?

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
  this.forEach(function(item) {
      newArray.push(callback(item));
  }
  );
  // Add your 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; rv:60.0) Gecko/20100101 Firefox/60.0.

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


#2

It’s ok. Things are complicated at the beginning. And my explanation maybe too, but for lack of better expressive powers :slight_smile:

callback here is the parameter of the function in function(callback). When you then call myMap on s: s.myMap(function(item){...}) you pass a function, than takes the place of the parameter callback.
Then in the push part the code calls the function callback with item as its argument.


#3

I still don’t understand what is callback. I mean yeah, I know that is a parameter in the function but my main question is why we write .push(callback(item));

What callback is supposed to do in this, I mean callback is not a function so why we don’t put “,” between it and (item)

Sorry for many questions but I’m really confused.


#4

In the built-in Array.prototype.map, there is a callback function passed to it with 1-3 arguments which can be used inside the callback function. During each iteration of the array, the callback function is executed and you can use the 3 arguments (1st being the current element in the iteration, 2nd being the index of the current element in the iteration, and 3rd being the actual original array the map is being used on).

In this challenge, you only need to worry about the first argument (the current element being iterated over). Remember that the map function creates a new array of elements with the values of the elements being the result of the callback function code executed on the elements. That is why the callback is being applied to item and then pushed into newArray inside the forEach.


#5

I think I understood that but why we write .push(callback(item)) instead of direct .push(item)?


#6

Precisely, callback is a function, you can pass functions as arguments in javascript. With callback(item) you are using the fuction passed as argument, whatever it were, and giving item as its argument.


#7

Because if you just pushed item into newArray, you would not modify the element being added to newArray. One of the main points of using map, is to return a new array of elements which have been modified via a function.

If I told you to create a function which takes an array as an argument and then return a new array which has each element in the array multiplied by the number 3 , then you would probably write something like:

function multipleByThree(arr) {
  var newArray = [];
  for (var i = 0; i < arr.length; i++) {
    newArray.push(arr[i]*3);
  }
  return newArray;
}

var origArray = [1, 3, 6, 9];
multiplyByThree(origArray); // returns [3, 9, 18, 27];

Think of multipleByThree as one of a million possible callback functions which could be passed to your myMap method. You want a generic way of creating a new array with the values of the original array modified by the function supplied.