JS: var/function 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”

Assignment Order is Never Changed

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 Declaration

Name hoisting applies inside a function definition too.

// 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();

「let」 and 「const」 Declaration

let and const declaration does not have name hoisting. This is simple and intuitive. you should always use them instead of var.

[see JS: let Declaration]

[see JS: const Declaration]

Name Hoisting of Function Declaration

Name hoisting happens to function name too.

Function declaration function f () {…} is moved to the top, including the definition.

// example showing name hoisting for function name

console.log(f()); // prints 7

function f () { return 7; }

JS Variable Topic

  1. JS: Variable
  2. JS: let Declaration
  3. JS: const Declaration
  4. JS: var/function Declaration Order
  5. JS: var Name Scope
  6. JS: Global Variable

Function Topic

  1. JS: Define Function
  2. JS: Arrow Function
  3. JS: Function Parameters
  4. JS: var/function Declaration Order
  5. JS: var Name Scope
  6. JS: Function Declaration vs Function Expression
  7. JS: Closure
  8. JS: Functional Programing
  9. JS: Function Call, Apply, Bind
  10. JS: Function Argument Default Value
  11. JS: Function Rest Parameters
  12. JS: Function Argument Destructure

  1. JS: Function Object
  2. JS: Function.prototype
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon