What is Scope in JavaScript?

Scope in Javascript refers to the accessibility/visibility of a variable or any other resource in Javascript.

Without wasting time let us dive into some examples to understand scope.

Global Scope

There is only one global scope in Javascript document. The area outside of all the functions is considered t be global scope. The variables declared in global scope can we accessed and altered in any other scope.

//global scope
var fruit = 'apple'

function printApple() {
    console.log(fruit)
}

printApple()

In the above example the variable fruit is declared in global scope and it can accessed any where inside the document. The answer does not change even if I use let instead of var.

Local Scope

The variables declared inside a function are said to be local to the function they are declared in. Every function has its own scope.

function a() {
    // local scope a
    function b() {
        // local scope b
    }
}

function c() {
    // local scope c
}

Now, let us dive a bit into the local scope. Local scope is divided into two sections namely, block scope and function scope.

Function Scope

Whenever you declare a variable inside a function the variable is visible or accessible inside the function. The variables declared with the keyword var are associated with functional scope.

function a() {
    var fruit = 'apple'
    console.log(fruit)
}

a()                // apple
console.log(fruit) // error: fruit is not defined

Block Scope

In Javascript, the area within if, for, switch and while is considered to be a block. In simple terms whenever we use {} (curly braces) a block is created and the variables declared inside it are considered to be block scoped to that particular block.

The variables declared with the var keyword do not show the properties of block scope. The variables declared with let and const show the block scope properties.

function a() {
    if (true) {
        var x = 'hello'
        let y = 'hey'
        const z = 'bey'
    }

    console.log(x)
    console.log(y)
    console.log(z)
}

a()
// console.log(x) will print hello
// console.log(y) will throw error
// console.log(z) will throw error

Apart from all the scopes discussed above there is one more scope which needs a mention which is the Lexical Scope.

Lexical Scope

In simple terms it means that the variables declared in the parent can be accessed by the children. The children functions are lexically bound to the execution context of their parents.

function a() {
    var x = 'hello'
    let y = 'hey'
    const z = 'bey'

    function b() {
        console.log(x)
        console.log(y)
        console.log(z)
    }

    return b
}

b = a()
b()
// console.log(x) will print hello
// console.log(y) will print hey
// console.log(z) will throw print

I hope this article sums up what exactly is scope in Javascript. Also, I would like to mention we need to know how exactly let, const and var work in-order to take a much deeper dive into Scope.

Reach me out on Github and LinkedIn.

Follow me on Twitter

Have a nice day :)

Comments

[ecyrbe]

Hello, thanks for making a beginners guide.

But i'd like to remind you that your tags should match your content. Else dev.to would become chaotic and tags become irrelevant.

So you should remove react and typescript tags.