Scope In JavaScript

Many a times we get confused with scope in JavaScript, So here I am going to put some light on scope. There are two types of scope in JavaScript. First one is, function scope which is also called as local scope, and second one is global scope.

Function Scope: In JavaScript, variables are defined with function scope instead of block scope. If any variable is defined in “if/else block” or “for block” then that variable will be defined with function scope instead of block scope, i.e. it will be visible to whole function, unlike other programming languages where variable is defined with block scope and is visible to that block only.

Global Scope: Variables which are defined outside the function, are defined with global scope. We should minimize the use of global scope variables, because if two or more than two functions/developers are using the global variable of same name then result may be unexpected and can lead to hard-to-find bugs. So we always declare variables with var keyword.

Lets understand scope more with examples:

[js]
var global1 = 10; // global scope variable.
function scopeTest() {
var local1 = 20; // function scope variable.
global2 = 30; // global scope variable.
if(true) {
var local2 = 40; // function scope variable.
}
console.log(local2); // 40 (local2 variable is visible to whole function.)
}
console.log(global1); // 10
console.log(local1); // local1 is not defined
console.log(local2); // local2 is not defined
[/js]

Here local2 variable is declared in “if block”, so unlike other languages, local2 variable will be defined with function scope instead of block scope, and will be accessible in whole function.

Note: if we define a variable without using the ‘var’ keyword in function then that variable will be not local variable i.e. it will be defined with global scope instead of function scope.This variable will be visible outside the function too. But global2 variable will be defined with global scope when for the first time scopeTest function will be invoked. Before that global2 will be not defined.

[js]
console.log(global2); // global2 is not defined
scopeTest();
console.log(global2); // 30
[/js]

Lets see some twisty code.

[js]
1. var testValue = 10;
2. function localScopeTest() {
3. console.log(testValue); // undefined
4. var testValue = 20;
5. console.log(testValue); // 20
6. }
7. localScopeTest();
[/js]

You might be expecting output “10 and 20”. But correct output will be “undefined and 20”, because inside the function “function scope variable” gets preference. You might be thinking that testValue is defined at line number 4 and we are logging its value on line number 3, so it should log global scope testValue, which is 10. But NO, JavaScript engine executes JavaScript in two steps, first it compiles the JavaScript then executes. At the time of compilation, it gets to know that testValue is declared in function scope, but till line number 3, its was not assigned any value so its logging undefined.

Amit Kumar
amit.kumar@intelligrape.com
in.linkedin.com/in/amitkumar0110
twitter.com/amit_kumar0110
More Blogs by Me