Basics of JavaScript

1. What is JavaScript?
a. JavaScript is a high-level, interpreted programming language primarily used
for client-side web development. It can also be used server-side (e.g.,
Node.js).
2. What are the data types in JavaScript?
a. JavaScript has 7 primitive data types: undefined, null, boolean, number,
string, symbol, and bigint. It also has object as a non-primitive data type.
3. What is the difference between var, let, and const?
a. var: Function-scoped and can be re-declared and updated.
b. let: Block-scoped and can be updated but not re-declared.
c. const: Block-scoped and cannot be updated or re-declared.
4. What is the use of strict mode in JavaScript?
a. strict mode helps catch common coding mistakes and prevents the use of
potentially problematic features (e.g., assignments to undeclared variables).
5. Explain type coercion in JavaScript.
a. Type coercion is the automatic or implicit conversion of values from one type
to another (e.g., adding a number to a string results in string concatenation).
6. What are undefined and null?
a. undefined: A variable that has been declared but not assigned a value.
b. null: A value representing the intentional absence of any object value.
7. What is a closure in JavaScript?
a. A closure is a function that has access to its own scope, the outer function’s
scope, and the global scope.
8. What is hoisting in JavaScript?
a. Hoisting refers to JavaScript’s behavior of moving variable and function
declarations to the top of their containing scope during compile phase.
9. Explain the difference between == and ===.
a. == (loose equality) compares values after type conversion.
b. === (strict equality) compares values and types without type conversion.
10. What is the purpose of the this keyword?
• this refers to the current context or object on which a method is being invoked.

Functions and Objects

11. What is a function expression in JavaScript?

• A function expression is when a function is assigned to a variable, like const greet
= function() {}.
12. What are arrow functions and how do they differ from regular functions?
• Arrow functions are a more concise way to write functions. They do not have their
own this value; they inherit it from the surrounding lexical scope.
13. What is a callback function?
• A callback function is a function that is passed as an argument to another function
and is executed when that function completes.
14. What is an IIFE (Immediately Invoked Function Expression)?
• An IIFE is a function expression that is executed immediately after its creation.
15. What are higher-order functions in JavaScript?
• Higher-order functions are functions that take one or more functions as arguments
or return a function as a result.
16. What is the bind() method?
• bind() creates a new function that, when called, has its this value set to the
provided value.
17. What is call() and apply() in JavaScript?
• call() and apply() are methods that allow you to call a function with a specified
this value and arguments. apply() takes an array of arguments, while call()
takes individual arguments.
18. What are JavaScript prototypes?
• Every JavaScript object has a prototype, which is another object from which it can
inherit properties and methods.
19. What is the difference between null and undefined?
• undefined is the absence of a value or uninitialized variable, while null is the
intentional absence of an object.
20. What are closures used for?
• Closures are used to preserve the state of variables in an enclosing scope, which is
useful in situations like data privacy, function factories, etc.

Asynchronous JavaScript

21. What is the event loop in JavaScript?

• The event loop is a mechanism that allows JavaScript to perform non-blocking
operations by using callbacks, promises, and async/await.
22. What is the difference between synchronous and asynchronous code?
• Synchronous code is executed line by line, while asynchronous code allows other
tasks to run while waiting for operations like I/O to finish.
23. What are Promises in JavaScript?
• A Promise is an object representing the eventual completion or failure of an
asynchronous operation.
24. What is the async and await keywords in JavaScript?
• async is used to define a function that returns a Promise, and await is used to wait
for a Promise to resolve.
25. What is the setTimeout() function?
• setTimeout() is a function that sets a timer to execute a function or block of code
after a specified amount of time.
26. What is the setInterval() function?
• setInterval() repeatedly executes a function or block of code at a fixed interval.
27. What is the difference between setTimeout() and setInterval()?
• setTimeout() runs once after the delay, while setInterval() runs repeatedly at
specified intervals.
28. What is the difference between a Promise and a callback?
• A Promise represents the eventual result of an asynchronous operation, while a
callback is simply a function passed to another function to be executed later.
29. What is Promise.all()?
• Promise.all() takes an array of Promises and returns a new Promise that resolves
when all input Promises have resolved.
30. What is the finally() method in Promises?
• The finally() method is called after a Promise is settled (resolved or rejected), and
is useful for cleanup operations.

Advanced JavaScript Concepts

31. What is the difference between Object.freeze() and Object.seal()?

• Object.freeze() prevents changes to object properties and makes the object
immutable, while Object.seal() prevents adding or removing properties but
allows modifying existing ones.
32. What is the new keyword in JavaScript?
• The new keyword creates a new instance of an object, invoking the constructor
function and setting up the prototype chain.
33. What are JavaScript modules?
• JavaScript modules allow for splitting code into smaller files that can be imported
and exported, making it easier to manage large codebases.
34. What is the spread operator in JavaScript?
• The spread operator (...) allows you to unpack elements from arrays or objects into
individual elements or properties.
35. What is the rest operator in JavaScript?
• The rest operator (...) collects all remaining arguments or elements into an array
or object.
36. What are JavaScript generators?
• A generator is a function that can be paused and resumed, and can yield multiple
values over time, making it useful for handling asynchronous code.
37. What is the difference between call(), apply(), and bind()?
• call() and apply() invoke a function immediately with a specific this context,
while bind() returns a new function with a specific this context.
38. What are promises and how do they work?
• Promises represent the eventual completion (or failure) of an asynchronous
operation and allow chaining of subsequent actions.
39. What is localStorage and sessionStorage?
• Both are Web APIs that allow storing data on the client’s browser. localStorage
persists until manually cleared, while sessionStorage is cleared when the page
session ends.
40. What is the Symbol type in JavaScript?
• Symbol is a primitive data type used to create unique, immutable identifiers for
object properties.

