In this article, I talk about some important topics of javascript which frequently ask any Javascript interview. let's get started it.
Scope
The scope is the current context of execution in which values and expressions are "Visible" or can be referred. if a variable or expression is not the current scope can be layered in a hierarchy, so that the child scope have access to parent scope, but not vice-versa.
Global Scope
Variable declared globally have global scope. a global variable can be accessed from anywhere in a javascript program.
Variable declared with var, let and const are quite similar when declared outside a block They all have global scope.
let carName = "Ferrari";
// code here can use carName
function myfuction(){
// code here can also use carName
}
Function Scope / Local Scope
Javascript has function scope: Each function creates a new scope.
variables defined inside a function are not accessible (visible) from outside the function.
variable declared with var, let and const. are quite similar when declared inside a function. They all have Function scope.
function myfunction(){
let carName = "Ferrari" // Function Scope
}
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 keyword provides block scope in javascript.
variable declared inside a {}
block cannot be accessed from outside the block.
{
let x = 2;
}
// x cannot be used here
Lexical Scope
When a function is defined inside another function the inner function can access the variable of the outer function this operation is called lexical scoping.
var x = 2;
var add = function (){
var y =1;
return x+y;
}
add();
// This will print 3.
so, add function is accessing the global variable x
which is defined before the method function add. This is called Lexical scoping.
Scope Chain
Javascript engine uses scopes to find out the exact location or accessibility of variables and that particular process is known as scope chain.
Single Thread
Javascript is a single-threaded language, which means is has only one call stack that is used to execute the program.
stacks are FILO that is First In Last Out. similarly, within the call stack, whenever a line of code gets inside the call stack it gets executed and moves out of the stack. in the way, javascript is a single thread language because of only one call stack.
const one() => {
const two() => {
console.log(5);
}
two();
}
The call stack job is to fill in the instructions and pop an instruction as it gets executed.
Callstack
A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.
It is like a real stack in data structures where data can be pushed and popped and follows the Last In First Out (LIFO) principle.
function f1() {
console.log('Hi by f1!');
}
function f2() {
f1();
console.log('Hi by f2!');
}
f2();
Step-1: When the code loads in memory, the global execution context gets pushed in the stack.
Step-2: The f2() function gets called, and the execution context of f2() gets pushed into the stack.
Step-3: The execution of f2() starts and during its execution, the f1() function gets called inside the f2() function. This causes the execution context of f1() to get pushed in the call stack.
Step 4: Now the f1() function starts executing. A new stack frame of the console.log() method will be pushed to the stack.
Step 5: When the console.log() method runs, it will print “Hi by f1” and then it will be popped from the stack. The execution context go will back to the function and now there not any line of code that remains in the f1() function, as a result, it will also be popped from the call stack.
Step 6: This will similarly happen with the console.log() method that prints the line “Hi by f2” and then finally the function f2() would finish and would be pushed off the stack.
Hoisting
In JavaScript, Hoisting is the default behaviour of moving all the declarations at the top of the scope before code execution. Basically, it gives us an advantage that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.