Arrays & Objects Deep Dive

Arrays & Objects Deep Dive

Every React component renders from data — usually arrays of objects. These patterns appear in every codebase.

The Three Core Array Methods

const products = [
  { id: 1, name: 'Laptop', price: 999, inStock: true },
  { id: 2, name: 'Phone', price: 699, inStock: false },
  { id: 3, name: 'Tablet', price: 499, inStock: true },
]

const names = products.map(p => p.name)
// ['Laptop', 'Phone', 'Tablet']

const available = products.filter(p => p.inStock)

const total = products.reduce((sum, p) => sum + p.price, 0)
// 2197

// Chain them
const availableTotal = products
  .filter(p => p.inStock)
  .reduce((sum, p) => sum + p.price, 0)  // 1498

Other Essential Methods

products.find(p => p.name === 'Laptop')   // first match or undefined
products.some(p => !p.inStock)            // true if any match
products.every(p => p.inStock)            // true if all match

const sorted = [...products].sort((a, b) => a.price - b.price)  // spread first!
products.slice(0, 2)    // copy portion, non-mutating

Destructuring

const { name, price, category = 'General', name: productName } = product

// Nested
const { user: { address: { city } } } = data

// Array
const [first, second, ...rest] = items

// Function params — universal React pattern
function ProductCard({ name, price, inStock = false }) {
  return <div>{name} — ${price}</div>
}

Spread and Immutable Updates

// These three patterns ARE React state updates
const updated = { ...product, price: 899 }
const withNew = [...products, newProduct]
const without = products.filter(p => p.id !== id)

// Update specific item
const modified = products.map(p =>
  p.id === targetId ? { ...p, inStock: false } : p
)

Iterating Objects

const config = { host: 'localhost', port: 5432, db: 'myapp' }

Object.keys(config)     // ['host', 'port', 'db']
Object.values(config)   // ['localhost', 5432, 'myapp']
Object.entries(config)  // [['host','localhost'], ...]

const uppercased = Object.fromEntries(
  Object.entries(config).map(([k, v]) => [k, String(v).toUpperCase()])
)

Optional Chaining & Nullish Coalescing

const city = user?.address?.city
const label = item?.label ?? 'Unknown'