Basic JavaScript

Basic JavaScript
1. What is JavaScript? How is it different from Java?
2. What are the data types in JavaScript?
3. Explain the difference between var, let, and const.
4. What is undefined vs null in JavaScript?
5. What is the purpose of isNaN function?
6. What are JavaScript's primitive data types?
7. Explain the difference between == and ===.
8. What are global variables? How are they declared?
9. What is a closure in JavaScript?
10. Explain the use of typeof operator.
11. What is an Immediately Invoked Function Expression (IIFE)?
12. What are template literals? Give an example.
13. How is JavaScript dynamically typed?
14. What is the difference between call(), apply(), and bind()?
15. What is an event in JavaScript?
16. What is event bubbling and event capturing?
17. What are arrow functions? How are they different from regular functions?
18. How does the this keyword behave in JavaScript?
19. What is the difference between undefined and not defined?
20. What is a JavaScript object?
Intermediate JavaScript
21. Explain prototypal inheritance.
22. How does JavaScript handle asynchronous operations?
23. What is the purpose of Promise in JavaScript?
24. What is the difference between for...in and for...of?
25. Explain the concept of "hoisting."
26. What is the event loop in JavaScript?

27. What are JavaScript modules, and how do you use them?
28. What is the difference between function declaration and function expression?
29. What are the different ways to clone an object in JavaScript?
30. Explain JSON.stringify() and JSON.parse().
31. What are Map and Set in JavaScript? How are they different from objects?
32. How does destructuring work in JavaScript?
33. What is the difference between shallow copy and deep copy?
34. What is the purpose of the Symbol type?
35. What is the difference between synchronous and asynchronous code?
36. How do you create and trigger custom events in JavaScript?
37. What is the purpose of the async/await syntax?
38. Explain the concept of currying in JavaScript.
39. What are default parameters in JavaScript functions?
40. How do spread and rest operators work in JavaScript?
DOM Manipulation
41. What is the DOM in JavaScript?
42. How do you select elements in the DOM?
43. What is the difference between innerHTML, innerText, and textContent?
44. How do you create, update, and remove DOM elements?
45. Explain the use of addEventListener.
46. What is the difference between stopPropagation and preventDefault?
47. How do you traverse the DOM using JavaScript?
48. What are dataset attributes in JavaScript?
49. What is the difference between classList.add and className?
50. How do you handle form events in JavaScript?
Advanced JavaScript
51. What is the difference between Object.freeze and Object.seal?

52. Explain the debounce and throttle functions.
53. What are Web Workers in JavaScript?
54. How does the reduce() function work?
55. What is a WeakMap and WeakSet in JavaScript?
56. What is the purpose of Object.create()?
57. How does the garbage collector work in JavaScript?
58. Explain the concept of memoization.
59. How do you handle exceptions in JavaScript?
60. What are dynamic imports in JavaScript?
61. What is the difference between mutable and immutable data?
62. How do JavaScript timers (setTimeout and setInterval) work?
63. Explain the concept of the "Temporal Dead Zone."
64. How does JavaScript handle recursion?
65. What are Proxy objects in JavaScript?
66. What is the use of the Reflect API?
67. What are decorators in JavaScript?
68. How do you optimize JavaScript performance?
69. Explain how event delegation works.
70. What are iterators and generators in JavaScript?
ES6+ Features
71. What is the purpose of let and const introduced in ES6?
72. Explain the concept of destructuring in ES6.
73. What are default function parameters?
74. How do template literals work?
75. What are arrow functions?
76. Explain block-scoping in ES6.
77. What is a Set in ES6?
78. How do you use for...of loop?

79. What is the difference between import and require?
80. What is the use of the Promise.all() method?
81. How do async/await improve readability of asynchronous code?
82. What is the purpose of Promise.race()?
83. Explain Object.entries() and Object.values().
84. How does the spread operator (...) work?
85. What are tagged template literals?
Asynchronous JavaScript
86. What is a callback function?
87. Explain the concept of promises in JavaScript.
88. How do you handle promise chaining?
89. What is the purpose of the fetch() API?
90. What are the differences between fetch and XMLHttpRequest?
91. How does async/await work under the hood?
92. What is the purpose of the Promise.finally() method?
93. What is a microtask in JavaScript?
94. Explain how JavaScript handles single-threaded operations.
95. How do you handle errors in asynchronous code?
JavaScript and the Browser
96. What is the window object in JavaScript?
97. How does localStorage differ from sessionStorage?
98. What is the difference between cookies and localStorage?
99. What is the navigator object?
100. How do you perform DOM manipulation in JavaScript?
101. How do you use the history API in JavaScript?
102. What is the purpose of the location object?
103. How does JavaScript handle browser events?

104. What is the fetch() API used for?
105. What is the difference between synchronous and asynchronous requests?
Interview-Focused
106. Explain the Singleton design pattern in JavaScript.
107. What is functional programming in JavaScript?
108. How would you reverse a string in JavaScript?
109. How can you remove duplicates from an array?
110. Write a function to flatten a nested array.
111. How do you check if a string is a palindrome?
112. Explain how to debounce a function.
113. Write a JavaScript function to find the factorial of a number.
114. How would you find the maximum occurring character in a string?
115. How would you deep clone an object?
116. How do you merge two arrays in JavaScript?
117. How can you shuffle the elements of an array?
118. What is the difference between .map() and .forEach()?
119. How do you implement a custom map() function?
120. Write a function to check if two strings are anagrams.
Miscellaneous
121. What are promises, and why do we need them?
122. Explain the difference between then and catch in promises.
123. What is strict mode in JavaScript?
124. What is tail call optimization?
125. Explain what a polyfill is.
126. What is a transpiler in JavaScript?
127. What are the limitations of JavaScript?
128. How is error handling done in JavaScript?

129. What is the difference between innerHTML and outerHTML?
130. How do you measure performance in JavaScript?
Extra Questions
131. What is AJAX, and how does it work?
132. Explain the concept of reflow and repaint.
133. How do you use the console API effectively?
134. What is a service worker in JavaScript?
135. How does async differ from defer in script tags?
136. What are the stages of the JavaScript parsing process?
137. What is the difference between document.ready and window.onload?
138. How do you debug JavaScript code effectively?
139. What are WebSockets in JavaScript?
140. What is the purpose of the new keyword?
141. What are named exports vs default exports?
142. How does destructuring help in function parameters?
143. What is the eval() function, and why is it discouraged?
144. How do you use Intl for formatting?
145. What is BigInt in JavaScript?
146. How do you handle dates and times in JavaScript?
147. What are JavaScript polyfills? Provide examples.
148. What are the differences between npm and yarn?
149. What is event delegation in JavaScript?
150. Explain lazy loading in JavaScript.

1. What is JavaScript? How is it different from Java?
Answer:
JavaScript is a lightweight, interpreted programming language used primarily to create interactive and
dynamic content on websites. It is often used for client-side scripting but can also be used server-side
with environments like Node.js.
Difference from Java:
• Java: A compiled, statically typed, object-oriented programming language.
• JavaScript: Interpreted, dynamically typed, and primarily used for web development.
JavaScript is not related to Java except for its name.
2. What are the data types in JavaScript?
Answer:
JavaScript has two main categories of data types:
• Primitive Data Types: String, Number, Boolean, Undefined, Null, Symbol, BigInt.
• Non-Primitive (Object) Data Types: Object (including Arrays, Functions, and other objects).
3. Explain the difference between var, let, and const.
Answer:
• var:
o Function-scoped.
o Can be re-declared and updated.
o Hoisted but initialized as undefined.
• let:
o Block-scoped.
o Cannot be re-declared in the same scope.
o Hoisted but not initialized (Temporal Dead Zone applies).
• const:
o Block-scoped.
o Must be initialized at declaration.
o Cannot be reassigned.
4. What is undefined vs null in JavaScript?
Answer:
• undefined:
A variable that has been declared but not initialized. It indicates the absence of a value.
• null:
Represents an explicitly assigned absence of value. It’s an object type.
Example:
javascript
Copy code
let x; // undefined
let y = null; // explicitly no value
5. What is the purpose of is NaN function?
Answer:
The isNaN function checks whether a value is NaN (Not-a-Number). If the value is not a number or
cannot be converted to a number, it returns true.
Example:
javascript
Copy code
isNaN('abc'); // true
isNaN(123); // false
6. What are JavaScript's primitive data types?
Answer:
JavaScript’s primitive data types are:
1. String: Represents text.
2. Number: Represents numeric values (both integers and floating-point).
3. Boolean: Represents true or false.
4. Undefined: Represents a variable without a value.

