@icarusmx/creta 1.5.4 → 1.5.6

package/lib/exercises/array-object-manipulation.md

@@ -0,0 +1,1281 @@
+# Array & Object Manipulation Warmups
+
+<!-- vim: set foldmethod=marker foldlevel=0: -->
+
+## 📖 LazyVim Reading Guide {{{
+
+**Start with:** `zM` (close all folds) → Navigate with `za` (toggle fold under cursor)
+
+This document uses fold markers `{{{` and `}}}` for organized reading.
+
+**Navigation Tips:**
+- `zM` - Close all folds (see just section headers)
+- `zR` - Open all folds (see everything)
+- `za` - Toggle current fold
+- `zj` - Jump to next fold
+- `zk` - Jump to previous fold
+
+}}}
+
+## 🎯 Learning Path {{{
+
+This document progresses from **basic object access** to **advanced array transformations**:
+
+1. **Level 1: Objects** - Access, modify, destructure
+2. **Level 2: Basic Arrays** - Map, filter, find
+3. **Level 3: Array of Objects** - Query, transform, aggregate
+4. **Level 4: Advanced Patterns** - Reduce, grouping, chaining
+
+**How to practice:**
+- Copy exercise to a `.js` file
+- Use `node filename.js` to test
+- Try solving WITHOUT looking at solution first
+- Compare your solution with the provided one
+
+}}}
+
+## 💡 LazyVim Editing Tips {{{
+
+### Quick Object/Array Navigation {{{
+
+```javascript
+// Use these motions in LazyVim:
+const user = {
+  name: "Ana",      // ci{ inside curly braces
+  age: 25,          // % jump to matching bracket
+  city: "CDMX"      // va{ select around object (includes {})
+}
+```
+
+**Key Motions:**
+- `%` - Jump between matching brackets `{}`, `[]`, `()`
+- `ci{` - Change inside `{}`
+- `di[` - Delete inside `[]`
+- `va{` - Visual select around `{}` (includes braces)
+- `vi[` - Visual select inside `[]` (excludes brackets)
+- `>>` - Indent line
+- `<<` - Unindent line
+- `=i{` - Auto-format inside `{}`
+
+}}}
+
+### Array Manipulation Shortcuts {{{
+
+```javascript
+// Working with arrays in LazyVim:
+const nums = [1, 2, 3, 4, 5]
+//            ↑           ↑
+//           ci[       press % to jump
+```
+
+**Multi-line arrays:**
+- `V` - Visual line mode
+- `>` - Indent selected lines
+- `<` - Unindent selected lines
+- `=` - Auto-format selection
+
+**Duplicate lines:**
+- `yyp` - Yank current line and paste below
+- `5yyp` - Copy current line 5 times below
+- `Vj:t.` - Duplicate visual selection
+
+}}}
+
+### Search & Replace in Objects {{{
+
+**Find all properties:**
+```vim
+/\w\+:       " Find all property names (word + colon)
+```
+
+**Replace property names:**
+```vim
+:%s/nombre/name/g     " Replace 'nombre' with 'name' globally
+:%s/\(\w\+\):/"\1":/g " Add quotes around all property names
+```
+
+**Multi-cursor editing:**
+- `<C-n>` - Start multi-cursor on word under cursor
+- `<C-n>` again - Add next match
+- `<C-x>` - Skip current match
+- Type to edit all at once
+
+}}}
+
+}}}
+
+## Level 1: Object Fundamentals {{{
+
+### Warmup 1.1: Object Access {{{
+
+**Exercise:**
+```javascript
+const product = {
+  id: 101,
+  name: "Laptop",
+  price: 15000,
+  inStock: true
+}
+
+// TODO: Access and print:
+// 1. Product name
+// 2. Product price
+// 3. Check if in stock
+```
+
+**Solution:**
+```javascript
+const product = {
+  id: 101,
+  name: "Laptop",
+  price: 15000,
+  inStock: true
+}
+
+console.log(product.name)        // "Laptop"
+console.log(product.price)       // 15000
+console.log(product.inStock)     // true
+
+// Alternative: bracket notation
+console.log(product['name'])     // "Laptop"
+```
+
+**LazyVim Tip:** Place cursor on `product` and press `gd` to jump to definition.
+
+}}}
+
+### Warmup 1.2: Object Modification {{{
+
+**Exercise:**
+```javascript
+const user = {
+  username: "ana_dev",
+  email: "ana@example.com",
+  verified: false
+}
+
+// TODO:
+// 1. Change verified to true
+// 2. Add a new property: role = "developer"
+// 3. Delete the email property
+```
+
+**Solution:**
+```javascript
+const user = {
+  username: "ana_dev",
+  email: "ana@example.com",
+  verified: false
+}
+
+// 1. Modify property
+user.verified = true
+
+// 2. Add new property
+user.role = "developer"
+
+// 3. Delete property
+delete user.email
+
+console.log(user)
+// { username: "ana_dev", verified: true, role: "developer" }
+```
+
+**LazyVim Tip:** Use `ciw` (change inner word) to quickly edit property values.
+
+}}}
+
+### Warmup 1.3: Object Destructuring {{{
+
+**Exercise:**
+```javascript
+const config = {
+  host: "localhost",
+  port: 3000,
+  timeout: 5000,
+  retries: 3
+}
+
+// TODO: Extract host and port using destructuring
+```
+
+**Solution:**
+```javascript
+const config = {
+  host: "localhost",
+  port: 3000,
+  timeout: 5000,
+  retries: 3
+}
+
+// Basic destructuring
+const { host, port } = config
+console.log(host)   // "localhost"
+console.log(port)   // 3000
+
+// With renaming
+const { host: serverHost, port: serverPort } = config
+console.log(serverHost)  // "localhost"
+
+// With default values
+const { ssl = false } = config
+console.log(ssl)    // false (property doesn't exist)
+```
+
+**LazyVim Tip:** Use `%` to jump between matching braces when editing destructuring.
+
+}}}
+
+### Warmup 1.4: Nested Objects {{{
+
+**Exercise:**
+```javascript
+const developer = {
+  name: "Carlos",
+  skills: {
+    languages: ["JavaScript", "Python"],
+    frameworks: ["React", "Express"]
+  },
+  experience: {
+    years: 3,
+    level: "mid"
+  }
+}
+
+// TODO:
+// 1. Access the first language
+// 2. Access experience level
+// 3. Add "Node.js" to frameworks
+```
+
+**Solution:**
+```javascript
+const developer = {
+  name: "Carlos",
+  skills: {
+    languages: ["JavaScript", "Python"],
+    frameworks: ["React", "Express"]
+  },
+  experience: {
+    years: 3,
+    level: "mid"
+  }
+}
+
+// 1. Access nested array
+console.log(developer.skills.languages[0])  // "JavaScript"
+
+// 2. Access nested object
+console.log(developer.experience.level)     // "mid"
+
+// 3. Modify nested array
+developer.skills.frameworks.push("Node.js")
+console.log(developer.skills.frameworks)
+// ["React", "Express", "Node.js"]
+```
+
+**LazyVim Tip:** Use `vi{` to select inside object, then `=` to auto-format.
+
+}}}
+
+}}}
+
+## Level 2: Array Fundamentals {{{
+
+### Warmup 2.1: Array.map() - Transform {{{
+
+**Exercise:**
+```javascript
+const prices = [100, 250, 500, 1000]
+
+// TODO: Create new array with 16% tax added to each price
+```
+
+**Solution:**
+```javascript
+const prices = [100, 250, 500, 1000]
+
+const pricesWithTax = prices.map(price => price * 1.16)
+console.log(pricesWithTax)
+// [116, 290, 580, 1160]
+
+// Longer form (same result):
+const pricesWithTax2 = prices.map(function(price) {
+  return price * 1.16
+})
+```
+
+**LazyVim Tip:** Select the array with `vi[` and press `>` to indent for readability.
+
+}}}
+
+### Warmup 2.2: Array.filter() - Select {{{
+
+**Exercise:**
+```javascript
+const numbers = [5, 12, 8, 130, 44, 3, 21]
+
+// TODO:
+// 1. Get numbers greater than 10
+// 2. Get even numbers only
+// 3. Get numbers between 10 and 50
+```
+
+**Solution:**
+```javascript
+const numbers = [5, 12, 8, 130, 44, 3, 21]
+
+// 1. Greater than 10
+const greaterThan10 = numbers.filter(num => num > 10)
+console.log(greaterThan10)  // [12, 130, 44, 21]
+
+// 2. Even numbers
+const evens = numbers.filter(num => num % 2 === 0)
+console.log(evens)  // [12, 8, 130, 44]
+
+// 3. Between 10 and 50
+const between = numbers.filter(num => num >= 10 && num <= 50)
+console.log(between)  // [12, 44, 21]
+```
+
+**LazyVim Tip:** Use `<C-n>` on `num` to select all occurrences and edit simultaneously.
+
+}}}
+
+### Warmup 2.3: Array.find() - Search {{{
+
+**Exercise:**
+```javascript
+const users = ["ana", "carlos", "diana", "eduardo"]
+
+// TODO:
+// 1. Find first name starting with 'd'
+// 2. Find first name longer than 5 characters
+```
+
+**Solution:**
+```javascript
+const users = ["ana", "carlos", "diana", "eduardo"]
+
+// 1. Starts with 'd'
+const startsWithD = users.find(name => name.startsWith('d'))
+console.log(startsWithD)  // "diana"
+
+// 2. Longer than 5 characters
+const longName = users.find(name => name.length > 5)
+console.log(longName)  // "carlos"
+
+// Note: find() returns first match or undefined
+const notFound = users.find(name => name.startsWith('z'))
+console.log(notFound)  // undefined
+```
+
+**LazyVim Tip:** Use `gd` on variable name to see all usages in file.
+
+}}}
+
+### Warmup 2.4: Array.includes() - Check {{{
+
+**Exercise:**
+```javascript
+const validRoles = ["admin", "editor", "viewer"]
+
+// TODO: Check if "editor" and "superadmin" are valid roles
+```
+
+**Solution:**
+```javascript
+const validRoles = ["admin", "editor", "viewer"]
+
+console.log(validRoles.includes("editor"))      // true
+console.log(validRoles.includes("superadmin"))  // false
+
+// Use case: validation
+function isValidRole(role) {
+  return validRoles.includes(role)
+}
+
+console.log(isValidRole("admin"))     // true
+console.log(isValidRole("hacker"))    // false
+```
+
+}}}
+
+}}}
+
+## Level 3: Array of Objects {{{
+
+### Warmup 3.1: Filter Objects by Property {{{
+
+**Exercise:**
+```javascript
+const products = [
+  { id: 1, name: "Mouse", price: 200, category: "electronics" },
+  { id: 2, name: "Teclado", price: 500, category: "electronics" },
+  { id: 3, name: "Silla", price: 1500, category: "furniture" },
+  { id: 4, name: "Monitor", price: 3000, category: "electronics" }
+]
+
+// TODO:
+// 1. Get all electronics
+// 2. Get products under $1000
+// 3. Get products with price between 500 and 2000
+```
+
+**Solution:**
+```javascript
+const products = [
+  { id: 1, name: "Mouse", price: 200, category: "electronics" },
+  { id: 2, name: "Teclado", price: 500, category: "electronics" },
+  { id: 3, name: "Silla", price: 1500, category: "furniture" },
+  { id: 4, name: "Monitor", price: 3000, category: "electronics" }
+]
+
+// 1. All electronics
+const electronics = products.filter(p => p.category === "electronics")
+console.log(electronics)
+// [Mouse, Teclado, Monitor]
+
+// 2. Under $1000
+const affordable = products.filter(p => p.price < 1000)
+console.log(affordable)
+// [Mouse, Teclado]
+
+// 3. Between 500 and 2000
+const midRange = products.filter(p => p.price >= 500 && p.price <= 2000)
+console.log(midRange)
+// [Teclado, Silla]
+```
+
+**LazyVim Tip:** Use `va{` to select entire object, then `p` to paste elsewhere.
+
+}}}
+
+### Warmup 3.2: Map Objects to Extract Values {{{
+
+**Exercise:**
+```javascript
+const students = [
+  { name: "Ana", grade: 85, passed: true },
+  { name: "Bruno", grade: 92, passed: true },
+  { name: "Carla", grade: 68, passed: false },
+  { name: "Diego", grade: 78, passed: true }
+]
+
+// TODO:
+// 1. Get array of just names
+// 2. Get array of just grades
+// 3. Get array of objects with name + grade only
+```
+
+**Solution:**
+```javascript
+const students = [
+  { name: "Ana", grade: 85, passed: true },
+  { name: "Bruno", grade: 92, passed: true },
+  { name: "Carla", grade: 68, passed: false },
+  { name: "Diego", grade: 78, passed: true }
+]
+
+// 1. Just names
+const names = students.map(s => s.name)
+console.log(names)
+// ["Ana", "Bruno", "Carla", "Diego"]
+
+// 2. Just grades
+const grades = students.map(s => s.grade)
+console.log(grades)
+// [85, 92, 68, 78]
+
+// 3. Name + grade objects
+const simplified = students.map(s => ({ name: s.name, grade: s.grade }))
+console.log(simplified)
+// [{ name: "Ana", grade: 85 }, ...]
+
+// Or using destructuring:
+const simplified2 = students.map(({ name, grade }) => ({ name, grade }))
+```
+
+**LazyVim Tip:** Use `ci{` to change object content quickly.
+
+}}}
+
+### Warmup 3.3: Find Object by Property {{{
+
+**Exercise:**
+```javascript
+const employees = [
+  { id: 101, name: "Laura", department: "Engineering" },
+  { id: 102, name: "Miguel", department: "Sales" },
+  { id: 103, name: "Sofia", department: "Engineering" },
+  { id: 104, name: "Pedro", department: "HR" }
+]
+
+// TODO:
+// 1. Find employee with id 103
+// 2. Find first employee in Engineering
+// 3. Find employee named "Pedro"
+```
+
+**Solution:**
+```javascript
+const employees = [
+  { id: 101, name: "Laura", department: "Engineering" },
+  { id: 102, name: "Miguel", department: "Sales" },
+  { id: 103, name: "Sofia", department: "Engineering" },
+  { id: 104, name: "Pedro", department: "HR" }
+]
+
+// 1. By ID
+const employee = employees.find(e => e.id === 103)
+console.log(employee)
+// { id: 103, name: "Sofia", department: "Engineering" }
+
+// 2. First in Engineering
+const engineer = employees.find(e => e.department === "Engineering")
+console.log(engineer)
+// { id: 101, name: "Laura", department: "Engineering" }
+
+// 3. By name
+const pedro = employees.find(e => e.name === "Pedro")
+console.log(pedro)
+// { id: 104, name: "Pedro", department: "HR" }
+```
+
+}}}
+
+### Warmup 3.4: Sort Array of Objects {{{
+
+**Exercise:**
+```javascript
+const tasks = [
+  { title: "Fix bug", priority: 3, completed: false },
+  { title: "Write docs", priority: 1, completed: false },
+  { title: "Deploy", priority: 2, completed: true },
+  { title: "Review PR", priority: 3, completed: false }
+]
+
+// TODO:
+// 1. Sort by priority (lowest first)
+// 2. Sort by priority (highest first)
+// 3. Sort by title alphabetically
+```
+
+**Solution:**
+```javascript
+const tasks = [
+  { title: "Fix bug", priority: 3, completed: false },
+  { title: "Write docs", priority: 1, completed: false },
+  { title: "Deploy", priority: 2, completed: true },
+  { title: "Review PR", priority: 3, completed: false }
+]
+
+// 1. Priority ascending (lowest first)
+const sortedAsc = [...tasks].sort((a, b) => a.priority - b.priority)
+console.log(sortedAsc.map(t => `${t.title} (${t.priority})`))
+// ["Write docs (1)", "Deploy (2)", "Fix bug (3)", "Review PR (3)"]
+
+// 2. Priority descending (highest first)
+const sortedDesc = [...tasks].sort((a, b) => b.priority - a.priority)
+console.log(sortedDesc.map(t => `${t.title} (${t.priority})`))
+// ["Fix bug (3)", "Review PR (3)", "Deploy (2)", "Write docs (1)"]
+
+// 3. Alphabetically by title
+const sortedAlpha = [...tasks].sort((a, b) => a.title.localeCompare(b.title))
+console.log(sortedAlpha.map(t => t.title))
+// ["Deploy", "Fix bug", "Review PR", "Write docs"]
+```
+
+**Note:** `[...tasks]` creates a copy because `.sort()` mutates the original array.
+
+**LazyVim Tip:** Use `V` to select line, then `:!node` to run just that line in Node.
+
+}}}
+
+}}}
+
+## Level 4: Advanced Patterns {{{
+
+### Warmup 4.1: Array.reduce() - Sum & Count {{{
+
+**Exercise:**
+```javascript
+const cart = [
+  { product: "Mouse", price: 200, quantity: 2 },
+  { product: "Teclado", price: 500, quantity: 1 },
+  { product: "Monitor", price: 3000, quantity: 1 }
+]
+
+// TODO:
+// 1. Calculate total price (price * quantity for all items)
+// 2. Count total items in cart
+```
+
+**Solution:**
+```javascript
+const cart = [
+  { product: "Mouse", price: 200, quantity: 2 },
+  { product: "Teclado", price: 500, quantity: 1 },
+  { product: "Monitor", price: 3000, quantity: 1 }
+]
+
+// 1. Total price
+const total = cart.reduce((sum, item) => {
+  return sum + (item.price * item.quantity)
+}, 0)
+console.log(total)  // 3900 (400 + 500 + 3000)
+
+// Shorter version:
+const total2 = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0)
+
+// 2. Total items
+const totalItems = cart.reduce((count, item) => count + item.quantity, 0)
+console.log(totalItems)  // 4 (2 + 1 + 1)
+```
+
+**How reduce works:**
+```javascript
+// reduce((accumulator, currentItem) => newAccumulator, initialValue)
+//         ↑           ↑                 ↑                ↑
+//      previous    current item      what to           starting
+//       result                       return next        value
+```
+
+}}}
+
+### Warmup 4.2: Group By Property {{{
+
+**Exercise:**
+```javascript
+const transactions = [
+  { id: 1, type: "income", amount: 5000 },
+  { id: 2, type: "expense", amount: 1200 },
+  { id: 3, type: "income", amount: 3000 },
+  { id: 4, type: "expense", amount: 800 },
+  { id: 5, type: "income", amount: 2000 }
+]
+
+// TODO: Group transactions by type
+// Result: { income: [...], expense: [...] }
+```
+
+**Solution:**
+```javascript
+const transactions = [
+  { id: 1, type: "income", amount: 5000 },
+  { id: 2, type: "expense", amount: 1200 },
+  { id: 3, type: "income", amount: 3000 },
+  { id: 4, type: "expense", amount: 800 },
+  { id: 5, type: "income", amount: 2000 }
+]
+
+const grouped = transactions.reduce((acc, transaction) => {
+  const type = transaction.type
+
+  // Create array if doesn't exist
+  if (!acc[type]) {
+    acc[type] = []
+  }
+
+  // Add transaction to appropriate group
+  acc[type].push(transaction)
+
+  return acc
+}, {})
+
+console.log(grouped)
+/*
+{
+  income: [
+    { id: 1, type: "income", amount: 5000 },
+    { id: 3, type: "income", amount: 3000 },
+    { id: 5, type: "income", amount: 2000 }
+  ],
+  expense: [
+    { id: 2, type: "expense", amount: 1200 },
+    { id: 4, type: "expense", amount: 800 }
+  ]
+}
+*/
+
+// Calculate totals per group:
+const totals = Object.entries(grouped).map(([type, items]) => ({
+  type,
+  total: items.reduce((sum, item) => sum + item.amount, 0)
+}))
+console.log(totals)
+// [{ type: "income", total: 10000 }, { type: "expense", total: 2000 }]
+```
+
+**LazyVim Tip:** Use `=i{` to auto-format the grouped object for readability.
+
+}}}
+
+### Warmup 4.3: Chain Multiple Methods {{{
+
+**Exercise:**
+```javascript
+const orders = [
+  { id: 1, customer: "Ana", total: 500, status: "completed" },
+  { id: 2, customer: "Bruno", total: 1200, status: "completed" },
+  { id: 3, customer: "Carla", total: 300, status: "pending" },
+  { id: 4, customer: "Diana", total: 2000, status: "completed" },
+  { id: 5, customer: "Eduardo", total: 150, status: "cancelled" }
+]
+
+// TODO: Get total revenue from completed orders over $500
+```
+
+**Solution:**
+```javascript
+const orders = [
+  { id: 1, customer: "Ana", total: 500, status: "completed" },
+  { id: 2, customer: "Bruno", total: 1200, status: "completed" },
+  { id: 3, customer: "Carla", total: 300, status: "pending" },
+  { id: 4, customer: "Diana", total: 2000, status: "completed" },
+  { id: 5, customer: "Eduardo", total: 150, status: "cancelled" }
+]
+
+const revenue = orders
+  .filter(order => order.status === "completed")  // Only completed
+  .filter(order => order.total > 500)             // Over $500
+  .reduce((sum, order) => sum + order.total, 0)   // Sum totals
+
+console.log(revenue)  // 3200 (1200 + 2000)
+
+// Alternative: Single filter
+const revenue2 = orders
+  .filter(o => o.status === "completed" && o.total > 500)
+  .reduce((sum, o) => sum + o.total, 0)
+
+// Step by step visualization:
+const completed = orders.filter(o => o.status === "completed")
+console.log("Completed:", completed.length)  // 3
+
+const highValue = completed.filter(o => o.total > 500)
+console.log("High value:", highValue.length)  // 2
+
+const total = highValue.reduce((sum, o) => sum + o.total, 0)
+console.log("Total:", total)  // 3200
+```
+
+**LazyVim Tip:** Use `Vj` to select multiple lines, then `>` to indent for readability.
+
+}}}
+
+### Warmup 4.4: Build Lookup Object {{{
+
+**Exercise:**
+```javascript
+const products = [
+  { sku: "MSE-001", name: "Mouse", price: 200 },
+  { sku: "KBD-002", name: "Teclado", price: 500 },
+  { sku: "MON-003", name: "Monitor", price: 3000 }
+]
+
+// TODO: Create lookup object where sku is key
+// Result: { "MSE-001": {...}, "KBD-002": {...}, ... }
+```
+
+**Solution:**
+```javascript
+const products = [
+  { sku: "MSE-001", name: "Mouse", price: 200 },
+  { sku: "KBD-002", name: "Teclado", price: 500 },
+  { sku: "MON-003", name: "Monitor", price: 3000 }
+]
+
+// Method 1: Using reduce
+const lookup = products.reduce((acc, product) => {
+  acc[product.sku] = product
+  return acc
+}, {})
+
+console.log(lookup)
+/*
+{
+  "MSE-001": { sku: "MSE-001", name: "Mouse", price: 200 },
+  "KBD-002": { sku: "KBD-002", name: "Teclado", price: 500 },
+  "MON-003": { sku: "MON-003", name: "Monitor", price: 3000 }
+}
+*/
+
+// Usage: Fast lookups by SKU
+console.log(lookup["KBD-002"].price)  // 500
+
+// Method 2: Using Object.fromEntries (modern)
+const lookup2 = Object.fromEntries(
+  products.map(p => [p.sku, p])
+)
+
+// Why this is useful:
+// Array.find() = O(n) - has to search
+// Object lookup = O(1) - instant access
+```
+
+}}}
+
+### Warmup 4.5: Flatten Nested Arrays {{{
+
+**Exercise:**
+```javascript
+const teams = [
+  { name: "Frontend", members: ["Ana", "Bruno"] },
+  { name: "Backend", members: ["Carla", "Diego", "Elena"] },
+  { name: "DevOps", members: ["Franco"] }
+]
+
+// TODO: Get a single array of all member names
+```
+
+**Solution:**
+```javascript
+const teams = [
+  { name: "Frontend", members: ["Ana", "Bruno"] },
+  { name: "Backend", members: ["Carla", "Diego", "Elena"] },
+  { name: "DevOps", members: ["Franco"] }
+]
+
+// Method 1: flatMap (recommended)
+const allMembers = teams.flatMap(team => team.members)
+console.log(allMembers)
+// ["Ana", "Bruno", "Carla", "Diego", "Elena", "Franco"]
+
+// Method 2: map + flat
+const allMembers2 = teams.map(team => team.members).flat()
+
+// Method 3: reduce + concat
+const allMembers3 = teams.reduce((all, team) => {
+  return all.concat(team.members)
+}, [])
+
+// Advanced: Include team name
+const withTeams = teams.flatMap(team =>
+  team.members.map(member => ({
+    name: member,
+    team: team.name
+  }))
+)
+console.log(withTeams)
+/*
+[
+  { name: "Ana", team: "Frontend" },
+  { name: "Bruno", team: "Frontend" },
+  { name: "Carla", team: "Backend" },
+  ...
+]
+*/
+```
+
+}}}
+
+### Warmup 4.6: Complex Transformation {{{
+
+**Exercise:**
+```javascript
+const rawData = [
+  { userId: 1, purchaseDate: "2024-01-15", amount: 500 },
+  { userId: 2, purchaseDate: "2024-01-16", amount: 1200 },
+  { userId: 1, purchaseDate: "2024-02-01", amount: 300 },
+  { userId: 3, purchaseDate: "2024-02-05", amount: 2000 },
+  { userId: 2, purchaseDate: "2024-02-10", amount: 800 }
+]
+
+// TODO: Transform to:
+// [
+//   { userId: 1, totalSpent: 800, purchases: 2 },
+//   { userId: 2, totalSpent: 2000, purchases: 2 },
+//   { userId: 3, totalSpent: 2000, purchases: 1 }
+// ]
+```
+
+**Solution:**
+```javascript
+const rawData = [
+  { userId: 1, purchaseDate: "2024-01-15", amount: 500 },
+  { userId: 2, purchaseDate: "2024-01-16", amount: 1200 },
+  { userId: 1, purchaseDate: "2024-02-01", amount: 300 },
+  { userId: 3, purchaseDate: "2024-02-05", amount: 2000 },
+  { userId: 2, purchaseDate: "2024-02-10", amount: 800 }
+]
+
+// Step 1: Group by userId
+const grouped = rawData.reduce((acc, purchase) => {
+  const id = purchase.userId
+
+  if (!acc[id]) {
+    acc[id] = []
+  }
+
+  acc[id].push(purchase)
+  return acc
+}, {})
+
+// Step 2: Transform to summary
+const summary = Object.entries(grouped).map(([userId, purchases]) => ({
+  userId: parseInt(userId),
+  totalSpent: purchases.reduce((sum, p) => sum + p.amount, 0),
+  purchases: purchases.length
+}))
+
+console.log(summary)
+/*
+[
+  { userId: 1, totalSpent: 800, purchases: 2 },
+  { userId: 2, totalSpent: 2000, purchases: 2 },
+  { userId: 3, totalSpent: 2000, purchases: 1 }
+]
+*/
+
+// All in one chain:
+const summary2 = Object.values(
+  rawData.reduce((acc, p) => {
+    if (!acc[p.userId]) {
+      acc[p.userId] = { userId: p.userId, totalSpent: 0, purchases: 0 }
+    }
+    acc[p.userId].totalSpent += p.amount
+    acc[p.userId].purchases += 1
+    return acc
+  }, {})
+)
+```
+
+**LazyVim Tip:** Use `zf` in visual mode to create custom folds for complex functions.
+
+}}}
+
+}}}
+
+## 🎯 Challenge Exercises {{{
+
+### Challenge 1: E-commerce Cart {{{
+
+**Scenario:**
+```javascript
+const cartItems = [
+  { id: 1, product: "Laptop", price: 15000, quantity: 1, discount: 0.1 },
+  { id: 2, product: "Mouse", price: 300, quantity: 2, discount: 0 },
+  { id: 3, product: "Teclado", price: 800, quantity: 1, discount: 0.15 }
+]
+
+// TODO:
+// 1. Calculate subtotal (price * quantity) for each item
+// 2. Apply discount to each item
+// 3. Calculate final total for entire cart
+// 4. Find most expensive item (after discount)
+```
+
+**Your turn!** Try solving before looking at solution.
+
+<details>
+<summary>Solution (click to reveal)</summary>
+
+```javascript
+const cartItems = [
+  { id: 1, product: "Laptop", price: 15000, quantity: 1, discount: 0.1 },
+  { id: 2, product: "Mouse", price: 300, quantity: 2, discount: 0 },
+  { id: 3, product: "Teclado", price: 800, quantity: 1, discount: 0.15 }
+]
+
+// 1 & 2: Add subtotal and discounted price
+const withPrices = cartItems.map(item => ({
+  ...item,
+  subtotal: item.price * item.quantity,
+  finalPrice: item.price * item.quantity * (1 - item.discount)
+}))
+
+// 3: Total
+const total = withPrices.reduce((sum, item) => sum + item.finalPrice, 0)
+console.log(`Total: $${total}`)  // Total: $14230
+
+// 4: Most expensive
+const mostExpensive = withPrices.reduce((max, item) =>
+  item.finalPrice > max.finalPrice ? item : max
+)
+console.log(`Most expensive: ${mostExpensive.product}`)  // Laptop
+```
+
+</details>
+
+}}}
+
+### Challenge 2: Student Grade Analysis {{{
+
+**Scenario:**
+```javascript
+const students = [
+  { name: "Ana", scores: [85, 90, 78] },
+  { name: "Bruno", scores: [92, 88, 95] },
+  { name: "Carla", scores: [70, 65, 72] },
+  { name: "Diego", scores: [88, 85, 90] }
+]
+
+// TODO:
+// 1. Calculate average score for each student
+// 2. Determine pass/fail (average >= 80 = pass)
+// 3. Get list of students who passed
+// 4. Calculate class average
+```
+
+**Your turn!** Try solving before looking at solution.
+
+<details>
+<summary>Solution (click to reveal)</summary>
+
+```javascript
+const students = [
+  { name: "Ana", scores: [85, 90, 78] },
+  { name: "Bruno", scores: [92, 88, 95] },
+  { name: "Carla", scores: [70, 65, 72] },
+  { name: "Diego", scores: [88, 85, 90] }
+]
+
+// 1: Calculate averages
+const withAverages = students.map(student => {
+  const avg = student.scores.reduce((sum, score) => sum + score, 0) / student.scores.length
+  return {
+    ...student,
+    average: avg,
+    passed: avg >= 80
+  }
+})
+
+// 2 & 3: Who passed?
+const passed = withAverages.filter(s => s.passed)
+console.log("Passed:", passed.map(s => s.name))
+// ["Ana", "Bruno", "Diego"]
+
+// 4: Class average
+const classAvg = withAverages.reduce((sum, s) => sum + s.average, 0) / withAverages.length
+console.log(`Class average: ${classAvg.toFixed(2)}`)
+// Class average: 82.17
+```
+
+</details>
+
+}}}
+
+### Challenge 3: API Response Transformation {{{
+
+**Scenario:**
+```javascript
+// Raw API response
+const apiResponse = {
+  users: [
+    { id: 1, username: "ana_dev", email: "ana@example.com" },
+    { id: 2, username: "bruno_code", email: "bruno@example.com" }
+  ],
+  posts: [
+    { id: 101, userId: 1, title: "First post", likes: 10 },
+    { id: 102, userId: 1, title: "Second post", likes: 5 },
+    { id: 103, userId: 2, title: "Bruno's post", likes: 20 }
+  ]
+}
+
+// TODO: Transform to:
+// [
+//   {
+//     username: "ana_dev",
+//     postCount: 2,
+//     totalLikes: 15,
+//     posts: [...]
+//   },
+//   {
+//     username: "bruno_code",
+//     postCount: 1,
+//     totalLikes: 20,
+//     posts: [...]
+//   }
+// ]
+```
+
+**Your turn!** This is a complex one - take your time.
+
+<details>
+<summary>Solution (click to reveal)</summary>
+
+```javascript
+const apiResponse = {
+  users: [
+    { id: 1, username: "ana_dev", email: "ana@example.com" },
+    { id: 2, username: "bruno_code", email: "bruno@example.com" }
+  ],
+  posts: [
+    { id: 101, userId: 1, title: "First post", likes: 10 },
+    { id: 102, userId: 1, title: "Second post", likes: 5 },
+    { id: 103, userId: 2, title: "Bruno's post", likes: 20 }
+  ]
+}
+
+const transformed = apiResponse.users.map(user => {
+  // Get posts for this user
+  const userPosts = apiResponse.posts.filter(post => post.userId === user.id)
+
+  // Calculate stats
+  const totalLikes = userPosts.reduce((sum, post) => sum + post.likes, 0)
+
+  return {
+    username: user.username,
+    postCount: userPosts.length,
+    totalLikes: totalLikes,
+    posts: userPosts.map(p => ({ title: p.title, likes: p.likes }))
+  }
+})
+
+console.log(JSON.stringify(transformed, null, 2))
+```
+
+</details>
+
+}}}
+
+}}}
+
+## 📚 Quick Reference {{{
+
+### Array Methods Cheat Sheet {{{
+
+```javascript
+// TRANSFORM
+.map(item => newItem)           // Transform each item
+
+// FILTER
+.filter(item => condition)      // Keep items that match
+
+// FIND
+.find(item => condition)        // First match or undefined
+.findIndex(item => condition)   // Index of first match or -1
+
+// CHECK
+.includes(value)                // Does array contain value?
+.some(item => condition)        // Do ANY items match?
+.every(item => condition)       // Do ALL items match?
+
+// AGGREGATE
+.reduce((acc, item) => newAcc, initial)  // Accumulate to single value
+
+// SORT
+.sort((a, b) => a - b)          // Sort numbers ascending
+.sort((a, b) => b - a)          // Sort numbers descending
+.sort((a, b) => a.localeCompare(b))  // Sort strings
+
+// FLATTEN
+.flat()                         // Flatten one level
+.flat(2)                        // Flatten two levels
+.flatMap(item => array)         // Map + flatten
+
+// OTHERS
+.slice(start, end)              // Copy portion
+.concat(otherArray)             // Combine arrays
+.join(separator)                // Array to string
+```
+
+}}}
+
+### Object Methods Cheat Sheet {{{
+
+```javascript
+// KEYS & VALUES
+Object.keys(obj)                // Array of keys
+Object.values(obj)              // Array of values
+Object.entries(obj)             // Array of [key, value] pairs
+
+// CREATE
+Object.fromEntries(pairs)       // Create object from [key, value] pairs
+Object.assign({}, obj1, obj2)   // Merge objects
+{ ...obj1, ...obj2 }            // Spread merge
+
+// CHECK
+obj.hasOwnProperty('key')       // Does property exist?
+'key' in obj                    // Does property exist? (includes inherited)
+
+// TRANSFORM
+Object.entries(obj).map(([k, v]) => ...)  // Transform to array
+Object.fromEntries(                       // Transform back to object
+  Object.entries(obj).map(...)
+)
+```
+
+}}}
+
+### Common Patterns {{{
+
+```javascript
+// PATTERN: Filter + Map
+const result = array
+  .filter(item => condition)
+  .map(item => transform)
+
+// PATTERN: Group by property
+const grouped = array.reduce((acc, item) => {
+  const key = item.property
+  if (!acc[key]) acc[key] = []
+  acc[key].push(item)
+  return acc
+}, {})
+
+// PATTERN: Sum property
+const total = array.reduce((sum, item) => sum + item.value, 0)
+
+// PATTERN: Find max/min
+const max = array.reduce((max, item) =>
+  item.value > max.value ? item : max
+)
+
+// PATTERN: Create lookup
+const lookup = array.reduce((acc, item) => {
+  acc[item.id] = item
+  return acc
+}, {})
+
+// PATTERN: Unique values
+const unique = [...new Set(array)]
+
+// PATTERN: Count occurrences
+const counts = array.reduce((acc, item) => {
+  acc[item] = (acc[item] || 0) + 1
+  return acc
+}, {})
+```
+
+}}}
+
+}}}
+
+## 🎓 Next Steps {{{
+
+### Practice Recommendations {{{
+
+1. **Daily Warmup:** Do 2-3 exercises from different levels each morning
+2. **Real Projects:** Apply these patterns to actual code you're writing
+3. **Code Reviews:** Look for opportunities to simplify loops with these methods
+4. **Performance:** Learn when to use forEach vs map vs reduce
+5. **Readability:** Chain methods for clarity, but don't overdo it
+
+}}}
+
+### Advanced Topics to Explore {{{
+
+- **Immutability:** Why and when to avoid mutating arrays/objects
+- **Performance:** Big O notation for different operations
+- **Async Arrays:** Using Promise.all() with map
+- **Functional Programming:** Compose, pipe, curry
+- **TypeScript:** Adding types to these patterns
+- **Lodash/Ramda:** Utility libraries for advanced operations
+
+}}}
+
+### Resources {{{
+
+- **MDN Docs:** [Array methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
+- **Creta Lessons:** Review "Enunciados" for OOP patterns with arrays
+- **Practice:** [JavaScript30](https://javascript30.com/) challenges
+- **Reference:** Keep this file open in LazyVim while coding!
+
+}}}
+
+}}}
+
+---
+
+**Pro Tip:** Keep this file in your `.config/nvim` folder or workspace root for quick reference while coding. Use `<leader>ff` in LazyVim to fuzzy find and open it instantly! 🚀