JS: var Name Scope

“name scope” means where the name can be seen. (that is, have meaning.)

1. For names declared with var, curly bracket {} doesn't make names inside it local.
2. For names declared with var, the names are local to nearest outer function brackets {}, and is lexically scoped. For example, function () { /* scope here */ }. If it is not inside function, then it the scope is global.

Name declaration and assingment:

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

For post ES2015 code, do not use var. Use let instead. This avoids all complexities.

〔►see JS: let Declaration〕

Following are details.

Global Variable = Property of Global Object

Global variable is just property of the global object.

In web browser, the global object is window . 〔►see JS: Browser Window Object, Document Object Model〕

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

(copy and paste the code and try it in your browser's JavaScript console. 〔►see JS: How to Use Browser Console〕)

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

〔►see JS: Object System Overview〕

〔►see JS: Check Property Existence〕

Undeclared Variable

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 variable's property attribute configurable has value of true.
• Globar variable declared with var, its property attribute configurable has value of false.

Property's configurable attribute means whether the property can be deleted (For example, delete window.x) and whether its attributes can be changed. 〔►see JS: Property Attributes〕

// 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 and 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

Name declared with var has scope to nearest outer function's curly bracket {}. If it is not inside a function, then it is global.

// curly brackets doesn't scope for names declared by 「var」

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

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

Using Function to Emulate Block Scope

In pre ES2015, you will often see this code to emulate block scope like this:

(function(){
    var x; // local var x
    // ...
}());

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 pre ES2015 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 uppercase function names are constructors by convention. 〔►see JS: Operator “new”〕