CODEWITHSUNDEEP
javascriptclosures
trebek1
trebek1

Reputation: 775

Why is "reduce" and "map" considered closures in javascript?

I was going over closures and usually I look at a closure as a function that has been returned from another function or is a function that is set to a global while inside another function so that the new function (returned function or global variable) has a reference to the variables inside the initial enclosing function where it was created. Recently, someone told me that the map or reduce function form closures. These return a value or values and no function whatsoever. I dont see how this method forms a closure when all you have is a callback. In fact, MDN states that the reduce function returns a "value" and the map function returns an array. So where is the closure? Can someone explain this?

Upvotes: 2

Views: 4526

Answers (3)

trebek1
trebek1

Reputation: 775

Thank you all for your responses to the question. With these and the chrome debugger I have come to the conclusion. As Alnitak stated, "
It's a closure iff it accesses variables from that outer scope. Just having the ability to access them is insufficient." This is an important point that I was missing. Also, you can see in the scope section of the sources tab in chrome debugger variables included through closure. So, looking at the following example we can see exactly what closure is: 

routerAction: function () {
  var name = "alex"; 
  var alex = function(v){
    debugger;
    console.log("this is var ", name);
  }
    alex(); // if name was passed and then printed it would be local 
            // not a closure  
}

Functions get their scope from global and local and closure variables. When you pass "name" into the alex function as a parameter it becomes a local variable so there is no closure. So, if I passed it to alex and console logged "v" where name is, no variables are referenced through a closure. However, since name is defined outside the scope of function alex and then used within, it is scoped through closure (this can be seen in in the scope section of the chrome debugger). By this same logic, if the array that you are operating on (using map or reduce )is defined inside a function, the callback has to form a closure iff the array is referenced inside the callback. If the parameters are just brought in through arguments, none of the variables are accessed through a closure, they are all local variables.

Upvotes: 0

tadman
tadman

Reputation: 211670

A function defined inside a function ends up being a closure by definition if local variables are present at the surrounding function and they're used inside the closure.

For example:

function boil(ocean) {
  var boiling = 100.0;

  return ocean.map(function(h2o) {
    return h2o.temp >= boiling ? 'vapour' : 'water';
  });
}

The boiling variable here is defined in the main function and used within the function passed to map. Callback functions make the closure behaviour more obvious since they're used in a different context, but the same principle applies.

Upvotes: 3

Dr_Derp
Dr_Derp

Reputation: 870

The "closure" is the callback function. According to MDN:

A closure is the combination of a function and the lexical environment within which that function was declared.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

So when you write something like this:

array.map(function(object) {
    // do something
});

That function that you pass in becomes a closure because it gains access to the scope that was present when array.map was called. That's just how JavaScript works.

Upvotes: 2

Related Questions