JavaScript Interview Questions

35 Most Asked Real Interview Questions

Q1. What is the difference between var, let, and const?

Answer:
var is function-scoped and can be redeclared, which may lead to unexpected bugs. let is
block-scoped and allows reassignment but not redeclaration in the same scope. const is also
block-scoped but its reference cannot be reassigned after initialization, making it the preferred
choice for constants.

Q2. What is the difference between == and === in JavaScript?

Answer:
The == operator performs type coercion before comparing values, which may produce unexpected
results. The === operator compares both value and data type without conversion. In production
code, === is recommended because it provides predictable comparisons.

Q3. What is hoisting in JavaScript?

Answer:
Hoisting is JavaScript's behavior of moving declarations to the top of their scope before execution.
Function declarations are fully hoisted, while variables declared with var are initialized as
undefined. let and const are hoisted but remain inaccessible until initialized.

Q4. What is the Temporal Dead Zone?

Answer:
The Temporal Dead Zone (TDZ) is the period between entering a block and initializing a let or const
variable. Accessing the variable during this period throws a ReferenceError. TDZ helps developers
avoid using variables before they are properly initialized.

Q5. What are the different data types in JavaScript?

Answer:
JavaScript has primitive types such as string, number, bigint, boolean, undefined, null, and symbol.
It also has one non-primitive type: object. Arrays, functions, and dates are all specialized object
types.

Q6. What is the difference between null and undefined?

Answer:
undefined means a variable has been declared but no value has been assigned. null is an
intentional assignment that represents the absence of a value. Although both indicate missing
values, they are used in different situations.

Q7. What is NaN and how do you check if a value is NaN?

Answer:
NaN stands for 'Not a Number' and represents an invalid numeric result. It commonly appears when
invalid arithmetic operations are performed. The recommended way to check it is
[Link](value), as it avoids unwanted type coercion.

Q8. What is type coercion in JavaScript?

Answer:
Type coercion is the automatic conversion of one data type into another during operations or
comparisons. JavaScript performs implicit coercion in many expressions, which can sometimes
produce surprising results. Explicit conversion using Number(), String(), or Boolean() is usually
clearer.

Q9. What is the difference between function declaration and function

expression?
Answer:
A function declaration is hoisted completely and can be called before it appears in the code. A
function expression is assigned to a variable and follows normal variable initialization rules.
Function expressions are commonly used with callbacks and higher-order functions.

Q10. What is an arrow function and how is it different from a regular

function?
Answer:
Arrow functions provide shorter syntax and automatically inherit this from the surrounding scope.
Unlike regular functions, they cannot be used as constructors and do not have their own arguments
object. They are widely used for callbacks and functional programming.

Q11. What is the difference between this in a regular function vs an arrow

function?
Answer:
A regular function gets its own this based on how it is called. An arrow function captures this
lexically from its enclosing scope. This makes arrow functions especially useful inside callbacks
where preserving context is important.

Q12. What is a closure in JavaScript? Give an example.

Answer:
A closure allows an inner function to access variables from its outer function even after the outer
function has finished execution. Closures are commonly used for data privacy, function factories,
and maintaining state. Example: function outer(){ let count=0; return ()=>++count; }

Q13. What is the difference between global scope, function scope, and block
scope?
Answer:
Global scope is accessible throughout the application. Function scope limits access to variables
declared inside a function. Block scope applies to variables declared with let and const inside
blocks such as if statements and loops.

Q14. What is the purpose of bind(), call(), and apply() methods?

Answer:
These methods control the value of this during function execution. call() invokes a function
immediately with individual arguments, apply() accepts arguments as an array, and bind() returns a
new function with this permanently bound for later execution.

Q15. What is the difference between synchronous and asynchronous code

execution?
Answer:
Synchronous code executes one statement at a time and blocks subsequent execution until
completion. Asynchronous code allows other tasks to continue while waiting for operations such as
API calls or timers. JavaScript achieves this using callbacks, promises, async/await, and the event
loop.
 JavaScript Interview Questions
35 Most Asked Real Interview Questions

Q16. What is a callback function?

Answer:
A callback function is a function passed as an argument to another function and executed later
when a task completes. Callbacks are commonly used for asynchronous operations such as API
calls, timers, and event handling. Although useful, deeply nested callbacks can make code difficult
to read and maintain.

Q17. What is callback hell and how do you avoid it?

Answer:
Callback hell occurs when multiple asynchronous callbacks are nested inside one another, creating
code that is difficult to understand and debug. It can be avoided by using Promises, async/await,
modular functions, or libraries that simplify asynchronous flow.

