React & JavaScript & CS

Question 1

What’s the difference between let, const, and var?

Answer 1

• var is function-scoped and can be re-declared and updated within its scope.
• let is block-scoped, meaning it’s limited to the block it’s defined in, and can be updated but not re-declared in the same scope.
• const is also block-scoped but cannot be updated or re-declared once assigned. It’s used for constants.

Question 2

What’s the difference between == (double equals: loose equality) and === (triple equals: strict equality)?

Answer 2

• == is the loose equality operator. It compares two values for equality after converting them to a common type.
• === is the strict equality operator. It compares both value and type, so no type conversion is done.
• For example, '5' == 5 returns true, but '5' === 5 returns false.

Question 3

What are Promises and how do they work?

Answer 3

Promises in JavaScript represent asynchronous operations. They have three states:

1. Pending: Initial state, neither fulfilled nor rejected.
2. Fulfilled: Operation completed successfully.
3. Rejected: Operation failed.

You can handle these states using .then() for fulfilled and .catch() for rejected.

Question 4

What’s the difference between null and undefined?

Answer 4

• null is an assignment value that represents the intentional absence of any object value. It’s explicitly set by the developer.
• undefined means a variable has been declared but has not yet been assigned a value. It’s the default value for uninitialized variables.

Question 5

Explain the event loop and how asynchronous JavaScript works.

Answer 5

The event loop in JavaScript handles asynchronous operations. Here’s how it works:

1. Call Stack: Executes synchronous code. Functions are added to the stack and run in order.
2. Web APIs: Browser provides APIs (like setTimeout) for async operations.
3. Callback Queue: Once async tasks complete, their callbacks are placed in the callback queue.
4. Event Loop: Continuously checks the call stack. If the stack is empty, it takes the first callback from the queue and pushes it to the stack.

This allows JavaScript to handle asynchronous operations efficiently, without blocking the main thread.

Question 6

What’s the difference between arrow functions and regular functions?

Answer 6

1. Syntax: Arrow functions have a shorter syntax. For example, const add = (a, b) => a + b; is an arrow function.
2. this Binding: Arrow functions do not have their own this context. Instead, they inherit this from the surrounding lexical context. Regular functions have their own this context based on how they are called.
3. arguments Object: Arrow functions do not have their own arguments object. Regular functions do.
4. Usage: Arrow functions are often used for shorter functions like callbacks, while regular functions are more versatile for various use cases.

Question 7

Explain the concept of hoisting.

Answer 7

Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope during compilation. Function declarations are fully hoisted, while var declarations are hoisted but initialized with undefined. let and const are hoisted but remain uninitialized.

Question 8

How does event bubbling work?

Answer 8

Event bubbling is when an event triggered on a child element propagates up through its parent elements. You can stop this with event.stopPropagation(). Event capturing is the opposite phase where events flow down from parent to child.

Question 9

How does prototypal inheritance work in JavaScript?

Answer 9

Every JavaScript object has a prototype property that points to another object. When accessing a property, JavaScript first looks on the object itself, then walks up the prototype chain until it finds the property or reaches null.

Question 10

What is the difference between functional and class components?

Answer 10

Functional components are JavaScript functions that return JSX and use hooks for state and lifecycle methods. Class components extend React.Component and use this.state and lifecycle methods like componentDidMount. Functional components are now preferred due to hooks providing cleaner, more reusable code with better performance optimization.

Question 11

Explain React hooks and the rules of hooks.

Answer 11

Hooks are functions that let you use state and lifecycle features in functional components. The rules are: only call hooks at the top level (not inside loops, conditions, or nested functions), and only call hooks from React functions or custom hooks. This ensures hooks are called in the same order every time.

Question 12

What is the Virtual DOM and how does it work?

Answer 12

The virtual DOM is a JavaScript representation of the actual DOM kept in memory. When state changes, React creates a new virtual DOM tree, compares it with the previous version (diffing), and updates only the parts of the real DOM that changed (reconciliation). This makes updates more efficient than directly manipulating the DOM.

Question 13

