What is Scope in JavaScript?
Tags: javascript, beginners, webdev
Published: 2022-07-09 14:01:03

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.

```javascript
//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.

```javascript
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.

```javascript
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.

```javascript

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.


```javascript
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](https://github.com/rak-shit) and [LinkedIn](https://www.linkedin.com/in/mrakshit/).

Follow me on [Twitter](https://twitter.com/mRakshit_)

Have a nice day :)