Javascript Scopes

#javascript #es6 #beginners #webdev

What is scope?

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

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.

Block scope
Functional scope
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.

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.

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.

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.

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

let a;
var b;

This is called TDZ(Temporal Dead Zone) 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 .

{
  // 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
}