Cheat sheet on JavaScript interview questions

(Call Stack, Hoisting, Scope and Single Thread)

Cheat sheet on JavaScript interview questions

Hi guys, toady in this article we are going to see some of the frequently asked questions in JavaScript.

1. Call Stack

Call stack maintains the order of execution of execution context

call stack.png

When you execute a script, the JavaScript engine creates a global execution context and pushes it on bottom of the call stack.

Whenever a function is called or a new execution context is created and it is pushed inside the call stack.

Now lets understand call stack with example:

var number = 10;
function getName() {
var name = "hello world"
console.log(name);
}
getName();

callstack3.png

2. Hoisting

Hoisting allows us to use functions and variables before they're declared.

Before hoisting I want to talk about execution context. So, in javascript everything happens inside execution context. And the code is executed in two phase-

1st phase is: memory creation phase

2nd phase is: code execution phase

So in memory creation phase javascript scans the whole code and allocates memory to variables and functions.

var and functions are stored inside global scope

let and const are stored inside different scope

Now lets continue with hoisting...

Remember 2 golden rules in hoisting:

  • variable declarations are scanned and made undefined
  • function declaration are scanned and made available

Variable hoisting with var

Variable declared with var, it initializes its value to undefined because var is stored inside global scope

Hence we can say that values defined with var are originally in an undefined state.

console.log(myName);               
var myName = "javascript";
output: 
undefined

when we tried to console.log() the variable before defining it gives us the output undefined because in JS even before the code starts executing a memory is allocated to all variables and functions, hence JS has allocated a memory of undefined to myName

var.png

Variable hoisting with let and const

Variables declared with let and const are hoisted but not initialized. Accessing a let or const variable before it's declared will result in a ReferenceError because let and const are originally is in an uninitialized state.

console.log(myName);
let myName = "javascript"
output:
Uncaught ReferenceError: Cannot access 'myName' before initialization

when we tried to console.log() the variable before declaring it gives us the output of Reference error because let and const are stored inside different scope other than global scope

2022-09-11 02_59_31-Window.png

Function hoisting in JavaScript

Function hoisting allows us to call a function before it is declared.

getName();

function getName() {
  console.log("Hello Javascript");
}
output:
Hello Javascript

In case of function when javascript allocates memory to function it literally stores the whole function inside the global scope and that's why we are able to call function before function declaration.

2022-09-11 04_29_04-Window.png

3. Scope

JavaScript has 3 types of scope:

  • Global scope
  • Function/Local scope
  • Block scope

i. Global scope

A variable declared at the top of a program or outside of a function is considered as a global scope.

Global variables can be accessed from anywhere in a JavaScript program.

Let's see an example of a global scope:

let movies = ["ironman", "superman", "spiderman"];

console.log(movies);

function movieName() {
  console.log(movies);
}
movieName();
output:
Array(3) [ "ironman", "superman", "spiderman" ]
Array(3) [ "ironman", "superman", "spiderman" ]

From the above example we can conclude that variable declared in global scope can be accessed globally and it can also be accessed inside a function scope.

ii. Function scope

I will explain function scope with example:

// let
function myFunc() {
  let myName = "Nikhil";
  console.log(myName);      // Nikhil
}
myFunc();
console.log(myName);    //  ReferenceError: myName is not defined

// const
function myFunc() {
  const myName = "Nikhil";  
  console.log(myName);   // Nikhil
}
myFunc();
console.log(myName);    // ReferenceError: myName is not defined

// var
function myFunc() {
  var myName = "Nikhil";   
  console.log(myName);    // Nikhil
}
myFunc();
console.log(myName);  // ReferenceError: myName is not defined

From the above example we can conclude that-

  • In variable function scope there is no difference between let const and var.

  • Function scope says that, whatever is defined in a function it cannot be accessed outside that function

(You can see in above example where I tried to console.log(myName) outside function and i got ReferenceError)

Remember one thing in case of var, that var is a function scoped it means var has scope only and only when it is declared inside function otherwise var does not have any scope, it can be accessed everywhere.

iii. Block scope --> { }

I will explain block scope with example:

// let
if (2 > 1 && 1 < 3) {
  let result = true;
  console.log(result);  // true
}
console.log(result);  // ReferenceError: result is not defined

// const
if (2 > 1 && 1 < 3) {
  let result = true;  
  console.log(result);  // true
}
console.log(result);  // ReferenceError: result is not defined

// var
if (2 > 1 && 1 < 3) {
  var result = true;
    console.log(result);  //true
}
console.log(result);  //true

From the above example we can conclude that-

  • let and const are not accessible outside their scope, these { } are block of code. Hence, we can say that let and const are block scoped.

  • But in case of var I can access the value even outside the block { }. Why? Remember I told you above that var has scope only and only when it is declared inside function otherwise var does not have any scope.

Now lets talk about lexical scope

When a function has access to variables of its parents function, it is called lexical scope.

function sum(x) {
  return function (y) {
    return x + y;
  };
}
console.log(sum(4)(6));   // 10

lexical scope.png

3. JavaScript is a synchronous, single threaded language

Single threaded means it has only one call stack that is used to execute the program. Whatever is on the top of call stack is run first.

Synchronous means in sequence, i.e. every statement of code gets executed one by one. So, basically the system has to wait for the earlier statement to get executed.

syn.png