JavaScript Variable Scope Rules You Must Know

Every programming language has variables, and they can be accesses within certain scope only. With JavaScript, scope is little tricky feature. They are very simple looking, but can go wrong if you are not aware of how exactly javascript variables are scoped. Let’s learn about scope in javascript in little more detail.

In JavaScript, variables are scoped in two ways ONLY:

1. Global Scope
2. Functional Scope

Just remember that scopes in JavaScript are declared when you define a variable with var keyword. Let’s start by simple one – global scope variables in java.

Global Scope

A variable declared in javascript will be of global scope when –

a) Variable defined outside any function

//'foo' is global variable
var foo = 'I am GLOBAL foo';

//'foo' is function local variable
function test() {
    var foo = 'I am LOCAL foo';
}

console.log(foo); //I am GLOBAL foo

Variable defined inside any function – without using ‘var’ keyword

//'foo' is function local variable
function test() {
    foo = 'I am GLOBAL foo';
}

console.log(foo); //I am GLOBAL foo
console.log(window.foo); //I am GLOBAL foo

All globally scoped variables are visible as properties of the window object.

Functional Scope

As it’s clear from global scope detail, function scope variables are declared using ‘var’ keyword inside a function.

//'foo' is function local variable
function test() {
    var foo = 'I am LOCAL foo';
    console.log(foo); //I am LOCAL foo
}

console.log(foo); //foo is not defined

Please note that javascript functions have their own scope, but blocks (such as while, if, and for statements) do not.

Mixing global and function scope variables

Now, after basic understanding, let’s see an example where we will be using variable ‘foo’ in different scopes in single page and then we will clear on exactly how javascript scope works.

//Define global scoped 'foo'
var foo = 'I am GLOBAL foo';

//Inside if block foo will refer to global foo
if ( true ) {
    var foo = 'I am GLOBAL foo TOO';
    console.log( foo ); 		//I am GLOBAL foo TOO
}

//As blocks do not have their own scope
//So foo in if block referred to global scope foo
//foo refer to new value
console.log( foo );  			//I am GLOBAL foo TOO

//Inside function - foo has it's own declaration
function test() {
    var foo = 'I am LOCAL foo';
    console.log( foo );  		//I am LOCAL foo
}

test();

//Ouside function foo is still globally declared foo
console.log( foo );				//I am GLOBAL foo TOO

See how foo declared only inside function has it’s own scope, otherwise all foo variables refer to global scope foo.

I hope I was able to bring more clarity when we talk about scope of javascript variables. Drop me you questions in comments section.

Happy Learning !!