Javascript Closures and variable scope when function call ends

Question

I have read this excellent piece: How do JavaScript closures work?

But I still have questions...

StackOverflow tags defines "Closures" as "A Closure is a first class function that refers to (closes over) variables from the scope in which it was defined. If the closure still exists after its defining scope ends, the variables it closes over will continue to exist as well".

When my functions end with a return, do all variables defined within them get deleted and memory allocation made free? It appears to me that conditions exist when one could answer yes or no.

Yes, I know memory is plentiful and free but that is not my question.

Think of an intranet based application which ajax's data back and forward during a working day. As data is received by the client, massaged, and no longer required, it can be dispensed with. Poor programming technique could result in a build up of data no longer user or required (or worse, data being used that is out of sync).

Reading the piece on closures above tells me that some variables within a function can still be referenced from outside the function scope. I am guessing that I will need to re-read the closure document several times as perhaps I've not fully understood it.

Can someone share an example on where a variable continue to exist?

And... Do I gain any benefit if, at the begining of each function I declare my variables, and prior to using a "return true;" if I reassign the variables a value of null?

All help appreciated...

A closure is a function that has a reference to the environment it was created in. That also means that if there function leaves that environment, the environment will continue to exist as long as the function exists. Of course engines optimize and won't keep the environment alive if it's not necessary. — Felix Kling, Feb 19 '16 at 15:26

Raphael Rafatpanah · Answer 1 · 2016-02-19T15:27:02.400

0

Please correct me if I am wrong, but I don't think that

some variables within a function can still be referenced from outside the function scope

is true.

Closures remember the context of a function call and bind the relevant variables (i.e. this, etc) to the closure's scope. If that is correct, then calling the closure again would cause the old variables' values to get garbage collected and you wouldn't have to worry about memory waste or out of sync data.

edited Feb 19 '16 at 15:27

answered Feb 19 '16 at 15:19

Raphael Rafatpanah

19,082
25
92
158

Sounds wrong in my ears, yes. What exactly do you mean by "*bind the relevant variables*"? – Bergi Feb 19 '16 at 15:40
`this` is not a variable and does not get bound to anything in a closure. – Bergi Feb 19 '16 at 15:41
Thank you for clarifying. My wording was sloppy. Is it true that a closure is bound to some `this` when called? If it is true, is `this` a reference to the calling function's scope? – Raphael Rafatpanah Feb 19 '16 at 15:45
1

No, `this` has nothing to do with scope (and it should be called "context" rather). The value of `this` gets bound at the time of the call, depending on how the function is called. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this – Bergi Feb 19 '16 at 15:47

score 0 · Answer 2 · answered Feb 19 '16 at 15:20

num will exist within a function outside of IIFE c which returns a

var c = (function() {
  var num = 10;
  var a = function a(n) {
    console.log(n)
    return n * Math.random()
  };
  return a.bind(null, num)
}());

var res = [c(), c(), c()];
console.log(res)

score 0 · Answer 3 · answered Feb 19 '16 at 15:23

When you return true from a function you don't have a closure. You have a closure when you return a function from a function, like this:

function makeAdder( firstNumToAdd ){
     return function( secondNumToAdd ){
          return mainNumToAdd + secondNumToAdd;
     }
}

var add3 = makeAdder(3);

var seven = add3(4);

In the above example, the variable firstNumToAdd, although is scoped to the function makeAdder is always accessible to the inner function, even though the function exited after executing the line var add3 = makeAdder(3);

*"You have a closure when you return a function from a function"* I disagree with that statement. How do you call functions that do not leave their environment but still have free variables? — Felix Kling, Feb 19 '16 at 15:30

score 0 · Answer 4 · answered Feb 19 '16 at 15:28

obj = {
    func: function(){
        var test = 'preserved value';
        this.func2 = function(){
            console.log(test);
        };
    }
};

obj.func();
obj.func2();  //'preserved value'
obj.func = undefined;
obj.func2();  //'preserved value'

As you can see, even after completely blowing away the original scope (func) the enclosing scope retains the test var.

Javascript Closures and variable scope when function call ends

4 Answers4