Q18. What is a Promise in JavaScript?

Answer:
A Promise represents the eventual result of an asynchronous operation. Instead of relying on
nested callbacks, it provides a cleaner way to handle success and failure using then(), catch(), and
finally(). Promises improve code readability and maintainability.

Q19. What are the different states of a Promise?

Answer:
A Promise has three states: Pending, Fulfilled, and Rejected. It starts in the Pending state and
eventually becomes either Fulfilled with a result or Rejected with an error. Once settled, its state
cannot change again.

Q20. What is the difference between [Link]() and [Link]()?

Answer:
[Link]() waits for all promises to complete successfully and fails immediately if any promise is
rejected. [Link]() returns the result of the first promise that settles, whether fulfilled or
rejected. Both are useful for coordinating multiple asynchronous operations.

Q21. What is async/await and how does it simplify working with Promises?
Answer:
The async keyword allows a function to return a Promise automatically, while await pauses
execution until a Promise resolves. This makes asynchronous code look similar to synchronous
code, reducing callback nesting and improving readability.

Q22. What is [Link]() and how is it different from [Link]()?

Answer:
[Link]() prevents adding, removing, or modifying object properties, making the object
completely immutable. [Link]() prevents adding or removing properties but still allows
modification of existing property values if they are writable.

Q23. What is destructuring in JavaScript?

Answer:
Destructuring allows values from arrays or properties from objects to be unpacked into individual
variables. It reduces repetitive code and improves readability, especially when working with API
responses and configuration objects.

Q24. What is the spread operator and how is it used?

Answer:
The spread operator (...) expands arrays or objects into individual elements or properties. It is
commonly used for copying arrays, merging objects, and passing multiple arguments to functions
without modifying the original data.

Q25. What is the difference between map(), filter(), and reduce()?

Answer:
map() transforms every element and returns a new array. filter() returns only elements that satisfy a
condition. reduce() combines all elements into a single value such as a sum, object, or grouped
result.

Q26. What is the difference between shallow copy and deep copy?
Answer:
A shallow copy duplicates only the first level of an object, so nested objects remain shared. A deep
copy duplicates every nested object, creating a completely independent copy. structuredClone() is
a common modern approach for deep copying.

Q27. What is the difference between for...in and for...of loops?

Answer:
for...in iterates over object property names or array indexes. for...of iterates over iterable values
such as arrays, strings, maps, and sets. for...of is generally preferred when working with array
elements.

Q28. What is the Event Loop in JavaScript?

Answer:
The Event Loop continuously checks whether the Call Stack is empty. When it is, pending tasks
from the task queues are moved to the stack for execution. This mechanism enables JavaScript to
perform asynchronous operations despite being single-threaded.

Q29. What is the difference between the call stack and the callback queue?
Answer:
The Call Stack executes synchronous function calls in LIFO order. The Callback Queue stores
completed asynchronous callbacks until the Event Loop moves them to the Call Stack. Together
they coordinate synchronous and asynchronous execution.

Q30. What is the difference between microtasks and macrotasks?

Answer:
Microtasks include Promise callbacks and queueMicrotask(), while macrotasks include
setTimeout(), setInterval(), and DOM events. The Event Loop always executes all pending
microtasks before processing the next macrotask.

Q31. What is event bubbling and event capturing?

Answer:
Event bubbling propagates an event from the target element upward to its ancestors. Event
capturing travels from the outermost ancestor down to the target element. Developers can choose
the required phase when registering event listeners.

Q32. What is event delegation and why is it used?

Answer:
Event delegation attaches one event listener to a common parent instead of multiple child
elements. It relies on event bubbling to detect the actual target, improving performance and
supporting dynamically added elements.

Q33. What is the difference between preventDefault() and stopPropagation()?

Answer:
preventDefault() stops the browser's default behavior, such as form submission or link navigation.
stopPropagation() prevents the event from propagating to parent elements. They solve different
problems and are often used together.

Q34. What is the difference between an arrow function's implicit and explicit
return?
Answer:
An arrow function with an implicit return automatically returns the expression without using the
return keyword. Explicit return requires curly braces and the return statement. Implicit return is
useful for short expressions, while explicit return is preferred for complex logic.

Q35. What is strict mode ('use strict') in JavaScript and why is it used?
Answer:
Strict mode enables a stricter parsing and error-handling mode in JavaScript. It prevents common
mistakes such as creating undeclared variables, makes silent errors visible, and encourages writing
safer, more maintainable code.