What is context in each list iterator context

Question

I am new to underscore js  What is the purpose of  context  in   each    How should it be used

User · Answer

context is where this refers to in your iterator function  For example   var person       person friends       name1  true    name2  false    name3  true    name4  true       each   name4    name2    function name        this refers to the friends property of the person object   alert this name       person friends

User · Answer

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

User · Answer

As explained in other answers  context is the this context to be used inside callback passed to each   I ll explain this with the help of source code of relevant methods from underscore source code  The definition of   each or   forEach is as follows     each     forEach   function obj  iteratee  context      iteratee   optimizeCb iteratee  context      var i  length    if  isArrayLike obj         for  i   0  length   obj length  i  lt  length  i            iteratee obj i   i  obj             else       var keys     keys obj       for  i   0  length   keys length  i  lt  length  i            iteratee obj keys i    keys i   obj               return obj       Second statement is important to note here  iteratee   optimizeCb iteratee  context     Here  context is passed to another method optimizeCb and the returned function from it is then assigned to iteratee which is called later   var optimizeCb   function func  context  argCount      if  context     void 0  return func    switch  argCount    null   3   argCount        case 1        return function value            return func call context  value                case 2        return function value  other            return func call context  value  other                case 3        return function value  index  collection            return func call context  value  index  collection                case 4        return function accumulator  value  index  collection            return func call context  accumulator  value  index  collection                  return function         return func apply context  arguments             As can be seen from the above method definition of optimizeCb  if context is not passed then func is returned as it is  If context is passed  callback function is called as  func call context  other parameters                       func is called with call   which is used to invoke a method by setting this context of it  So  when this is used inside func  it ll refer to context    x000D   x000D     Without  context  x000D    each  1   function     x000D    console log this instanceof Window   x000D      x000D   x000D   x000D     With  context  as  arr  x000D  var arr    1  2  3   x000D    each  1   function     x000D    console log this   x000D     arr   x000D   lt script src  https   cdnjs cloudflare com ajax libs underscore js 1 8 3 underscore-min js  gt  lt  script gt  x000D   x000D   x000D    You can consider context as the last optional parameter to forEach in JavaScript

User · Answer

The context lets you provide arguments at call-time  allowing easy customization of generic pre-built helper functions   some examples      stock footage  function addTo x    use strict   return x   this    function pluck x    use strict   return x this     function lt x    use strict   return x  lt  this        production  var r    1 2 3 4 5 6 7 8 9   var words    a man a plan a canal panama  split           filtering numbers    filter r  lt  5      elements less than 5   filter r  lt  3      elements less than 3     add 100 to the elements    map r  addTo  100       encode eggy peggy    map words  addTo   egg   join           get length of words    map words  pluck   length         find words starting with  e  or sooner    filter words  lt   e         find all words with 3 or more chars    filter words  pluck  2      Even from the limited examples  you can see how powerful an  extra argument  can be for creating re-usable code  Instead of making a different callback function for each situation  you can usually adapt a low-level helper  The goal is to have your custom logic bundling a verb and two nouns  with minimal boilerplate    Admittedly  arrow functions have eliminated a lot of the  code golf  advantages of generic pure functions  but the semantic and consistency advantages remain   I always add  use strict  to helpers to provide native    map   compatibility when passing primitives  Otherwise  they are coerced into objects  which usually still works  but it s faster and safer to be type-specific

User · Answer

Simple use of   each   x000D   x000D    each   Hello    World     function word   x000D      console log word   x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs underscore js 1 8 3 underscore-min js  gt  lt  script gt  x000D   x000D   x000D    Here s simple example that could use   each    x000D   x000D  function basket     x000D      this items       x000D      this addItem   function item    x000D          this items push item   x000D         x000D      this show   function     x000D          console log  items     this items   x000D        x000D    x000D   x000D  var x   new basket    x000D  x addItem  banana    x000D  x addItem  apple    x000D  x addItem  kiwi    x000D  x show    x000D   x000D   x000D    Output   items      banana    apple    kiwi      Instead of calling addItem multiple times you could use underscore this way     each   banana    apple    kiwi    function item    x addItem item         which is identical to calling addItem three times sequentially with these items  Basically it iterates your array and for each item calls your anonymous callback function that calls x addItem item   The anonymous callback function is similar to addItem member function  e g  it takes an item  and is kind of pointless  So  instead of going through anonymous function it s better that   each avoids this indirection and calls addItem directly     each   banana    apple    kiwi    x addItem     but this won t work  as inside basket s addItem member function this won t refer to your x basket that you created  That s why you have an option to pass your basket x to be used as  context      each   banana    apple    kiwi    x addItem  x     Full example that uses   each and context    x000D   x000D  function basket     x000D      this items       x000D      this addItem   function item    x000D          this items push item   x000D         x000D      this show   function     x000D          console log  items     this items   x000D        x000D    x000D  var x   new basket    x000D    each   banana    apple    kiwi    x addItem  x   x000D  x show    x000D   lt script src  https   cdnjs cloudflare com ajax libs underscore js 1 8 3 underscore-min js  gt  lt  script gt  x000D   x000D   x000D    In short  if callback function that you pass to   each in any way uses this then you need to specify what this should be referring to inside your callback function  It may seem like x is redundant in my example  but x addItem is just a function and could be totally unrelated to x or basket or any other object  for example    x000D   x000D  function basket     x000D      this items       x000D      this show   function     x000D          console log  items     this items   x000D        x000D    x000D  function addItem item    x000D      this items push item   x000D     x000D   x000D  var x   new basket    x000D    each   banana    apple    kiwi    addItem  x   x000D  x show    x000D   lt script src  https   cdnjs cloudflare com ajax libs underscore js 1 8 3 underscore-min js  gt  lt  script gt  x000D   x000D   x000D    In other words  you bind some value to this inside your callback  or you may as well use bind directly like this     each   banana    apple    kiwi    addItem bind x         how this feature can be useful with some different underscore methods    In general  if some underscorejs method takes a callback function and if you want that callback be called on some member function of some object  e g  a function that uses this  then you may bind that function to some object or pass that object as the  context  parameter and that s the primary intention  And at the top of underscorejs documentation  that s exactly what they state  The iteratee is bound to the context object  if one is passed

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

Examples related to javascript

Examples related to functional-programming

Examples related to underscore.js

Examples related to this