Question

Why 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

Answer 1

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.