Node.

JS / Javascript Interview Questions

Q1. Nature of JS.

Ans. JavaScript is a versatile programming language that's primarily used for
web development. It allows you to add interactivity to websites, creating
dynamic and engaging user experiences. It's often executed in web
browsers, making it a client-side scripting language.

Q2. Advantages and Disadvantages of JS.

Ans.
Advantages of JavaScript:
1. Versatility: JavaScript is a versatile language that can be used for both
client-side and server-side development.
2. Interactivity: It allows for the creation of dynamic and interactive user
interfaces, enhancing the user experience on websites.
3. Asynchronous Programming: JavaScript supports asynchronous
operations, making it efficient for tasks that don't need to block the
entire program.
4. Extensibility: There are many libraries and frameworks built on
JavaScript, such as React, Angular, and Vue.js, that simplify and
enhance development.
5. Wide Adoption: It's supported by all major browsers, making it a
standard for web development.

Disadvantages of Javascript:
1. Security Concerns: Being executed on the client side exposes it to
security vulnerabilities. Developers need to be cautious to prevent
issues like Cross-Site Scripting (XSS).
2. Browser Dependency: Different browsers may interpret JavaScript
code differently, leading to potential compatibility issues.
3. Client-Side Limitations: As a client-side scripting language,
JavaScript's capabilities are limited by the client's resources and
processing power.
4. Single-threaded: While asynchronous operations help, JavaScript
remains single-threaded, which can lead to performance bottlenecks
for complex tasks.
 5. Learning Curve: For beginners, JavaScript's loose typing and
asynchronous nature might pose a learning curve compared to more
structured languages.

Q3. What is different between var, let and const.

Ans:
Based Var Let Const

Variable Scope Function-scoped Block-scoped: Block-scoped:

: Variables Variables Like let, const is
declared with var declared with let block-scoped.
are are
function-scoped. block-scoped,
This means they meaning they
are only are only
accessible within accessible within
the function the block where
where they are they are defined.
defined.

Declaration Hoisting: No Hoisting: Immutable:

Variables Unlike var, Variables
declared with var variables declared with
are hoisted to declared with let const must be
the top of their are not hoisted assigned a value
scope during the to the top of when declared
execution phase. their scope. You and cannot be
This means you can't use them reassigned.
can use the before the However, the
variable before declaration. content of
it's declared in objects and
the code. arrays declared
with const can
be modified.

Example function function const pi = 3.14;

example() { example() { pi = 3; // Error:
if (true) { if (true) { Assignment to a
var x = 10; let x = 10; constant variable
} }
console.log(x); // console.log(x); // const arr = [1, 2,
Outputs 10, ReferenceError: x 3];
because var is is not defined arr.push(4); //
 function-scoped } This is allowed
}

Q4. Difference between Spread, Rest and Default Parameters.

Ans:
1. Spread Operator : The spread operator is used to spread elements
(e.g., an array or object) into a new array or object. It's handy for
creating shallow copies or combining multiple arrays or objects.
E.g.
// Array spread
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // Creates a new array [1, 2, 3, 4, 5]

// Object spread
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // Creates a new object { a: 1, b:
2, c: 3 }

2. Rest Operator: The rest operator is used to collect the remaining

arguments or elements into a single array or object.
E.g.
// Rest in function parameters
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Outputs 10

// Rest in array destructuring

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(rest); // Outputs [3, 4, 5]

3. Default Parameter: Default parameters allow you to initialize a

function parameter with a default value if no argument is provided or
if the argument is undefined.
E.g.
function greet(name = "Guest") {
 console.log(`Hello, ${name}!`);
}

greet(); // Outputs "Hello, Guest!"

greet("John"); // Outputs "Hello, John!"

Q5. What is deep copy and shallow copy.

Ans:
1. Deep Copy: A deep copy creates a new object or array and recursively
copies all nested objects and arrays within the original object or array.
This results in a completely independent copy. One common approach
is to use JSON.parse() and JSON.stringify()
E.g.
const originalObject = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(originalObject));

