All about Scope in JS

So before starting let's understand what scope actually means. To answer that Scope can be defined as a part of the program where the variable is accessible or visible.

Javascript allows you to declare variables using 3 ways i.e using var, let, and const. var has a function scope apart from when they are declared directly in the global context where they have a global scope, and let, const has a block-scope.

Let's understand this with an example of variables declared using var

var a = "GLOBAL" // variable declared at global-level scope

{
    var b = "INSIDE BLOCK" // variable declared in block scope
    console.log(b); // INSIDE BLOCK
}

function greet() {
    var c = "FUNCTION"; // variable declared in function scope
    console.log(c); // FUNCTION
}

console.log(a) // GLOBAL

greet();

console.log(c); // THROWS AN ERROR ---> c is not defined

Now let's go through the above snippet of code one by one.

Firstly we have a variable a declared at the global scope which basically means not inside any block or function and such variables are accessible throughout the program.

Second, we have a variable b declared inside a block {}, it behaves the same way as the variable declared at the global scope and is accessible throughout the program.

Third, we have a variable c declared inside a function, and here is the twist. When a variable is declared using the var keyword inside the function then it is only accessible inside the function, trying to access it outside the function throws an error.

Now let's move toward understanding the scope of variables declared using let and const.

let a = "GLOBAL" // variable declared at Global Scope    

{
    let b = "INSIDE BLOCK" // variable declared at Block Scope
    console.log(b); // INSIDE BLOCK
}

console.log(b); // ERROR ---> b is not defined

function greet() {
    let c = "FUNCTION"; // variable declared at Function Scope
    console.log(c); // FUNCTION
}

greet();

console.log(c); // ERROR ---> c is not defined

Now that we have an understanding of the scope through var now let's understand the scope of let and const by going through the above code snippet one by one.

let and const variables have the same scope but one of the prominent differences between them is that once a value is assigned to a const variable it cannot be re-assigned and it requires the value to be assigned to it at the time of declaration whereas let keywords don't require the value to be assigned during declaration and also allows re-assignment of values to variables.

Firstly, the variable a is at the global scope and is accessible throughout the program.

Second, the variable b is at block scope {} and is accessible inside the block, trying to access it outside the block {} throws an error but if you recall the var block scope this wasn't the case and variables were accessible when declared using var.

Third, the variable c is function scope and is accessible only inside the function and trying it to access outside the function again throws an error.

Just to summarize,

var, let and const behaves the same way at global and function scope,

var block scope is similar to global scope but let and const are accessible only inside the block {} trying to access it outside throws an error.

All about Scope in JS

Exploring Scope in-depth.....