5. Null: Represents an explicitly empty value.
6. Symbol: Represents unique, immutable values.
7. BigInt: Represents integers larger than 2^53 - 1.
7. Explain the difference between == and ===.
Answer:
• == (Abstract Equality): Compares two values after type coercion.
• === (Strict Equality): Compares both value and type without type coercion.
Example:
javascript
Copy code
5 == '5'; // true (type coercion happens)
5 === '5'; // false (strict comparison, different types)
8. What are global variables? How are they declared?
Answer:
• Global Variables: Variables that are accessible throughout the program (in all scopes).
• Declaration: Declare a variable outside any function or use window object explicitly.
Example:
javascript
Copy code
var globalVar = "I am global"; // Declared globally
window.anotherGlobal = "I am also global"; // Using window
9. What is a closure in JavaScript?
Answer:
A closure is a function that retains access to its outer scope's variables, even after the outer function has
returned.
Example:
javascript
Copy code
function outerFunction() {
let outerVar = "I am outer";
return function innerFunction() {
return outerVar; // innerFunction has access to outerVar
};
const closureFunction = outerFunction();
console.log(closureFunction()); // "I am outer"
10. Explain the use of typeof operator.
Answer:
The typeof operator returns the type of a given variable or value as a string.
Example:
javascript
Copy code
console.log(typeof "Hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof {}); // "object"
console.log(typeof null); // "object" (a known JavaScript quirk)
console.log(typeof undefined); // "undefined"
11. What is an Immediately Invoked Function Expression (IIFE)?
Answer:
An IIFE is a function that is executed immediately after it is defined. It is commonly used to create a
private scope and avoid polluting the global namespace.
Example:
javascript
Copy code
(function () {
console.log("IIFE executed!");
})();
12. What are template literals? Give an example.
Answer:
Template literals are string literals enclosed in backticks (`) and allow embedded expressions using the
${expression} syntax. They support multi-line strings and string interpolation.
Example:
javascript
Copy code
const name = "John";
const greeting = `Hello, ${name}! Welcome to JavaScript.`;
console.log(greeting); // "Hello, John! Welcome to JavaScript."
13. How is JavaScript dynamically typed?
Answer:
JavaScript is dynamically typed, meaning variables are not bound to a specific data type. A variable’s type
can change at runtime based on the value assigned to it.
Example:
javascript
Copy code
let x = 10; // x is a number
x = "Hello"; // x is now a string
x = true; // x is now a boolean
14. What is the difference between call(), apply(), and bind()?
Answer:
• call(): Invokes a function, allowing you to pass arguments individually.
• apply(): Similar to call(), but arguments are passed as an array.

• bind(): Returns a new function with a specific this value and optional arguments pre-set, without
invoking it immediately.
Example:
javascript
Copy code
const obj = { name: "John" };
function greet(greeting, punctuation) {
console.log(`${greeting}, ${this.name}${punctuation}`);
greet.call(obj, "Hello", "!"); // Hello, John!
greet.apply(obj, ["Hi", "."]); // Hi, John.
const boundGreet = greet.bind(obj, "Hey");
boundGreet("?"); // Hey, John?
15. What is an event in JavaScript?
Answer:
An event is an action or occurrence detected by the browser, such as a user clicking a button, moving the
mouse, or typing on the keyboard. Events allow developers to define responses to user interactions.
Example:
javascript
Copy code
document.querySelector("button").addEventListener("click", () => {
console.log("Button clicked!");
});
16. What is event bubbling and event capturing?
Answer:
• Event Bubbling: Events propagate from the target element to its ancestors (inner to outer
elements).
• Event Capturing: Events propagate from the outermost ancestor to the target element (outer to
inner elements).
Example:
javascript
Copy code
document.querySelector("#parent").addEventListener("click", () => {
console.log("Parent clicked! (bubbling)");
}, false); // Bubbling phase
document.querySelector("#child").addEventListener("click", () => {
console.log("Child clicked! (capturing)");
}, true); // Capturing phase
17. What are arrow functions? How are they different from regular functions?
Answer:
Arrow functions are a concise syntax for writing functions introduced in ES6. They do not have their own
this context, making them useful in scenarios where this should refer to the enclosing scope.
Differences:
• No this binding.
• Cannot be used as constructors.
• Implicit return for single-expression functions.
Example:
javascript
Copy code
const regularFunction = function () {
console.log(this); // Dynamic binding of `this`
};
const arrowFunction = () => {
console.log(this); // Lexical `this`, inherits from surrounding scope

};
18. How does the this keyword behave in JavaScript?
Answer:
this refers to the object that is executing the current function.
• In the global context, this refers to the window object (in browsers).
• Inside an object method, this refers to the object.
• In an arrow function, this refers to the enclosing scope.
• In strict mode, this is undefined in the global scope.
Example:
javascript
Copy code
function globalThis() {
console.log(this); // In browsers: window object
const obj = {
method: function () {
console.log(this); // Refers to obj
},
};
obj.method();
19. What is the difference between undefined and "not defined"?
Answer:
• undefined: A variable is declared but has no assigned value.
• "Not defined": A variable has not been declared in the code.
Example:
javascript
Copy code
let x;
console.log(x); // undefined
console.log(y); // ReferenceError: y is not defined
20. What is a JavaScript object?
Answer:
An object in JavaScript is a collection of key-value pairs, where keys are strings (or Symbols) and values
can be any data type, including functions.
Example:
javascript
Copy code
const obj = {
name: "John",
age: 30,
greet: function () {
console.log("Hello, " + this.name);
},
};
console.log(obj.name); // John
obj.greet(); // Hello, John
Intermediate JavaScript Questions and Answers
21. Explain prototypal inheritance.
Answer:
Prototypal inheritance allows objects to inherit properties and methods from another object. Every
JavaScript object has an internal property called [[Prototype]], which links it to another object.
Example:
javascript
Copy code
const parent = { greet: function () { console.log("Hello!"); } };
const child = Object.create(parent);
child.greet(); // "Hello!" (inherits from parent)
22. How does JavaScript handle asynchronous operations?
Answer:
JavaScript handles asynchronous operations using:
• Callbacks: A function passed as an argument and executed after an operation.
• Promises: Represent the eventual completion or failure of an asynchronous task.
• Async/Await: Simplifies working with promises for writing asynchronous code in a synchronous
style.
• Event Loop: Ensures asynchronous code runs after the current stack of code execution
completes.
23. What is the purpose of Promise in JavaScript?
Answer:
A Promise represents a value that may be available now, in the future, or never. It is used to handle
asynchronous operations more effectively.
States of a Promise:
1. Pending: Initial state.
2. Fulfilled: Operation completed successfully.
3. Rejected: Operation failed.
Example:
javascript
Copy code
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Success"), 1000);
});
promise.then(console.log).catch(console.error);
24. What is the difference between for...in and for...of?
Answer:
• for...in: Iterates over the keys of an object (enumerable properties).
• for...of: Iterates over the values of an iterable (arrays, strings, etc.).
Example:
javascript
Copy code
const obj = { a: 1, b: 2 };
for (let key in obj) {
console.log(key); // "a", "b"
const arr = [1, 2, 3];
for (let value of arr) {
console.log(value); // 1, 2, 3
25. Explain the concept of "hoisting."
Answer:
Hoisting is JavaScript's behavior of moving variable and function declarations to the top of their scope
before code execution.
• Variables declared with var are hoisted but initialized as undefined.
• Functions are hoisted with their definition.
Example:
javascript
Copy code
console.log(a); // undefined
var a = 10;
greet(); // "Hello!"
function greet() {
console.log("Hello!");
26. What is the event loop in JavaScript?
Answer:
The event loop is a mechanism that allows JavaScript to perform non-blocking operations by offloading
tasks (like I/O operations) to the browser and executing them once the call stack is empty.
Steps:
1. JavaScript executes code in the call stack.
2. Asynchronous tasks are moved to the task queue or microtask queue.
3. The event loop checks if the call stack is empty, then executes tasks from the queues.
27. What are JavaScript modules, and how do you use them?
Answer:
JavaScript modules allow you to divide code into reusable pieces using export and import.
Usage:
1. Exporting: Define the module's public parts.
javascript
Copy code
// module.js
export const greet = () => console.log("Hello!");
export default function () { console.log("Default export"); }
2. Importing: Use the exported parts in another file.
javascript
Copy code
import { greet } from './module.js';
import defaultFunc from './module.js';

greet(); // "Hello!"
defaultFunc(); // "Default export"
28. What is the difference between function declaration and function expression?
Answer:
• Function Declaration: A named function that is hoisted.
javascript
Copy code
function greet() {
• Function Expression: A function assigned to a variable. Not hoisted.
javascript
Copy code
const greet = function () {
};
Example of the difference:
javascript
Copy code
greet(); // Works
function greet() {
greetExpression(); // Error: greetExpression is not defined
const greetExpression = function () {
console.log("Hi!");
};
29. What are the different ways to clone an object in JavaScript?
Answer:
1. Using Object.assign():
javascript
Copy code
const obj = { a: 1, b: 2 };
const clone = Object.assign({}, obj);
2. Using Spread Operator (...):
javascript
Copy code
const clone = { ...obj };
3. Using JSON methods (Deep Copy):
javascript
Copy code
const deepClone = JSON.parse(JSON.stringify(obj));
4. Using structured cloning (structuredClone()):
javascript
Copy code
const deepClone = structuredClone(obj);
30. Explain JSON.stringify() and JSON.parse().
Answer:
• JSON.stringify(): Converts a JavaScript object or value into a JSON string.
javascript
Copy code
const obj = { a: 1, b: 2 };
const jsonString = JSON.stringify(obj);

console.log(jsonString); // '{"a":1,"b":2}'
• JSON.parse(): Parses a JSON string into a JavaScript object.
javascript
Copy code
const jsonObject = JSON.parse('{"a":1,"b":2}');
console.log(jsonObject); // { a: 1, b: 2 }
31. What are Map and Set in JavaScript? How are they different from objects?
Answer:
• Map: A collection of key-value pairs where keys can be any type (object, primitive, etc.).
• Set: A collection of unique values.
Differences from Objects:
1. Map:
o Keys can be any data type.
o Iterates in insertion order.
o Size can be retrieved using map.size.
2. Set:
o Stores unique values (no duplicates).
o Size can be retrieved using set.size.
o Useful for filtering unique elements.
Examples:
javascript
Copy code
// Map example
const map = new Map();
map.set('a', 1);
map.set(2, 'b');
console.log(map.get(2)); // "b"
// Set example
const set = new Set([1, 2, 2, 3]);
console.log(set); // Set { 1, 2, 3 }
32. How does destructuring work in JavaScript?
Answer:
Destructuring allows you to extract values from arrays or properties from objects and assign them to
variables.
Examples:
javascript
Copy code
// Array destructuring
const [a, b] = [1, 2];
console.log(a, b); // 1, 2
// Object destructuring
const obj = { x: 10, y: 20 };
const { x, y } = obj;
console.log(x, y); // 10, 20
// Nested destructuring
const nestedObj = { outer: { inner: 42 } };
const { outer: { inner } } = nestedObj;
console.log(inner); // 42
33. What is the difference between shallow copy and deep copy?
Answer:
• Shallow Copy: Copies the first level of properties. Nested objects or arrays are still referenced.
Example:
javascript
Copy code
const obj = { a: 1, b: { c: 2 } };
const shallow = { ...obj };
shallow.b.c = 3;
console.log(obj.b.c); // 3 (referenced)
• Deep Copy: Copies all levels, creating a fully independent copy.

Example:
javascript
Copy code
const deep = JSON.parse(JSON.stringify(obj));
deep.b.c = 4;
console.log(obj.b.c); // 2 (independent)
34. What is the purpose of the Symbol type?
Answer:
Symbol is a unique and immutable primitive data type. It’s used to create unique property keys to avoid
name collisions.
Example:
javascript
Copy code
const sym1 = Symbol('id');
const sym2 = Symbol('id');
console.log(sym1 === sym2); // false (unique symbols)
const obj = {};
obj[sym1] = 'value1';
console.log(obj[sym1]); // "value1"
35. What is the difference between synchronous and asynchronous code?
Answer:
• Synchronous Code: Executes line by line, blocking subsequent code until the current operation
completes.
• Asynchronous Code: Allows other operations to execute while waiting for a task to complete.
Example:
javascript
Copy code
// Synchronous
console.log('Start');
for (let i = 0; i < 1e6; i++); // Blocks
console.log('End');
// Asynchronous
console.log('Start');
setTimeout(() => console.log('Middle'), 1000); // Non-blocking
console.log('End');
36. How do you create and trigger custom events in JavaScript?
Answer:
Custom events are created using the CustomEvent constructor and triggered using dispatchEvent.
Example:
javascript
Copy code
const customEvent = new CustomEvent('myEvent', { detail: { message: 'Hello!' } });
document.addEventListener('myEvent', (e) => {
console.log(e.detail.message); // "Hello!"
});
document.dispatchEvent(customEvent);
37. What is the purpose of the async/await syntax?

Answer:
async/await simplifies working with Promises, making asynchronous code look and behave like
synchronous code.
• async: Marks a function as asynchronous, returning a Promise.
• await: Pauses execution until the Promise resolves.
Example:
javascript
Copy code
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);
fetchData();
38. Explain the concept of currying in JavaScript.
Answer:
Currying is a technique of transforming a function with multiple arguments into a sequence of functions,
each taking a single argument.
Example:
javascript
Copy code
function add(a) {
return function (b) {
return a + b;
};
}
const add5 = add(5);
console.log(add5(3)); // 8
39. What are default parameters in JavaScript functions?
Answer:
Default parameters allow you to set default values for function arguments if no value is provided.
Example:
javascript
Copy code
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
greet(); // "Hello, Guest!"
greet('John'); // "Hello, John!"
40. How do spread and rest operators work in JavaScript?
Answer:
• Spread Operator (...): Expands an array or object into individual elements.

Example:
javascript
Copy code
const arr = [1, 2, 3];
console.log(...arr); // 1 2 3
const obj = { a: 1, b: 2 };
const newObj = { ...obj, c: 3 };
console.log(newObj); // { a: 1, b: 2, c: 3 }
• Rest Operator (...): Gathers the rest of the values into an array or object.
Example:
javascript
Copy code
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
console.log(sum(1, 2, 3)); // 6
OM Manipulation Questions and Answers
41. What is the DOM in JavaScript?
Answer:
The Document Object Model (DOM) is a programming interface for web documents. It represents the
structure of a webpage as a tree of objects, allowing JavaScript to manipulate HTML and CSS
dynamically.
Example:
javascript
Copy code
document.title = "New Page Title"; // Updates the document title
42. How do you select elements in the DOM?
Answer:
You can use the following methods to select elements:
• getElementById: Selects an element by its ID.
javascript
Copy code
const element = document.getElementById('myId');
• querySelector: Selects the first element matching a CSS selector.
javascript
Copy code
const element = document.querySelector('.myClass');

• querySelectorAll: Selects all elements matching a CSS selector.
javascript
Copy code
const elements = document.querySelectorAll('.myClass');
• getElementsByClassName and getElementsByTagName: Select by class name or tag name.
43. What is the difference between innerHTML, innerText, and textContent?
Answer:
• innerHTML: Retrieves or sets the HTML content inside an element (including tags).
javascript
Copy code
element.innerHTML = '<strong>Bold Text</strong>';
• innerText: Retrieves or sets the visible text inside an element, considering CSS styles (e.g.,
display: none is excluded).
javascript
Copy code
element.innerText = 'Visible Text';
• textContent: Retrieves or sets the raw text inside an element (ignores CSS styling).
javascript
Copy code
element.textContent = 'Raw Text';
44. How do you create, update, and remove DOM elements?
Answer:
• Create: Use document.createElement and append it.
javascript
Copy code
const newElement = document.createElement('div');
newElement.textContent = 'Hello!';
document.body.appendChild(newElement);
• Update: Modify properties like textContent or style.
javascript
Copy code
newElement.style.color = 'blue';
• Remove: Use removeChild or remove.
javascript
Copy code
newElement.remove(); // Removes the element
45. Explain the use of addEventListener.
Answer:
addEventListener is used to attach an event listener to an element. It allows multiple listeners for the
same event and supports additional options like capture.
Syntax:
javascript
Copy code
element.addEventListener('eventType', callback, options);
Example:
javascript
Copy code
button.addEventListener('click', () => {
console.log('Button clicked!');
});
46. What is the difference between stopPropagation and preventDefault?
Answer:
• stopPropagation: Prevents the event from propagating to parent elements in the DOM
hierarchy.
javascript
Copy code
element.addEventListener('click', (event) => {
event.stopPropagation();
});
• preventDefault: Prevents the default action associated with the event (e.g., stopping form
submission or link navigation).
javascript
Copy code
element.addEventListener('click', (event) => {
event.preventDefault();
});
47. How do you traverse the DOM using JavaScript?
Answer:
You can traverse using properties like:
• parentNode: Access the parent element.
• childNodes / children: Access child elements.
• nextSibling / nextElementSibling: Access the next sibling.
• previousSibling / previousElementSibling: Access the previous sibling.
Example:
javascript
Copy code
const parent = element.parentNode;
const children = element.children;
const next = element.nextElementSibling;
48. What are dataset attributes in JavaScript?
Answer:
Dataset attributes allow you to store custom data in HTML elements using data-* attributes. Access
them using element.dataset.
Example:
html
Copy code
<div id="myDiv" data-user-id="123" data-role="admin"></div>
javascript
Copy code
const div = document.getElementById('myDiv');
console.log(div.dataset.userId); // "123"
console.log(div.dataset.role); // "admin"
49. What is the difference between classList.add and className?
Answer:
• classList.add: Adds a single class or multiple classes to an element without affecting existing
classes.
javascript
Copy code
element.classList.add('new-class');
• className: Overwrites all existing classes with the new value.
javascript
Copy code
element.className = 'new-class'; // Removes all previous classes
50. How do you handle form events in JavaScript?
Answer:
Form events like submit, change, and input can be handled using addEventListener.
Example:
javascript
Copy code
const form = document.getElementById('myForm');

// Handle form submission
form.addEventListener('submit', (event) => {
event.preventDefault(); // Prevent page refresh
console.log('Form submitted!');
});
// Handle input changes
form.addEventListener('input', (event) => {
console.log(event.target.value); // Log input value
});
51. What is the difference between Object.freeze and Object.seal?
Answer:
• Object.freeze:
o Prevents adding, removing, or modifying properties of an object.
o Makes the object immutable.
javascript
Copy code
const obj = Object.freeze({ a: 1 });
obj.a = 2; // Does nothing in strict mode
• Object.seal:
o Prevents adding or removing properties but allows modifying existing ones.
javascript
Copy code
const obj = Object.seal({ a: 1 });
obj.a = 2; // Allowed
delete obj.a; // Does nothing

52. Explain the debounce and throttle functions.
Answer:
• Debounce: Limits the rate at which a function is executed. It delays execution until after a
specified time since the last call. Useful for search input or resize events.
javascript
Copy code
function debounce(func, delay) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
• Throttle: Ensures a function is called at most once every specified interval, regardless of how
often it's triggered. Useful for scroll or mousemove events.
javascript
Copy code
function throttle(func, limit) {
let lastCall = 0;
const now = Date.now();
if (now - lastCall >= limit) {
lastCall = now;
func.apply(this, args);
};
53. What are Web Workers in JavaScript?

Answer:
Web Workers allow running JavaScript code in the background, in a separate thread, to keep the main
thread responsive.
• Created using the Worker API.
• Used for heavy computations or background tasks.
Example:
javascript
Copy code
// worker.js
self.onmessage = (e) => {
const result = e.data * 2;
self.postMessage(result);
};
// main.js
const worker = new Worker('worker.js');
worker.onmessage = (e) => console.log(e.data);
worker.postMessage(5); // Sends 5 to the worker
54. How does the reduce() function work?
Answer:
reduce() applies a function to an accumulator and each array element, reducing the array to a single
value.
Syntax:
javascript
Copy code
array.reduce(callback, initialValue);
Example:
javascript
Copy code
const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10
55. What is a WeakMap and WeakSet in JavaScript?
Answer:
• WeakMap: A map where keys are objects, and they are weakly referenced, allowing garbage
collection.
• WeakSet: A set of objects with weak references.
• They are not iterable.
Example:
javascript
Copy code
let obj = { key: 'value' };
const weakMap = new WeakMap();
weakMap.set(obj, 'info');
obj = null; // Object can be garbage collected
const weakSet = new WeakSet();
weakSet.add({ a: 1 }); // Only stores objects
56. What is the purpose of Object.create()?
Answer:
Object.create() creates a new object with the specified prototype object and optional properties.
Example:
javascript
Copy code
const parent = { greet: () => console.log('Hello') };
const child = Object.create(parent);

child.greet(); // "Hello"
console.log(Object.getPrototypeOf(child) === parent); // true
57. How does the garbage collector work in JavaScript?
Answer:
The garbage collector automatically removes objects from memory that are no longer reachable.
• Mark-and-Sweep Algorithm: Identifies objects that are not reachable from the root (e.g., global
variables) and frees their memory.
• Circular references are handled correctly as long as no external reference exists.
Example:
javascript
Copy code
let obj = { a: 1 };
obj = null; // Eligible for garbage collection
58. Explain the concept of memoization.
Answer:
Memoization is an optimization technique that caches the results of expensive function calls to avoid
redundant computations.
Example:
javascript
Copy code
function memoize(func) {
const cache = {};
return function (key) {
if (key in cache) return cache[key];
const result = func(key);
cache[key] = result;
return result;
};
}
const factorial = memoize((n) => (n <= 1 ? 1 : n * factorial(n - 1)));
console.log(factorial(5)); // Cached result for subsequent calls
59. How do you handle exceptions in JavaScript?
Answer:
Exceptions are handled using try...catch blocks.
• throw: Used to throw an error.
• finally: Executes code regardless of whether an exception occurs.
Example:
javascript
Copy code
try {
throw new Error('An error occurred');
} catch (error) {
console.error(error.message);
} finally {
console.log('Execution complete');
60. What are dynamic imports in JavaScript?
Answer:
Dynamic imports allow importing modules at runtime using the import() function. This is useful for code
splitting and lazy loading.
Example:
javascript
Copy code
import('./module.js')
.then((module) => {
module.default(); // Call the default export
})
.catch((error) => console.error(error));
61. What is the difference between mutable and immutable data?
Answer:
• Mutable Data: Can be changed after creation (e.g., arrays, objects).
javascript
Copy code
const arr = [1, 2];
arr.push(3); // Mutates the array
console.log(arr); // [1, 2, 3]
• Immutable Data: Cannot be changed after creation. Any "modification" creates a new value
(e.g., strings, numbers).
javascript
Copy code
const str = "hello";
const newStr = str + " world"; // Creates a new string
console.log(newStr); // "hello world"
62. How do JavaScript timers (setTimeout and setInterval) work?
Answer:
• setTimeout: Executes a function after a specified delay (one-time execution).
javascript
Copy code
setTimeout(() => console.log("Executed after 2 seconds"), 2000);
• setInterval: Executes a function repeatedly at specified intervals.
javascript
Copy code
const id = setInterval(() => console.log("Repeating every second"), 1000);
clearInterval(id); // Stops the interval
Timers rely on the event loop, where the callback is queued after the delay.
63. Explain the concept of the "Temporal Dead Zone."
Answer:
The Temporal Dead Zone (TDZ) refers to the time between entering a scope and declaring a variable
with let or const. During this period, accessing the variable results in a ReferenceError.
Example:
javascript
Copy code
console.log(x); // ReferenceError
let x = 10; // TDZ ends here
64. How does JavaScript handle recursion?
Answer:
Recursion is a function calling itself until a base condition is met. JavaScript uses the call stack to manage
recursive calls.
Example:
javascript
Copy code
function factorial(n) {
if (n <= 1) return 1; // Base case
return n * factorial(n - 1); // Recursive call
console.log(factorial(5)); // 120
Excessive recursion can lead to a stack overflow.
65. What are Proxy objects in JavaScript?

Answer:
A Proxy allows customization of operations on an object (e.g., property access, assignment). It is created
using the Proxy constructor.
Example:
javascript
Copy code
const handler = {
get: (target, prop) => (prop in target ? target[prop] : `No such property`),
};
const obj = new Proxy({ a: 1 }, handler);
console.log(obj.a); // 1
console.log(obj.b); // "No such property"
66. What is the use of the Reflect API?
Answer:
The Reflect API provides methods for performing operations on objects, similar to those used with Proxy
handlers.
Example:
javascript
Copy code
const obj = { a: 1 };
Reflect.set(obj, 'b', 2); // Adds a new property
console.log(Reflect.get(obj, 'b')); // 2
Benefits:
• Simplifies Proxy handlers.
• Avoids using lower-level operations like Object.defineProperty.
67. What are decorators in JavaScript?
Answer:
Decorators are special functions used to modify or enhance classes and their methods. They are part of
the proposed ES decorators feature.
Example (Using a decorator library):
javascript
Copy code
function readonly(target, key, descriptor) {
descriptor.writable = false;
return descriptor;
class Example {
@readonly
sayHello() {
return "Hello!";
Here, @readonly makes the sayHello method immutable.
68. How do you optimize JavaScript performance?
Answer:
• Reduce DOM operations: Minimize reflows and repaints.
• Debounce and throttle: Optimize event handling.
• Use Web Workers: For heavy computations.
• Code splitting: Load only required JavaScript using dynamic imports.
• Avoid memory leaks: Clear unused references and use WeakMap/WeakSet where applicable.
• Efficient loops: Use native array methods like map and reduce instead of for loops when
applicable.
69. Explain how event delegation works.
Answer:
Event delegation is a technique where a single event listener is attached to a parent element to handle
events for its child elements. It relies on event bubbling.
Example:
javascript
Copy code
document.getElementById('parent').addEventListener('click', (event) => {
if (event.target.tagName === 'BUTTON') {
console.log(`Button ${event.target.textContent} clicked`);
});
Advantages:
• Fewer event listeners.
• Dynamically added elements are handled automatically.
70. What are iterators and generators in JavaScript?
Answer:
• Iterators: Objects that implement the next() method, returning { value, done } pairs.
Example:
javascript
Copy code
const iterator = [1, 2, 3][Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
• Generators: Special functions defined with function* that can pause and resume execution using
yield.
Example:
javascript
Copy code
function* generator() {
yield 1;
yield 2;
yield 3;
}
const gen = generator();
console.log(gen.next()); // { value: 1, done: false }
Generators simplify working with custom iterators.
ES6+ Features Questions and Answers
71. What is the purpose of let and const introduced in ES6?
Answer:
• let:
o Declares block-scoped variables.
o Allows reassignment.
javascript
Copy code
let x = 10;
x = 20; // Allowed
• const:
o Declares block-scoped constants.
o Reassignment is not allowed.
javascript
Copy code
const y = 10;
y = 20; // Error
72. Explain the concept of destructuring in ES6.
Answer:
Destructuring simplifies extracting values from arrays or properties from objects into variables.
Example (Array Destructuring):
javascript
Copy code
const [a, b] = [1, 2];
console.log(a, b); // 1, 2
Example (Object Destructuring):
javascript
Copy code
const obj = { x: 10, y: 20 };
const { x, y } = obj;
73. What are default function parameters?
Answer:
Default parameters allow assigning default values to function arguments if no value or undefined is
provided.
Example:
javascript
Copy code
function greet(name = "Guest") {
return `Hello, ${name}`;
console.log(greet()); // "Hello, Guest"
74. How do template literals work?
Answer:
Template literals provide an easier way to create strings, supporting multi-line strings and embedding
expressions.
Syntax: Use backticks ` instead of quotes.
javascript
Copy code
const name = "John";
const greeting = `Hello, ${name}!`; // Embedding expressions

console.log(greeting); // "Hello, John!"
75. What are arrow functions?
Answer:
Arrow functions are a concise syntax for defining functions. They do not bind their own this context,
making them useful in callbacks.
Syntax:
javascript
Copy code
const add = (a, b) => a + b; // Implicit return
console.log(add(2, 3)); // 5
Key Points:
• Shorter syntax.
• Do not have their own this.
76. Explain block-scoping in ES6.
Answer:
Variables declared with let and const are block-scoped, meaning they are only accessible within the
block {} in which they are defined.
Example:
javascript
Copy code
let x = 10;
const y = 20;
// console.log(x, y); // Error: x and y are not defined
77. What is a Set in ES6?

Answer:
A Set is a collection of unique values. It does not allow duplicate entries.
Example:
javascript
Copy code
const mySet = new Set([1, 2, 2, 3]);
console.log(mySet); // Set { 1, 2, 3 }
mySet.add(4);
console.log(mySet.has(4)); // true
78. How do you use for...of loop?
Answer:
for...of iterates over iterable objects like arrays, strings, maps, and sets.
Example (Array):
javascript
Copy code
const arr = [1, 2, 3];
for (const num of arr) {
console.log(num); // 1, 2, 3
Example (String):
javascript
Copy code
for (const char of "hello") {
console.log(char); // h, e, l, l, o
79. What is the difference between import and require?
Answer:
Feature import require
Syntax ES6 modules CommonJS modules
Static/Dynamic Statically loaded Can be dynamic
Usage import { a } const a = require()
Example (import):
javascript
Copy code
import { func } from './module.js';
func();
Example (require):
javascript
Copy code
const func = require('./module');
func();
80. What is the use of the Promise.all() method?
Answer:
Promise.all() runs multiple promises in parallel and resolves when all promises are resolved. If one
promise rejects, it rejects immediately.
Syntax:
javascript
Copy code
Promise.all([promise1, promise2, ...]).then((results) => {
console.log(results);
});
Example:
javascript
Copy code
const p1 = Promise.resolve(10);
const p2 = Promise.resolve(20);
Promise.all([p1, p2]).then(([result1, result2]) => {
console.log(result1, result2); // 10, 20
});
81. How do async/await improve readability of asynchronous code?
Answer:
async/await provide a more synchronous-like structure to asynchronous code, making it easier to read
and understand compared to traditional promise chains (.then(), .catch()).
• async: Declares a function that returns a promise. Inside this function, you can use await.
• await: Pauses the execution of the function until the promise resolves or rejects.
Example:
Without async/await:
javascript
Copy code
fetchData().then(data => {
console.log(data);
}).catch(error => {
console.log(error);
});
With async/await:
javascript
Copy code
async function fetchDataAsync() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.log(error);
}
}
Using async/await makes asynchronous code look like synchronous code, improving readability.
82. What is the purpose of Promise.race()?
Answer:
Promise.race() accepts an iterable of promises and resolves as soon as the first promise resolves or
rejects. It "races" the promises and returns the result of the first one to settle.
Example:
javascript
Copy code
const p1 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'First'));
const p2 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'Second'));
Promise.race([p1, p2]).then(result => console.log(result)); // "First"
In this example, Promise.race() resolves as soon as p1 resolves, even though p2 takes longer.
83. Explain Object.entries() and Object.values().
Answer:
• Object.entries(): Converts an object's properties into an array of [key, value] pairs. Example:
javascript
Copy code
const obj = { a: 1, b: 2 };
const entries = Object.entries(obj); // [['a', 1], ['b', 2]]
• Object.values(): Returns an array of the object's property values. Example:
javascript
Copy code
const obj = { a: 1, b: 2 };
const values = Object.values(obj); // [1, 2]
84. How does the spread operator (...) work?

