fix: address pedagogical issues in exercises

- Change 02.02 (Reassignment vs Mutation) from array to object mutation
  (arrays not yet introduced at this point in curriculum)
- Change 03.03 (Null and Undefined) to use ternary operators instead of
  if statements (if statements taught later in 04.01)
- Add callouts explaining built-in methods (Math.pow, Math.max, Math.min,
  Number(), throw, modulo operator) where they're used before formal
  introduction

Author: kentcdodds

exercises/02.variables/02.problem.reassignment-vs-mutation/README.mdx

@@ -13,29 +13,28 @@ x = 2 // x now points to a new value
 **Mutation**: Modifying the contents of an existing value
 
 ```ts
-const arr = [1, 2, 3]
-arr.push(4) // The array itself is modified (mutated)
+const obj = { count: 1 }
+obj.count = 2 // The object itself is modified (mutated)
 ```
 
 <callout-warning>
-	`const` prevents reassignment but NOT mutation! You can still push to a
-	`const` array or add properties to a `const` object.
+	`const` prevents reassignment but NOT mutation! You can still change
+	properties on a `const` object.
 </callout-warning>
 
 🐨 Open <InlineFile file="index.ts" /> and:
 
-1. Try to reassign the `const` array (see the error)
-2. Mutate the `const` array by adding an item
+1. Try to reassign the `const` object (see the error)
+2. Mutate the `const` object by changing its properties
 3. Observe that mutation works even with `const`
 
-💰 Common array mutations:
+💰 Common object mutations:
 
 ```ts
-arr.push(item) // Add to end
-arr.pop() // Remove from end
-arr[0] = newValue // Replace at index
+obj.property = newValue // Change a property
+obj.newProp = value // Add a new property
 ```
 
