Javascript Scopes – DEV Community

What’s scope?

Scope determines the accessibility of a variable. Scope limits the accessibility of a variable. Lets perceive with an instance.

operate greeting() {
  var greet = "Hi there there";
}

greeting();
console.log(greet);

the above code will trigger an error saying greet is just not outlined. This has occurred as a result of greet have an area scope, it could actually solely be accessed contained in the operate.

Kinds of scope

There are 3 kinds of scopes in javascript.

1. Block scope
2. Practical scope
3. World scope

Earlier than ES6 javascript had solely useful and international scope. ES6 launched let and const key phrases which have block scope.

Block Scope

To create block scope all we want is {…}. variable inside {…} could 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
}

Within the above snippet which variable exist solely within the if assertion and which exists solely within the for loop?

Reply: if assertion comprises b and c blocked scoped variable. for loop comprises i and j block scoped variable.

Practical Scope
Variables declared inside a operate have useful scope and might be accessed inside that operate.

operate getName() {
  var title = "Adam";
  let age = 24;
  console.log(title, age); // Adam 24
}

getName();
console.log(title); // title is just not outlined

Within the above snippet title and age have useful scope, they’re native to the operate and might be accessed solely inside operate getName().If we attempt to entry it outdoors the operate it would give us ReferenceError.

World Scope

Variables declared outdoors a operate have international scope and might be accessed anyplace in this system.

const globalVariable = "accessible from anyplace";

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

console.log(globalVariable)

let and Var behaviour

In the event you attempt to entry let variable too early then it would give a reference error.

console.log(a); //ReferenceError: can't entry 'a' earlier than initialization
console.log(b); //undefined

let a;
var b;

That is known as TDZ(Temporal Dead Zone) means you are accessing a variable which is decalared however not initialized.

Why Did this occur solely with let and never with var.

That is due to variable hoisting. the interpreter strikes the declaration of var b on the prime of the code. Since we have not initialized var b it would have undefined as its worth.

let a is TDZ till code execution reaches the road the place the variable is said.

If we attempt to entry let or const in TDZ then they are going to be unreachable. they’re within the scope however not declared .

{
  // temporal lifeless zone
  // temporal lifeless zone
  // temporal lifeless zone
  // temporal lifeless zone
  // temporal lifeless zone

  let title = "Anna"; // no extra TDZ , let title is said and initialized.
  console.log(title); //Anna
}

Declaring a variable means to order the title within the reminiscence.
Initializing means setting a price to the variable.