Answer:
The spread operator (...) can be used to unpack elements from arrays or objects. It can be used in
function calls, object literals, or array literals to copy, merge, or pass individual elements.
• Array Example:
javascript
Copy code
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5]; // [1, 2, 3, 4, 5]
• Object Example:
javascript
Copy code
const obj = { a: 1, b: 2 };
const newObj = { ...obj, c: 3 }; // { a: 1, b: 2, c: 3 }
The spread operator can also be used to pass individual elements of an array as arguments to a function.
85. What are tagged template literals?
Answer:
Tagged template literals allow you to customize how template literals are processed. A tag function is
used to process the template literal before returning a final result.
Example:
javascript
Copy code
function highlight(strings, ...values) {
let result = '';
strings.forEach((string, index) => {
result += string + (values[index] ? `<b>${values[index]}</b>` : '');
});
return result;
}
const name = 'Alice';
const greeting = highlight`Hello, ${name}! Welcome.`;
console.log(greeting); // "Hello, <b>Alice</b>! Welcome."
In this example, the highlight function processes the template literal and wraps the variable name with
<b> tags.
Asynchronous JavaScript Questions and Answers
86. What is a callback function?
Answer:
A callback function is a function passed as an argument to another function, which is then executed at a
later time. It is typically used for asynchronous operations to handle results once the operation
completes.
Example:
javascript
Copy code
function fetchData(callback) {
setTimeout(() => {
callback('Data received');
}, 1000);
fetchData((data) => {
console.log(data); // "Data received"
});
87. Explain the concept of promises in JavaScript.
Answer:
A Promise is an object representing the eventual completion (or failure) of an asynchronous operation. A
promise can be in one of three states:
• Pending: The initial state, before the operation completes.

• Resolved (Fulfilled): The operation completed successfully.
• Rejected: The operation failed.
Example:
javascript
Copy code
const myPromise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Operation succeeded");
} else {
reject("Operation failed");
});
myPromise.then(result => console.log(result)).catch(error => console.log(error));
88. How do you handle promise chaining?
Answer:
Promise chaining allows multiple asynchronous operations to be executed one after the other. Each
.then() in the chain returns a new promise.
Example:
javascript
Copy code
fetchData()
.then(data => {
console.log(data); // "Data fetched"
return processData(data);
})
.then(processedData => {
console.log(processedData); // "Data processed"
return saveData(processedData);
})
.then(() => {
console.log("Data saved");
})
.catch(error => {
console.log("Error:", error);
});
Each .then() processes the data from the previous one, and if any promise is rejected, the .catch() block
will handle the error.
89. What is the purpose of the fetch() API?
Answer:
The fetch() API is a modern way to make HTTP requests (GET, POST, etc.) in JavaScript. It returns a
Promise that resolves to the Response object representing the response to the request.
Example:
javascript
Copy code
fetch('https://api.example.com/data')
.then(response => response.json()) // Parse JSON response
.then(data => console.log(data)) // Handle the data
.catch(error => console.log(error)); // Handle errors
90. What are the differences between fetch and XMLHttpRequest?
Answer:
• fetch:
o Returns a Promise, making it easier to work with asynchronous code.
o Supports more modern features such as async/await and JSON parsing.
o More readable syntax for handling requests and responses.

• XMLHttpRequest:
o Older and more complex API.
o Does not use Promises, requiring callback functions for asynchronous handling.
o More verbose and difficult to handle multiple operations.
Example (fetch):
javascript
Copy code
fetch('/data')
.then(response => response.json())
.then(data => console.log(data));
Example (XMLHttpRequest):
javascript
Copy code
const xhr = new XMLHttpRequest();
xhr.open('GET', '/data', true);
xhr.onload = () => {
if (xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
};
xhr.send();
91. How does async/await work under the hood?
Answer:
Under the hood, async/await works with Promises. When an async function is called, it returns a
Promise. Inside an async function, when the await keyword is used, it pauses the function's execution
until the Promise resolves or rejects, and then continues with the resolved value or throws an error if
rejected.
1. The async function is essentially a wrapper around a promise.
2. await pauses the function execution and waits for the Promise to resolve.
3. The resolved value is returned and execution continues after the await.
Example:
javascript
Copy code
async function getData() {
const data = await fetch('https://api.example.com');
return data.json();
The async function is equivalent to the following with promises:
javascript
Copy code
function getData() {
return fetch('https://api.example.com').then(response => response.json());
92. What is the purpose of the Promise.finally() method?
Answer:
The finally() method is used to execute code after a promise has been resolved or rejected, regardless of
the outcome. It is useful for cleanup tasks, like closing connections or hiding loading indicators, after the
promise operation.
Example:
javascript
Copy code
fetch('https://api.example.com')
.catch(error => console.log(error))
.finally(() => console.log('Request completed')); // Always runs
93. What is a microtask in JavaScript?

Answer:
A microtask is a task that is queued to be executed after the currently executing script and before the
rendering phase (e.g., DOM updates). Microtasks are primarily used for promise handlers and
queueMicrotask().
Microtasks are handled in the following order:
1. The current script execution finishes.
2. All microtasks are executed (e.g., .then(), .catch(), Promise.resolve()).
3. The event loop proceeds to rendering.
94. Explain how JavaScript handles single-threaded operations.
Answer:
JavaScript operates on a single thread by using the event loop. The event loop processes events and
executes code in a queue, ensuring that only one task is processed at a time.
• JavaScript code runs synchronously in the call stack.
• Asynchronous operations (like setTimeout, fetch, and promises) are pushed into the event
queue.
• The event loop checks the call stack and moves tasks from the event queue to the stack when it's
empty.
95. How do you handle errors in asynchronous code?
Answer:
Errors in asynchronous code can be handled using:
• try...catch (with async/await):
javascript
Copy code
async function fetchData() {
try {
const response = await fetch('https://api.example.com');
const data = await response.json();
} catch (error) {
console.log('Error:', error);
}
}
• catch() (with Promises):
javascript
Copy code
fetch('https://api.example.com')
.catch(error => console.log('Error:', error));
Both methods ensure that errors from failed promises or rejected async functions can be handled
gracefully.
JavaScript and the Browser Questions and Answers
96. What is the window object in JavaScript?
Answer:
The window object represents the global environment in a web browser. It is the top-level object in the
browser's JavaScript execution environment and provides methods and properties for interacting with
the browser. It includes functions for manipulating the DOM, handling events, managing cookies, and
interacting with the browser's history, location, and more.
Example:
javascript
Copy code
window.alert("Hello!"); // Shows an alert
console.log(window.innerWidth); // Get the width of the window
97. How does localStorage differ from sessionStorage?
Answer:
• localStorage:
o Data stored in localStorage persists across browser sessions.
o It has no expiration time and remains until explicitly cleared by the user or via JavaScript.
o Data is stored per domain.

• sessionStorage:
o Data stored in sessionStorage is available only during the page session. Once the
browser or tab is closed, the data is cleared.
o It also stores data per domain but only for the current session.
Example:
javascript
Copy code
// localStorage
localStorage.setItem('username', 'Alice');
// sessionStorage
sessionStorage.setItem('sessionID', '12345');
98. What is the difference between cookies and localStorage?
Answer:
• Cookies:
o Cookies are small pieces of data (up to 4KB) stored by the browser and sent to the server
with every HTTP request.
o They have an expiration date and can be set with a specific domain, path, and secure
flags.
o Cookies are often used for tracking and session management.
• localStorage:
o localStorage can store larger amounts of data (5MB or more) than cookies.
o Data in localStorage is not automatically sent to the server with each request.
o It persists until explicitly deleted and is not tied to a specific expiration date.
99. What is the navigator object?
Answer:
The navigator object provides information about the browser, such as the browser name, version,
platform, language, and whether the user has enabled certain features like cookies or JavaScript.
Example:
javascript
Copy code
console.log(navigator.userAgent); // Get browser information
console.log(navigator.language); // Get the language of the browser
100. How do you perform DOM manipulation in JavaScript?
Answer:
DOM manipulation in JavaScript involves using methods and properties of the document object to
interact with and modify the structure of a webpage. Common operations include selecting elements,
changing content, adding/removing elements, and responding to user events.
Examples:
• Selecting an element:
javascript
Copy code
const element = document.getElementById('myElement');
• Changing content:
javascript
Copy code
element.textContent = 'New Content';
• Creating and appending elements:
javascript
Copy code
const newElement = document.createElement('div');
newElement.textContent = 'Hello, World!';
document.body.appendChild(newElement);
101. How do you use the history API in JavaScript?
Answer:
The history API allows you to interact with the browser's session history, enabling you to modify the URL
and navigate through the history stack without reloading the page. It includes methods like pushState(),
replaceState(), and go().
• pushState(): Adds a new state to the history.
• replaceState(): Replaces the current history state.
• go(): Moves forward or backward in the history.
Example:
javascript
Copy code
// Add a new history entry
history.pushState({ page: 1 }, "title 1", "?page=1");
// Replace the current entry
history.replaceState({ page: 2 }, "title 2", "?page=2");
// Go back in history
history.go(-1);
102. What is the purpose of the location object?
Answer:
The location object provides information about the current URL and allows you to manipulate it. You can
use it to navigate to different pages, reload the page, or get specific parts of the URL (e.g., hostname,
pathname).
Example:
javascript
Copy code
console.log(location.href); // Get the full URL
console.log(location.hostname); // Get the domain
location.assign('https://example.com'); // Navigate to a new URL
location.reload(); // Reload the current page

103. How does JavaScript handle browser events?
Answer:
JavaScript handles browser events using event listeners. An event listener waits for a specific event (e.g.,
click, input, load) and triggers a function when the event occurs.
• addEventListener(): Used to attach event handlers to DOM elements.
• Event types: Includes events like click, load, submit, etc.
Example:
javascript
Copy code
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
104. What is the fetch() API used for?
Answer:
The fetch() API is used to make HTTP requests in JavaScript. It returns a Promise that resolves to the
Response object, representing the response to the request. fetch() is often used for loading data from a
server asynchronously.
Example:
javascript
Copy code
fetch('https://api.example.com/data')
.then(data => console.log(data))
.catch(error => console.log('Error:', error));
105. What is the difference between synchronous and asynchronous requests?
Answer:
• Synchronous requests: The code execution waits for the request to complete before moving to
the next task. This can block the execution of other code and make the page unresponsive.
Example: (Not recommended for I/O operations)
javascript
Copy code
const data = getDataSynchronously(); // Waits for the data to return
console.log(data);
• Asynchronous requests: The code continues to run while waiting for the request to complete,
preventing the page from freezing. Asynchronous requests are commonly handled using
callbacks, promises, or async/await.
Example:
javascript
Copy code
getDataAsynchronously().then(data => {
console.log(data);
});
Interview-Focused Questions and Answers
106. Explain the Singleton design pattern in JavaScript.
Answer:
The Singleton design pattern ensures that a class has only one instance and provides a global access
point to that instance. It is commonly used for managing shared resources like configuration settings or
databases.
Example:
javascript
Copy code
const Singleton = (function () {
let instance;
function createInstance() {
return { name: "Singleton Instance" };

}
return {
getInstance: function () {
if (!instance) {
instance = createInstance();
return instance;
};
})();
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true
107. What is functional programming in JavaScript?
Answer:
Functional programming is a programming paradigm that treats computation as the evaluation of
mathematical functions, avoiding changing state and mutable data. Core principles include immutability,
pure functions, and higher-order functions.
Example:
Using a pure function:
javascript
Copy code
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
108. How would you reverse a string in JavaScript?

Answer:
You can reverse a string using the following approach:
javascript
Copy code
function reverseString(str) {
return str.split('').reverse().join('');
console.log(reverseString("hello")); // "olleh"
109. How can you remove duplicates from an array?
Answer:
Using the Set object:
javascript
Copy code
const uniqueArray = [...new Set([1, 2, 2, 3, 4, 4])];
console.log(uniqueArray); // [1, 2, 3, 4]
110. Write a function to flatten a nested array.
Answer:
javascript
Copy code
function flattenArray(arr) {
return arr.flat(Infinity);
console.log(flattenArray([1, [2, [3, [4]]]])); // [1, 2, 3, 4]
111. How do you check if a string is a palindrome?

Answer:
A palindrome reads the same backward as forward.
javascript
Copy code
function isPalindrome(str) {
const reversed = str.split('').reverse().join('');
return str === reversed;
console.log(isPalindrome("madam")); // true
console.log(isPalindrome("hello")); // false
112. Explain how to debounce a function.
Answer:
Debouncing ensures that a function is not called repeatedly within a short time. It delays the function
execution until after a specified wait time has elapsed.
Example:
javascript
Copy code
function debounce(func, delay) {
let timeout;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
const log = debounce(() => console.log("Debounced!"), 300);
log();
113. Write a JavaScript function to find the factorial of a number.
Answer:
javascript
Copy code
function factorial(n) {
if (n === 0 || n === 1) return 1;
return n * factorial(n - 1);
console.log(factorial(5)); // 120
114. How would you find the maximum occurring character in a string?
Answer:
javascript
Copy code
function maxChar(str) {
const charMap = {};
let max = 0, maxChar = '';
for (let char of str) {
charMap[char] = (charMap[char] || 0) + 1;
if (charMap[char] > max) {
max = charMap[char];
maxChar = char;
return maxChar;
}
console.log(maxChar("javascript")); // "a"
115. How would you deep clone an object?
Answer:
Using JSON.parse and JSON.stringify:
javascript
Copy code
const obj = { a: 1, b: { c: 2 } };
const deepClone = JSON.parse(JSON.stringify(obj));
Using structuredClone (modern browsers):
javascript
Copy code
const deepClone = structuredClone(obj);
116. How do you merge two arrays in JavaScript?
Answer:
Using the spread operator:
javascript
Copy code
const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4]
117. How can you shuffle the elements of an array?
Answer:
javascript
Copy code
function shuffleArray(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
return arr;
console.log(shuffleArray([1, 2, 3, 4, 5]));
118. What is the difference between .map() and .forEach()?
Answer:
• .map(): Returns a new array with the results of applying a function to each element.
• .forEach(): Executes a function for each element but does not return a new array.
Example:
javascript
Copy code
const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2); // [2, 4, 6]
arr.forEach(x => console.log(x * 2)); // Logs 2, 4, 6
119. How do you implement a custom map() function?
Answer:
javascript
Copy code
Array.prototype.customMap = function (callback) {
const result = [];
for (let i = 0; i < this.length; i++) {
result.push(callback(this[i], i, this));
}
return result;
};
const arr = [1, 2, 3];
console.log(arr.customMap(x => x * 2)); // [2, 4, 6]
120. Write a function to check if two strings are anagrams.
Answer:
javascript
Copy code
function areAnagrams(str1, str2) {
const format = str => str.replace(/\s+/g, '').toLowerCase().split('').sort().join('');
return format(str1) === format(str2);
console.log(areAnagrams("listen", "silent")); // true
console.log(areAnagrams("hello", "world")); // false
Miscellaneous Questions and Answers
121. What are promises, and why do we need them?
Answer:
Promises in JavaScript represent the eventual completion (or failure) of an asynchronous operation and
its resulting value. They are used to avoid callback hell and make code more readable.
Example:
javascript
Copy code
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Success!"), 1000);

});
promise.then(value => console.log(value)).catch(error => console.error(error));
122. Explain the difference between then and catch in promises.
Answer:
• .then() is used to handle the successful resolution of a promise.
• .catch() is used to handle errors or rejected promises.
javascript
Copy code
promise
.then(value => console.log("Resolved:", value))
.catch(error => console.error("Rejected:", error));
123. What is strict mode in JavaScript?
Answer:
"use strict"; enables strict mode, which helps catch common coding errors and unsafe actions (like using
undeclared variables).
Example:
javascript
Copy code
"use strict";
x = 10; // Throws an error (x is not declared)
124. What is tail call optimization?
Answer:
Tail call optimization refers to the process where the JavaScript engine optimizes a function call made in
the tail position (last action of a function) to prevent stack growth, enabling recursive functions to run
efficiently.
125. Explain what a polyfill is.

Answer:
A polyfill is code that provides modern functionality on older browsers that do not support it.
Example: Polyfill for Array.prototype.includes:
javascript
Copy code
if (!Array.prototype.includes) {
Array.prototype.includes = function (value) {
return this.indexOf(value) !== -1;
};
126. What is a transpiler in JavaScript?
Answer:
A transpiler converts modern JavaScript code (e.g., ES6+) into backward-compatible code for older
browsers. Examples include Babel and TypeScript.
127. What are the limitations of JavaScript?
Answer:
• Single-threaded nature makes it prone to blocking.
• Lack of type safety (though TypeScript mitigates this).
• Security issues like XSS (Cross-Site Scripting).
• Browser dependency for execution.
128. How is error handling done in JavaScript?
Answer:
Using try, catch, and finally blocks:
javascript
Copy code
try {
throw new Error("Something went wrong!");

} catch (error) {
console.error(error.message);
} finally {
console.log("Cleanup actions");
129. What is the difference between innerHTML and outerHTML?
Answer:
• innerHTML modifies the content inside an element.
• outerHTML replaces the element itself along with its content.
130. How do you measure performance in JavaScript?
Answer:
Using the Performance API:
javascript
Copy code
const start = performance.now();
// Perform task
const end = performance.now();
console.log(`Execution time: ${end - start} ms`);
Extra Questions and Answers
131. What is AJAX, and how does it work?
Answer:
AJAX (Asynchronous JavaScript and XML) allows web pages to update asynchronously without reloading
the entire page. It uses XMLHttpRequest or the fetch() API.
132. Explain the concept of reflow and repaint.
Answer:
• Reflow: When the layout of a web page changes (e.g., adding elements).
• Repaint: When visual properties like color change without affecting layout.
133. How do you use the console API effectively?
Answer:
Using various methods:
javascript
Copy code
console.log("Log");
console.warn("Warning");
console.error("Error");
console.table({ name: "Alice", age: 25 });
console.time("Timer");
// Code
console.timeEnd("Timer");
134. What is a service worker in JavaScript?
Answer:
A Service Worker is a script that runs in the background, independent of the web page, enabling
features like offline caching and push notifications.
135. How does async differ from defer in script tags?
Answer:
• async: Executes the script as soon as it is downloaded, potentially blocking rendering.
• defer: Executes the script after the HTML document has been parsed.
136. What are the stages of the JavaScript parsing process?
Answer:
1. Lexical analysis
2. Syntax analysis
3. Bytecode generation
4. Execution
137. What is the difference between document.ready and window.onload?
Answer:
• document.ready fires when the DOM is fully loaded.
• window.onload fires when all resources (images, scripts) are loaded.
138. How do you debug JavaScript code effectively?
Answer:
• Use browser dev tools (breakpoints, step-through debugging).
• Use console.log for quick insights.
• Employ linters like ESLint.
139. What are WebSockets in JavaScript?
Answer:
WebSockets provide full-duplex communication between the browser and server over a persistent
connection.
140. What is the purpose of the new keyword?
Answer:
It creates an instance of an object from a constructor function.
141. What are named exports vs default exports?
Answer:
• Named Exports: Export multiple values by name.
• Default Exports: Export a single default value.
142. How does destructuring help in function parameters?

Answer:
It extracts specific properties or values:
javascript
Copy code
function greet({ name, age }) {
console.log(`Hello, ${name}. Age: ${age}`);
greet({ name: "Alice", age: 25 });
143. What is the eval() function, and why is it discouraged?
Answer:
The eval() function executes strings as code. It's discouraged due to performance and security risks (e.g.,
code injection).
144. How do you use Intl for formatting?
Answer:
javascript
Copy code
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(formatter.format(123456)); // $123,456.00
145. What is BigInt in JavaScript?
Answer:
BigInt is a data type for integers larger than Number.MAX_SAFE_INTEGER.
javascript
Copy code
const bigInt = 123456789012345678901234567890n;
146. How do you handle dates and times in JavaScript?

Answer:
Using the Date object or libraries like moment.js and date-fns.
javascript
Copy code
const now = new Date();
console.log(now.toISOString());
147. What are JavaScript polyfills? Provide examples.
Answer:
Polyfills are fallback scripts for unsupported features. Example:
javascript
Copy code
if (!String.prototype.includes) {
String.prototype.includes = function (search) {
return this.indexOf(search) !== -1;
};
148. What are the differences between npm and yarn?
Answer:
Both are package managers for JavaScript. Differences:
• Speed: Yarn is generally faster due to parallel installation.
• Lockfiles: Yarn uses yarn.lock; npm uses package-lock.json.
149. What is event delegation in JavaScript?
Answer:
Event delegation allows a parent element to handle events for its child elements using event bubbling.
150. Explain lazy loading in JavaScript.

Answer:
Lazy loading defers the loading of resources (like images or scripts) until they are needed, improving
performance.
html
Copy code
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">

Basic JavaScript

Uploaded by

Basic JavaScript

Uploaded by

Basic JavaScript

1. What is JavaScript? How is it different from Java?

2. What are the data types in JavaScript?

3. Explain the difference between var, let, and const.

4. What is undefined vs null in JavaScript?

5. What is the purpose of isNaN function?

6. What are JavaScript's primitive data types?

7. Explain the difference between == and ===.

8. What are global variables? How are they declared?

9. What is a closure in JavaScript?

10. Explain the use of typeof operator.

11. What is an Immediately Invoked Function Expression (IIFE)?

12. What are template literals? Give an example.

13. How is JavaScript dynamically typed?

14. What is the difference between call(), apply(), and bind()?

15. What is an event in JavaScript?

16. What is event bubbling and event capturing?

18. How does the this keyword behave in JavaScript?

19. What is the difference between undefined and not defined?

20. What is a JavaScript object?

21. Explain prototypal inheritance.

22. How does JavaScript handle asynchronous operations?

23. What is the purpose of Promise in JavaScript?

24. What is the difference between for...in and for...of?

25. Explain the concept of "hoisting."

26. What is the event loop in JavaScript?

29. What are the different ways to clone an object in JavaScript?

30. Explain JSON.stringify() and JSON.parse().

32. How does destructuring work in JavaScript?

34. What is the purpose of the Symbol type?

35. What is the difference between synchronous and asynchronous code?

36. How do you create and trigger custom events in JavaScript?

37. What is the purpose of the async/await syntax?

38. Explain the concept of currying in JavaScript.

39. What are default parameters in JavaScript functions?

40. How do spread and rest operators work in JavaScript?

41. What is the DOM in JavaScript?

42. How do you select elements in the DOM?

43. What is the difference between innerHTML, innerText, and textContent?

44. How do you create, update, and remove DOM elements?

45. Explain the use of addEventListener.

46. What is the difference between stopPropagation and preventDefault?

47. How do you traverse the DOM using JavaScript?

48. What are dataset attributes in JavaScript?

49. What is the difference between classList.add and className?

50. How do you handle form events in JavaScript?

51. What is the difference between Object.freeze and Object.seal?

53. What are Web Workers in JavaScript?

54. How does the reduce() function work?

55. What is a WeakMap and WeakSet in JavaScript?

56. What is the purpose of Object.create()?

57. How does the garbage collector work in JavaScript?

58. Explain the concept of memoization.

59. How do you handle exceptions in JavaScript?

60. What are dynamic imports in JavaScript?

61. What is the difference between mutable and immutable data?

62. How do JavaScript timers (setTimeout and setInterval) work?

63. Explain the concept of the "Temporal Dead Zone."

64. How does JavaScript handle recursion?

65. What are Proxy objects in JavaScript?

66. What is the use of the Reflect API?

67. What are decorators in JavaScript?

68. How do you optimize JavaScript performance?

69. Explain how event delegation works.

70. What are iterators and generators in JavaScript?

71. What is the purpose of let and const introduced in ES6?

72. Explain the concept of destructuring in ES6.

73. What are default function parameters?

74. How do template literals work?

75. What are arrow functions?

76. Explain block-scoping in ES6.

77. What is a Set in ES6?

78. How do you use for...of loop?

80. What is the use of the Promise.all() method?

81. How do async/await improve readability of asynchronous code?

82. What is the purpose of Promise.race()?