JS: var Declaration Order

By Xah Lee. Date: . Last updated: .

In JavaScript, variable declared with var has a behavior that is effectively equivalent to as if the declaration is moved to the top of source code file, or top of the function block the var appears in.

This is called name hoisting.

For example, the following:

console.log(x);
var x = 5;

is equivalent to:

var x;
console.log(x);
x = 5;

Here's a example showing the effect of name hoisting:

// example showing name hoisting

// accessing undeclared and un-assigned var is a reference error
console.log(x);   // ReferenceError: x is not defined

// but accessing variable that's declared later is ok
console.log(n); // prints “undefined”

var n; // un-initiated var has value “undefined”

No Change to Assignment Order

Name hoisting moves the name to the top, but it does not move the assignment with it.

// example showing that assignment order matters. Name hoisting is about name only, not assignment

console.log(x);  // prints undefined
var x = 5;

var Name Hoisting Inside Function

Name hoisting applies inside a function definition too.

Inside a function definition, var declaration is moved to the top in the function block.

// example showing variable name hoisting, inside a function definition

var n = 3;

function f ()  {
    return n;
    var n;
};

console.log(f());       // prints undefined.
// Because, the “var n” inside the function is moved to the top of function body

Here's another example. A typical loop inside a function:

function f ()  {

    // console.log(x); // ReferenceError: x is not defined

    console.log(i); // print “undefined”, but this is not an error

    for (var i = 1; i <= 3; i++) {
        console.log(i);
    }
}

f();

// prints
// undefined
// 1
// 2
// 3

Above is equivalent to:

function f ()  {
    var i;
    for (i = 1; i <= 3; i++) {
        console.log(i);
    }
}

f();

JS Variable Topic

  1. JS: let Declaration
  2. JS: const Declaration
  3. JS: var Declaration
  4. JS: var Declaration Order
  5. JS: var Name Scope
  6. JS: Global Variable
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Patreon me $5. Ask me question on patreon