You came across this article because you want to understand the concept of JavaScript Scope. Every JavaScript Developer would have to learn this In order to apply the appropriate keywords for various instances.

Scope is the availability of functions or variables around specific code areas. In other words, Scope is the area in our code that contain visible functions or variables.

Global scope

A variable is global when declared at the beginning of a program or outside a function. When a variable is declared outside scope or block, It becomes a global variable. Likewise, variables used without being declared become global.

//global scope variable
let color = 'blue'
console.log(color)    //blue

function myColor(){
console.log(color)   //blue

}
myColor()            //blue

The output above shows that variables declared at the beginning of a program can be assessed from anywhere regardless if the variable lies within a function, block scope or not.

function myColour(){
colour = 'blue'

}
myColour()
console.log(colour)  //blue

The code above shows a variable used without being declared becomes global.

Local scope

A variable is said to be local if it is embedded inside a function. Local variables can be accessed within its function and its nested functions. Variables declared locally would become inaccessible outside the function.

let colour = "yellow";  // global scope

function myPet() {
    let pet= "cat"         // local scope

    console.log(colour + ' ' + pet);   //yellow cat
}

myPet();
console.log(colour + pet); // Uncaught ReferenceError: pet is not defined

The local scopes could be sub-divided into

• Function scope and
• Block scope.

Function Scope

When a variable is declared in a function scope, it is only useful inside the function and other nested functions. It can not be accessed outside the function.

//function scope 

function myPet(){
    var pet = 'cat';
    console.log('I have a ', pet);   // I have a cat

//nested function scope
    function petAge(){  
         var age= 3
    console.log('my ', pet + petAge);  // my cat is 3

    }
petAge()
}
myPet();

It is important to note that a function scope including other nested functions is also called a Lexical scope. The nested function has access to the variable declared from its parent function.

Block Scope

Block scope is the latest addition prior to the times of global and local scopes. Block scope is in such a way that a variable declared in a block scope cannot be accessed outside the scope. Block scope variables are declared inside curly braces { }.

ES6 also known as ECMAScript 6 is a newer version of JavaScript, It introduced new keyword words let and const which are to be used inside a block statement. This is because variables declared using these keywords cannot be accessed outside the block. var keyword is not block-scoped because the variable can be accessed outside the curly braces { }.

function color(){
    if(true){
        var color1= 'red';      
        const color2 = 'green';    
        let color3 = 'blue';   

    }
    console.log(color1);  // red
    console.log(color2);  //  ReferenceError: color is not defined
    console.log(color3);  //  ReferenceError: fruit2 is not defined
}

color();

var is not block-scoped, hence it should not be used as a keyword when declaring variable in a block scope.