console.log(deepCopy); // Outputs { a: 1, b: { c: 2 } }

// Modifying the nested object in the deep copy does not affect the
original object
deepCopy.b.c = 999;
console.log(originalObject); // Outputs { a: 1, b: { c: 2 } }

2. Shallow Copy: A shallow copy creates a new object or array, but it

doesn't create copies of the nested objects or arrays within the original
object or array. Instead, it copies references to those nested objects or
arrays.
E.g.
const originalArray = [1, 2, [3, 4]];
const shallowCopy = [...originalArray];

console.log(shallowCopy); // Outputs [1, 2, [3, 4]]

// Modifying the nested array in the shallow copy also affects the
original array
shallowCopy[2][0] = 999;
console.log(originalArray); // Outputs [1, 2, [999, 4]]
Q6. What is Promise, Callback function, async await in Javascript.
Ans:
1. Promise: A promise in JavaScript is an object that represents the
eventual completion or failure of an asynchronous operation and its
resulting value. It's a way to handle asynchronous code more cleanly
and avoid callback hell.
A promise has three states:
1. Pending: The initial state; the promise is neither fulfilled nor
rejected.
2. Fulfilled: The operation completed successfully, and the promise
has a resulting value.
3. Rejected: The operation failed, and the promise has a reason for
the failure.
E.g.
const myPromise = new Promise((resolve, reject) => {
// Some asynchronous operation
const success = true;

if (success) {
resolve("Operation succeeded!"); // Fulfilled
} else {
reject("Operation failed!"); // Rejected
}
});

// Handling the promise

myPromise
.then((result) => {
console.log(result); // Outputs "Operation succeeded!"
})
.catch((error) => {
console.error(error); // Outputs "Operation failed!"
});

The Promise constructor takes a function with resolve and reject

parameters. Inside this function, you perform your asynchronous
operation, and when it's done, you call resolve with the successful
result or reject with an error.
 The .then() method is used to handle the fulfillment, and the .catch()
method is used to handle the rejection. Promises also allow chaining
multiple asynchronous operations using multiple .then() calls.

2. Callback Function: A callback function in JavaScript is a function that

is passed as an argument to another function and is executed after the
completion of some asynchronous operation or at a specified time.
E.g.
function fetchData(callback) {
// Simulating an asynchronous operation (e.g., fetching data)
setTimeout(() => {
const data = "This is the fetched data";
callback(data);
}, 2000);
}

function handleData(data) {
console.log(data);
}

// Using the fetchData function with a callback

fetchData(handleData);

3. Async/await Function: async and await are keywords in JavaScript

