JavaScript Interview Questions

1. What is the difference between var, let, and const in JavaScript?

Answer:

• var: Function-scoped or globally-scoped. Can be re-declared and updated.

• let: Block-scoped. Can be updated but not re-declared within the same scope.
• const: Block-scoped. Cannot be updated or re-declared.

2. What is a closure in JavaScript?

Answer:

A closure is a function that retains access to variables from its lexical scope even after
the function that created those variables has finished executing.

3. Explain the concept of "hoisting" in JavaScript.

Answer:

Hoisting is JavaScript's default behavior of moving all declarations (var, function, etc.)
to the top of their scope during compilation. Variables declared with var are hoisted and
initialized with undefined, while let and const are hoisted but remain uninitialized.

4. What is the difference between null and undefined?

Answer:

• null is an explicit assignment indicating the absence of a value.

• undefined is the default value for uninitialized variables or parameters.

5. What are JavaScript data types?

Answer:

JavaScript has primitive types (String, Number, Boolean, Undefined, Null, Symbol,
BigInt) and reference types (Object, Array, Function, Date, etc.).

6. What is the purpose of the this keyword in JavaScript?

Answer:

this refers to the context in which a function is called. It could refer to the global object
(window in browsers), an object instance, or undefined in strict mode.
7. What are promises in JavaScript?

Answer:

A Promise is an object representing the eventual completion (or failure) of an

asynchronous operation. Promises have three states: Pending, Resolved (Fulfilled), and
Rejected.

8. Explain the difference between == and === in JavaScript.

Answer:

• == is a loose equality operator, which performs type coercion.

• === is a strict equality operator, which checks both value and type without type
coercion.

9. What is event delegation in JavaScript?

Answer:

Event delegation is a technique where you attach a single event listener to a parent
element to handle events for multiple child elements, using event bubbling.

10. What is a JavaScript callback function?

Answer:

A callback function is a function passed as an argument to another function and is

executed after the completion of some operation.

11. What is the difference between slice() and splice() in JavaScript?

Answer:

• slice() creates a shallow copy of a portion of an array without modifying the

original array.
• splice() modifies the original array by adding/removing elements.

12. What is the bind() method in JavaScript?

Answer:

bind() creates a new function that, when called, has its this keyword set to the provided
value, and it can be pre-configured with arguments.

13. Explain the concept of "prototype" in JavaScript.

Answer:

Every JavaScript object has a prototype, which is another object from which it can
inherit properties and methods. It enables inheritance in JavaScript.

14. What are arrow functions, and how are they different from regular functions?

Answer:

Arrow functions are a shorter syntax for defining functions. They do not have their own
this value and instead inherit this from their surrounding scope.

15. What is the purpose of the async and await keywords in JavaScript?

Answer:

async makes a function return a promise, and await pauses execution until the
promise is resolved, making asynchronous code easier to read.

16. What is a deep copy and shallow copy in JavaScript?

Answer:

• A shallow copy duplicates only the top-level properties of an object.

• A deep copy duplicates all nested objects or arrays as well.

17. What is the use of setTimeout() in JavaScript?

Answer:

setTimeout() sets a timer to execute a function after a specified delay (in milliseconds).

18. What is the difference between function declarations and function

expressions?

Answer:

• Function declarations are hoisted, so they can be called before they are defined.
• Function expressions are not hoisted and must be defined before being called.

19. What are default parameters in JavaScript?

Answer:

Default parameters allow you to assign default values to function parameters if they
are not provided when the function is called.
20. What is the difference between synchronous and asynchronous code in
JavaScript?

Answer:

• Synchronous code executes line by line, blocking further execution until

completed.
• Asynchronous code allows non-blocking execution, enabling other operations to
run while waiting for a task to finish.

21. What is the new keyword used for in JavaScript?

Answer:

The new keyword is used to create an instance of an object that is based on a

constructor function, initializing the new object and setting its prototype.

22. Explain the concept of "debouncing" in JavaScript.

Answer:

Debouncing is a technique used to limit the rate at which a function is executed, often
used to handle events like keypresses or window resizing.

23. What are template literals in JavaScript?

Answer:

Template literals are a way to create strings in JavaScript, allowing embedded

