What is context in _.each(list, iterator, [context])?

by

The context parameter just sets the value of this in the iterator function.

var someOtherArray = ["name","patrick","d","w"];

_.each([1, 2, 3], function(num) { 
    // In here, "this" refers to the same Array as "someOtherArray"

    alert( this[num] ); // num is the value from the array being iterated
                        //    so this[num] gets the item at the "num" index of
                        //    someOtherArray.
}, someOtherArray);

Working Example: http://jsfiddle.net/a6Rx4/

It uses the number from each member of the Array being iterated to get the item at that index of someOtherArray, which is represented by this since we passed it as the context parameter.

If you do not set the context, then this will refer to the window object.

Extras:

To answer the What's the advantage of that? Why not just refer to someOtherArray[num] rather than this[num]? upvoted question found in the comments below, let’s move the anonymous iteratee callback into a function for easy re-use:

const someOtherArray  = ["name","patrick","d","w"];
const yetAnotherArray = ["what","goes","here","?"];

function alertStr(num){
    alert( this[num] );
}

_.each([1, 2, 3], alertStr, someOtherArray);
_.each([1, 2, 3], alertStr, yetAnotherArray);

You can see how the this reference allows us to re-use the iteratee function across multiple _.each calls with different context values. This would not work if we had the someOtherArray hardcoded inside the iteratee.

More Related Contents:

  1. How to use underscore.js as a template engine?
  2. What object javascript function is bound to (what is its “this”)?
  3. Split JavaScript array in chunks using Lodash
  4. How do I use ‘this” keyword in an object literal? [closed]
  5. Pass correct “this” context to setTimeout callback?
  6. map function for objects (instead of arrays)
  7. Does JavaScript have a method like “range()” to generate a range within the supplied bounds?
  8. Find by key deep in a nested array
  9. Javascript setInterval and `this` solution
  10. VueJS: why is “this” undefined?
  11. “this” keyword in event methods when using JavaScript prototype object
  12. How do I pass the this context to a function?
  13. JavaScript – Owner of “this”
  14. Set “this” variable easily?
  15. Convert array of strings into an array of objects
  16. ‘this’ does not work properly in another event. I’m clueless as to why [duplicate]
  17. Comparing two arrays of objects, and exclude the elements who match values into new array in JS
  18. Javascript lost context when assigned to other variable
  19. jQuery/JavaScript “this” pointer confusion
  20. Group by multiple values Underscore.JS but keep the keys and values
  21. how to set displayName in a functional component [React]
  22. Functional approach to basic array construction
  23. Index inside map() function
  24. Is it good to call subscribe inside subscribe?
  25. Preserve ‘this’ reference in javascript prototype event handler [duplicate]
  26. onClick Function “this” Returns Window Object
  27. Array Of JS Dates How To Group By Days
  28. merge two arrays of keys and values to an object using underscore
  29. What is the difference between these Backbone/Underscore .bind() methods?
  30. addEventListener, arrow functions, and `this` [duplicate]

Leave a Comment