that simplify working with asynchronous code. It is a more readable
and synchronous-like syntax for handling asynchronous operations.
E.g.
async function fetchData() {
try {
const response = await
fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}

fetchData();
Q7. Disadvantages of Callback Function.
Ans:
1. Callback Hell (Pyramid of Doom): When multiple asynchronous
operations are nested within each other, it can lead to callback hell,
also known as the pyramid of doom. This makes the code hard to read
and maintain.
E.g.
fetchData(function (data) {
process1(function (result1) {
process2(function (result2) {
// More nested callbacks...
});
});
});

2. Readability and Maintainability: As the number of callbacks increases,

the code becomes less readable and harder to maintain.
Understanding the flow of execution becomes challenging, especially
for developers who didn't write the code.

3. Error Handling: Error handling can become cumbersome. In

traditional callback patterns, handling errors in asynchronous
operations might involve checking for errors in each callback, leading
to repetitive code.
E.g.
fetchData(function (data) {
if (data.error) {
handleError(data.error);
} else {
processData(data);
}
});

4. Inversion of Control: Callbacks lead to an inversion of control, where

the callback function is called by the asynchronous operation, not the
code that initiated the operation. This can make it harder to reason
about the flow of the program.
 5. Difficulty in Debugging: Debugging nested callbacks can be
challenging. Identifying which callback is causing an issue and tracing
the flow of execution might be more complex compared to using
alternative asynchronous patterns.

Q8. Difference between Promise and Callback Function

Ans.

1. Syntax and Readability:

a. Callback:
fetchData(function (data) {
process1(function (result1) {
process2(function (result2) {
// More nested callbacks...
});
});
});

b. Promise:
fetchData()
.then(process1)
.then(process2)
.catch(handleError);

2. Error Handling:
a. Callback:
fetchData(function (data) {
if (data.error) {
handleError(data.error);
} else {
processData(data);
}
});

b. Promise:
fetchData()
.then(processData)
.catch(handleError);
 3. Composition:
a. Callback: Composing asynchronous operations using callbacks
can be challenging and may result in deeply nested functions.
b. Promise: Promises allow for better composition of asynchronous
operations using .then() and .catch() methods, providing a
cleaner and more modular code structure.

Q9. What is event bubbling and event capturing in Javascript

Ans:

1. Event Bubbling: In event bubbling, the event starts from the target
element and bubbles up through its ancestors in the DOM hierarchy.
The innermost element's event handler is executed first, followed by
its parent element's event handler, and so on, until the outermost
ancestor is reached. This is the default behavior for most modern
browsers.
E.g.
<div id="parent">
<button id="child">Click me</button>
</div>

<script>
 document.getElementById('parent').addEventListener('click',
function() {
console.log('Parent div clicked');
});

document.getElementById('child').addEventListener('click',
function() {
console.log('Button clicked');
});
</script>

2. Event Capturing: In event capturing (also known as trickling), the event starts
from the outermost ancestor and trickles down to the target element. The
outermost ancestor's event handler is executed first, followed by its child
element's event handler, and so on, until the target element is reached.
E.g.
<div id="parent">
<button id="child">Click me</button>
</div>

<script>
document.getElementById('parent').addEventListener('click',
function() {
console.log('Parent div clicked (capturing phase)');
}, true); // The 'true' parameter enables event capturing.

document.getElementById('child').addEventListener('click',
function() {
console.log('Button clicked');
});
</script>

Q10. What is higher order function

Ans: A higher-order function is a function that takes one or more functions
as arguments or returns a function as its result.
E.g.
// Example of a higher-order function returning a function
function greet(greeting) {
return function (name) {
return `${greeting}, ${name}!`;
 };
}

const greetInEnglish = greet('Hello');

console.log(greetInEnglish('John')); // Output: Hello, John!

Q11. Different types of Functions in Javascript.

Ans:
1. Function Declarations: A function declaration defines a named
function. It consists of the function keyword, followed by the name of
the function, a list of parameters enclosed in parentheses, and the
function body enclosed in curly braces.
E.g.
function add(a, b) {
return a + b;
}

2. Function Expressions: A function expression defines a function as part

of an expression, typically by assigning it to a variable. Function
expressions do not have to be named (anonymous function), but they
can be.
E.g.
const multiply = function (a, b) {
return a * b;
};

3. Arrow Functions: They have a shorter syntax compared to traditional

function expressions and automatically bind the this value.
E.g.
const square = (x) => x * x;

4. IIFE (Immediately Invoked Function Expression): An IIFE is a function

that is declared and invoked immediately after its creation.
E.g.
(function () {
// Code here
})();
5. Generator Functions: Generator functions allow you to define an
iterator using a special syntax with the function* keyword. They use
the yield keyword to pause and resume the execution of the function.
E.g.
function* countGenerator() {
let count = 0;
while (true) {
yield count++;
}
}

6. Callback Functions: Callback functions are functions passed as

arguments to another function, to be executed later, often after an
asynchronous operation or event.
E.g.
function fetchData(callback) {
// Asynchronous operation
setTimeout(() => {
const data = 'Some data';
callback(data);
}, 1000);
}

fetchData((result) => {
console.log(result);
});
Q12. How does Promise works and different stages of Promise.
Ans:

A Promise is an object that represents the eventual completion or failure of

an asynchronous operation and its resulting value. Promises are a way to
handle asynchronous operations more easily and avoid the so-called
"callback hell.".

A Promise can be in one of three states:

1. Pending: The initial state; the promise is neither fulfilled nor rejected.
It is in progress.
2. Fulfilled: The operation completed successfully, and the promise has a
resulting value.
3. Rejected: The operation failed, and the promise has a reason for the
failure.
E.g.
const myPromise = new Promise((resolve, reject) => {
// Asynchronous operation, e.g., fetching data from an API
setTimeout(() => {
const success = true; // Simulating success or failure

if (success) {
resolve("Operation completed successfully");
} else {
reject("Operation failed");
}
}, 2000); // Simulating a 2-second delay
});
// Handling the Promise
myPromise
.then((result) => {
console.log("Fulfilled:", result); // Will be called if the
promise is fulfilled
})
.catch((error) => {
console.error("Rejected:", error); // Will be called if the
promise is rejected
})
.finally(() => {
console.log("Finally: This block will be executed regardless of
the promise's state");
});

Q13. Explain Call, Bind and Apply in Javascript.

Ans:
1. Call: The call method is used to invoke a function with a specified this
value and individual arguments passed one by one.
E.g.
function sayHello() {
console.log(`Hello, ${this.name}!`);
}

const person = { name: "John" };

sayHello.call(person); // Outputs: Hello, John!

2. Apply: The apply method is similar to call, but it accepts arguments as

an array.
E.g.
function sayHello(greeting) {
console.log(`${greeting}, ${this.name}!`);
}

const person = { name: "John" };

sayHello.apply(person, ["Hi"]); // Outputs: Hi, John!

 3. Bind: The bind method creates a new function with a specified this
value and initial arguments. Unlike call and apply, bind doesn't
immediately invoke the function; instead, it returns a new function
that can be invoked later.
E.g.
function sayHello() {
console.log(`Hello, ${this.name}!`);
}

const person = { name: "John" };

const sayHelloToJohn = sayHello.bind(person);

sayHelloToJohn(); // Outputs: Hello, John!

Q14. Different ways to create Object in JS.

Ans:
1. Object Literal:
const person = {
name: "John",
age: 30,
greet: function () {
console.log(`Hello, my name is ${this.name} and I'm
${this.age} years old.`);
}
};

2. Object Constructor:
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function () {
console.log(`Hello, my name is ${this.name} and I'm
${this.age} years old.`);
};
}

const person = new Person("John", 30);

3. Object.create():
const personPrototype = {
greet: function () {
console.log(`Hello, my name is ${this.name} and I'm
${this.age} years old.`);
}
};

const person = Object.create(personPrototype);

person.name = "John";
person.age = 30;

4. Class Syntax:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log(`Hello, my name is ${this.name} and I'm
${this.age} years old.`);
}
}

