Hi Devs,

Hope you are doing great, Today in this blog we will discuss the important topic in JavaScript for interview perspective.

Scope { }

There are three type of scope in JavaScript.

• Global scope
• Block Scope
• Functional Scope

Global Scope

Global scope means the variable or function which will available throughout the program. In other word after creation of the file one default scope is assigned to script which is known as global scope.

for example

var name = 'John' // This variable will always be available in program because it is in global scope.

console.log(name); // Output : John

function printName(){
 console.log(name); // It is also accessible here 
}

Block scope

This scope is basically available within the curly braces only. It means the variable which declared inside the block is not accessible beyond its scope.

{ // Curly braces create a block.

var firstName = 'John';
let lastName = 'Doe';
console.log(firstName, lastName); // Output John Doe
}
console.log(firstName, lastName); // Output will reference error: lastName is not defined

In ES6 brings two new variable is let & const. So let is referenced only within the block that's why we can not access this variable outside the block.

Function scope

The variable which is declared within the function is not accessible outside the function is know as functional scope.

function printFullName(){
var fullName = 'John Doe';
console.log(fullName);
}

printFullName(); // Output: John Doe
console.log(fullName); // Output will be an error, because fullName is having a function scope.

Lexical Scope

Lexical scope is determine as the current scope and its parent scope. It means when js program execute it search for variable within the scope and its parents scope.

for example

let studentName = "Stephen";
function showStudent(){
console.log(studentName);
}

showStudent(); //output: Stephen

In above example js engine search for studentName inside the function scope but if it is unavailable in curret scope then it will go to its parent scope(lexical scope) and gives the value.

Example

let studentName = "Stephen";
function showStudent(){
let studentName = "John" 
console.log(studentName);
}

showStudent(); //output: John

Here if js engine find the variable in its scope then it will not go to the lexical scope of it.

Scope Chain

The process of searching variable in side the class and its parents scope till global scope is known as scope chain.

let a = "variable One";
{ // first child
    let b = "variable inside the first child";
    console.log(a, b); // Here variable b is available in its scope but a will be chained by its parents.
    // output: variable One variable inside the first child
    { // grandChild one
        let a = "Variable One from the grand child"
        console.log(a, b) // Here variable a is available in its scope but b will be chained by its parents.
        // output: Variable One from the grand child variable inside the first child
    }
    {// grandchild two
        console.log(a,b) // Here variable will be chained by its parents scope.
        // output: variable One variable inside the first child
    }
}

Here precisely I have mentioned the behaviour in the comment line.

Conclusion

Scope in JavaScript denotes to the visibility or accessibility of variables. That is, which parts of a program have access to the variable or where the variable is visible.