Module 0: JS Prerequisites

ES6+, Array Methods, and Asynchronous Logic.

1. Deep Dive: The React Foundation

React is just JavaScript. If you struggle with React, 90% of the time you are actually struggling with JavaScript concepts like closures, `this`, or reference equality.

1.1 Reference vs. Value

Primitives (string, number, boolean) are passed by value. Objects and Arrays are passed by reference.
Crucial for React: React compares props using "shallow comparison" (===). If you mutate an object (obj.name = 'new'), the reference is the same, so React won't know it changed and won't re-render.

1.2 Declarative vs. Imperative

Imperative (Old): "Loop through the array. Create a new variable. If index is even, push to array."
Declarative (React/Modern): "Map this array to that array."
We use .map(), .filter(), and .reduce() because they return new arrays (immutability) and describe what we want, not how to get it.

1.3 Industry Standard: Immutability

Senior devs never mutate data. They create copies.
Bad: user.name = "Alice"
Good: const updatedUser = { ...user, name: "Alice" }
This uses the Spread Operator to copy properties to a new object.

REQ-001 To Do

Build "The Data Transformer" Utility

User Story

As a data analyst, I need a utility to process raw order data so that I can view revenue from shipped orders only.

Acceptance Criteria
  • Filter the list to keep only "shipped" orders.
  • Map over them to create an array of strings: "Order #ID: $AMOUNT".
  • Reduce the list to calculate the total revenue of shipped orders.
  • Constraint: Use .map(), .filter(), and .reduce(). No for loops.
Technical Notes 
const orders = [
  { id: 1, status: "pending", amount: 50 },
  { id: 2, status: "shipped", amount: 100 },
  { id: 3, status: "cancelled", amount: 20 },
  { id: 4, status: "shipped", amount: 150 },
];
Senior Bonus
  • Chaining: Perform all operations in a single chain without intermediate variables.
  • Immutability: Ensure orders array remains unchanged.
  • TypeScript: Define an Order interface.

3. The Bug Hunt

🐛 Scenario: The Accidental Mutation

The Setup:

const user = { name: "John", address: { city: "NY" } };
const updatedUser = { ...user };
updatedUser.address.city = "LA";
console.log(user.address.city); // What does this print?

The Bug: You expected user.address.city to stay "NY", but it changed to "LA".

The Task:

  1. Explain Shallow Copy vs Deep Copy.
  2. Fix the code so that user is not affected (use nested spread or structuredClone).
  3. Explain why updatedUser is not a deep copy.
  4. Fix it using structuredClone() or JSON parse/stringify.

4. Node.js Fundamentals

Full-stack awareness is required. You don't need to be a backend expert, but you must understand the environment your React app interacts with.

5. Test on your own

Verify your JS Knowledge