JavaScript Interview Topic : Scope

What is Scope?

The scope is the accessibility of variables, functions, or objects in some particular part of your code during runtime. They came into existence when the principle of least privilege was applied in programming language designs. Scopes provide some level of security to your code, i.e are only used when they are really needed. Scoping parts of your code help improve efficiency, track and reduce bugs. It also solves the naming problem when you have variables with the same name but in different scopes, so reduce namespace collision.

JavaScript has 3-types of Scope :

1. Block Scope
2. Local Scope
3. Function Scope
4. Global Scope

1. Block Scope-

Before ES6 (2015), JavaScript had only Global Scope and Function Scope. ES6 introduced two important new JavaScript keywords: let and const. These two keywords provide Block Scope in JavaScript. Variables declared inside a { } block cannot be accessed from outside the block:

{
  let x = 2;
}
 console.log(x) //x can NOT be used here

Variables declared with the var keyword can NOT have block scope.

Variables declared inside a { } block can be accessed from outside the block.

{
  var x = 2;
}
 console.log(x) // x CAN be used here

2. Local Scope-

Variables declared within a JavaScript function, become LOCAL to the function.

// code here cannot use firstName

function myFun() {
  let firstName = "Ayush";
  console.log(firstName); //code here can use firstName
}
myFun(); // code here cannot use firstName

Local variables have Function Scope: They can only be accessed from within the function. Since local variables are only recognized inside their functions, variables with the same name can be used in different functions. Local variables are created when a function starts, and deleted when the function is completed.

3. Function Scope-

JavaScript has function scope: Each function creates a new scope.

Variables defined inside a function are not accessible (visible) from outside the function.

Variables declared with var, let and const are quite similar when declared inside a function.

They all have Function Scope:-

function myFun() {
  var firstName = "Ayush"; //function scope
}
myFun();


function myFun() {
  let firstName = "Ayush"; //function scope
}
myFun();


function myFun() {
  const firstName = "Ayush"; //function scope
}
myFun();

4. Global Scope-

Variables declared Globally (outside any function) have Global Scope.

Global variables can be accessed from anywhere in a JavaScript program.

Variables declared with var, let and const are quite similar when declared outside a block.

They all have Global Scope:-

let firstName = "Ayush";
function myFun() {
  console.log(firstName); //firstName can be accessed from here
}
myFun();
console.log(firstName); ////firstName can be accessed from here also

Conclusion-

Thanks a lot for reading and hope now you know about Scope in JS. For more information please checkout MDN docs.And don't forget to hit a 👍 if you find this article helpful. Happy learning! 🎉

Resources-

1.MDN docs

2.W3Schools

3.TutorialPoint