DOM and Browser

41. What is the Document Object Model (DOM)?

• The DOM represents the page structure as a tree of objects and allows JavaScript to
manipulate the content, structure, and style of web pages.
42. What is the difference between getElementById() and querySelector()?
• getElementById() returns an element with a specific ID, while querySelector()
returns the first matching element using any CSS selector.
43. What is event delegation in JavaScript?
• Event delegation is a technique where a parent element listens for events on its child
elements, reducing the number of event listeners in the DOM.
44. What is the purpose of the addEventListener() method?
• addEventListener() is used to attach an event handler to a specified element
without overwriting existing event listeners.
45. What is the difference between preventDefault() and stopPropagation()?
• preventDefault() prevents the default behavior of an event (e.g., preventing form
submission), while stopPropagation() stops the event from propagating through
the DOM.

Performance and Optimization

46. How can you optimize the performance of a JavaScript application?

• Use code splitting, lazy loading, debounce and throttle events, avoid memory leaks,
minimize DOM manipulation, and reduce the size of assets.
47. What is debouncing in JavaScript?
• Debouncing is a technique used to limit the number of times a function is executed
in response to an event (e.g., resize or scroll).
48. What is throttling in JavaScript?
• Throttling is the technique of limiting the execution of a function to once per specified
time interval.
49. How can you prevent memory leaks in JavaScript?
• Free up memory by removing unused references, clearing timers, and using tools like
the Chrome DevTools memory profiler.
50. How do you optimize DOM manipulation?
• Minimize DOM updates, batch changes together, and use requestAnimationFrame
for animations to ensure smoother rendering.
Miscellaneous

51. What is a JavaScript Singleton pattern?

• A Singleton pattern restricts the instantiation of a class to one object, ensuring that
only one instance of the object exists.
52. What is the difference between forEach() and map()?
• forEach() iterates over an array and does not return anything, while map() creates
a new array populated with the results of applying a function to each element.
53. What is memoization?
• Memoization is an optimization technique where the results of expensive function
calls are cached for later use.
54. What are the advantages and disadvantages of using JavaScript frameworks
(React, Angular, Vue)?
• Advantages include faster development, built-in features, and community support.
Disadvantages include learning curve and potential performance overhead.
55. What are the features of ECMAScript 6 (ES6)?
• ES6 introduced features like let, const, arrow functions, template literals,
destructuring, promises, classes, modules, and more.
56. What is the difference between a for...in loop and a for...of loop?
• for...in loops over object properties, while for...of loops over iterable objects
like arrays.
57. What is a Set in JavaScript?
• A Set is a collection of unique values. It is similar to an array but does not allow
duplicate values.
58. What is a Map in JavaScript?
• A Map is an object that holds key-value pairs, and it can accept any type of value as a
key.
59. What is destructuring in JavaScript?
• Destructuring is a syntax that allows unpacking values from arrays or objects into
distinct variables.
60. What is the concat() method?
• concat() is used to merge two or more arrays into a new array.

More Questions on Basic JavaScript Concepts

61. What is the difference between a for...in and a for...of loop in JavaScript?
• for...in is used to loop through the keys of an object, while for...of is used to
loop through iterable objects like arrays, strings, etc.
62. What is the difference between Object.create() and new in JavaScript?
• Object.create() creates a new object with the specified prototype object and
properties, while new creates an instance of a function and sets its prototype to the
function’s prototype.
63. What are the different ways to define a function in JavaScript?
• Functions can be defined as function declarations, function expressions, and arrow
functions.
64. What is the purpose of setImmediate() in JavaScript?
• setImmediate() is used to execute a function after the current event loop cycle,
and is primarily used in Node.js.
65. What is the difference between call(), apply(), and bind()?
• call() and apply() invoke a function immediately with a specified this context,
while bind() creates a new function that, when invoked, has a specified this
context.
66. What is the difference between Object.keys() and Object.values()?
• Object.keys() returns an array of an object's property names, while
Object.values() returns an array of the object's property values.
67. How would you clone an object in JavaScript?
• You can clone an object using Object.assign(), the spread operator
({...object}), or deep cloning techniques like
JSON.parse(JSON.stringify(object)).
68. What is the typeof operator in JavaScript?
• typeof is used to determine the type of a variable or expression. It returns a string
representing the type of the operand.
69. What are the differences between null, undefined, and NaN in JavaScript?
• null is an intentionally assigned empty value, undefined represents a variable that
has been declared but not assigned a value, and NaN represents a computation that
cannot result in a valid number.
70. What is the in operator in JavaScript?
• The in operator checks whether a property exists in an object or its prototype chain.

