5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 1/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

Top 30 JavaScript Interview

Questions and Answers for 2024
Ravi Sharma · Follow
28 min read · Jan 1, 2024

1.2K 17

Top 30 JavaScript Interview Questions and Answers for 2024

Prepare for your next JavaScript interview with confidence!

Whether you’re a seasoned developer or just starting your career in tech, this
essential resource for 2024 will help you brush up on core concepts, from basic
language features to advanced topics.

In this article, I’ve compiled over 30 of the most crucial JavaScript interview
questions along with detailed answers and code examples.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 2/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

Dive into this invaluable collection to ace your JavaScript interviews and stay
ahead in today’s competitive tech industry”

Level-1: Basic

1. Is Javascript single-threaded?

2. Explain the main component of the JavaScript Engine and how it works.

3. Explain the event loop in JavaScript and how it helps in asynchronous

programming.

4. Difference between var, let, and const ?

5. Different data types in Javascript?

6. What is callback function and callback hell ?

7. What is Promise and Promise chaining?

8. What is async/await ?

9.What is the difference between == and === operators ?

10. Different ways to create an Object in Javascript ?

11. What is rest and spread operator?

12. What is a higher-order function?

Level-2 : Intermediate

13. What is Closure? What are the use cases of Closures?

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 3/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

14. Explain the concept of hoisting in JavaScript.

15. What is a Temporal dead zone?

16. What is a prototype chain? and Object.create() method?

17. What is the difference between Call, Apply, and Bind methods?

18. What are lambda or arrow functions?

19. What is the currying function?

20. What are the features of ES6?

Level-3: Expert

21. What is Execution context, execution stack, variable object, scope chain?

22. What is the priority of execution of callback, promise, setTimeout,

process.nextTick()?

23. What is the Factory function and generator function?

24. Different ways to clone (Shallow and deep copy of object) an object?

25. How to make an object immutable? (seal and freeze methods)?

26. What is Event and event flow, event bubbling and event capturing?

27. What is Event delegation?

28. What are server-sent events?

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 4/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

29. What is a web worker or service worker in javascript?

30. How to compare 2 JSON objects in javascript?

=============================================

1. Is Javascript single-threaded?

Yes, JavaScript is a single-threaded language. This means that it has only

one call stack and one memory heap. Only one set of instructions is
executed at a time.

Also, Javascript is Synchronous and blocking in nature. meaning that

code is executed line by line and one task must be completed before the next
one begins

However, JavaScript also has asynchronous capabilities, which allow certain

operations to be executed independently of the main execution thread. This is
commonly achieved through mechanisms like callbacks, promises, async/await,
and event listeners. These asynchronous features enable JavaScript to handle
tasks such as fetching data, handling user input, and performing I/O operations
without blocking the main thread, making it suitable for building responsive
and interactive web applications.

2. Explain the main component of the JavaScript Engine and how it

works.

Every browser has a Javascript engine that executes the javascript code and
converts it into machine code.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 5/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

When JavaScript code is executed, the parser first reads the code and produces
an AST, and stores it in memory. The interpreter then processes this AST and
generates bytecode or machine code, which is executed by the computer.

The profiler is a component of a JavaScript engine that monitors the execution

of the code.

Bytecode is used by optimizing the compiler along with profiling data.

”Optimizing compiler” or Just-in-time (JIT) compiler makes certain
assumptions based on profiling data and produces highly optimized machine
code.

Sometimes there is a case where the ‘optimization’ assumption is incorrect and

then it goes back to the previous version via the “Deoptimize” phase (where it
actually becomes the overhead to us)

JS Engine usually optimizes “hot functions” and uses inline caching techniques
to optimize the code.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 6/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

During this process, the call stack keeps track of the currently executing
functions, and the memory heap is used for memory allocation.

Finally, the garbage collector comes into play to manage memory by reclaiming
memory from unused objects.

Google Chrome 𝗩𝟴 Engine:

1. Interpreter is called “Ignition”.

2. Optimizing compiler is called “TurboFan”.

3. Apart from Parser, there is a “pre-parser” that checks for syntax and tokens

4. “Sparkplug” is introduced which is present between “Ignition” &

“TurboFan” which is also called Fast Compiler.

3. Explain the Event loop in JavaScript.

The Event loop is a core component of the JavaScript runtime environment. It

is responsible for scheduling and executing asynchronous tasks. The

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 7/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

event loop works by continuously monitoring two queues: the call stack and the
event queue.

The call stack is a stack(LIFO) data structure that stores the

functions that are currently being executed (stores the execution context
created during the code execution).

Web APIs is the place where the async operations (setTimeout, fetch requests,
promises) with their callbacks are waiting to complete. It borrows the thread
from the thread pool to complete the task in the background without
blocking the main thread.

