What Scope says about Variable in JavaScript?
Tags: javascript, programming, computerscience, webdev
Published: 2022-01-09 18:33:19

Scope is one of the fundamental concept that every JavaScript developer should know to become a better JavaScript Developer. 
So, in the article I will explain about it and how it work in JavaScript.

## What is Scope?
_Scope determines where a variable is visible in JavaScript .In JavaScript functions and objects are also variable._

## How many types of scopes are there?

1. Local Scope
2. Global Scope
3. Block Scope

**Three main points to keep in mind**

1. A variable is said to be in local scope when it is defined inside a function.
2. A variable is said to be in global scope when it is defined outside a function.
3. A new scope is created each time a function is invoked.

## Global Scope
When we first write JavaScript on a JavaScript file, you are already in Global scope. There is only one global scope in the entire JavaScript document. Variables are in the Global scope when defined outside of a function.

```javascript
var name = 'Mike'; 
```
The value of the variables within the Global scope can be accessed and changed in any other scopes.

```javascript
var name = 'Mike';

function Teacher(){
    console.log("Inside Function before change -> name:", name);
    name = 'Harry';
    console.log("Inside Function after change-> name: ", name);
}

Teacher();

console.log("Outside function-> ", language);
```
**Output:**
`Inside Function before change -> name: Mike
Inside Function after change-> name:  Harry`
##Local Scope
Local Scope is also known as Function scope. Variables defined within a function is in local scope. This means that variables with the same name can be used for different functions. This is because those variables are bound to their respective functions, each with different scope, and is not accessible to the other functions.

```javascript
var name = 'Mike';

function Teacher() {
    var name = 'John'
    console.log("Inside Function Teacher()-> name:", name); //Output: John
    function Student() {
        var name = 'Harry'
        console.log("Inside Function Student()-> name:", name); // Output: Harry
    }
    Student();
}

Teacher();

console.log("Outside Function-> name:", name); //Output: Mike

```
**Output:**
`Inside Function Teacher()-> name:  John
Inside Function Student()-> name: Harry
Outside Function-> name:  Mike `

## Block Scope
Block Scope determines the visibility of variables in a block of code. If a variable is declared inside a block can only be accessed inside the block and not outside the block then that variable is said to be block scope.

Think of the "block" of code as if statement, loop, while loop, etc.

**var** keyword does not support block scope. In the year 2015 , ES6 introduced two important keyword **let** and **const** which support block scope.

```javascript
if (true) {
  var name = 'Mike';
  const name1 = 'John';
  let name2 = 'Harry';

  console.log("===Inside Block===")
  console.log(name); // Output: Mike
  console.log(name1); // Output: John
  console.log(name2); // Output: Harry
}

console.log("===Outside Block===")

console.log(name); // Output: Mike
console.log(name1); // Output: ReferenceError
console.log(name2); // Output: ReferenceError
```
Output:
`===Inside Block===
Mike
John
Harry
===Outside Block===
Mike
Reference error
Reference error
`
In the above example you can see all the variable are accessible inside the block but only the variable with **var** keyword is accessible outside the block and the variables with keyword **let** and **const** shows error.

## Difference between Local Scope and Block Scope

Basically, the difference between function scope and block scope is that in JavaScript, any variables declared within a function are visible anywhere within that same function. But with block scope, the visibility of variables is confined to any given block (whether it's an if statement, where/for loop, etc) enclosed by curly braces.

## Wrap Up!!

I hope you enjoyed this article. Thank you for reading. Please share it with your network. Don’t forget to leave your comments below.