Harsh Thakkar's Blog
Javascript Interview Cheatsheet

Javascript Interview Cheatsheet

Harsh Thakkar's photo
Harsh Thakkar
·

4 min read

Table of contents

This article will contain all about Scope Chaining, CallStack, Single Thread & Code Hoisting.

1. Scope Chaining

In order to understand what scope chaining is, we need to start by first understanding what scope is. To answer this question, the scope is the current context of execution in which values and expressions are "visible" or can be referenced. The accessibility of variables is limited by the scope where they're created. Depending upon the availability of scopes, we find three major types, which are the following -

  • Global Scope
  • Function Scope
  • Block Scope

Global Scope

As the name suggests, Global Scope means that they can be accessed anywhere in the file. Let's see how! The scope of that variable or function is Global when you define a variable or function outside any block i.e. { }.

let myName = "Harsh"
function getName() {
    console.log(myName);
}

getName()

In the above code snippet, 'myName' variable and 'getName' function are not declared inside any block. Hence they can be accessed anywhere or be used anywhere in the file.

Function Scope

A Function Scope is also called Local Scope. Any variable that is declared inside a function is said to have the Local Scope and it is accessible within a function. It will show an error when you try to access any variable defined inside a function from outside or from another function. 

function getName() {
    let myName = "Harsh" // Function Scope
    console.log(myName);
}
getName()

In the above code snippet, the scope of variable 'myName' is Local. In other words, it can only be accessible inside the function 'getName'.

Block Scope

Earlier there were only two scopes, namely Global and Local. However, after the introduction of let and const, another scope was added to JavaScript and it is called Block Scope. 

{
    let myName = "Harsh"
    console.log(myName);
}

Anything written in the curly braces { } will only be accessible inside this block.

2. Single Thread

JavaScript is a single-threaded language because it runs code on a single thread. In other words, it executes a single code at a time and will not move to the next code unless it finishes executing the first code. It follows an order. It's synchronous, but at times it can be harmful. For example, if a function takes a while to execute or has to wait on something, it freezes everything up in the meanwhile.

3. Call Stack

The Call Stack is that mechanism that helps to keep track of the function which is to be executed currently and also the function which is called from within. When a function is called, it will load into the call stack. However, when the work of the function is completed, it will be removed from the call stack. It follows the LIFO rule (Last In First Out). 

function myName() {
    console.log("Harsh");
}

function myAge() {
    myName();
    console.log(24);
}

myAge();

Output:

Harsh
24

Step 1: The global execution context will be pushed first in the stack.

image.png

Step 2: myAge() function will be called next and the execution context of myAge() will be pushed into the stack.

image.png

Step 3: The execution of myAge() function will start and during its execution, myName() function will be called inside myAge() function which causes the execution context of myName() to get pushed in the call stack.

image.png

Step 4: After the program ends, the call stack will be empty.

4. Hoisting

Javascript Hoisting is said to be the process by which the interpreter appears to move the declaration of functions, variables, or classes all the way to the top of their scope. The main function of hoisting id is that it allows functions to be used safely in code before they are declared. Since variables and class declarations are hoisted as well, they too can be referenced before the declaration. However, doing so is not recommended generally as it may lead to some unexpected errors.

  • Function Hoisting

Without Hoisting: 

function myName() {
    console.log("Harsh");
}

myName();

With Hoisting: 

myName();

function myName() {
    console.log("Harsh");
}

  • Variable Hoisting

    var Hoisting The default initialization of the var is undefined. 

console.log(myName);  // Returns 'undefined' from hoisted var declaration (not Harsh)
var myName;  // Declaration
myName = "Harsh";  // Initialization
console.log(myName);  // Returns Harsh after the line with initialization is executed.

let and const hoisting Variables declared with let and const are also hoisted but, unlike var, are not initialized with a default value. An exception will be thrown if a variable declared with let or const is read before it is initialized.

  • Class Hoisting

    Classes defined using a class declaration are hoisted, which means that JavaScript has a reference to the class. However the class is not initialized by default, so any code that uses it before the line in which it is initialized is executed will throw a ReferenceError.
iwritecode