The job queue (or microtasks) is a FIFO (First In, First Out) structure
that holds the callbacks of async/await, promises,
process.nextTick() that are ready to be executed. For example, the resolve or
reject callbacks of a fulfilled promise are enqueued in the job queue.

The task queue (or macrostasks) is a FIFO (First In, First Out)
structure that holds the callbacks of async operations (timer like
setInterval, setTimeout) that are ready to be executed. For example, the
callback of a timed-out setTimeout() — ready to be executed — is enqueued in
the task queue.

The Event loop permanently monitors whether the call stack is empty. If
the call stack is empty, the event loop looks into the job queue or task queue
and dequeues any callback ready to be executed into the call stack.

4. Difference between var, let, and const?

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 8/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

In a browser the window object is the window of the browser, the top
structure in the HTML tree. Variables declared with var globally are
attached to the window object. Type var dog = ‘bowser’ in the browser’s
console and then type window.dog. The value ‘bowser’ appears! This makes
controlling the scope of the variable even more difficult. By contrast, let and
const are not attached to the window object.

5. Different data types in Javascript?

JavaScript is a dynamic and loosely typed, or duck-typed language. It

means that we do not need to specify the type of variable because the JavaScript
engine dynamically determines the data type of a variable based on its values.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 9/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

Primitive data types in JavaScript are the most basic data types that represent
single values. They are immutable (cannot be changed) and directly
hold a specific value.

In JavaScript, a Symbol is a primitive data type introduced in ECMAScript

6 (ES6) that represents a unique and immutable value. It is often used
as an identifier for object properties to avoid name collisions

const mySymbol = Symbol('key');

const obj = {
[mySymbol]: 'value'
};

When a Symbol is used as a property key, it doesn’t clash with other property
keys, including string keys.

6. What is callback function and callback hell ?

In JavaScript, callbacks are commonly used to handle asynchronous operations.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 10/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

Callback function is a function that is passed as an argument to another

function and is intended to be executed after the completion of a specific
task or at a given time.

function fetchData(url, callback) {

// Simulate fetching data from a server
setTimeout(() => {
const data = 'Some data from the server';
callback(data);
}, 1000);
}

function processData(data) {
console.log('Processing data:', data);
}

fetchData('https://example.com/data', processData);

In this example, the fetchData function takes a URL and a callback function
as arguments. After fetching the data from the server (simulated using
setTimeout), it calls the callback function and passes the retrieved data to it.

Callback Hell, also known as “Pyramid of Doom” is a term used in

JavaScript programming to describe a situation where multiple nested
callbacks are used within asynchronous functions.

“It occurs when asynchronous operations depend on the results of

previous asynchronous operations, resulting in deeply nested and
often hard-to-read code.”

Callback Hell is an anti-pattern with multiple nested callbacks which makes

code hard to read and debug when dealing with asynchronous logic.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 11/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

fs.readFile('file1.txt', 'utf8', function (err, data) {

if (err) {
console.error(err);
} else {
fs.readFile('file2.txt', 'utf8', function (err, data) {
if (err) {
console.error(err);
} else {
fs.readFile('file3.txt', 'utf8', function (err, data) {
if (err) {
console.error(err);
} else {
// Continue with more nested callbacks...
}
});
}
});
}
});

In this example, we’re reading three files sequentially using

the fs.readFile function, and each file reading operation is asynchronous. As a
result, we have to nest the callbacks inside one another, creating a pyramid
structure of callbacks.

To avoid Callback Hell, modern JavaScript provides alternatives like

Promises and async/await. Here’s the same code using Promises:

const readFile = (file) => {

return new Promise((resolve, reject) => {
fs.readFile(file, 'utf8', (err, data) => {
if (err) {
reject(err);
} else {
resolve(data);
}
});
});
};

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 12/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

readFile('file1.txt')
.then((data1) => {
return readFile('file2.txt');
})
.then((data2) => {
return readFile('file3.txt');
})
.then((data3) => {
// Continue with more promise-based code...
})
.catch((err) => {
console.error(err);
});

7. What is Promise and Promise chaining?

Promise: A Promise is an object in JavaScript used for asynchronous

computations. It represents the result of an asynchronous operation,
the result may be resolved or rejected.

Promises have three states:

1. Pending: The initial state. This is the state in which the Promise’s eventual
value is not yet available.

2. Fulfilled: The state in which the Promise has been resolved successfully,
and the eventual value is now available.

3. Rejected: The state in which the Promise has encountered an error or has
been rejected, and the eventual value cannot be provided.

Promise constructor has two parameters (resolve, reject) which are

functions. If the async task has been completed without errors then call the
resolve function with message or fetched data to resolve the promise.

If an error occurred then call the reject function and pass the error to it.

we can access the result of promise using .then() handler.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 13/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

we can catch the error in the .catch() handler.

// Creating a Promise
const fetchData = new Promise((resolve, reject) => {
// Simulate fetching data from a server
setTimeout(() => {
const data = 'Some data from the server';
// Resolve the Promise with the retrieved data
resolve(data);
// Reject the Promise with an error
// reject(new Error('Failed to fetch data'));
}, 1000);
});

// Consuming the Promise

fetchData
.then((data) => {
console.log('Data fetched:', data);
})
.catch((error) => {
console.error('Error fetching data:', error);
});

Promise chaining: The process of executing a sequence of

asynchronous tasks one after another using promises is known as
Promise chaining.

It involves chaining multiple .then() methods to a Promise to perform a

series of tasks in a specific order.

new Promise(function (resolve, reject) {

setTimeout(() => resolve(1), 1000);
})
.then(function (result) {
console.log(result); // 1
return result * 2;
})
.then(function (result) {
console.log(result); // 2
return result * 3;
https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 14/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium
})
.then(function (result) {
console.log(result); // 6
return result * 4;
});

8. What is async/await ?
Async/await is a modern approach to handling asynchronous code in
JavaScript. It provides a more concise and readable way to work with Promises
and async operations, effectively avoiding the “Callback Hell” and improving the
overall structure of asynchronous code.

In JavaScript, the async keyword is used to define an asynchronous

function, which returns a Promise.

Within an async function, the await keyword is used to pause the

execution of the function until a Promise is resolved, effectively
allowing for synchronous-looking code while working with asynchronous
operations.

async function fetchData() {

try {
const data = await fetch('https://example.com/data');
const jsonData = await data.json();
return jsonData;
} catch (error) {
throw error;
}
}

// Using the async function

fetchData()
.then((jsonData) => {
// Handle the retrieved data
})
.catch((error) => {

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 15/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium
// Handle errors
});

In this example, the fetchData function is defined as an async function, and it

uses the await keyword to pause the execution and wait for the fetch and json
operations, effectively working with Promises in a way that resembles
synchronous code.

9. What is the difference between == and === operators ?

== (Loose Equality Operator): This operator performs type coercion,

which means it converts the operands to the same type before making the
comparison. It checks if the values are equal without considering their data
types. For example, 1 == '1' will return true because JavaScript converts the
string '1' to a number before comparison.

=== (Strict Equality Operator): This operator performs a strict

comparison without type coercion. It checks if both the values and their data
types are equal. For example, 1 === '1' will return false because the data
types are different (number and string).

In summary, == checks for equality after type coercion, whereas === checks for
strict equality, considering both the values and their data types.

Execution of == will be fast as compared to the === statement.

Some of the example that covers the above cases:

0 == false // true
0 === false // false
1 == "1" // true

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 16/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium
1 === "1" // false
null == undefined // true
null === undefined // false
'0' == false // true
'0' === false // false
[]==[] or []===[] //false, refer different objects in memory
{}=={} or {}==={} //false, refer different objects in memory

10. Different ways to create an Object in Javascript ?

In JavaScript, there are several ways to create objects. Some common methods
for object creation include:

a)Object Literals: The most straightforward way to create an object is by

using object literals, which define an object’s properties and methods in a
comma-separated list enclosed in curly braces.

let person = {
firstName: 'John',
lastName: 'Doe',
greet: function() {
return 'Hello, ' + this.firstName + ' ' + this.lastName;
}
};

b)Constructor Function: Constructor functions can be used to create

multiple instances of an object with the new keyword. Inside the constructor
function, properties and methods can be assigned to the this keyword.

function Person(firstName, lastName) {

this.firstName = firstName;
this.lastName = lastName;
this.greet = function() {
return 'Hello, ' + this.firstName + ' ' + this.lastName;
};
}
https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 17/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

let person1 = new Person('John', 'Doe');

let person2 = new Person('Jane', 'Smith');

c)Object.create(): The Object.create() method allows you to create a new

object with a specified prototype object. This method provides more control
over the prototype of the newly created object.

let personProto = {
greet: function() {
return 'Hello, ' + this.firstName + ' ' + this.lastName;
}
};

let person = Object.create(personProto);

person.firstName = 'John';
person.lastName = 'Doe';

d)Class Syntax (ES6): With the introduction of ES6, JavaScript supports

class syntax for defining objects using the class keyword. This provides a more
familiar and structured way to create objects and define their properties and
methods.

class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
greet() {
return 'Hello, ' + this.firstName + ' ' + this.lastName;
}
}

let person = new Person('John', 'Doe');

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 18/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

e)Factory Functions: Factory functions are functions that return an object.

This approach allows you to encapsulate the object creation process and easily
create multiple instances with custom properties.

function createPerson(firstName, lastName) {

return {
firstName: firstName,
lastName: lastName,
greet: function() {
return 'Hello, ' + this.firstName + ' ' + this.lastName;
}
};
}

let person1 = createPerson('John', 'Doe');

let person2 = createPerson('Jane', 'Smith');

f)Object.setPrototypeOf(): The Object.setPrototypeOf() method can be used

to set the prototype of a specified object. This offers an alternative approach to
setting the prototype of an object after its creation.

let personProto = {
greet: function() {
return 'Hello, ' + this.firstName + ' ' + this.lastName;
}
};

let person = {};

person.firstName = 'John';
person.lastName = 'Doe';
Object.setPrototypeOf(person, personProto);

g)Object.assign(): The Object.assign() method can be used to create a new

object by copying the values of all enumerable own properties from one or more

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 19/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

source objects to a target object. This is particularly useful for merging objects
or creating a shallow copy.

let target = { a: 1, b: 2 };
let source = { b: 3, c: 4 };
let mergedObject = Object.assign({}, target, source);

h)Prototype Inheritance: JavaScript uses prototypal inheritance, allowing

objects to inherit properties and methods from other objects. You can create
objects by leveraging prototypal inheritance and using the prototype property of
constructor functions or classes to define shared behavior.

function Animal(name) {
this.name = name;
}

Animal.prototype.greet = function() {
return 'Hello, I am ' + this.name;
};

function Dog(name, breed) {

Animal.call(this, name);
this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

let myDog = new Dog('Max', 'Poodle');

i)Singleton Pattern: The singleton pattern is used to restrict an object to a

single instance. It can be implemented in JavaScript using a combination of
closures and immediately invoked function expressions (IIFE). This ensures
that only one instance of the object is created.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 20/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

let singleton = (() => {

let instance;

function createInstance() {
return {
// properties and methods
};
}

return {
getInstance: () => {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();

11. What is rest and spread operator?

The rest operator, represented by three dots ( ... ), is used in function

parameters to collect a variable number of arguments into an array. It
allows you to pass an arbitrary number of arguments to a function without
explicitly defining them as named parameters.

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Outputs 10

The spread operator, also denoted by three dots ( ... ), is used to spread
the elements of an array or object into another array or object. It
allows you to easily clone arrays, concatenate arrays, and merge objects.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 21/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

const array1 = [1, 2, 3];

const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];
// mergedArray is [1, 2, 3, 4, 5, 6]

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObject = { ...obj1, ...obj2 };
// mergedObject is { a: 1, b: 3, c: 4 }

12. What is a higher-order function?

Higher-order function in JavaScript is a function that either takes one or
more functions as arguments or returns a function as its result. In
other words, it operates on functions, either by taking them as arguments,
returning them, or both.

function operationOnArray(arr, operation) {

let result = [];
for (let element of arr) {
result.push(operation(element));
}
return result;
}

function double(x) {
return x * 2;
}

let numbers = [1, 2, 3, 4];

let doubledNumbers = operationOnArray(numbers, double);
console.log(doubledNumbers); // Output: [2, 4, 6, 8]

They enable powerful techniques such as function composition, currying, and

callback-based asynchronous operations. Understanding higher-order functions
is essential for writing expressive and functional-style JavaScript code.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 22/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

An unary function (i.e. monadic) is a function that accepts exactly

one argument. It stands for a single argument accepted by a function.

13. What is Closure? What are the use cases of Closures?

Closure is a feature that allows the function to capture the environment (or to
retain access to variables from the scope ) where it is defined, even after
that scope has closed.

We can say the closure is a combination of a function and lexical

environment where that function is defined.

In other words, a closure gives a function access to its own scope, the scope of
its outer function, and the global scope, allowing it to “remember” and continue
to access variables and parameters from these scopes.

function outerFunction() {
let outerVariable = 'I am from the outer function';

return innerFunction() {
console.log(outerVariable); // Accessing outerVariable from the outer function'
}

let myFunction = outerFunction();

myFunction(); // Output: I am from the outer function

Closure is created every time when a function is created at the time

of function creation and when you define a function inside another
function.

Execution context is an environment where JavaScript code is executed. For

each function call a separate execution context is created and pushed into the

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 23/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

execution stack. Once function execution completed it is popped off from stack.

Every execution context has a space in memory where its variables and
function are stored, and once the function popped off from the execution stack
a JavaScript Garbage collector clear all of these things.

In JavaScript, anything is garbage-collected only when there are no

references to it.

In the above example, the anonymous execution context still has a reference to
the variables to the memory space of its outer environment. Even though the
outerFunction() is finished. (It can access the outerVariable variable and use
it inside console.log(outerVariable)).

Closures have several important use cases in JavaScript:

1. Data Privacy and Encapsulation: Closures can be used to create private

data and encapsulate functionality within a limited scope. By defining
functions within another function, the inner functions have access to the
outer function’s variables, but these variables are inaccessible from outside
the outer function. This allows for the creation of private data and methods
that are not directly accessible from the outside, thereby enhancing data
privacy and encapsulation.

2. Maintaining State: Closures are often used to maintain state in

asynchronous operations and event handling. For example, when handling
asynchronous tasks, closures can capture and retain the state of variables
across multiple asynchronous operations, ensuring that the correct variables
are accessed when the asynchronous tasks complete.

3. Currying and Partial Application: Closures facilitate functional

programming techniques such as currying and partial application. By using
closures to capture and remember specific parameters and return a new

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 24/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

function that uses these captured parameters, currying and partial

application can be achieved. This allows for the creation of specialized
functions with pre-set arguments, providing flexibility and reusability.

4. Module Pattern: Closures are essential in implementing the module

pattern in JavaScript. By using closures to create private variables and
expose only the necessary public methods, developers can create modular
and organized code, preventing unwanted access and modification of
internal module data.

5. Callback Functions: Closures are often employed when working with

callback functions. A closure can be used to capture and maintain the state
of variables within the context of an asynchronous operation, ensuring that
the correct variables are accessible when the callback function is invoked.

14. Explain the concept of hoisting in JavaScript.

Hoisting in JavaScript is the default behavior where variable and

function declarations are moved to the top of their containing
scope during the compilation phase, before the actual code execution.
This means that you can use a variable or call a function before it’s declared in
your code.

When you declare a variable using var , the declaration is hoisted to the top of
its containing function or block and initialized with the default value of
“undefined”.

console.log(x); // Outputs: undefined

var x = 5;

Variables declared with let and const are hoisted as well but have a "temporal
dead zone" where they cannot be accessed before their declaration.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 25/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

console.log(x); // Throws an error (ReferenceError)

let x = 5;

Function declarations are also hoisted to the top of their containing scope. You
can call a function before it’s declared in your code.

sayHello(); // Outputs: "Hello, world!"

function sayHello() {
console.log("Hello, world!");
}

Hoisting is not happening with an arrow function, function

expression, or variable initialization.

15. What is a Temporal dead zone?

The Temporal Dead Zone (TDZ) is a concept in JavaScript related to variable

declarations using let and const .

When you declare a variable with let or const , it is hoisted to the top of its
containing scope, However, unlike var , variables declared
with let and const remain uninitialized in the TDZ.

Any attempt to access or use the variable before its actual declaration within the
scope will result in a ReferenceError . This is to prevent the use of variables
before they have been properly defined.

Understanding the Temporal Dead Zone is important because it helps prevent

bugs related to variable usage before initialization. It also promotes best

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 26/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

practices in JavaScript coding by encouraging proper variable declarations

before use.

16. What is a prototype chain? and Object.create() method?

In JavaScript, every function and object has a property named

prototype by default.

Every object in JavaScript has a prototype. A prototype is another object from

which the current object inherits properties and methods. You can think of the
prototype as a template or a parent object.

The prototype chain is a mechanism that allows objects to inherit

properties and methods from other objects

When you access a property or method on an object, JavaScript first looks for it
on the object itself. If it doesn’t find it, it looks up the prototype chain until it
finds the property or method. This process continues until it reaches
the Object.prototype at the top of the chain.

17. What is the difference between Call, Apply, and Bind methods?
Call: The call() method invokes a function with a specified this value
and individual arguments passed as comma-separated values

const person1 = { name: 'John' };

const person2 = { name: 'Jane' };

function greet(greeting) {
console.log(greeting + ' ' + this.name);
}

greet.call(person1, 'Hello'); // Output: Hello John

greet.call(person2, 'Hi'); // Output: Hi Jane

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 27/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

With call() method an object can use a method belonging to another object.

const o1 = {
name: 'ravi',
getName: function(){
console.log(`Hello, ${this.name}`)
}
}

const o2 = {
name: 'JavaScript Centric'
}

o1.getName.call(o2) // Hello, JavaScript Centric

Apply: Invokes the function with a given this value but it accepts
arguments as an array. It is useful when the number of arguments to be
passed is not known in advance or when the arguments are already in an array.

const numbers = [1, 2, 3, 4, 5];

const max = Math.max.apply(null, numbers);

console.log(max); // Output: 5

bind: instead of invoking it returns a new function and allows you to pass any
number of arguments. bind() method takes an object as first argument and
create a new function.

const module = {
x: 42,
getX: function() {
return this.x;
}
};

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 28/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

const boundGetX = unboundGetX.bind(module);

console.log(boundGetX()); // Output: 42

18. What are lambda or arrow functions?

There are two types of functions in JavaScript

1. Regular Functions

2. Arrow Functions (Introduced in ES6)

Regular Function: We can write the regular function in two ways,

i.e. Function declaration, and Function expression.

Arrow or Fat Arrow Function: Lambda functions, also known as

arrow functions, are a feature introduced in JavaScript (ES6) that is a more
concise syntax for writing function expressions. They have a shorter syntax

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 29/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

compared to traditional function expressions and are particularly useful for

creating anonymous functions and working with functional programming
concepts.

There is no declaration approach here, we can write by using Function

expressions only.

There are certain differences between Arrow and Regular function, i.e

1. Syntax

2. No arguments (arguments are array-like objects)

3. No prototype object for the Arrow function

4. Cannot be invoked with a new keyword (Not a constructor function)

5. No own this (call, apply & bind won’t work as expected)

6. It cannot be used as a Generator function

7. Duplicate-named parameters are not allowed

19. What is the currying function?

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 30/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

Currying is a technique in functional programming that transforms a

function with multiple arguments into a series of functions, each
taking a single argument. These curried functions can be composed
together to build more complex functions.

In JavaScript, you can implement currying using closures and

returning functions.

// Regular function taking two arguments

function add(x, y) {
return x + y;
}

// Curried version of the function

function curryAdd(x) {
return function(y) {
return x + y;
};
}
const add5 = curryAdd(5); // Partial application, creates a new
function
console.log(add5(3)); // Output: 8

Currying is beneficial in functional programming and can make code more

modular and reusable. It’s particularly useful in scenarios where you want to
create functions with a varying number of arguments or build pipelines of data
transformations.

20. What are the features of ES6?

ES6, also known as ECMAScript 2015, introduced several new features and
enhancements to JavaScript, significantly expanding the language’s capabilities.
Some key features of ES6 include:

1. Arrow Functions
https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 31/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

2. Block-Scoped Variables

3. Classes

4. Modules

5. Template Literals: Template literals allow for embedding expressions and

multi-line strings using backticks, providing a more convenient way to create
complex strings in JavaScript.

6. Default Parameters

7. Rest and Spread Operators

8. Destructuring Assignment

9. Promises

10. Map, Set, WeakMap, WeakSet: ES6 introduced new built-in data
structures, such as Map and Set, for more efficient and specialized handling
of collections and key-value pairs.

11. Iterators and Generators

12. Enhanced Object Literals

21. What is Execution context, execution stack, variable object, and

scope chain?

Execution Context: the execution context refers to the environment in which

a piece of code is executed. It consists of the scope, variable object, and the value
of the “this” keyword.

Whenever a function is executed, an execution context is created and it contains

all the variables or properties of that function.

There are three types of execution context in JavaScript:

> Global Execution Context

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 32/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

> Functional Execution Context

> Eval Function Execution Context

Execution Stack: It is also known as the “call stack,” a LIFO (Last in, First
out) data structure that stores all the execution context of the function calls that
are in progress. When a function is called, a new execution context is created
and pushed onto the stack. When the function completes, its context is popped
off the stack.

The engine executes the function whose execution context is at the top of the
stack. When this function completes, its execution stack is popped off from the
stack, and the control reaches the context below it in the current stack.

The execution context is created during the creation phase. The following things
happen during the creation phase:

1. LexicalEnvironment component is created.

2. VariableEnvironment component is created.

Variable Object: It is a part of the execution context that contains all the
variables, function declarations, and arguments defined in that context.

Scope Chain: The scope chain is a mechanism for resolving the value of a
variable in JavaScript. When a variable is referenced, the JavaScript engine
looks for the variable first in the current execution context’s variable object. If
it’s not found there, it continues to the next outer execution context, following
the scope chain, until it finds the variable or reaches the global execution
context.

22. What is the priority of execution of callback, promise, setTimeout,

process.nextTick()?

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 33/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

The priority of execution can be understood based on the event loop and the
order in which different asynchronous operations are handled:

1. process.nextTick(): Callbacks scheduled using process.nextTick() have

the highest priority. When you use process.nextTick() , the callback is
executed immediately after the current operation completes but before the
event loop moves on to the next phase. This makes it a way to ensure that a
function is executed at the earliest possible moment in the event loop.

2. Promise: Promises are typically executed after process.nextTick() .

However, they are prioritized over callbacks scheduled with setTimeout() .

3. setTimeout(): Callbacks scheduled with setTimeout() are placed in the

timer phase of the event loop. They will be executed after the current
operation, promises, and any previously scheduled setTimeout() callbacks
have been completed.

4. Callback: Regular callbacks (not scheduled using process.nextTick() ) have

the lowest priority. They are executed after the event loop
processes process.nextTick() , promises, and setTimeout() callbacks.

23. What is the Factory function and generator function?

A factory function in JavaScript is a function that returns an object. It is a

pattern used to create objects in a straightforward and organized
manner. Instead of using constructor functions and the new
keyword to create new objects, a factory function encapsulates the
object creation process and returns a new object.

function createPerson(name, age) {

return {
name: name,
age: age,
greet: function() {
return `Hello, my name is ${this.name} and I am ${this.age} years old.`;

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 34/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium
}
};
}

const person1 = createPerson('Alice', 25);

const person2 = createPerson('Bob', 30);

console.log(person1.greet()); // Output: Hello, my name is Alice and I am 25 years

console.log(person2.greet()); // Output: Hello, my name is Bob and I am 30 years ol

A Generator function in JavaScript is a special type of function that can be

paused and resumed during its execution.

A generator function produces a sequence of results instead of a single value.

When a generator function called it returns a generator object that can be

used to control the execution of the function by calling the next() method.

The function’s code can be paused within the body using the yield keyword,
and it can later be resumed from the exact point where it was paused.

function* numberGenerator() {
let i = 0;
while (true) {
yield i++;
}
}

const gen = numberGenerator();

console.log(gen.next().value); // Output: 0
console.log(gen.next().value); // Output: 1
console.log(gen.next().value); // Output: 2

This provides a powerful mechanism for creating iterators and handling

asynchronous code.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 35/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

24. Different ways to clone (Shallow and deep copy of object) an object?

A shallow copy is a copy of an object whose references are the same as the
original object. This means that if you change the value of a property in the
shallow copy, it will also change the value of the property in the original object.

const user = {
name: "Kingsley",
age: 28,
job: "Web Developer"
}
const clone = user

A deep copy is a copy of an object whose references are not the same as
the original object. This means that if you change the value of a property in the
deep copy, it will not change the value of the property in the original object.

there different ways to create deep copy of an object.

a)JSON.parse and JSON.stringify: useful for nested object also.

const originalObject = { name: "Alice", age: 25 };

const deepCopy = JSON.parse(JSON.stringify(originalObject));

b)structuredClone:

const myDeepCopy = structuredClone(myOriginal);

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 36/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

c)Spread Operator(…): any object with a nested object will not be deep
copied.

const originalObject = { name: "Alice", age: 25 };

const deepCopy = {...originalObject};

deepCopy.name = "ravi"
console.log("originalObject", originalObject.name) // Alice

d)Object.assign(): the Object.assign() method should be used to deep copy

objects that have no nested objects.

const originalObject = { name: "Alice", age: 25 };

const shallowCopy = Object.assign({}, originalObject);

e)Recursion:

function deepCopy(obj) {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
const newObj = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (Object.hasOwnProperty.call(obj, key)) {
newObj[key] = deepCopy(obj[key]);
}
}
return newObj;
}
const originalObject = { name: "Alice", nested: { age: 25 } };
const deepCopy = deepCopy(originalObject);

25. How to make an object immutable? (seal and freeze methods)?

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 37/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

In JavaScript, you can make an object immutable using the Object.seal() and
Object.freeze() methods.

Object.freeze(): (Completely Immutable) this method freezes an object,

making it both sealed and marking all its properties as read-only. After freezing
an object, its properties cannot be modified, added, or removed.

const obj = { name: 'Alice', age: 25 };

Object.freeze(obj);
obj.name = 'Bob'; // Not allowed
obj.address = '123 Street'; // Not allowed
delete obj.age; // Not allowed

Object.seal(): (Partialy Immutable) this method seals an object,

preventing new properties from being added and marking all existing properties
as non-configurable. However, you can still modify the values of existing
properties that are writable.

const obj = { name: 'Alice', age: 25 };

Object.seal(obj);
obj.name = 'Bob'; // Allowed
obj.address = '123 Street'; // Not allowed (no new properties can be added)
delete obj.age; // Not allowed (existing properties cannot be deleted)

26. What is Event and event flow, event bubbling and event capturing?

In JavaScript, Event flow is the order in which an event like a click or a keypress
is received on the web page or handled by the web browser. There are two
phases in event flow: event capturing and event bubbling.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 38/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

When you click an element that is nested in various other elements, before your
click actually reaches its destination or target element, it must trigger the
click event for each of its parent elements first, starting at the top with
the global window object.

<div id="parent">
<button id="child">Click me!</button>
</div>

Now, let’s explain event flow with this example:

1. Event Capturing Phase: When you click the button, the event starts its
journey from the top (the root of the document) and moves down to the
target element. In this case, it travels from the document’s root to
the <div> (parent element), then to the <button> (child element). This is
called the capturing phase.

2. Event Target Phase: The event reaches the target element, which is
the <button> in this case.

3. Event Bubbling Phase: After reaching the target, the event starts
bubbling up. It goes from the <button> back to the <div> and eventually to
the root of the document. This is called the bubbling phase.

Here’s a simple JavaScript code snippet to see this in action:

document.getElementById('parent').addEventListener('click', function() {
console.log('Div clicked (capturing phase)');
}, true); // The 'true' here indicates capturing phase.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 39/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

document.getElementById('child').addEventListener('click', function() {
console.log('Button clicked (target phase)');
});
document.getElementById('parent').addEventListener('click', function()
{
console.log('Div clicked (bubbling phase)');
});

