JavaScript Interview Cheat Sheet

·

6 min read

image.png

Are you all worried about how to Crack the JavaScript Interview are you unable to explain scope, call stack and hoisting.

I am here to help you out by explaining the content.

Topic which I cover in this article

  1. Scope
  2. Single Thread
  3. Call Stack
  4. Hoisting

1. Scope

Are you worried about What is scope?.

Scope is the very easy topic in JavaScript the whole code which we write is completely dependent on scope. Lets me explain the scope, Scope is nothing but It tells what objects can accessed within the objects in the JavaScript we can still say like The scope is the current context of execution in which values and expressions are "visible" or can be referenced.

Example: declaring classes, function.. everything.

function exampleFunction() {
  const x = "declared inside function";  // x can only be used in exampleFunction
  console.log("Inside function");
  console.log(x);
}
console.log(x);

Getting in-depth on Scope what are the different types of scope?

We have 3 different type scopes

  1. Global scope: The default scope for all code running in script mode.
  2. Module scope: The scope for code running in module mode.
  3. Function scope: The scope created with a function.

1. Global scope:

It is the scope where all the lower layer and same layer objects can access the values. In other words we can say this a global parent where inner parent, child, sub-child class can have access.

let x=10; // Global assigned value
function ParentscopeFunc(){
  console.log(`Parent function can access x = ${x}`);
  function ChildscopeFunc(){
   console.log(`Child function can access x = ${x}`);
  }
  ChildscopeFunc();
}
ParentscopeFunc();

2. Module Scope

If a variable declared outside any function was a global variable then it can access using modules. In modules, a variable declared outside of any function is hidden and not available to other modules unless it is explicitly exported and imported by the variable accessing scripts.

Let's understand in simple way, I have a 2 rooms a,b I where b key present in a room. In order to access room b I need to go to room a taking room b key(Exporting b Key) and moving to room b and opening using key from room a(Importing a key).

// variables, arrays  their are present in modulea.js
export { example.func(), List, a }

// Need to import modulea.js for accessing the values from modulea
import { example.func(), List, a  } from "./modulea";

3. Function scope

Function scope is as where the values can be access within the function. It can not access the outer values or inner function values. In functional scope the objects can be accessed from top to bottom approach.

4. Block Scope

This is the final Layer of Scope, Their are declarations in block scope they are var, const, let. These are very important while writing code. Even for, if are block scope.

let us see one example

function ParentscopeFunc(){
   {
    let x=10;
   } 
   console.log(`Parent function can access x = ${x}`);   // Reference error 
   function ChildscopeFunc() {
  console.log(`Child function can access x = ${x}`);
  }
  ChildscopeFunc();
}
ParentscopeFunc();

In above example you can see still x is a functional block scope where it stops accessing the values.

Lexical scope

Lexical Scope means relating to scope of objects where it can be accessed during current execution. It is done at the time of loading script in browser or at runtime.

For example in a nested group of functions, the inner functions have access to the variables and other resources of their parent scope. This means that the child's functions are lexically bound to the execution context of their parents. Lexical scope is sometimes also referred to as Static Scope.

function a() {
    var x= 'hi'
    console.log("Inside Function a()-> ", x); // hi
    function b() {
        console.log("Inside Function b() before modification-> ", x); // hi
        x= 'I am in b updated'
        console.log("Inside Function b() after modification-> ", x); // I am in b updated
       { var count = 1; }
        console.log("Count inside b()-> ", count); // 1
    }
    b();
    console.log("Inside Function a() after modification-> ", x); //  I am in b updated
    console.log("Count inside a()-> ", count); // ReferenceError
}

a();

Scope Chaining

It is the process in which, JavaScript engine searches for the value of the variables in the scope of the functions. However, the search is in a lexical manner. First of all the engine looks out in the current scope of the current function. If not found, it finds it in the parent function.

let x=10;
function abc(){
  function add(a) {
      console.log(a+x);  // x is not present it finds in chain where x can be
                                    // x = 16;
  }
  add(6);
}
abc();
let x=10;
function abc(){
  function add(a) {
      let x =5;
      console.log(a+x);  // 11 x is found at here no need to check in parent scope
  }
  add(6);
}
abc();

Global Environment

Every time the JavaScript engine creates an global execution context to execute the objects in javascript. Global Environment is a data structure that holds an identifier-variable mapping. (here identifier refers to the name of variables/functions, and values assigned to it).

Single Thread

Single-threaded means JS can only execute one command at a time.

Synchronous means JS can only move on to the next line only when the execution of the current line has been finished.

var x = 10;
console.log(`First line value of x = ${x}`); // First line value of x = 10

var k = "JavaScript";
console.log(`Second line value k = ${k}`); // Second line value k = JavaScript

image.png

you can see output where it is printing line by line so JavaScript is a single thread language.

Call Stack

Call Stack plays a very important role while writing code in JavaScript when we call a function then it executes the function or else it skips it.

Most of the time, there will be functions or classes that are invoked inside other functions.

To keep track of which one is currently running, a stack is used, where the currently running function execution is at the top of the stack.

Once it finishes executing, it will be popped from the stack, the execution for the next execution context will resume, and so on until the execution stack is empty.

Again it check for other functions based on that it adds and empty stack this is continuous process.

image.png

Now you can see the console output

image.png

Hoisting

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code after loading.

Below is simple example where the var is declared at below still it works, It works because of hoisting.

image.png

But this is the case even you get error declaring a var after after calling a function

hoisting();
var hoisting = function(){
    console.log('hi');
};

image.png

In this case the we get hoisting as not defined because the function expressions are not hoisting.

hosting();  // In Hoisting function

function hoisting() {
    console.log(`In Hoisting function`); 
};

In this case we get output value as In Hoisting function.