# Let's Talk 'Scopes' in JavaScript

This article is going to be about `scopes` concept in JavaScript. Without knowing about scopes correctly, our code may work unexpectedly. So, to clear things up and to strengthen our concepts we'll be discussing these two here. I'll try my best to explain it in a beginner-friendly language. 🙌

## Scopes

![Dictionary Meaning](https://i.ibb.co/pnvbmGk/Annotation-2020-07-21-230329.png)

Let's look at the highlighted portion. It says,

> _the extent of the area or subject matter that something deals with or to which it is relevant._ 

So basically `scope` in JavaScript should be something like the area where something deals. Now, who deals is the first question that should pop up in our head after reading the description I gave. 🤔

__Who?!!__ the answer is the variables in JavaScript. 

So, in easy words

> __The Scope is the area in code from where a variable can be accessed.__

### Types of Scopes in JavaScript

In JavaScript, there are two types of scope. 

* Global Scope
* Local Scope

A local scope can be further divided into two types,

* Local Scope
  * Function Scope
  * Block Scope

![](https://i.ibb.co/vJhg635/Scope.png)

The above image shows the different types of scopes. The rectangles show the area where the variables are accessible. Now, let's discuss the scopes one by one.

## Global Scope 🌏

In Global Scope, the variables can be accessed from anywhere in the program. A variable declared outside all the programs or curly braces is referred to as a Global Scope variable. A variable declared in the global scope can be accessed from any function or nested function in the program.

![](https://i.ibb.co/s3SNWsw/Annotation-2020-07-23-150550.png)

As we can see from the example, the globally declared `number` is first called from the global scope, then from a function and after that, it is called from a block scope. I hope this clears the concept of global scope.

Before ES6, the `var` keyword was used to declare a variable in JavaScript. And `var` declares all the variables in the global scope, even if the variable is declared inside a function or in block level. This means, any variable declared using the`var` keyword or without a keyword is accessible from anywhere in a program. But this causes a problem if the program has the same variable at multiple places. So, usually, it is a good practice not to declare a variable in the global scope. This was another reason behind introducing `let` and `const` in ES6. 

Another problem with `var` is that if a variable is already defined with `var` and if we declare another variable with the same name using  `var`, it'll overwrite the old variable and assign the new value to it whereas `let` and `const` will give an error. This can be a huge headache while debugging code.

```javascript
var number = 5;
var number = 10;
console.log(number); //10
```

```javascript
let number = 5;
const number = 10; //SyntaxError: Identifier 'number' has already been declared
```

## Local Scope 🏢

Variables that can be accessed from only a specific part of the code are local variables. If you check the above diagram again, all the variables declared inside the function `sum` are local variable, including the variable inside the loop. In other words, all variables other than global variables are local variables in JavaScript. Local variables cannot be called from outside of their function or block. 

```javascript
var number = 5;

function sum() {
  const arr = [1, 2, 3];
  let sum = 0;
}
console.log(arr); //arr is not defined
```

Because a local variable can be declared either in a function or in a block(like a `for` loop) or inside an `if-else` / `while` loops, JavaScript has two types of local scope, __function scope__, __block scope__.

### Function Scope 🏗

A variable declared inside a function resides in the function scope. The variable can be accessed from functions or blocks inside the function(i.e., nested functions) but not from the outside. In the above code sample, the `arr` variable is declared inside a function, and when we are trying to call it from outside of the function, we are getting the error `arr is not defined`. Though the variable can be accessed from a nested function.

### Block Scope 🤠

Variables declared inside blocks like `for` loops or inside curly braces `{ }` with `let` or `const` are block-scoped variables. 

```javascript
if(number % 2 === 0) {
  let  even = number;
  console.log("Even", even);
} else {
  let odd = number;
  console.log("Odd", odd);
}
console.log("Even", even); //even is not defined
console.log("Odd", odd); //odd is not defined
```

I couldn't come up with a better example, so just used this code. 😅

The variables `even` and `odd` are declared inside `{ }` braces, they are in block scope. In the first diagram, the variable `i` declared inside the `for` loop is also a block-scoped.

```javascript
function sum() {
  const arr = [1, 2, 3];
  let sum = 0; //sum and arr are function scope
  for(let i = 0; i < arr.length; i++) { //i is block scope
    sum = sum + arr[i];
  }
}
```

I hope this article somehow helped you understand the concept of scope in JavaScript. If you liked the article, please give a 👍 and comment your thoughts below. 🔥