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:
- Global Scope
- 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 !!
Comments