JavaScript give called function access to calling function variables

Question

If I define an inner function inside a function, the inner function has access to the outer function's variables. If I want this inner function to be reusable and define it outside the outer function, the inner function now loses access to the outer function variables. How do I make this new reusable inner function have access to outside function variables, without passing those variables in as parameters?

        function a () {

        var x = [[1,2,3], [1,2,3], [1,2,3]];

        var keys = Object.keys(x[0]);

        for (var i = 0; i < x.length; i++) {
            angular.forEach(keys, loop);
        }

        }

        function loop (key) {
            console.log(key, i);//i is undefined here
        }
        a();

Specifically, is there some way without 1) assigning variables to this, 2) without passing in variables as parameters, and 3) without creating global variables?

Edit: It seems there is no way to do this. But if I try another approach, to have the reusable function return a new function, I also do not have access to the inner scope. Why is this, and is there some way to make this work?

        function a () {

        var x = [[1,2,3], [1,2,3], [1,2,3]];

        var keys = Object.keys(x[0]);
        var myloop = loop();

        for (var i = 0; i < x.length; i++) {
            angular.forEach(keys, myloop);
        }

        }

        function loop (key) {
            return function(key) {
                 console.log(key, i);//i is undefined here
            };
        }
        a();

Any way besides using global variables? I think there must be some way with closures, but I cannot get it to work. — dz210, Feb 23 '16 at 16:50
Making a reusable function depend on variables from outside of its scope seems like a really bad idea to me. What's the issue with just passing `i` into the function? — Joe Clay, Feb 23 '16 at 16:53
The issue is that you will need to create an anonymous function to do this. angular.forEach(keys, function(key) { loop(key, i)}) — dz210, Feb 23 '16 at 16:55
What is this function supposed to accomplish? So `keys` contains the keys (or index values) of the first array in `x`. Then you're iterating over the length of `a` (the function, which has a length of zero, so the loop will never run), and if the loop were to execute somehow, you loop over the keys again. Can you clarify? — Adeel Zafar Soomro, Feb 23 '16 at 17:15

score 2 · Accepted Answer · answered Feb 23 '16 at 17:07

2

In the following example, loop returns a function that closes over the value of i.

function a () {
    var x = [[1,2,3], [1,2,3], [1,2,3]];

    var keys = Object.keys(x[0]);

    for (var i = 0; i < keys.length; i++) {
        keys.forEach(loop(i));
    }
}

function loop (i) {
    return function (key) {
        console.log(key, i);  // i is now defined
    }
}

a();

Output:

answered Feb 23 '16 at 17:07

Adeel Zafar Soomro

1,492
9
15

This is the closest solution, so marking this as correct. – dz210 Feb 23 '16 at 17:21

score 1 · Answer 2 · edited May 23 '17 at 11:50

1

How do I make this new reusable inner function have access to outside function variables, without passing those variables in as parameters?

You can't. JavaScript has lexical scope, not dynamic scope.

See also: What is lexical scope?

edited May 23 '17 at 11:50

Community

1
1

answered Feb 23 '16 at 16:57

Felix Kling

795,719
175
1,089
1,143

score 1 · Answer 3 · answered Feb 23 '16 at 17:24

I also want to make another option known which I just discovered. If you use .bind, you can curry the function with i, and the other variables will be passed in after the curried parameters.

 ....
 angular.forEach(keys, loop.bind(null, i));
 ...

 function loop(i, key) {
 ...
 }

score 0 · Answer 4 · answered Feb 23 '16 at 16:55

Inner functions are treated locally by the outer function. Therefore, you can access the variables belonging to the outer function from the inner function. But, once you have the inner function as a separate function outside the outer function, then you no longer have access to the private data variables of the outer function.

If this seems complicated, here is an example:

function A
{
  //variables
  function B
  {
   can use variables of A
  }
}

But,

    function A
    {
      //variables
    }
    function B
    {
     //cannot access variables of A
    }

score 0 · Answer 5 · answered Feb 23 '16 at 16:57

In JS (and many other languages), there is a visibility context. Possible contexts are e.g. "global" or function or block. These contexts are hierarchical, inner can read outer. Outer can never read inner (encapsulation principle) unless inner declares variable as global.

JavaScript give called function access to calling function variables

5 Answers5