Javascript declaring variables is best practice

Question

When reading this http://www.html5rocks.com/en/tutorials/speed/v8/, it makes sense that changing the type of the variable at runtime makes the browser work more intensively than maintaining their consistency.

Does this mean that this is not a good idea:

var x = { alpha: null, bravo: null, charlie: null, delta: null, echo: null } x.alpha = {a:1, b:true} x.bravo = 13 x.charlie = true x.delta = [1,2,3] x.echo = 'abc' 

Because here the types begin as null, then change to an object, int, boolean arrary.

And for simplicity, these types never change.

Or is it more efficient:

  var x = { alpha: {}, bravo: 0, charlie: false, delta: [], echo: '' } x.alpha = {a:1, b:true} x.bravo = 13 x.charlie = true x.delta = [1,2,3] x.echo = 'abc' 

I can understand how types change, since the number in the array is not a good idea. How about going from zero to type once at runtime?

In books and blogs that I read, they mostly talk to define variables with a zero value (as opposed to undefined), when the values ​​are known only at runtime. With the value of the face, this seems to be incorrect, since the definition with their empty type allows avoiding the type change.

Answer 1

Intrigued by this question, I tuned the violin to look at the performance of some of the various use cases.

Open the console to view the data in this fiddle
http://jsfiddle.net/kmiklas/MFNak/14/

• There seems to be a slight difference between the lack of initialization, initialization to null, and initialization to a number.
• With the exception of numbers, there is a complete loss upon initialization of variables for the intended type (second example in the original message).
  
• Based on this data, it is obvious that initialization to zero is the best option.

Typical results for Chrome v32 with n = 100000000:

 number no init: 97.070ms number init to null: 98.023ms number init to number: 97.246ms array no init: 457.494ms array init to null: 458.301ms array init to number: 455.166ms array init to array: 836.710ms object no init: 508.268ms object init to null: 512.312ms object init to object: 754.562ms number to object: 455.733ms array to object: 834.169ms object to array: 751.498ms ~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

The code is quite long, but is included below, in accordance with the requirements of SO.

 n = 100000000; console.time("number no init"); for (var i = n; i >= 0; i--) { var x; x = 42; }; console.timeEnd("number no init"); console.time("number init to null"); for (var i = n; i >= 0; i--) { var x = null; x = 42; }; console.timeEnd("number init to null"); console.time("number init to number"); for (var i = n; i >= 0; i--) { var x = 1; x = 42; }; console.timeEnd("number init to number"); console.time("array no init"); for (var i = n; i >= 0; i--) { var a; a = [42]; }; console.timeEnd("array no init"); console.time("array init to null"); for (var i = n; i >= 0; i--) { var a = null; a = [42]; }; console.timeEnd("array init to null"); console.time("array init to number"); for (var i = n; i >= 0; i--) { var a = 1; a = [42]; }; console.timeEnd("array init to number"); console.time("array init to array"); for (var i = n; i >= 0; i--) { var a = []; a = [42]; }; console.timeEnd("array init to array"); console.time("object no init"); for (var i = n; i >= 0; i--) { var a; a = {n:42}; }; console.timeEnd("object no init"); console.time("object init to null"); for (var i = n; i >= 0; i--) { var a = null; a = {n:42}; }; console.timeEnd("object init to null"); console.time("object init to object"); for (var i = n; i >= 0; i--) { var a = {}; a = {n:42}; }; console.timeEnd("object init to object"); console.time("number to object"); for (var i = n; i >= 0; i--) { var a = 1; a = {n:42}; }; console.timeEnd("number to object"); console.time("array to object"); for (var i = n; i >= 0; i--) { var a = []; a = {n:42}; }; console.timeEnd("array to object"); console.time("object to array"); for (var i = n; i >= 0; i--) { var a = {}; a = [42]; }; console.timeEnd("object to array"); console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~'); 

Edit:

Keep in mind that I tested only in Chrome 32. To make this conclusion exactly, it would be better to download this fiddle and see the results in more popular desktop and mobile browsers; in particular, IE and Safari Mobile.

Answer 2

Upon initialization, all javascript variables rise to the top of the region with the value undefined . It is not until a variable is assigned to assign a specific type.

So what are you doing here, you are reassigning the value and type of your variable twice. The execution cost is probably negligible, however, the preferred practice is to declare an object whose values ​​are unknown with the object literal:

 var x = {}; 

If you try to access an object of an object that does not exist, you will get undefined (which is just as easy to check as null ). However, if, as you say, the properties are known before runtime, then there is no reason not to immediately assign these properties, therefore ...

  x.alpha = {a:1, b:true} x.bravo = 13 x.charlie = true x.delta = [1,2,3] 

becomes ...

 var x = { alpha: {a:1, b:true}, bravo: 13, charlie: true, delta: [1,2,3] };