Javascript declaring variables or not

Question

So it puzzles me. Variable Variables? Let's take a look at this code:

var div1 = document.createElement('div'); var div2 = document.createElement('div'); div2.appendChild(div1); 

Now this

 var div2 = document.createElement('div'); div2.appendChild(document.createElement('div')); 

So, in the second example, I am doing the same thing as in the first. Is it more expensive to declare a variable than not? Am I saving memory by simply creating and using the element on the fly?

EDIT: This is sample code to illustrate the question. I know that in this particular case the memory was saved (or not) minimally.

Answer 1

Variables are extremely cheap in JavaScript, but no matter how cheap they are, everything comes at a cost.

Having said that, this is not a noticeable difference, and you should think more about making your code readable, rather than performing micro-optimizations.

You must use variables to keep repeating operations. In the above example, you probably need a variable pointing to the newly created div , or you can do nothing with it ... unless you return it from the DOM; which will prove to be many times more expensive than a variable, since DOM manipulation is one of the slowest parts of JavaScript.

Answer 2

In theory, there is a small amount of stored memory without making a variable declaration, since variable declaration requires the JavaScript engine to create a variable binding object property for the execution context in which you declare it. (See Specification Section 10.5 and related sections.)

In reality, you will never notice the difference, even on a relatively slow engine such as IE. Feel free to use variables wherever they make the code clearer. Creating a property in a variable binding object (for example, declaring a variable) is a very, very, very fast operation. (Avoid it globally, of course, but not because of memory usage.)

Caveat . If a variable refers to a large memory structure that you hold only temporarily, and you create closures in this function context, a large memory structure may (in some engines) be stored in memory longer than necessary. Example:

 function foo(element) { var a = /* ...create REALLY BIG structure here */; element.addEventListener("event", function() { // Do something **not** referencing `a` and not doing an `eval` }, false); } 

In an inexperienced engine, since the event handler is a closure in the context of the call to foo , theoretically a is available to the handler, and therefore its links remain "link" and are not accessible to the collection garbage until this event handler function ceases to be bound. In any decent engine (like the V8 engine in Chrome), since you are not referencing a and not using eval in the close (event handler), this is great. If you want to protect yourself from mediocre engines, set a to undefined until foo returns, so the engine (no matter how mediocre) knows that the event handler will not reference this structure, even if it were a .

Answer 3

Yes, you save memory, and that in no way matters.