Javascript undefined array value

W开发者_如何转开发hy is it that this gives an error:

var a = [c];
// ERROR:  c is not defined

but this does not (but results in an undefined):

var a = [c];
var c = 'x';
console.log(a); // [undefined]

jsFiddle

It's called hoisting and means, that your Javascript engine will declare all var statments and function declarations at parse time. In other words, all your var statements have already been declared (but not defined) when that script is executed.

That can be trouble sometimes. Example:

var foobar = true;

function what() {
    if( foobar ) {  // should be true, no?
        alert('foobar is defined');
    }
    else {
        alert('huh, where is foobar??');
        var foobar = true;
    }
}

If we run what(), we get the huh, where is foobar?? message. This is because within the execution context of what, the variable foobar gets declared(not defined) when the interpreter reads our code. Declarations are always undefined. It doesn't matter where the var statement exists within a context! it always gets "hoisted up".

A good advice to totally avoid that kind of error is, to declare AND define all of your used variables at the top of each context/function.

Now looking at your example code, we can answer easily what happens.

var a = [c];
var c = 'x';
console.log(a); // [undefined]

As soon as our javascript interpreter reads that code, it'll declare the variables a and c. This will look like

var a, c;
a = [c];
c = 'x';

or, even more expresive

var a = undefined, c = undefined;
a = [c];    // c is undefined
c = 'x';    // and finally gets defined as 'x', but too late.

Hoisting: A Problem with Scattered vars

JavaScript enables you to have multiple var statements anywhere in a function, and they all act as if the variables were declared at the top of the function. This behavior is known as hoisting. This can lead to logical errors when you use a variable and then you declare it further in the function. For JavaScript, as long as a variable is in the same scope (same function), it’s considered declared, even when it’s used before the var declaration. Take a look at this example:

// antipattern
myname = "global"; // global variable
function func() {
   alert(myname); // "undefined"
   var myname = "local";
   alert(myname); // "local"
}
func();

In this example, you might expect that the first alert() will prompt “global” and the second will prompt “local.” It’s a reasonable expectation because, at the time of the first alert, myname was not declared and therefore the function should probably “see” the global myname. But that’s not how it works. The first alert will say “undefined” because myname is considered declared as a local variable to the function. (Although the declaration comes after.) All the variable declarations get hoisted to the top of the function. Therefore to avoid this type of confusion, it’s best to declare upfront all variables you intend to use. The preceding code snippet will behave as if it were implemented like so:

myname = "global"; // global variable
function func() {
   var myname; // same as -> var myname = undefined;
   alert(myname); // "undefined"
   myname = "local";
   alert(myname); // "local"
}
func();

“JavaScript Patterns, by Stoyan Stefanov (O’Reilly). Copyright 2010 Yahoo!, Inc., 9780596806750.”

Variable 'c' does not exist when you try to use it in array. You should do so:

var c = 'x';
var a = [c];