Intermediate JavaScript Concepts

71. What is a higher-order function?

• A higher-order function is a function that either accepts another function as an
argument or returns a function as a result.
72. What are template literals in JavaScript?
• Template literals allow you to embed expressions inside string literals, using ${} for
interpolation, and support multi-line strings.
73. What is the purpose of the delete operator in JavaScript?
• The delete operator removes a property from an object, but does not affect the
object itself or its prototype.
74. What is a WeakMap in JavaScript?
• A WeakMap is a collection of key-value pairs where keys must be objects, and the
values can be any value. The references to the keys are weak, meaning they do not
prevent garbage collection.
75. What is the purpose of JSON.parse() and JSON.stringify()?
• JSON.parse() converts a JSON string into a JavaScript object, and
JSON.stringify() converts a JavaScript object into a JSON string.
76. What is destructuring assignment in JavaScript?
• Destructuring assignment allows you to unpack values from arrays or properties from
objects into distinct variables.
77. What is the difference between == and === in JavaScript?
• == performs type coercion and checks for equality in value, while === checks for
equality in both value and type.
78. What is a callback hell and how do you avoid it?
• Callback hell occurs when multiple nested callbacks make code difficult to read and
maintain. You can avoid it by using Promises, async/await, or modularizing your code.
79. What is memoization?
• Memoization is a technique of storing the results of expensive function calls and
returning the cached result when the same inputs occur again.
80. What are immediately invoked function expressions (IIFE)?
• An IIFE is a function that is defined and immediately executed, often used for scoping
variables to avoid polluting the global namespace.

Advanced JavaScript Concepts

81. What is a JavaScript module?

• A JavaScript module is a self-contained piece of code that can export values
(variables, functions, classes) for use in other modules via import and export
statements.
82. Explain the concept of the event loop in JavaScript.
• The event loop allows asynchronous code to be executed in a non-blocking manner
by constantly checking the message queue and executing events once the call stack
is empty.
83. What are Promises in JavaScript?
• Promises represent the eventual completion or failure of an asynchronous operation
and allow chaining of subsequent actions based on the result.
84. What is the purpose of async and await in JavaScript?
• async is used to define a function that always returns a Promise, while await is used
to pause the execution of an async function until a Promise is resolved or rejected.
85. What is the purpose of the finally() method in Promises?
• The finally() method is used to execute code once a Promise has settled (whether
it was resolved or rejected), typically used for cleanup operations.
86. What is the difference between setTimeout() and setInterval()?
• setTimeout() is used to execute a function once after a specified delay, while
setInterval() executes a function repeatedly at a set interval.
87. What is the bind() method in JavaScript?
• bind() creates a new function that, when called, has its this value set to a specific
value.
88. What are JavaScript closures used for?
• Closures allow functions to remember and access variables from their lexical scope
even when the function is executed outside that scope.
89. How do you implement inheritance in JavaScript?
• Inheritance in JavaScript can be implemented using prototypes, or with ES6 classes
that provide a extends keyword for class-based inheritance.
90. What are the differences between Object.freeze() and Object.seal()?
• Object.freeze() makes an object immutable, preventing modification of its
properties, while Object.seal() prevents adding or removing properties but allows
modifications to existing ones.

JavaScript Best Practices

91. What are JavaScript closures used for?

• Closures are useful for creating private variables, function factories, and maintaining
state across multiple invocations of a function.
92. What is the purpose of the use strict directive?
• The "use strict" directive enforces stricter parsing and error handling in your
JavaScript code, helping catch common coding mistakes and improving security.
93. What is event delegation and why is it important?
• Event delegation involves attaching a single event listener to a parent element to
handle events on child elements, improving performance and simplifying code.
94. What is the purpose of the const keyword in JavaScript?
• const is used to define variables that should not be reassigned, though it does not
make the value immutable (e.g., objects and arrays can still be modified).
95. How can you avoid global variable leakage in JavaScript?
• You can avoid global variable leakage by using function scopes, let, const, or
immediately invoked function expressions (IIFE).
96. What is the difference between synchronous and asynchronous code in
JavaScript?
• Synchronous code runs sequentially, blocking the execution of further code, while
asynchronous code allows other operations to run while waiting for tasks (e.g.,
network requests) to complete.
97. How would you explain the term "hoisting" in JavaScript?
• Hoisting refers to the behavior where variable and function declarations are moved
to the top of their scope during compilation, making variables and functions
accessible before they are declared.
98. What is the this keyword in JavaScript?
• this refers to the context in which the function is executed, which can vary
depending on how the function is called (e.g., in global context, method, or event
handler).
99. What is the difference between slice() and splice() in JavaScript?
• slice() returns a shallow copy of a portion of an array without modifying the original
array, while splice() changes the original array by adding/removing elements.
100. What are the benefits of using JavaScript ES6 features?
• ES6 introduced several new features like arrow functions, template literals,
destructuring, promises, classes, modules, and more, which improve code
readability, maintainability, and performance.