Javascript - (Variable) Scope (Namespace)

About

Variable scope in Javascript.

variable scope is delimited by the function definition, not a the block level

A block has the scope of its inner function.

As a function is also an object, by generalization, the scope is at the object level.

The keyword this gives access to this scope object.

There is an exception to the function ruling scope and this is with a caught exception variable in a try…catch block. This variable is scoped only to the try..catch block. See Javascript - Exception

Lexical environment / Scope chain

In the ES5 specification, the scope diagram is called the lexical environment (or scope chain in older versions of the standard).

Javascript looks the variables:

  • first down in the prototype chain
  • then up in the scope, starting with the innermost scope and working its way outward.

Example: for the below code,

function pointsOnCircle(n){
    var point = new Point(x,y);
    ...
}

the scope diagram can be represented as;

Javascript Lexical Environment Scope Chaine

where:

Scope and

Block

The scope is not at the block level.

Meaning that the variable declared in the for loop (a block) exists also outside the loop. If you want to restraint the scope of a variable, you need to create it inside a function.

Variable

A variable declared in a script without function is declared in the global namespace which is the top variable context space.

Declaring a variable anywhere in a block code (or script) is equivalent to declaring it at the top of its scope (or script). See hoisting

Hoisting

Declaring a variable anywhere in a block code (or script) is equivalent to declaring it at the top of its scope (or script)

Variable declarations are hoisted up to the top of the context (script, function,…) in which they reside.

hoisting means moving the var declaration to the top of its enclosing scope. Technically, this process is explained by how code is compiled,

foo = 2
var foo;

is treated as:

var foo;
foo = 2

Example:

function noHoisting(){
    bar = "global variable declaration because without the var keyword in a function";
}
// Run the function to run the variable declaration
noHoisting();
console.log(bar);

function hoisting(){
    bar = "local variable declaration because declared below with the var keyword";
    // thanks to variable hoisting the below statement will placed at the top of its scope (ie the actual function)
    // and the variable will not be considered global anymore but local
    var bar; 
    console.log(bar);
}
hoisting();
console.log(bar);

Management

Creation

IIFE

To force the creation of a local scope, a nested function must be created and called right away. This technique is known as the immediately invoked function expression, or IIFE and is an indispensable workaround for JavaScript’s lack of block scoping.

Example:

(function IIFE(){
    var foo = "IFFE variable";
    console.log( "Hello!" ); 
})(); // "Hello!"

// foo is not defined in the global scope
if (typeof foo == 'undefined') {
   console.log("foo is undefined");
}

Modification

Statement

Two statements can modify the actual lexical scope:

Restriction

An IIFE is often used to create a scope in order to declare variables that won’t affect the surrounding code outside of it. See IIFE

Webtool (Chrome)

Chrome Developer Tool:

Chrome Dev Tool Source Debugger Scope

Example

var x = 0; // x is a global variable created then in the global namespace.
var y = 1;

console.log("The global variable x has been declared with the value "+x+"."); 
console.log("The global variable y has been declared with the value "+y+"."); 

function f(){
  
  var x = 1; // x is declared locally in the function. There is the two x variables: The first one global and the second one local 
  x = 2; // This modification will not impact the global variable
  console.log("The local variable x has the value "+x);
  
  y = 2; // This modification will impact the global variable because z is not declare with the var symbol.
  
  z = x; // z is NOT declared locally with the var keyword. z will then leak outside of the function
  

}
f(); // Execute function f

console.log("The global variable x has still the value "+x+", the function got no impact on it"); // 0
console.log("The global variable y has the value "+y+", it has been changed in the function because it was not declared locally with the var keyword"); 
console.log("The variable z has the value "+z+", has leaked from the function because it was not declared with the var keyword it has a global scope"); 

Documentation / Reference





Discover More
How to create a javascript global library (namespace pattern)

This article show you how Javascript global library are created with the namespace pattern
Javascript - eval

eval evaluates a javascript expression (ie a javascript string) and therefore can eval a script Most functions have access to the scope where they are defined, and nothing else. But eval has access...
Javascript - Immediately invoked function expression (IIFE)

An IIFE (pronounced “iffy”) is a function expression that is immediately invoked in order to create a local scope for the variables They therefore won’t affect the surrounding code outside of it...
Chrome Dev Tool Source Debugger Scope
Javascript - Call method

Calls (executes) a function and sets its this to the provided value binded , arguments can be passed as they are. call(this)context (scope) Bind ECMA-262-3...
Javascript Console Pause On Exception
Javascript - Exception

This page is exception in Javascript Exceptions can be caught: in a try, catch, throw, finally statement. with the catch function with a promise. See catch...
Javascript Function Method
Javascript - Functions

Functions functionalities in Javascript. A function in Javascript is a variable that’s given a reference to the function being declared. The function itself is a value (as an integer or an array) that...
Global Namespace Web Console Firefox
Javascript - Global (Object|Namespace|window)

The global namespace is the top space of Javascript that contains the variables. In a browser, it's known as the window. Defining global variables pollutes the common namespace shared by everyone, introducing...
Javascript - Object

object in javascript An object is a data type in Javascript. An object follows a json data structure with key that holds property value. The value may be of a variable or a function In JavaScript, a...
Javascript - Strict Mode

strict mode makes some operations more strict such as: the definition of this the variable must be created implicitly the data type Reference/Strict_modestrict mode ES5 introduced the strict...
Chrome Dev Tool Source Debugger Scope
Javascript - This

this is a variable that has a reference value to the scope (namespace) this printThisobjthisobj Generally, this is the local scope but it may be changed. You can set this : in the call of a function...



Share this page:
Follow us:
Task Runner