JavaScript Variable Scope: Function Level vs Block Level

Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

Here's a summary of JavaScript variable scope issues:

• declared ＆ assigned → good.
• declared ＆ unassigned → has default value of undefined.
• undeclared ＆ assigned → implied global variable. (not exactly the same as declared global variable. Their configurable attribute's value is different.)
• undeclared ＆ unassigned (and accessed) → ReferenceError.

• Curly bracket {} doesn't make variables inside it local.
• Variable are local to just functions, and is lexically scoped. ⁖ function () { /* scope here */ }

Global Variable = Property of Global Object

Global variable is just property of the global object.

In web browser, the global object is window . 〔➤ JavaScript: Browser's Window Object, What's Browser Object Model (BOM), Document Object Model (DOM)〕

// global variable is a property of global object
var xx = 3;
console.log(window.xx); // 3

(copy ＆ paste the code and try it in your browser's JavaScript console.)

// global variable is a property of global object
window.y3 = 4;
console.log(y3); // 4

Undeclared Variable (aka Implied Global)

When a variable is assigned but not declared, it is a global variable. This is sometimes called “implied global”.

// example of undeclared variable

function f () { x = 4; return 1; }
f();

// this is a global variable
console.log(x); // 4

// it's a property of the global object
// in browser, the global object is “window”
console.log(window.x); // 4

// in node.js, the global object is “global”
console.log(global.x); // 4

Difference Between Implied Global and True Global Variable

• Undeclared global var has property attribute configurable set to true.
• Globar variable declared with var has property attribute configurable set to false.

Property's configurable attribute means whether the property can be deleted (⁖ delete window.x) and whether its attributes can be changed. 〔➤ JavaScript: Property Attributes: Writable, Enumerable, Configurable〕

// difference between declared and undeclared variable

var x = 1;
console.log(Object.getOwnPropertyDescriptor(window, "x"));
// Object {value: 1, writable: true, enumerable: true, configurable: false}

y = 1; // undeclared
console.log(Object.getOwnPropertyDescriptor(window, "y"));
// Object {value: 1, writable: true, enumerable: true, configurable: true}

(Note: as of 2014-07-10, in Firefox, if you run code in JavaScript console, undeclared var's configurable property is the same as declared global variable (presumably for programer convenience). But in Google Chrome's JavaScript console, it behaves by spec.)

Accessing Undeclared ＆ Unassigned Variable ⇒ ReferenceError

• Accessing a undeclared variable that haven't been assigned is a ReferenceError.
• Accessing a declared variable that haven't been assigned gets a undefined value.

x; // ReferenceError: x is not defined

var y; // unassigned var has value of 「undefined」
console.log(y);           // prints undefined

Function-Level Scope

• Curly bracket {} doesn't make variables inside it local.
• Variable are local to just functions, and is lexically scoped.

// curly brackets doesn't scope

function f ()  {
    var n = 3;
    {
        var n = 4;
    }
    return n;
};

console.log(f());               // 4

When curly brackets makes variable local as in {Perl, Ruby}, it's called block level. JavaScript way is called function level.

Using Function to Emulate Block Scope

You can emulate block scope like this:

(function(){
  // ...
}());

this will create a function, and immediately evaluate it. Here's a example.

function f ()  {
    var n = 3;
    (function(){
        var n = 4;
    })();
    return n;
};

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

Function Scope as Namespace

JavaScript (ES5) does not have modules or namespace. One hack to achieve namespace is wrapping the entire source code of your package inside a function. Like this:

(function nicePackage () {
    // your source code here
})();

This way, when your package/file is loaded, it only introduces one name into the global space.

Note: your function should start with a lowercase letter, because upper case function names are constructors by convention. 〔➤ JavaScript: What Does Keyword 「new」 Do?〕

Variable Declaration Order Doesn't Matter: Name Hoisting

JavaScript: Declaration Order: Name Hoisting