-📜 [MDN - Array methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
+📜 [MDN - Working with Objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)
 
 🐨 Once you've completed the exercise, run `node index.ts` in the playground to test your work!

exercises/02.variables/02.problem.reassignment-vs-mutation/index.ts

@@ -1,22 +1,22 @@
 // Understanding Reassignment vs Mutation
 
-// This array is declared with const
-const shoppingList = ['milk', 'eggs', 'bread']
+// This object is declared with const
+const person = { name: 'Alice', age: 30, city: 'Seattle' }
 
-console.log('Original list:', shoppingList)
+console.log('Original person:', person)
 
-// 🐨 Try to reassign shoppingList to a new array:
-// shoppingList = ['apples', 'oranges']
+// 🐨 Try to reassign person to a new object:
+// person = { name: 'Bob', age: 25, city: 'Portland' }
 // 💣 Uncomment the line above and see the TypeScript error
 
-// 🐨 Now try MUTATING the array by adding an item with push()
-// 💰 shoppingList.push('butter')
+// 🐨 Now try MUTATING the object by changing the age property
+// 💰 person.age = 31
 
-// 🐨 Mutate again by changing the first item
-// 💰 shoppingList[0] = 'almond milk'
+// 🐨 Mutate again by changing the city
+// 💰 person.city = 'Portland'
 
-console.log('Modified list:', shoppingList)
+console.log('Modified person:', person)
 
 // 🦉 Key insight: const prevents reassignment, not mutation!
-// The variable shoppingList always points to the SAME array,
-// but the contents of that array can change.
+// The variable person always points to the SAME object,
+// but the properties of that object can change.

exercises/02.variables/02.solution.reassignment-vs-mutation/index.test.ts

@@ -1,32 +1,27 @@
 import assert from 'node:assert/strict'
 import { test } from 'node:test'
-import { shoppingList } from './index.ts'
+import { person } from './index.ts'
 
-await test('shoppingList should be mutated correctly', () => {
+await test('person object should be mutated correctly', () => {
 	assert.deepStrictEqual(
-		shoppingList,
-		['almond milk', 'eggs', 'bread', 'butter'],
-		'🚨 shoppingList should contain ["almond milk", "eggs", "bread", "butter"] - use array methods like push() to add items',
-	)
-	assert.strictEqual(
-		shoppingList.length,
-		4,
-		'🚨 shoppingList should have 4 items - make sure you added all the required items',
+		person,
+		{ name: 'Alice', age: 31, city: 'Portland' },
+		'🚨 person should have age: 31 and city: "Portland" - mutate the object properties',
 	)
 })
 
-await test('first element should be "almond milk"', () => {
+await test('person age should be 31', () => {
 	assert.strictEqual(
-		shoppingList[0],
-		'almond milk',
-		'🚨 The first item should be "almond milk" - check the order you added items to the array',
+		person.age,
+		31,
+		'🚨 person.age should be 31 - change the age property from 30 to 31',
 	)
 })
 
-await test('last element should be "butter"', () => {
+await test('person city should be Portland', () => {
 	assert.strictEqual(
-		shoppingList[shoppingList.length - 1],
-		'butter',
-		'🚨 The last item should be "butter" - make sure you added it as the final item',
+		person.city,
+		'Portland',
+		'🚨 person.city should be "Portland" - change the city property',
 	)
 })

exercises/02.variables/02.solution.reassignment-vs-mutation/index.ts

@@ -1,25 +1,25 @@
 // Understanding Reassignment vs Mutation
 
-// This array is declared with const
-const shoppingList = ['milk', 'eggs', 'bread']
+// This object is declared with const
+const person = { name: 'Alice', age: 30, city: 'Seattle' }
 
-console.log('Original list:', shoppingList)
+console.log('Original person:', person)
 
 // ❌ This would cause an error - can't reassign a const
-// shoppingList = ['apples', 'oranges']
-// Error: Cannot assign to 'shoppingList' because it is a constant
+// person = { name: 'Bob', age: 25, city: 'Portland' }
+// Error: Cannot assign to 'person' because it is a constant
 
-// ✅ But we CAN mutate the array
-shoppingList.push('butter')
+// ✅ But we CAN mutate the object
+person.age = 31
 
-// ✅ And we can modify elements
-shoppingList[0] = 'almond milk'
+// ✅ And we can modify other properties
+person.city = 'Portland'
 
-console.log('Modified list:', shoppingList)
-// Output: ['almond milk', 'eggs', 'bread', 'butter']
+console.log('Modified person:', person)
+// Output: { name: 'Alice', age: 31, city: 'Portland' }
 
 // 🦉 Key insight: const prevents reassignment, not mutation!
-// The variable shoppingList always points to the SAME array,
-// but the contents of that array can change.
+// The variable person always points to the SAME object,
+// but the properties of that object can change.
 
-export { shoppingList }
+export { person }

exercises/03.primitive-types/03.problem.null-and-undefined/README.mdx

@@ -10,32 +10,32 @@ The difference:
 - **`null`** - The value was intentionally set to "nothing"
 
 ```ts
-let middleName: string | undefined // might not exist
-const deletedAt: Date | null = null // intentionally empty
+let middleName = undefined // not set yet
+const deletedAt = null // intentionally empty
 ```
 
-🐨 Open <InlineFile file="index.ts" /> and:
-
-1. Create a variable `discountCode` that can be `string` or `undefined`
-2. Create a variable `lastPurchaseDate` that can be `string` or `null`, set to
-   `null`
-3. Check if `discountCode` has a value and log an appropriate message
-4. Handle the case where `lastPurchaseDate` is `null`
+## Ternary Operator
 
-💰 Use union types with the pipe `|`:
+The ternary operator is a concise way to choose between two values based on a
+condition:
 
 ```ts
-let value: string | null = null
+const result = condition ? valueIfTrue : valueIfFalse
 ```
 
-💰 Check for null/undefined:
+🐨 Open <InlineFile file="index.ts" /> and:
+
+1. Create a variable `discountCode` set to `undefined`
+2. Create a variable `lastPurchaseDate` set to `null`
+3. Use the ternary operator to log whether `discountCode` has a value
+4. Use the ternary operator to handle `lastPurchaseDate` being `null`
+
+💰 Check for null/undefined with ternary:
 
 ```ts
-if (value !== undefined) {
-	// value is definitely defined here
-}
+console.log(value !== undefined ? 'Has value: ' + value : 'No value')
 ```
 
-📜 [TypeScript Handbook - Narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html)
+📜 [TypeScript Handbook - Null and Undefined](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#null-and-undefined)
 
 🐨 Once you've completed the exercise, run `node index.ts` in the playground to test your work!

exercises/03.primitive-types/03.problem.null-and-undefined/index.ts

@@ -1,18 +1,12 @@
 // Handling Missing Data
 // Working with null and undefined
 
-// 🐨 Create a variable `discountCode` of type `string | undefined`
-// Leave it unassigned (it will be undefined)
+// 🐨 Create a variable `discountCode` set to undefined
 
-// 🐨 Create a variable `lastPurchaseDate` of type `string | null`
-// Set it to null (intentionally no purchase yet)
+// 🐨 Create a variable `lastPurchaseDate` set to null
 
-// 🐨 Check if discountCode has a value
-// If it does, log "Discount code: [code]"
-// If not, log "No discount code available"
-// 💰 Use: if (discountCode !== undefined)
+// 🐨 Log whether discountCode has a value using a ternary operator
+// 💰 console.log(discountCode !== undefined ? 'Discount code: ' + discountCode : 'No discount code available')
 
-// 🐨 Check if lastPurchaseDate has a value
-// If it does, log "Last purchase: [date]"
-// If not, log "No previous purchases"
-// 💰 Use: if (lastPurchaseDate !== null)
+// 🐨 Log whether lastPurchaseDate has a value using a ternary operator
+// 💰 console.log(lastPurchaseDate !== null ? 'Last purchase: ' + lastPurchaseDate : 'No previous purchases')

exercises/03.primitive-types/03.solution.null-and-undefined/README.mdx

@@ -3,20 +3,16 @@
 👨‍💼 You've handled missing data safely! This is a crucial skill in real-world
 applications.
 
-🦉 The key insight is **narrowing**. When you check for `null` or `undefined`,
-TypeScript knows the type is more specific inside that block:
+🦉 The key insight: `null` and `undefined` represent two different kinds of
+"missing" values. You can check for each directly to decide what to do.
 
 ```ts
-let value: string | undefined
+const value = undefined
 
-if (value !== undefined) {
-	// TypeScript knows value is `string` here, not `string | undefined`
-	console.log(value.toUpperCase()) // ✅ Safe!
+if (value === undefined) {
+	console.log('Missing value')
 }
 ```
 
-This is one of TypeScript's superpowers—it tracks what you've checked and
-updates its understanding of types accordingly.
-
 In practice, many developers prefer `null` for intentional absence (like "user
 hasn't set this yet") and let `undefined` represent truly missing values.

exercises/03.primitive-types/03.solution.null-and-undefined/index.ts

@@ -1,20 +1,21 @@
 // Handling Missing Data
 // Working with null and undefined
 
-let discountCode: string | undefined
+const discountCode = undefined
 
-const lastPurchaseDate: string | null = null
+const lastPurchaseDate = null
 
-if (discountCode !== undefined) {
-	console.log(`Discount code: ${discountCode}`)
-} else {
-	console.log('No discount code available')
-}
+// Using ternary operators to check for values
+console.log(
+	discountCode !== undefined
+		? 'Discount code: ' + discountCode
+		: 'No discount code available',
+)
 
-if (lastPurchaseDate !== null) {
-	console.log(`Last purchase: ${lastPurchaseDate}`)
-} else {
-	console.log('No previous purchases')
-}
+console.log(
+	lastPurchaseDate !== null
+		? 'Last purchase: ' + lastPurchaseDate
+		: 'No previous purchases',
+)
 
 export { discountCode, lastPurchaseDate }