const person = new Person("John", 30);

5. Factory Function:
function createPerson(name, age) {
return {
name: name,
age: age,
greet: function () {
console.log(`Hello, my name is ${this.name} and I'm
${this.age} years old.`);
}
};
}

const person = createPerson("John", 30);

Q15. What is Prototype inheritance.
Ans: Prototype inheritance is a fundamental conceptthat allows objects to
inherit properties and methods from other objects through a prototype
chain. Every object in JavaScript has an associated prototype object, which
acts as a blueprint for the object.

E.g.
function Animal(type) {
this.type = type;
}

Animal.prototype.sound = function () {
console.log("Some generic sound");
};

function Dog(name, breed) {

this.name = name;
this.breed = breed;
}

// Set Dog's prototype to an instance of Animal

Dog.prototype = new Animal("Mammal");

const myDog = new Dog("Buddy", "Golden Retriever");

myDog.sound(); // Outputs: Some generic sound

Q16. What is throttling and debouncing.

Ans:
1. Throttling: Preventing a function from being called too frequently.
2. Debouncing: Delaying expensive operations, such as making an API
call after the user has stopped typing in an input field.

Q17. Null and undefined in JS.

Ans:
1. Null: Null representing the intentional absence of any object value.
2. Undefined: It is typically the default value of variables and properties
that have not been assigned a value. It is also the default return value
of a function that does not explicitly return anything.
Q18. What are the falsy values in javascript.
Ans: There 8 falsy value. false, 0, -0, 0n, "", null, undefined, NaN.

Q19. What is execution context, event loop ,stack, callback queue,microtask

queue in javascript.
Ans:

1. Execution context: an abstract concept of an environment where the

Javascript code is evaluated and executed.
2. Event Loop: An event loop is something that pulls stuff out of the
queue and places it onto the function execution stack whenever the
function stack becomes empty.
3. Stack: This is where all your javascript code gets pushed and executed
one by one.
4. Callback Queue: This is where your asynchronous code gets pushed
to, and waits for the execution.
5. Microtask Queue: Microtask Queue gets the callback functions
coming through Promises and Mutation Observer.

Q20. What is setTimeOut and setInterval in Javascript.

Ans:
1. setTimeOut: Executes a function, after waiting a specified number of
milliseconds.
 2. setInterval: repeats the execution of the function continuously.

Q21. What is Object.freeze() and Object.seal().

Ans:
1. Object.freeze(): Object.freeze() is used to prevent the modification of
an object’s properties and the addition/removal of new properties.
E.g.
const originalStudent = {
name: 'xyz',
percentage: 85
};

const frozenStudent = Object.freeze(originalStudent);

frozenStudent.percentage = 90;// Property cannnot be altered

frozenStudent.age = 16; // No new property can be added
delete frozenObject.name; // Returns false. Property cannot be
deleted

2. Object.seal(): The Object.seal() method prevents the addition and

deletion of properties from an object, but it does not prevent the
modification of the values of existing properties.
E.g.
const person = {
name: 'xyz',
designation: 'develper'
};

Object.seal(person);

person.name = 'abc'; // changes the value of the name property

console.log(person.name); // 'abc'

person.age = 16; // No new property can be added

console.log(person.age); // undefined

delete person.designation; // returns false.because the object is

sealed
console.log(person.designation); // developer
Q22. Difference Between Map and Set.
Ans:

Map Set

1. It allows you to associate 1. It stores unique values of any

values with keys. Each entry in data type.
a Map is a key-value pair 2. Does not allow duplicate
2. Can have duplicate values, but values.
keys must be unique. 3. Supports iteration over its
3. Provides methods for both key values.
and value iteration.

Q23. What is Weakmap and Weakset in Javascript.

Ans:
1. Weakmap: WeakMap is Map -like collection that allows only objects as
keys and removes them together with associated value once they
become inaccessible by other means.
E.g.
let weakMap = new WeakMap();

let obj = {};

weakMap.set(obj, "ok");

2. WeakSet: WeakSet is Set -like collection that stores only objects and
removes them once they become inaccessible by other means.
E.g.
let visitedSet = new WeakSet();

let john = { name: "John" };

let pete = { name: "Pete" };
let mary = { name: "Mary" };

visitedSet.add(john); // John visited us

visitedSet.add(pete); // Then Pete
visitedSet.add(john); // John again
Q24. What is sessionStorage, localStorage , cookie.
Ans:
1. Session Storage:
a. Scope: Limited to the duration of the page session. It is available
only for the duration of the page session. If the user closes the
tab or browser, the data is discarded.
b. Lifespan: Persists only for the duration of the page session. It is
suitable for storing temporary data that should be available only
during the page session.
E.g.
// Store data in sessionStorage
sessionStorage.setItem("key", "value");

// Retrieve data from sessionStorage

let data = sessionStorage.getItem("key");

2. Local Storage:
a. Scope: Persists even after the browser is closed and reopened. It
is available across browser sessions and tabs.
b. Lifespan: Long-term, persists until explicitly cleared by the user
or the web application.
E.g.
// Store data in localStorage
localStorage.setItem("key", "value");

// Retrieve data from localStorage

let data = localStorage.getItem("key");

3. Cookies:
a. Scope: Cookies can have different scopes depending on their
attributes. They can be set to expire when the session ends
(session cookies) or persist for a specified duration (persistent
cookies).
b. Lifespan: Can be set to expire when the session ends or have a
specified expiration date. They can persist even after the browser
is closed if they are persistent cookies.

Q25. What is use of json.stringify() and json.parse() method in Javascript

Ans:
 1. The JSON.stringify() method is used to convert a JavaScript object or
value to a JSON string.
2. The JSON.parse() method is used to parse a JSON string and convert it
into a JavaScript object or value.

Q26. What is a generator function.

Ans: A generator function is a special type of function that allows you to
pause its execution using the yield keyword. When a generator function is
called, it returns a generator object that can be used to control the execution
of the function.
E.g.
function* simpleGenerator() {
yield 1;
yield 2;
yield 3;
}
const generator = simpleGenerator();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

Q27. What is closure in Javascript.

Ans: A closure is created when a function is defined within another function,
allowing the inner function to access the outer function's variables and
parameters.

E.g.
function outerFunction() {
let outerVariable = 'I am from the outer function';
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
const closureExample = outerFunction();
closureExample(); // Outputs: "I am from the outer function"
Q28. What is hoisting in Javascript.
Ans: Hoisting is a behavior in JavaScript where variable and function
declarations are moved to the top of their containing scope during the
compilation phase.

Q29. What is Dead zone in JS.

Ans: The "dead zone" in JavaScript refers to a specific behavior related to the
hoisting of variables declared with let and const. When a variable is declared
with let or const, it is hoisted to the top of its block scope but is not
initialized until the actual declaration statement is encountered in the code.
The time between the start of the scope and the declaration statement is
known as the "temporal dead zone."
E.g.
console.log(x); // Throws a ReferenceError
let x = 5;
console.log(x); // Outputs: 5

Q30. What is function currying.

Ans: Function currying in JavaScript is a technique where a function with
multiple arguments is transformed into a sequence of functions, each taking
a single argument. The process of currying involves breaking down a
function that expects multiple arguments into a series of functions that
each take one argument.

E.g.
// Original function with multiple parameters
function add(x, y, z) {
return x + y + z;
}

// Curried version of the function

function curryAdd(x) {
return function (y) {
return function (z) {
return x + y + z;
};
};
}
// Using the curried function
const curriedAdd = curryAdd(1);
const result = curriedAdd(2)(3);

console.log(result); // Outputs: 6

Q31. What is mutation observer.

Ans: A Mutation Observer is a JavaScript API that provides a way to react to
changes in the DOM (Document Object Model). It allows you to watch for
changes to the structure of a document, such as the addition or removal of
elements, changes to attributes, or changes in the content of elements.

E.g.
// Select the target node
const targetNode = document.getElementById('target-element');

// Create a Mutation Observer instance

const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
console.log(mutation.type); // Outputs: "attributes", "childList",
or "characterData"
});
});

// Define the configuration for the observer

const config = { attributes: true, childList: true, subtree: true };

// Start observing the target node for specified changes

observer.observe(targetNode, config);

// Later, you can disconnect the observer when it's no longer needed
// observer.disconnect();

Q32. What is memorization.

Ans: Memoization is a technique used in computer science and
programming to optimize the performance of functions by caching the
results of expensive function calls and returning the cached result when the
same inputs occur again.

E.g.
function memoizedAdd() {
// Initialize a cache object
const cache = {};

return function (x, y) {

const key = `${x}-${y}`;

// Check if the result is already in the cache

if (key in cache) {
console.log('Fetching result from cache');
return cache[key];
} else {
// Perform the expensive calculation
const result = x + y;

// Store the result in the cache

cache[key] = result;

console.log('Calculating result');
return result;
}
};
}

// Create a memoized version of the add function

const memoizedAddFunction = memoizedAdd();

console.log(memoizedAddFunction(2, 3)); // Calculates result

console.log(memoizedAddFunction(2, 3)); // Fetches result from cache
console.log(memoizedAddFunction(4, 5)); // Calculates result
console.log(memoizedAddFunction(4, 5)); // Fetches result from cache