JavaScript Scope

You came across this article because you want to understand the concept of JavaScript Scope. Every JavaScript developer must learn this to use the right keywords in different situations.

Scope refers to the availability of functions or variables in specific parts of the code. In other words, scope is the area in our code where functions or variables are visible.

Global scope

A variable is global when declared at the beginning of a program or outside a function. When a variable is declared outside a scope or block, it becomes a global variable. Similarly, variables used without being declared also 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 that a variable used without being declared becomes global.

This happens because myColour() sets the value of the colour variable to 'blue'. When console.log(colour) is executed, it prints the value of the colour variable, which is 'blue'.

In this case, the colour variable is declared without the let, const, or var keywords, making it a global variable. However, this can cause issues with variable scope and naming conflicts. It's generally recommended to use the appropriate variable declaration keywords (let, const, or var) to ensure proper variable scoping and avoid unintended side effects.

Local scope

A variable is considered local if it is defined inside a function. Local variables can be accessed within that function and its nested functions. Variables declared locally are not accessible 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 + " is " + age);  // 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 petAge() has access to the variable declared in its parent function myPet(). When the program runs, the parent function is called, it enters the function, executes, and prints the output to the console ("I have a cat"). After the function scope is fully executed, petAge() is triggered, and its execution prints the output to the console ("My cat is 3").

Block Scope

Block scope is a recent addition compared to global and local scopes. In block scope, a variable declared inside a block cannot be accessed outside of that block. Block scope variables are declared inside curly braces { }.

ES6, also known as ECMAScript 6, introduced new keywords let and const to be used inside a block statement. Variables declared with these keywords cannot be accessed outside the block. The var keyword is not block-scoped because variables declared with var 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();

Block-scoped variables cannot be accessed from outside their scope. The var keyword does not follow this rule, so unless you are very sure of what you're doing, it is wise to avoid using it in a block scope because it might cause issues later, especially as the program grows.

Use the let and const keywords for declaring variables in block scope. The const keyword should be used for variables that are not likely to change. The let keyword should be used for variables that may change or be modified.