Skip to content

Instantly share code, notes, and snippets.

@donoage

donoage/gist:0697fbc640bcd7833865b294d73313d8

Forked from bmacmill/gist:76e4b92d2cddbafd8f01713f59d45f7d
Created April 29, 2017 22:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save donoage/0697fbc640bcd7833865b294d73313d8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save donoage/0697fbc640bcd7833865b294d73313d8 to your computer and use it in GitHub Desktop.
Download ZIP
03 - Annotating _.map
Raw
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]
@donoage
Copy link
Author

donoage commented Apr 29, 2017

  • 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment