What is Scope in JavaScript?

#webdev #javascript #codenewbie #beginners

A scope defines the lifetime visibility of a variable. Variables are not visible outside the scope in which they are declared.

Types of Scope in JavaScript

Module Scope
Function Scope
Block Scope
Lexical Scope
Global Scope

Module Scope

A variable declared outside any function fall in the global scope. In a module, when a variable is declared, it is hidden and not available to other modules unless it's exported.

// A random no. between 1 -100
const randomNumber = Math.floor(Math.random() * 100); 

//This variable is not exported 
const alpha = 432; 

// Look carefully as Variable alpha is not exported. 
// ES5 Export Statement
module.exports = randomNumber;

Filename = ModuleOne.js


// ES5 Import Statement
const moduleTwo = require("./moduleTwo")

console.log(moduleTwo)
// 44

Only the exported variables are logged into the console. The variables which are not exported remain inaccessible for the ModouleOne.js unless explicitly exported from ModuleTwo.js

Function Scope

Variables and Parameters declared inside a function are accessible inside the function but not outside the function.

function scoped(number) {
    const incrementedNumber = number + 4; 

    console.log(number); 
    //42
    console.log(incrementedNumber); 
    // 46
}

scoped(42); 

console.log(number)
// ReferenceError: number is not defined

The variable number and incrementedNumber are functions scoped and thus they throw an error when someone tries to access them.

Block Scope

Block Scope is defined with curly braces. It is separated by { and }.

//  Oustside Block
let x = 55; 
{
    // Inside Block
    let x = 33; 
    console.log("Inside Block: ", x)
}
console.log("Outside Block: ",x)

// Inside Block: 33
// Outside Blocl: 55

Lexical Scope

Lexical Scope means that in a nested group (function within a function) of function, the inner functions have to access to the variables and other resources of their parent scope.

This means that the child functions are lexically bound to the execution context of their parents. Lexical scope is sometimes also referred to as Static Scope.

function outer() {
    let a = 323; 
    function inner() {
        console.log(a); 
    }
    inner()
}

outer(); 

// 323

First off, JavaScript has lexical scoping with function scope. In other words, even though JavaScript looks like it should have block scope because it uses curly braces { }, a new scope is created only when you create a new function.

Even though there are no variables names an inside of an inner function, the inner function doesn't throw an error.

The inner function looks for an in its scope but there is no variable there. So, it looks for an in the outer function.

Global Scope

Variables defined outside any function, block, or module scope have global scope. Variables in the global scope can be accessed from everywhere on the application.

var x = 33; 

function func() { 
    // Function Scope
    consolelog(x) 
    function inner() {
        //Lexical Scope
        console.log(x)
    }
    inner(); 
}

func(); 

{
    // Block Scope
    console.log(x)
}

// 33
// 33
// 33