Javascript Scopes
Tags: javascript, es6, beginners, webdev
Published: 2022-06-26 11:25:47

**What is scope?**

Scope determines the accessibility of a variable. Scope limits the accessibility of a variable. Lets understand with an example.

```javascript
function greeting() {
  var greet = "Hello there";
}

greeting();
console.log(greet);
```
the above code will cause an error saying `greet is not defined`. This has happened because greet have a local scope, it can only be accessed inside the function.

**Types of scope**

There are 3 types of scopes in javascript.
1. Block scope
2. Functional scope
3. Global scope

Before ES6 javascript had only functional and global scope. ES6 introduced let and const keywords which have block scope.

**Block Scope**

To create block scope all we need is {...}. variable inside {...} will have a block scope. `Let` and `const` have block scope. 

```javascript
let a = 2;

if (a > 1) {
  let b = a * 3;
  console.log(b); //6

  for (let i = a; i <= b; i++) {
    let j = i + 10;
    console.log(j); // 12 13 14 15 16
  }
  let c = a + b;
  console.log(c);  //8
}
```
 In the above snippet which variable exist only in the if statement and which exists only in the for loop?

Answer: if statement contains b and c blocked scoped variable. for loop contains i and j block scoped variable. 

**Functional Scope**
Variables declared inside a function have functional scope and can be accessed inside that function. 

```javascript
function getName() {
  var name = "Adam";
  let age = 24;
  console.log(name, age); // Adam 24
}

getName();
console.log(name); // name is not defined
```
In the above snippet name and age have functional scope, they are local to the function and can be accessed only inside function getName().If we try to access it outside the function it will give us ReferenceError.

**Global Scope**

Variables declared outside a function have global scope and can be accessed anywhere in the program.

```javascript
const globalVariable = "accessible from anywhere";

function getName() {
  var name = "Adam";
  let age = 24;
  console.log(globalVariable);  
}

console.log(globalVariable)
```

**let and Var behaviour**

If you try to access let variable too early then it will give a reference error. 

```javascript
console.log(a); //ReferenceError: cannot access 'a' before initialization
console.log(b); //undefined

let a;
var b;
```
This is called TDZ(**T**emporal **D**ead **Z**one) means you're accessing a variable which is decalared but not initialized.

_Why Did this happen only with let and not with var_.

This is because of _variable hoisting_. the interpreter moves the declaration of `var b` at the top of the code. Since we haven't initialized `var b` it will have undefined as its value.

`let a` is TDZ until code execution reaches the line where the variable is declared. 

If we try to access `let or const` in TDZ then they will be unreachable. they are in the scope but not declared .

```javascript
{
  // temporal dead zone
  // temporal dead zone
  // temporal dead zone
  // temporal dead zone
  // temporal dead zone

  let name = "Anna"; // no more TDZ , let name is declared and initialized.
  console.log(name); //Anna
}
```

Declaring a variable means to reserve the name in the memory.
Initializing means setting a value to the variable.