This content originally appeared on DEV Community and was authored by kirtymeena
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
}
Declaring a variable means to reserve the name in the memory.
Initializing means setting a value to the variable.
This content originally appeared on DEV Community and was authored by kirtymeena
kirtymeena | Sciencx (2022-06-26T11:25:47+00:00) Javascript Scopes. Retrieved from https://www.scien.cx/2022/06/26/javascript-scopes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.