Hi, in this article, we will see some of the most important and frequently asked Javascript Interview Questions.

Hoisting

Hoisting is one of the most important and frequently asked questions in Javascript Interviews

Hoisting is the way the Javascript works, It is the default behavior of Javascript to move the declarations of variables and functions to the top of their scope even before the code starts execution. This is done by the the parser which reads the source code into an intermediate representation before the actual execution starts with the Javascript interpreter.

So even if we declare a variable or function at the end of the program, they will be moved to the top of the scope by default. This enables us to access variables and functions even before they are declared.

Let's understand how the javascript executes the code with respect to Hoisting with an example

// The code we wrote

var x=8;
function get number(){
console.log("The Number is 8")
}
console.log(x)
getNumber();

The Javascript will interpret the code in the following way

var x=undefined
getNumber = function{
console.log("The Number is 8")
}

x=8;
getNumber()

We saw how javascript interprets code, But how does Hoisting work actually??

We need to understand how Javascript executes code to clearly understand how Hoisting works.

For any code to execute in Javascript, It creates a "Global Execution Context"

In "Global Execution Context", there will be two phases

1. Memory Creation Phase (also called variable environment phase)
2. Code Execution Phase (also called the thread of execution)

Let us see how javascript executes a code with the above code example

var x=8;
function getNumber(y){
console.log(y*y)
}
console.log(x)
getNumber(6);

The Javascript now creates a global execution context and executes the code as shown in the below table

At first, Javascript creates a Global Execution Context, and Javascript scans through the whole code and starts assigning memory to all the variables and functions it encountered in the code, this is called the memory creation phase. Javascript assigns memory to the variables by keeping the value of "undefined". In the case of functions, it will store all the code inside that particular function.

Once it completes assigning memory, then Javascript jumps into Code Execution Phase and starts executing the code line by line from top to bottom in order. When it counters a function invocation in the code, it will create an execution context inside the global execution context. Once the execution of function is completed, the execution context related to the function is deleted and the control returns to the Global Execution Context. After the Code Execution Phase, the global execution phase will be deleted.

So when we tried to access the value of a variable even before it is declared, we will get output as undefined because the javascript already created the memory for it in Memory Creation Phase.

But, how Javascript works with arrow functions???

In ES6, Javascript introduced a new and concise way to create functions i.e, Arrow Functions. But, Arrow functions behave differently with respect to hoisting. Javascript treats Arrow Functions as variables and we get FunctionName is not a function when we try to access arrow functions before declaration.

getCourseName2()
getCourseName();

var getCourseName = () => {
  console.log("Full Stack JavaScript Developer Bootcamp");
};

function getCourseName2() {
  console.log("Devops Pro");
}

// Output
//
// Devops Pro
// TypeError: getCourseName is not a function

ES6 also gave us Let and Const keyword. But, Hoisting won't work with Let and Const as they cannot be accessed before initialization.

console.log(x)
let x =5;

// Output
// ReferenceError: Cannot access 'x' before initialization

console.log(x)
const x =5;
// Output
// ReferenceError: Cannot access 'x' before initialization

As we completed our discussion on Hoisting, now we will discuss Call Stack

Call Stack

While we are discussing Hoisting, we learned that Javascript creates a Global Execution Context when it has to execute any code and it also creates another execution context when it encounters a function in the code. But where does the javascript creates a Global Execution Context ??

Yes, you guessed it right

Javascript creates the Global execution context inside the call stack.

When Javascript starts executing any code, the first thing it will do is create a class stack that contains a Global Execution Context and the control will be in the Global Execution Context, and if there is any function inside the code, another Execution Context will be created on the top of the Global Execution Context inside the call stack and the control will be transferred to the function Execution Context, this context will be alive till the time of function execution, once the function executes, the Execution Context will be deleted and the control will be returned to Global Execution Context.

Let's understand how call stack works with an example

In the above example, there are three functions namely One, Two, and Three, at first the javascript creates a call stack with the global execution context, and when the javascript encounters the first function (One), it will create a new execution context on the top of the Global Execution Context and the control will be given to the first function execution context and if there is another function inside the first function, a new execution context will be created on the top of the first function and this cycle goes on till javascript completes scanning all the code.

After javascript creates execution concepts, it will start executing the functions, and as soon as the function execution is completed, the execution context related to that function will be deleted and this will go on till all the execution contexts got deleted and at last the control will be transferred to the Global execution context and at last when all the code got executed, the Global execution context will also be deleted and removed from the call stack.

Now as we completed discussing Call Stack, let us see why javascript is called Synchronous Single Threaded Language

Javascript is a Synchronous Single Threaded Language

When I said Javascript is a single-threaded language, it means Javascript will execute only one line of code at a time.

Single-threaded means one line at a time, so what does synchronous means?? Synchronous means in order.

So, We call Javascript a Synchronous single-threaded language because Javascript executes one line of code at a time that too in an order(basically from top to bottom of the code) i.e, It can go to the next line of code only when the current line has finished executing.

Javascript behaves as a single-threaded languages because it is having only a single thread of execution which in turn is because of having a single call stack.

Scope

The scope is another important concept in Javascript which will be asked in most of the interviews

Scope determines the accessibility of variables, objects, and functions from different parts of the code.

There are different types of scope in Javascript

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

Block Scope

Before ES6, Javascript has only Function and Global Scope

But with the introduction Let and Const keywords in ES6, Javascript supports block scope too.

Variables declared inside the {} block, cannot be accessed outside the block i.e, the variables are having block scope

Let's understand the block scope with an example

{
    var x =3;
    let y =4;
    const z =5;

}

console.log(x); 
console.log(y);
console.log(z);

//Output
//
// 3
// ReferenceError: y is not defined and the code execution will stop

The above code will give the first output as 3 as the variables declared with var cannot be block scoped, but after that, we will get a reference error for y, and z as they are block scoped and cannot be accessed outside the block.

Function Scope

Variables declared within a JavaScript function become local to that function. These variables have function scope i.e, they can be accessed within the function and not outside the function.

Let's understand the Function Scope with the help of an example

function myCourseName(){
    let CourseName = "Full Stack Javascript Developer Bootcamp"
    console.log(CourseName)
}

myCourseName();
console.log(CourseName);

// Output
//
// Full Stack Javascript Developer Bootcamp
// ReferenceError: CourseName is not defined

We will get a Reference error if we try to access a variable outside the function.

Since these variables are only recognized inside their functions, variables with the same name can be used in different functions.

Function variables are created when a function starts and they will get deleted when function execution is completed.

Global Scope

A variable is said to have global scope when we can access it anywhere in the code. A variable that is declared outside the function will have global scope.

Let's see Global Scope with the help of an example

let getCourseName = "Devops Pro";
console.log(getCourseName);

function globalScopeDemoOne() {
  console.log(getCourseName);
}

globalScopeDemoOne();
console.log(getCourseName);

// Output
//
// Devops Pro
// Devops Pro
// Devops Pro

Variables declared with var, let and const will have the same behavior when declared outside block/function. All those variables will have global scope

Automatically Global

If you assign a value to a variable that has not been declared, it will automatically become a global variable.

Let's understand this with the help of an example

function getCourseName() {
  courseName = "Full Stack Javascript Developer Bootcamp";
}
getCourseName();
console.log(courseName);

// Output
// Full Stack Javascript Developer Bootcamp

Even though we have courseName variable inside a function, we are able to access it outside the function because it is not declared. Now, courseName can be accessed anywhere in the code.

Thanks for reading till the end. Hope this article increased your understanding of Javascript. Please give your feedback if any.