JavaScript Interview Cheat Sheet

Hii everyone, In this article am going to point out some of the important and most asked topics in JavaScript

TABLE OF CONTENTS

• Explain Scope in JavaScript.
• Explain Scope Chaining in JavaScript.
• Single threading in JavaScript
• Call Stack in JavaScript
• Hoisting in JavaScript

Lets get to know each one in detail

1. Scope

Scope in JavaScript means the availability of the variable and function. It all depends on where you have decaled that particular variable or functions(exception is declaring variable with the help of var keyword).

We mainly deal with three types of scope in JS

• Global Scope: - When a variable is declared in js file outside of all function then it is accessible all over the document. This is the only space where global level variable can be declared.

// Global scope

var Name = "Ayush Tiwari";

function learnscope(){
  console.log(`${Name} `); // Name is accessible here but declared outside the function which is the global scope
}
learnscope();

• Function or Local Scope: -When a variable is declared inside a function, it is only available within that function and not outside it. This is because the variable is locally scoped to that function.

// Function or Local Scope

function learnscope(){
    var name ='Ayush Tiwari';
    console.log('Name is: ',name);
}

learnscope();                  //inside function learnscope(): it will print the "Ayush Tiwari"
console.log(name);           //it will give error: name  is not defined

• Block Scope: - Block in js is an area defined within the curly braces ('{' '}'). The way to create a block scope is by using the const or let keyword to declare variables.

//Block Scope

function learnscope(){
    if(true){
        var first = 'abc';        //exist in function scope 
        let second = 'def';   //exist in block scope
        const third = 'ghi';   //exist in block scope  

    }
    console.log(first);
    console.log(second);
    console.log(third);
}

learnscope();

//result:
//abc
//error: second is not defined
//error: third is not defined

2. Scope Chaining

Scope can be nested

The scope can be nested, which means you can create functions inside another function, block inside another function, function inside another block, or block inside a block. This is called Scope Chaining.

// Scope Chaining

if (true) {
    const first = "abc";
    console.log(first); // "abc"

    if (true) {
        const second = "def";
        console.log(second); // "def"
        console.log(first); // "abc"

        if (true) {
            console.log(first, second); // "abc def"
        }
    }
}

We can see that we can access the variable from the scope in which they where declared and also we can access from their inner scope.

3. Single threading

JavaScipt is a single-threaded and synchronous programming language. When we say say single-threaded, it simply means that JavaScipt can only perform one operation at a time. It goes through the lines of code on by one. So by definition it will not process to execute the next code(synchronous execution) until the previous code has finished execution.

There is also a problem with this model of working as if there is long operation that is taking place, it could block the whole thread as the next operation has to wait for its turn. This can be solved via writing Asynchronous JavaScript more on this in next article.

4. Call Stack

The JavaScript engine has a call stack. The call stack keeps track of the function that is currently being called and the functions called inside a function. The JavaScript engine uses the call stack to know which function to execute next. It works in a Last-In-First-Out fashion (LIFO). The last function that is added into the call stack is the first one that is run.

Brief working of call stack :- When the program starts running the global execution context is created and pushed into the call stack so at the bottom it is there in the call stack. When the function is executed its execution context is pushed into the call stack and popped when execution is returned and at the end the global execution context is also removed when all the code is finished executing. So in short, the call stack maintains the order of flow of execution.

5. Hoisting

Hoisting in JavaScript is a must known concept for beginners. Well, It is a phenomenon where we can access the functions and variable in JavaScript even-before initializing it. To understand it better, first we have to know a little about execution context.

--Everything inside javascript happens inside an `Execution Context`.--

Whenever the .js script runs it creates an Execution Context, the execution context itself consists of two different Components.

The Two different Components of the execution context are:

Memory/Variable Component :- It consists of variables and values in the form of key:value pair and also functions consist of key:value pair  
Code Execution Components :- It's like a thread in which one line at a time is executed.

• The whole code of js runs in two execution phases:
  • Phase 1: A global execution context is created in the call stack. JavaScript skims the code line by line (single-threaded language) Allocates memory to each variable and function as show above pictorially. Phase 1 ends. Simple! In this phase, Variable are marked with placeholder undefined and functions are as-it-is referenced inside memory component
  • Phase 2: In this phase, JavaScript executed the Code in the Code component of the global Context execution

    Now suppose JavaScript see a function call has been made in phase 2, It created another Execution Context for the Function as same as Global execution context but this time inside a Global Execution Context which is known as Local Execution Context.

This memory creation or allocation phase or parsing of the whole JavaScript code is known as hoisting.