how javascript works interview questions, hoisting, scope, call stack

Hey, are you preparing for the job in web development? you have to know some of the concepts that we are discussing today.
The questions list that we discuss today is as follows.

What is Hoisting in javascript ?
What is Scope in javascript ?
What is a Call stack ?
Javascript is a single-threaded language ?

Let's dig in.

What is Hoisting in Javascript?

Hoisting allows functions to be safely used in a code before they are declared. we know that code is run line by line but according to the definition, we can access my function before it declares but how?. let's see by using an example.

function sayHello(name){
    return console.log("Hello" +" "+ name)
}

sayHello("Rushi")

so you know what is the output of that.
This is the output

Just take a look at this code

sayHello("Rushi") 
// here we access the function before it declares

function sayHello(name){
    return console.log("Hello" +" "+ name)
}

Do you think it will work or not? let's see It works.......! and this is because of hoisting. we will understand why this happening in deep in another how js work blog. Now let's see if hoisting only works for function or if there are other ways to produce hoisting.

=> Variable and class declarations are also hoisted, so they too can be referenced before they are declared.
=> Hoisting works with variables too but it only hoists declarations, not initializations, which means initialization does not happen until that line of code is executed where the value is assigned.
=> so what is the default initialization value, the variable has until it reaches the code line { undefined } it is the default value.
=> Also remember that variable hoisting works only with a variable declared with var not let and const

What is Scope?

Let's see what is the scope, according to the definition.

The scope is the current context of execution in which values and expressions are "visible" or can be referenced.

Let's see what that means by an example.

function getName(){
  // name & role declares inside function
  const name = "Rushikesh";
  const role = "Admin"
  return console.log(name)
}
// This function returns the only name not the role
getName();

console.log(role);  // we access the role directly outside the function

if we want to access the role outside the function can we access it? No, it will not work because the function creates scope and value declared inside it cannot access outside.

var adminName= "Rushikesh"
var role = "Admin";

function getName() {
    return console.log(adminName);
}
getName()
console.log(role);

you can see the above example we declare variable outside the function and access it inside the function it works fine because the variable is declared outside of the scope it is the part of global scope.

Types of Scope

=> Global scope
=> Module Scope
=> Function Scope: we can see the example of the function scope above.

In addition, variables declared with let or const can belong to an additional scope

=> Block Scope: The scope was created with a pair of curly braces.

Block Scope Example

Let's see the example of block scope.
Variables declared inside a { } block cannot be accessed from outside the block:

{
  let x = 2;
}
// x can NOT be used here
console.log(x);
// It will give a reference error that x is not declared.

Global Scope Example

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;
}
// x can be used here 
console.log(x);
It gives output 2;

What is a Call stack?

According to definition

A call stack is a mechanism for an interpreter 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.

Couldn't get that? let's see it by an example and see how js works behind the scene.

const myName = "Rushikesh"

function sayHello(userName){
    // Another function that calculates the age.
    function calculateAge(year){
        return 2022 - year;
    };
    const age = calculateAge(1998)
    return `Hello ${userName}, your age is ${age}`;
};

// calling function 
console.log(sayHello(myName));

Let's see How this code works
Step 1 => when the program runs Global execution context {GEC} is created that you can see in stack 1.
Step 2 => After that it scans the code and initializes the variable as undefined if it is a global variable and initialized and stores the function as it is after that, it runs the code line by line you can see at the last line SayHello() function is called it looks for the function in memory when it finds that it will create another execution context for that function you can see that in stack 2.
Step 3 => In SayHello() function again it scans and stores it in memory and executes the code line by line while executing the function it encounters the again the function call that is calculateAge() it looks for that function in memory and again creates the execution context for that so it goes above the SayHello() function in the stack you can see that in stack 3.
Step 4 => In calculateAge() function it calculates the age and returns the age after finishing the task it disappears and goes to the sayHello() to perform the pending task you can see the stack 4.
Step 5 => After completing the task it will disappear from the stack and after completing all tasks it empty the stack.

Javascript is a single-threaded language?

According to the definition, JavaScript is a prototype-based, single-threaded, dynamic language.

Javascript is a single-threaded language that can be non-blocking. Single-threaded means it has only one call stack. Whatever is on the top of the call stack is run first. In the above example of the call stack, we see how the call stack works.

Java Script Interview Cheat sheet

Table of contents