JavaScript: detect invisible variables

Question

I have a question about JavaScript hidden or invisible variables to us. Because they are not created in global context. When we write large web applications, some variables or functions live indivisibly, but we don't know their existence. They eat our resources as CPU, GPU. For example, I always expect that all variables in anonymous function will be removed after it's execution (of course if there is no reference to it from upper context). In this example, I cannot see interval variable nowhere, but it always writes to console interval id.

(function () {      
    var interval = setInterval(function(){
        console.log(interval.toLocaleString());
        // some heavy operation
    }, 1000);
})();

Another example is I've created view in Backbone.js, then I realized that after removing view, it was also exist. My question is, how can I find or see all variables which is exist, but not visible in global context?

`interval` consuming your computer's resources has _nothing_ to do with `console.log()` working. — Matt Ball, May 16 '13 at 19:39
The variable "interval" in your example need not remain live after the anonymous function is called, because there are no references to it in the closure (the timer handler). — Pointy, May 16 '13 at 19:39
possible duplicate of [Tools for debugging memory leaks in JavaScript](http://stackoverflow.com/questions/3573252/tools-for-debugging-memory-leaks-in-javascript) - not sure what you're actually asking for; you can inspect such variables in the browser's JavaScript debugger — Bergi, May 16 '13 at 21:16
@Pointy I've added interval `variable` into `setInterval`. What do you think, `interval` variable is remain live or die after anonymous function called? And I want to know variables, which is not visible in global context. — Ikrom, May 17 '13 at 15:36
Have a look at this page about closures. http://stackoverflow.com/questions/111102/how-do-javascript-closures-work. In your example interval will not "die" as by calling a function within a function you've created a closure. Someone will be able to explain it better no doubt. Have a read through the link above. — Jerryf, May 17 '13 at 16:02
@Jerryf Thank you, I've already read it, I've a different question, maybe it's related to closures. — Ikrom, May 17 '13 at 16:34
Well, you can't "see" the active closures from within JavaScript. You can infer their existence I guess by using a memory profiler or something. — Pointy, May 17 '13 at 17:02

score 0 · Answer 1 · answered May 24 '13 at 12:17

See these two pages:

https://developers.google.com/chrome-developer-tools/docs/heap-profiling

https://developers.google.com/chrome-developer-tools/docs/heap-profiling-containment

Essentially you'll need to take a snap shot of the heap and navigate through its contents to find the context variables in Chrome's developer tools.

— a variable in a function context, accessible by its name from inside a function closure;

You'll be able to determine which elements in the heap are context/closure variables by their color (See the reference key ? at the bottom of Chrome's dev tools).

enter image description here

score -1 · Answer 2 · answered May 17 '13 at 19:00

setInterval() actually returns the intervalID of the "interval" object. Which is an integer.

from Mozilla's site

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);

The only way to clear the data ( and stop the interval) is to use .clearInterval

window.clearInterval(intervalID)

So, what is happening may not be exactly what you were thinking. The variable exists, but your interval variable is just the intervalID.

JavaScript: detect invisible variables

2 Answers2