03 - Annotating _.map

gistfile1.js

//we create  an object called _
var _ = {
  //the first property is called map it's a method that takes two arguments
  //the first argument is list, the second is a call back function
  map: function(list, cbFn) {
    //this funciton creates a new array
    var newArray = [];
    //it uses a forEach loop to go through list returning the element i'm not sure what index is doing?
    list.forEach(function(elem, index) {
      //im not sure why it's setting the cbFn as a variable here instead
      //of just putting the cbfn into the new Array
      var newElem = cbFn(elem, index);
      //here it pushes the neweEleme variable into the new Array
      newArray.push(newElem);
    });
    //here it returns the new Array
    return newArray;
  }
};
 //the method is invoked passing in the array 1,2,3 and a new function that multiplies the 1,2,3 by 3
 //reading the underscore.js documentationo, i get that it is "transforming" the array passed in, but I'm failing to see how this is helpful right now...
 //it looks like it's an array passin into an array.
 //in my defense i put my thumb up sideways as far as how I felt on this!!
_.map([1, 2, 3], function(num){ return num * 3; });
// => [3, 6, 9]

• When creating gist files, make sure you put the correct extension to see the code syntax highlighting. Not gistfile1.txt, but gistfile1.js
• Create a secret gist not public. This is up to you.

Now onto your comments,

https://gist.github.com/donoage/0697fbc640bcd7833865b294d73313d8#file-gistfile1-js-L9

• Technically, index here isn't really needed because your callback function that's been passed to _.map() takes only 1 argument anyway.

https://gist.github.com/donoage/0697fbc640bcd7833865b294d73313d8#file-gistfile1-js-L11-L12

• cbFn here is a function that you passed in initially when you called _.map() and in this line, we're using invoking that cbFn with elem as a parameter.
• Then your cbFn function will convert each item in the array you originally passed in ([1,2,3]) and assign the resulting value back to newElem varible. Finally, the value of newElem variable gets pushed into newArray variable, which is an array.

https://gist.github.com/donoage/0697fbc640bcd7833865b294d73313d8#file-gistfile1-js-L22

• This example is jam packed with fundamental JS concepts, IMO.
  • variable scope
  • creating an object and its properties
  • function references as callbacks
• This example is great in a sense that it forces you to think about how function references and callback functions work.
• This also highlights the fact that it's important to know what parameters (data types especially) should be passed to a function.
• We will be using this concept of passing in a function reference a lot in Feedr app. Also more so in your final project.

3/4