Scope in JavaScript

scope in js is defined as how the variables are visible and can be used entire javascript code. scope of the variables behaves differently in different part of the program.

In JS we have Global Scope, Block Scope, Function Scope and lexical scope.

Global Scope:

When you declare any variable globally i.e not inside any block or function, the variable can be access from anywhere in the program. Like below the variable a can be accessed in any block or function

let a = 10

function test() {
    console.log(a) // 10
}

Block Scope:

The variable declared inside the curly brackets { and } can be treated as block scope. Variables declared with let and const can have block scope. They can only be accessed in the block in which they are defined. As seen below the variable declared inside bracket i.e let a = 20 can not be access outside of block.

let a = 10;
{
    let a = 20;
}
console.log(a) // 10

But variable declared using var has no block scope, as show below the variable a is updating the global variable even declared inside block

var a = 10;
{
    var a = 20;
}
console.log(a)// 20

Function Scope:

Variable declared inside function behaves same as block scope. Here variable declared using var or let or const behaves same.

function test() {
    let a = 10;
    var b = 20;
    const c = 30;
}
test()
console.log(a) // undefined
console.log(b) // undefined
console.log(c) // undefined

Lexical Scope:

Everything is javascript has a hidden object called as Lexical Environment and this contains two below things

• Environment Record: This holds all the variable values as property in the object and as well the value of this keyword
• Reference object: which hold the reference of the outer scope

Consider below example.

function one() {
    let a = 10;

    function two() {
        console.log(a)
    }

    return two();
}

let result = one()
result() // 10

When function one is invoked it returns function two which hold the reference to outer lexical scope hence when function two is invoked we still can access variable a.

Hosting

When ever JS file is loaded to browser it first get parsed(read) and it allocates memory to all the global variables and function.

Variables declared with var keyword will get memory and value will be undefined before execution.

Variables declared with let and const gets memory and will not be initialized with any value.

The functions declared using regular function declaration will get memory and will hold complete reference of the function and can be invoked before declaration

console.log(a) // undefined
var a = 5

console.log(b) // Reference error - cannot access before initialization
let b = 10

test() // 10

function test() {
    let a = 10
    console.log(a)
}

Call Stack

JS Engine is different for different browser, v8 engine is used in Chrome browser And JS engine holds member heap (holds unstructured variables and objects) and call stack. Call stack is the place where execution of the js program takes place. Call stack uses first in last out approach.

Consider below example

let a = 10;

function one(){
    let b = 20;
    console.log(a+b) // 30
}

one()

When above code is read by js engine -

• First Global execution context is created inside the call stack

• When execution context is created, two phases will be created i.e

  • Creation Phase: In this phase memory will be allocated for global variables, functions variables will have undefined value and reference of complete functions will be stored
  • Execution Phase: It first reads the line from top to bottom and will assign the given value to the variable and if it encounters any function call, new Function execution context for the respective function will be created in call stack upon global execution context. This function context will again have two phases like global context. Once 30 is printed in console the function context will be removed from stack and global context will be removed from stack.

JS is Single Threaded

JavaScript in single threaded i.e it can not perform multi task at the same time hence this behavior make js synchronous, execution one line of code at a time. With the help of Web Api we can make the js program to run asynchronous.

JavaScript Runtime consists of below main things

• JS Engine
• WEB APIs
• Call Back Queue
• Event Loop

This WEB APIs provides below few functions that we can use in JS program.

• setTimeout()
• setInterval()
• localStorage()
• sessionStorage()
• alert()

Consider below code

console.log('First')

setTimeout(() =>{
    console.log('Second')
}, 2000)

console.log('Third')

Output
First
Third
Second

Whenever call stack encounters setTimeout in the above code this function is sent to WEB APIs and program will execute the next line of code. After 2 second this setTimeout function will be sent to call back queue. Once the call stack is empty event loop will push the setTimeout function into call stack for execution.