In this article we are going to discuss some important topics asked in JavaScript interviews.

Scope

What exactly is scope?

Scope is the area in which the item is visible or accessible to other code. Scope determines accessibility of Variables, Objects and Functions from different parts of code.

Types of Scopes in JavaScript

There are 3 types of scopes in JavaScript,

Global Scope
Function Scope
Block Scope

Global Scope

A variable is said to be in global scope when it is accessible from any part of the code.A variable that is declared outside any function will have global scope.

Lets understand Global Scope with an example :

let country = "India";
console.log(country);  // India

function globalScopeDemo () {
    console.log(country);
}
globalScopeDemo();  // India

Variable declared with var , let or const will have same behavior when declared in global scope.

Function Scope

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

Lets understand function scope with the help of an example :

function functionScopeDemo () {
    let country = "India";
    console.log("country");
}

functionScopeDemo();  // India

console.log(country);  // ReferenceError: CourseName is not defined

We will get a Reference Error if we try to access the variable outside the function from which it is declared.

Function variable names can be same in different functions because they are created when the function starts and destroyed when the function is fully executed.

Block Scope

Before ES6, JavaScript had only Global Scope and Function Scope But with the introduction of ES6 JavaScript supports Block Scope too.

Variable which are declared inside the { } block cannot be accessed outside the block i.e. the variables have block scope

Lets understand Block scope with the help of an example :

{
var a = 2;
let b = 3;
const c = 4;
}

console.log(a);  //  2
console.log(b);  // ReferenceError 
console.log(c);  // ReferenceError

The above code will print 2 to the console because var cannot be block scoped, but after that it will give reference error for y and z because they are block scoped and cannot be accessed outside the block.

Hoisting

What is Hoisting?

In JavaScript, hoisting allows you to use variables and functions before they are declared.

Lets take a look at the example :

console.log(country);  // undefined
var country = "India";

It might surprise you that this code outputs undefined and not throw any error even though country is assigned after console.log.

This is because the JavaScript interpreter splits the declaration and assignment of functions and variables. This process is called hoisting . It hoists the declaration to the top of the scope before execution.

Hoisting does not work with let and const keywords.

console.log(a);  // ReferenceError: Cannot access 'a' before initialization
console.log(b);  // ReferenceError: Cannot access 'b' before initialization

let a = 3;
const b = 4;

Call Stack

What is JavaScript Call Stack?

The call stack is a feature not just of JavaScript but many other programming languages. When the code is running the call stack enables the JavaScript interpreter (how the files are read) to keep track of where in the code it is and which function is currently running. This becomes necessary if you have a function which calls another function.

const sum = (a, b) => {
  return doubleValue(a) + doubleValue(b);
}

const doubleValue = (value) => (value) * 2;

sum(10, 20);

The code above would be executed like this:

Firstly the sum will be added to the call stack.
Execute all lines of code inside the sum function.
Add the doubleValue function to the call stack list.
Execute all lines of code inside the doubleValue function.
Delete the doubleValue function from our call stack list.
Delete the sum function from the call stack list.

Single-Threaded execution in JavaScript

JavaScript is a single-threaded language. This means it has one call stack and one memory heap. As expected, it executes code in order and must finish executing a piece code before moving onto the next. So if we print from 1to 5 it will execute every line one by one and can’t execute all prints at a single time.

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

// 1
// 2
// 3
// 4
// 5
// Every line is executed One-By-One.

Thanks for reading this article till the end. Hope this article increased your knowledge about Scope, Hoisting, Call Stack and Single threaded execution in JavaScript. Please give your feedback if any.

Dhrumil Bhut