Explain the difference between state and props.

Answer 13

Props are read-only data passed from parent to child components, while state is mutable data managed within a component. Props flow down the component tree, and when they change, the component re-renders. State changes trigger re-renders of the component and its children.

Question 14

What are React lifecycle methods and their equivalents in hooks?

Answer 14

Class components have methods like componentDidMount, componentDidUpdate, and componentWillUnmount. In functional components, useEffect handles all lifecycle scenarios. useEffect with an empty dependency array mimics componentDidMount, with dependencies mimics componentDidUpdate, and its cleanup function mimics `componentWillUnmount.

Question 15

How do you handle forms in React?

Answer 15

React handles forms through controlled components where form elements are controlled by React state, or uncontrolled components using refs. Controlled components use value and onChange props to manage input state, providing better validation and user experience control.

Question 16

What is prop drilling and how can you avoid it?

Answer 16

Prop drilling occurs when you pass props through multiple component levels to reach a deeply nested component. You can avoid it using React Context API, state management libraries like Redux, or component composition patterns to keep related data and components closer together.

Question 17

Explain useEffect and its dependency array.

Answer 17

useEffect handles side effects in functional components. The dependency array controls when the effect runs: no array means it runs after every render, empty array means it runs once after initial render, and an array with values means it runs when those values change.

Question 18

What is the difference between useMemo and useCallback?

Answer 18

useMemo memoizes the result of a computation and returns a cached value until dependencies change. useCallback memoizes a function itself and returns the same function instance until dependencies change. Both are used for performance optimization to prevent unnecessary re-computations or re-renders.

Question 19

How does React handle events and what is event delegation?

Answer 19

React uses SyntheticEvents, which wrap native DOM events to provide consistent behavior across browsers. React implements event delegation by attaching a single event listener to the document root and managing all events from there, improving performance and memory usage compared to attaching listeners to individual elements.

Question 20

What’s the difference between synchronous and asynchronous programming?

Answer 20

Synchronous code executes line by line, blocking until each operation completes. Asynchronous code allows other operations to continue while waiting for long-running tasks. JavaScript uses callbacks, promises, and async/await for asynchronous operations, crucial for web APIs and user interactions.

Question 21

What is the Virtual DOM in React?

Answer 21

JavaScript representation of the real DOM kept in memory. React creates new virtual DOM tree on state changes, compares with previous version (diffing), then updates only changed parts of real DOM (reconciliation). Makes updates faster than direct DOM manipulation.

Question 22

Explain the difference between state and props in React.

Answer 22

Read-only data passed from parent to child components. Flow down component tree.
State: Mutable data managed within a component. Triggers re-renders when changed. Props = external input, State = internal data

Question 23

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

Answer 23

For handling Promises. async makes function return a Promise. await pauses execution until Promise resolves, making asynchronous code look synchronous. Cleaner than .then() chains.

Question 24

What is the difference between an array and an object in JavaScript?

Answer 24

Ordered collection with numeric indices. Methods like push, pop, map, filter. Length property.

Object: Unordered collection with string/symbol keys. Access via dot notation or brackets. No built-in length.
Arrays are actually objects with special behavior.

Question 25

What is the purpose of the `key` prop in React lists?

Answer 25

Unique identifier for list items. Helps React identify which items changed, added, or removed during re-renders. Improves performance and prevents bugs with component state. Should be stable and unique (avoid array indices).

Question 26

Explain the different loops

Answer 26

JavaScript has several loop constructs to repeatedly execute a block of code: `for` loop: Executes a block of code a specific number of times, based on a counter variable. while loop: Executes a block of code as long as a specified condition is true. `do-while` loop: Executes a block of code at least once, then continues to execute the block as long as a specified condition is true. `for-in` loop: Iterates over the properties of an object. `for-of` loop: Iterates over the values of an iterable object, such as an array. The choice of loop depends on the specific requirements of the task, such as whether the number of iterations is known beforehand, or if the loop should execute at least once. Loops are essential for automating repetitive tasks and processing collections of data in JavaScript.