When you click the button, you’ll see these messages in the console in the
following order:

1. “Div clicked (capturing phase)”

2. “Button clicked (target phase)”

3. “Div clicked (bubbling phase)”

27. What is Event delegation?

Event delegation is a JavaScript programming technique that optimizes

event handling for multiple elements.

Instead of attaching an event listener to each individual element, event

delegation involves attaching a single event listener to a common ancestor
element that is higher up in the DOM (Document Object Model) hierarchy.

When an event occurs on one of the descendant elements, it “bubbles up” to the
common ancestor, where the event listener is waiting.

Event delegation is a technique for listening to events where you

delegate a parent element as the listener for all of the events that
happen inside it.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 40/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

var form = document.querySelector("#registration-form");

// Listen for changes to fields inside the form

form.addEventListener(
"input",
function (event) {
// Log the field that was changed
console.log(event.target);
},
false
);

28. What are server-sent events?

Server-sent events (SSE) are a simple and efficient technology for

enabling real-time updates from the server to the client over a single
HTTP connection.

SSE allows the server to push data to the web client (usually a browser) as soon
as new information is available, making it an excellent choice for scenarios
where you need real-time updates without relying on complex protocols or
third-party libraries.

a)SSE provides a unidirectional flow of data from the server to the

client. The server initiates the communication, sending updates to clients.

b)SSE uses a text-based protocol, which means that data sent from the
server to the client is typically in a text format (usually JSON or plain text).

c)SSE handles reconnection automatically.

d)SSE establishes a persistent connection between the client and the server,
allowing the server to send a stream of events to the client. Each event can have
a unique type and data associated with it.

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 41/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

e)The EventSource object is used to receive server-sent event

notifications. For example, you can receive messages from server as below,

if (typeof EventSource !== "undefined") {

var source = new EventSource("sse_generator.js");
source.onmessage = function (event) {
document.getElementById("output").innerHTML += event.data + "<br>";
};
}

f)Below are the list of events (onopen, onmessage,onerror) available for server-
sent events.

29. What is a web worker or service worker in javascript?

Web Workers and Service Workers are two different concepts in JavaScript,

Web Workers are designed for concurrent JavaScript execution in

the background, while Service Workers are used for creating
Progressive Web Apps with offline capabilities and advanced features.
Both are essential tools for enhancing the performance and functionality of web
applications.

Each serves a distinct purpose in web development:

Web Workers:

1. Concurrency: Web Workers are a browser feature that allows you to

run JavaScript code in the background, separate from the main
browser thread. This enables concurrent execution of tasks without
blocking the user interface.

2. Use Cases: Web Workers are commonly used for tasks that are
computationally intensive or time-consuming, such as data processing,

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 42/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium

image manipulation, or complex calculations. By running these tasks in a

separate thread, they don’t impact the responsiveness of the web page.

3. Communication: Web Workers can communicate with the main

thread using a messaging system. They can send and receive messages,
allowing for coordination between the main thread and the worker.

4. Browser Support: Web Workers are supported in most modern browsers.

Service Workers:
1. Offline Capabilities: Service Workers are a more advanced feature used
for creating Progressive Web Apps (PWAs). They act as proxy servers that
run in the background and can intercept and cache network requests. This
enables offline capabilities, such as serving cached content when the user is
offline.

2. Use Cases: Service Workers are primarily used for implementing features
like offline access, push notifications, and background sync. They
enable web apps to function even when there’s no internet connection.

3. Lifecycle: Service Workers have their own lifecycle with events

like install , activate , and fetch . They are typically registered at the
beginning of a web app's life.

4. Browser Support: Service Workers are supported in modern browsers and

are a key technology for creating reliable and engaging web applications.

30. How to compare 2 JSON objects in javascript?

a) One simple way to compare two JSON objects is to use JSON.stringify to

convert them into strings and then compare the strings.

function areEqual(obj1, obj2) {

return JSON.stringify(obj1) === JSON.stringify(obj2);
}

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 43/44
5/28/24, 8:52 PM Top 30 JavaScript Interview Questions and Answers for 2024 | by Ravi Sharma | Medium
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
console.log(areEqual(obj1, obj2)); // Output: true

b) You can use the Ramda library to compare two JSON objects as well. Ramda
provides a function called equals for this purpose.

const R = require('ramda');

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };

console.log(R.equals(obj1, obj2)); // Output: true

c) Another option is to use a library, such as Lodash, that provides a method for
deep comparison of objects.

const _ = require('lodash');

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
console.log(_.isEqual(obj1, obj2)); // Output: true

Hope You Like this article. Big Thank you For Reading.

Follow me on Medium for more guided articles.

Follow me on LinkedIn: https://www.linkedin.com/in/ravics09/

https://javascriptcentric.medium.com/top-30-javascript-interview-questions-and-answers-for-2024-7f1e2d1d0638 44/44