JavaScript and React Concepts Quiz

JavaScript Array Manipulation

• Destructuring to extract a specific element: const [, , suv] = vehicles; extracts the third item ('XUV700') from the vehicles array into the suv variable. The empty commas skip the first two elements.

• Combining arrays with the spread operator: const arraysCombined = [...arrayOne,...arrayTwo]; creates a new array by combining arrayOne and arrayTwo.

JSX Expressions

• Rendering JavaScript expressions inside JSX: {name}, {age + 1} embeds JavaScript expressions into JSX, enabling dynamic content.

Conditional Rendering in React

• Conditional rendering: The example shows rendering a component (Profile) only if isLoggedIn is true using isLoggedIn &&

React Fragments

• Purpose: Group multiple elements without adding extra nodes to the DOM.
• Benefits: Avoid unnecessary wrapper elements, improve performance.
• Syntax: React.Fragment or the shorthand <></>.

Prototypal Inheritance

• Definition: Objects inherit properties and methods from other objects using a prototype chain.
• Mechanism: Each object has a hidden [[Prototype]] link. If a property's not found, it looks in the prototype.
• Implementation: Use __proto__ or Object.create().
• Advantages: Code reuse, object-based inheritance.

Finding the Largest Number in an Array

• Using Math.max(): Math.max(...numbers) finds the largest number directly.

• Using a loop: Iterate through the array, keep track of the largest number found so far.

Reversing an Array

• Without built-in reverse(): Iterate through the array in reverse order, pushing each element into a new array.

• In-place reversal: Swap elements from the beginning and end of the array until the middle is reached, mutating the original array. [arr[left], arr[right]] = [arr[right], arr[left]];

Object Methods & Calling

• Calling object methods: myObject.greet() example showing how to call a method on an object.

useEffect Hook in React

• Purpose: Perform side effects (e.g., data fetching, DOM manipulation) in functional components.
• Execution: Runs after the render cycle.
• Dependency array: Controls when the effect runs.
  • Empty array ([]): Runs once after the first render.
  • No array: Runs after every render.
  • Specific dependencies: Runs when those values change.
• Clean-up: Avoid memory leaks by including cleanup logic (not shown in example).