Scope In JavaScript

Many times we get confused with scope in JavaScript, So here I am going to put some light on the scope. There are two types of scope in JavaScript. The first one is, function scope which is also called a local scope, and the second one is the 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 the whole function, unlike other programming languages where the variable is defined with block scope and is visible to that block only.

Global Scope: Variables that 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 the same name then the result may be unexpected and can lead to hard-to-find bugs. So we always declare variables with the var keyword.

Let's understand scope more with examples:

1 2 3 4 5 6 7 8 9 10 11 12

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

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 the 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 the function scope. This variable will be visible outside the function too. But the global2 variable will be defined with the global scope when for the first time scopeTest function will be invoked. Before that global2 will be not defined.

1 2 3

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

Let's see some twisty code.

1 2 3 4 5 6 7

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

You might be expecting output “10 and 20″. But the 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, it was not assigned any value so it's logging undefined.