Understanding Scope in Javascript
This story was first published on hackinbits.com.
Scope in javascript refers to the part of your code in which variables, functions, and objects are visible and can be used. It refers to the context in which the declared variables are accessible.
In general, scope determines whether, in a particular part of the program, the declared variable, function or object is available for use or not.
Types of Scope
- Global Scope
- Local Scope
Global Scope
The global scope is the outermost scope in your program. Global scope is already accessible to you when you start writing a new javascript program. Anything you declare in the global scope is available for use throughout the program.
Variables declared outside functions or code blocks(if, while, for, {}) are in the global scope of the program.
//global scope
var globalVar = "I am a global var";function newFunc(){
console.log(globalVar);
}//Output: I am a global var
console.log(globalVar); //Output: I am a global var
newFunc();
Local Scope
In javascript, the local scope is created by functions and blocks(if, while, for, {}). Any variable declared inside a local scope is available in that scope only.
For var, the local scope is only created by functions whereas let and const respects block scoping as well.
Function Scope
A function creates a local scope in javascript. Any variables declared using var, let and const are locally scoped inside a function and is accessible only inside of it.
//global scope
function func(){
var funcVar = 'I am function var';
let funcLet = 'I am function let';
}//output: Uncaught ReferenceError: funcVar is not defined
console.log(funcVar);//output: Uncaught ReferenceError: funcLet is not defined
console.log(funcLet);
Block Scope
Block statements also create local scope in Javascript. Variables declared using let and const are placed inside the block scope. But for var, the local scope is created by functions only.
//global scope
{
var blockVar = 'I am block var';
let blockLet = 'I am block let';
const blockConst = 'I am bock const';
}
//output: I am block var
console.log(blockVar);//output: Uncaught ReferenceError: blockLet is not defined
console.log(blockLet);//output: Uncaught ReferenceError: blockConst is not defined
console.log(blockConst);
Lexical Scope
Functions declared separately do not have access to each other’s scope in a program. But how does scope works when a function is declared inside other functions?
When functions are nested, the inner function has access to the scope of the parent function. Thus, the inner function can access variables defined inside parent function, but the opposite is not true. The parent function cannot access variables declared inside the inner function. In this case, inner function is said to have lexical scope.
// GLOBAL SCOPE
var globalVar = 'I am global var';function outerFunc(){
// function scope 1
var funcVar = 'I am function var';
var innerFunc = function(){
// function scope 2
//output: I am global var
console.log(globalVar);
//output: I am function var
console.log(localVar);
}
}
If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.
