Redeclaring a javascript variable

Question

In this tutorial there is written:

If you redeclare a JavaScript variable, it will not lose its value.

Why should I redeclare a variable? Is it practical in some situations?

thank you

Answer 1

It's nothing more than a reminder that if you do this:

var x=5;
var x;
alert(x);

Result will be 5.

If you re-declare variable in some other languages for example - result will be undefined, or NaN, but not in javascript.

Answer 2

An example of redeclaring a variable can be found in Google Analytics. When the JavaScript tracking code is initiated by the Google Analytics script, it declares or redeclares _gaq in this way:

var _gaq = _gaq || [];

In other words, if _gaq is already defined, _gaq is "redeclared" as itself. If it is not defined, it will be declared for the first time as an empty array.

This allows the Google Analytics tracking code to support other scripts which may need to use the variable before Google Analytics code has initiated. As @xralf pointed out, JavaScript allows for this.

Redeclaring a variable is useful in situations where it cannot be known if the variable has already been defined.

By redeclaring a variable conditionally, as Google Analytics tracking code does, it allows for a variable to safely originate from more than one place.

In this example it could be safe for other code using the _gaq variable to likewise check for a predefined _gaq variable. If it exists, it knows it can use it. If it doesn't exist, it knows that it should define it before trying to use it.

Answer 3

Why should I redeclare a variable?

You shouldn't. It makes for confusing code.

Is it practical in some situations?

No.

Answer 4

In javascript there is no block scope so it is advisable to redeclare a variable for clarification purposes; this makes for better code.

For example:

for (var x=0; x< 100; x++) { }

alert(x); //In most languages, x would be out of scope here.
          //In javascript, x is still in scope.


//redeclaring a variable helps with clarification: 
var x = "hello";
alert(x);

Answer 5

It doesn't lose it's value because of Hoisting

var x = 5;
var x;

// this is same as

var x; // undefined;
x = 5;

So when you say "If you redeclare a JavaScript variable, it will not lose its value."

As per hoisting, the declaration(s), all of them , move to the top. And then the variable is assigned.

var x = 25;
var x; // redeclare first time
var x; // redeclare second time

// is same as 

var x; // undefined
var x; // Not sure if this happens, but doesn't make a difference, it's still undefined
x = 25;

As for practicality, it happens sometimes. Look at @steveoliver 's answer.

Answer 6

Keep in mind that only variables declared with var can be re-declared. If you try to re-declare a variable declared with let or const (which is the ES2015 Javascript syntax that should be used in most cases nowadays), even worse than losing the value, an error will be thrown:

let foo = 'foo';
let foo;

So, in codebases which use modern Javascript syntax, re-declaring a variable simply isn't possible - the interpreter needs to be able to identify a single point in the code after which a let or const variable gets properly initialized. Before that point, the variable name will exist in the temporal dead zone.

Answer 7

In general, it can be considered bad style to have var assignments after other statements due to the problem of hoisting (see here). Using the "Single var pattern" (see here), redeclarations could only happen like in Steve Oliver's Google Analtyics example. I'd refactor the example above to:

var x, max = 100; // no further var declarations afterwards!

for (x = 0; x < max; x++) { }

alert(x);

// redeclaration 'var x = "hello"' doesn't make any sense here
// and would be complained about by JSLint/-Hint 
x = 'hello';
alert(x);

A redeclaration can make sense however when using default values for optional parameters (which is what the Google Analytics example is about, I assume):

function abc(param1) {
  var param1 = param1 || 'default value';
}

Answer 8

It is pretty simple re-declaring doesn't actually affect anything, you just have to remember that if you reassign value within scope then the reassigned value is limited to scope and outside of scope it will still be globally declared value

var page =1 ;
function htmlcode(page) { 
page = "keka";
console.log("inside " + page);
}

htmlcode(page);
console.log("inside " + page);

Output : inside keka
         inside 1