What exactly is Scope?
Scope refers to the area where an item (such as a function or variable) is visible and accessible to other code. Scope means area, space, or region.
Global scope
Global space can be accessed from anywhere in a JavaScript program. The variables defined outside of any function or curly brackets are known as global variables and have global scope. In another way we can say Global scope means that the variables can be accessed from any part of that program, any function or conditional state can access that variable.
var name = 'Nisha';
function myName() {
console.log(name);
}
myName();
Output:
Nisha
Local Scope
Variables declared inside any function with var keyword are called local variables. Local variables cannot be accessed or modified outside the function declaration. Local scope means a local region or a restricted region.
let a = 6;
function add() {
let b = "4"
console.log(a + b);
}
add();
console.log(a + b); // error
Block Scope
This scope restricts the variable that is declared inside a specific block, from access by the outside of the block. let and const two keywords provide Block Scope in JavaScript. Variables declared inside a { } block cannot be accessed from outside.
{
const x = 2;
}
// x CAN be used here
Function Scope
JavaScript has function scope: Each function creates a new scope. The function scope is the accessibility of the variables defined inside a function.
function myFunction() {
var myCountry = "India"; // Function Scope
}
What is Lexical Scope in JavaScript?
Lexical scope is the definition area of an expression. In other words, an item's lexical scope is the place in which the item got created.
Example:
const myName = "Nisha";
function getName() {
return myName;
}
Output:
Nisha
What is Scope chain?
Scope chain refers to the unique spaces that exist from the scope where a variable was called to the global scope. Every function in JavaScript has access to a scope chain, which includes references to the function's outer scope (the scope in which the function was declared), the outer scope's outer scope, and so on. This complete chain formation goes on and stops when the user wishes to stop it according to the requirement.
const globalVar = 3;
function firstFunc () {
const firstVar = 2;
function secondFunc () {
const secondVar = 3;
return secondVar + firstVar + globalVar;
}
const resultFromSecondFunc = secondFunc();
return resultFromSecondFunc;
}
firstFunc();
output
8
Single-Threaded execution in javascript
Javascript is a single-threaded language. This means it has one call stack and one memory heap. As expected, it executes code in order and must finish executing a piece code before moving onto the next. So if we print from 1to 5 it will execute every line one by one and can’t execute all prints at a single time.
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
Execute line 1 & Print => 1
Execute line 2 & Print => 2
Execute line 3 & Print => 3
Execute line 4 & Print => 4
Execute line 5 & Print => 5
What is JavaScript Call Stack?
The call stack is a feature not just of JavaScript but many other programming languages. When the code is running the call stack enables the JavaScript interpreter (how the files are read) to keep track of where in the code it is and which function is currently running. This becomes necessary if you have a function which calls another function.
const addOne = (value) => value + 1;
const doubleValue = (value) => addOne(value) * 2;
const makeTotal = (a, b) => {
return doubleValue(a) + doubleValue(b);
}
makeTotal(10, 20);
//Returns ---> 64
What is Hoisting?
In JavaScript, Hoisting is a kind of default behavior in which all the declarations either variable declaration or function declaration are moved at the top of the scope just before executing the program's code. However, it can be considered an advantage because all functions and variable declarations are placed to the top of their scope no matter where they are all declared anywhere in the whole program, even regardless of whether they are declared global or local. In simple words, we can say that we can use the variables and functions in JavaScript before declaring them because as we discussed above JavaScript compiler moves the declarations of all the variables and functions at the top of their scope so that there will not be an error of any kind. The concept of JavaScript of moving all declarations of the variables and functions to the top of their scope by compiler itself just before the execution of code is known as Hoisting.
Example:
console.log(HatchBackcar); // (undefined)
console.log(Suv); // (Reference Error)
console.log(SedanCar); // (Reference Error)
var HatchBackcar ="Hyundai Grand i10" ;
const Suv = "Volvo XC40" ;
let SedanCar = "Hyundai Verna";