expressions and multiline strings. They are enclosed in backticks (`).

24. What is the typeof operator used for?

Answer:

typeof returns a string indicating the type of the operand (e.g., "string", "number",
"boolean").

25. What is the difference between Object.freeze() and Object.seal() in JavaScript?

Answer:

• Object.freeze() makes an object immutable, preventing new properties from

being added or existing ones from being modified or deleted.
 • Object.seal() prevents new properties from being added but allows existing
properties to be modified.

26. What is the difference between Object.create() and new in JavaScript?

Answer:

• Object.create(): Creates a new object, using an existing object to provide the

newly created object's prototype.
• new: Creates a new instance of a function-based constructor, setting the
prototype of the object to the constructor's prototype.

27. What is the purpose of the Symbol primitive in JavaScript?

Answer:
Symbol is a new primitive data type introduced in ECMAScript 6. It is used to create
unique, immutable identifiers for object properties. Symbols are primarily used to avoid
property name collisions when multiple parts of a program or different libraries interact
with the same object.

const sym1 = Symbol('description');

const sym2 = Symbol('description');

console.log(sym1 === sym2); // Output: false (Symbols are unique)

const obj = {

[sym1]: 'value1',

[sym2]: 'value2'

};

console.log(obj[sym1]); // Output: value1

console.log(obj[sym2]); // Output: value2

-----------------------------------------------------------------------------------------------------------
React JS Interview Questions

28. What is React?

Answer:

React is a JavaScript library for building user interfaces, particularly for single-page
applications. It allows developers to build reusable UI components and efficiently
update the UI when data changes.

29. What is JSX?

Answer:

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-
like code inside JavaScript. It gets transpiled to JavaScript at runtime.

30. What are components in React?

Answer:

Components are the building blocks of a React application. They allow you to
encapsulate UI elements and logic into reusable units. Components can be functional
or class-based.

31. What is the difference between functional and class components in React?

Answer:

• Functional components are simpler and don't manage state or lifecycle

methods (before React 16.8).
• Class components can manage state and lifecycle methods. With React
Hooks, functional components can now also handle state and side effects.

32. What are React Hooks?

Answer:

React Hooks are functions that let you "hook into" React state and lifecycle features
from functional components. Examples include useState, useEffect, and useContext.

33. Explain useState hook in React.

Answer:
 useState is a React hook that allows you to add state to functional components. It
returns an array with the current state and a function to update that state.

34. What is useEffect used for in React?

Answer:

useEffect is a React hook that allows you to perform side effects in functional
components (e.g., fetching data, setting up subscriptions). It replaces lifecycle
methods like componentDidMount, componentDidUpdate, and
componentWillUnmount.

35. What is the Virtual DOM in React?

Answer:

The Virtual DOM is a lightweight in-memory representation of the actual DOM. React
uses it to optimize updates by comparing changes in the Virtual DOM with the real DOM
and updating only the necessary parts.

36. What is the key prop in React, and why is it important?

Answer:

The key prop is used to uniquely identify elements in a list. It helps React efficiently
update and re-render lists by distinguishing which items have changed.

37. What are controlled and uncontrolled components in React?

Answer:

• Controlled components: Form elements whose values are controlled by React

state.
• Uncontrolled components: Form elements that manage their own state
internally.

38. What is React's context API?

Answer:

The Context API is a React feature that allows you to share data between components
without passing props manually through every level of the component tree.

39. What is the purpose of the render() method in React?

Answer:
 The render() method is required in class components. It returns the JSX that defines
what the UI should look like. In functional components, you directly return the JSX from
the function.

40. What is a higher-order component (HOC) in React?

Answer:

An HOC is a function that takes a component and returns a new component with
additional props or functionality. It’s used to reuse component logic.

41. What is React Router?

Answer:

React Router is a library for handling routing in React applications, allowing navigation
between different views or pages in a single-page application.

42. What is Redux, and why is it used in React?

Answer:

Redux is a state management library that helps manage the state of an application in a
predictable way. It’s often used in React applications to store the state of the app
centrally and to make the state accessible to any component.

43. What is the difference between props and state in React?

Answer:

• Props: Immutable and passed from parent to child components. They are used
to pass data to components.
• State: Mutable and local to the component. It can be changed and used to
trigger re-renders.

44. What are fragments in React?

Answer:

Fragments are used to group multiple elements without adding extra nodes to the
DOM. You can use <React.Fragment> or shorthand <> to wrap elements without
creating a parent DOM node.

45. What is the useRef hook in React?

Answer:
 useRef is a React hook that allows you to persist values across renders without causing
re-renders. It can also be used to reference DOM elements directly.

46. What is the difference between useEffect and componentDidMount?

Answer:

• useEffect can run after every render, and you can control when it runs using
dependencies.
• componentDidMount is a class component lifecycle method that runs once
after the component mounts.

47. What is the significance of the useImperativeHandle hook in React?

Answer:
The useImperativeHandle hook allows you to customize the instance value that is
exposed when using ref in functional components. It is typically used in conjunction
with forwardRef to manage the values that are accessible to parent components.

48. How do you optimize performance in a React application?

Answer:

You can optimize performance by using techniques such as:

• Memoizing components with React.memo()

• Lazy loading with React.lazy() and Suspense
• Code-splitting
• Avoiding unnecessary re-renders
• Using the useCallback and useMemo hooks

49. What is the shouldComponentUpdate() method in React?

Answer:

shouldComponentUpdate() is a lifecycle method in class components that allows you

to prevent unnecessary re-renders by returning false if the component’s state or props
haven’t changed.

50. What is React's StrictMode?

Answer:
StrictMode is a wrapper component that helps identify potential problems in the
application, such as unsafe lifecycle methods, legacy API usage, or potential bugs. It
only runs in development mode and does not affect production builds.