Add arrow functions and bigint/symbol exercises

kentcdodds · kentcdodds · commit d96d87b30b9d · 2026-01-13T08:44:50.000-07:00
- Add arrow functions exercise (04.functions/04.arrow-functions)
  teaching syntax, implicit returns, and when to use each form
- Add bigint and symbol exercise step (01.primitive-types/04.bigint-and-symbol)
- Update exercise READMEs and FINISHED files to reflect new content
diff --git a/exercises/01.primitive-types/04.problem.bigint-and-symbol/README.mdx b/exercises/01.primitive-types/04.problem.bigint-and-symbol/README.mdx
@@ -0,0 +1,52 @@
+# BigInt and Symbol
+
+👨‍💼 TypeScript has two more primitive types that are less commonly used but good
+to know about: `bigint` and `symbol`.
+
+## BigInt - Large Integers
+
+Regular `number` has limits—it can't accurately represent integers larger than
+`Number.MAX_SAFE_INTEGER` (about 9 quadrillion). `bigint` handles arbitrarily
+large integers:
+
+```ts
+const big: bigint = 9007199254740993n // Note the 'n' suffix
+const alsoBig: bigint = BigInt('9007199254740993')
+
+// BigInt arithmetic
+const sum = 1000000000000000000n + 1n // Works correctly!
+```
+
+<callout-warning>
+	BigInt and number don't mix directly. You can't do `5n + 3`—you need to
+	convert one type to the other.
+</callout-warning>
+
+## Symbol - Unique Identifiers
+
+Symbols are guaranteed-unique values, useful as object keys when you need to
+avoid name collisions:
+
+```ts
+const id: symbol = Symbol('userId')
+const anotherId: symbol = Symbol('userId')
+
+id === anotherId // false - each Symbol() creates a unique value!
+```
+
+Symbols are often used for "hidden" object properties or library-internal keys.
+
+🐨 Open <InlineFile file="index.ts" /> and:
+
+1. Create a bigint literal with the `n` suffix
+2. Perform arithmetic with bigint values
+3. Create symbols and observe their uniqueness
+
+💰 BigInt syntax:
+
+```ts
+const big: bigint = 123456789012345678901234567890n
+```
+
+📜 [MDN - BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)
+📜 [MDN - Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)
diff --git a/exercises/01.primitive-types/04.problem.bigint-and-symbol/index.ts b/exercises/01.primitive-types/04.problem.bigint-and-symbol/index.ts
@@ -0,0 +1,28 @@
+// BigInt and Symbol
+// Less common but important primitive types
+
+// 🐨 Create a bigint variable `largeNumber` with the value 9007199254740993n
+// This is larger than Number.MAX_SAFE_INTEGER!
+// 💰 const largeNumber: bigint = 9007199254740993n
+
+// 🐨 Create another bigint `anotherLarge` with value 1000000000000000000n
+
+// 🐨 Add them together into a variable called `sum`
+// 💰 const sum = largeNumber + anotherLarge
+
+// 🐨 Create a symbol called `userId` with description 'user-id'
+// 💰 const userId: symbol = Symbol('user-id')
+
+// 🐨 Create another symbol called `anotherId` with the same description 'user-id'
+
+// 🐨 Create a variable `areEqual` that compares userId === anotherId
+// This will be false because each Symbol() call creates a unique value!
+
+// Test - uncomment when ready
+// console.log('Large number:', largeNumber)
+// console.log('Sum of bigints:', sum)
+// console.log('userId:', userId)
+// console.log('anotherId:', anotherId)
+// console.log('Are symbols equal?', areEqual) // false
+
+export {}
diff --git a/exercises/01.primitive-types/04.solution.bigint-and-symbol/README.mdx b/exercises/01.primitive-types/04.solution.bigint-and-symbol/README.mdx
@@ -0,0 +1,32 @@
+# BigInt and Symbol
+
+👨‍💼 Nice work! You now know all of TypeScript's primitive types.
+
+🦉 When to use these types:
+
+**BigInt:**
+
+- Financial calculations requiring precision beyond `number`
+- Cryptographic operations
+- Working with database IDs that exceed safe integer limits
+- Any math requiring very large integers
+
+**Symbol:**
+
+- Creating unique object keys that won't collide with string keys
+- Library-internal properties that shouldn't be accessed directly
+- Well-known symbols like `Symbol.iterator` for custom iteration
+
+In practice, `number`, `string`, `boolean`, `null`, and `undefined` cover 99% of
+use cases. But it's good to know `bigint` and `symbol` exist when you need them!
+
+```ts
+// The complete set of TypeScript primitives:
+const str: string = 'hello'
+const num: number = 42
+const bool: boolean = true
+const nul: null = null
+const undef: undefined = undefined
+const big: bigint = 9007199254740993n
+const sym: symbol = Symbol('unique')
+```
diff --git a/exercises/01.primitive-types/04.solution.bigint-and-symbol/index.test.ts b/exercises/01.primitive-types/04.solution.bigint-and-symbol/index.test.ts
@@ -0,0 +1,60 @@
+import { testStep, expect } from '@epic-web/workshop-utils/test'
+import {
+	largeNumber,
+	anotherLarge,
+	sum,
+	userId,
+	anotherId,
+	areEqual,
+} from './index.ts'
+
+await testStep('largeNumber should be a bigint', async () => {
+	expect(
+		typeof largeNumber,
+		'🚨 largeNumber should be type bigint - use the n suffix: 9007199254740993n',
+	).toBe('bigint')
+	expect(
+		largeNumber,
+		'🚨 largeNumber should be 9007199254740993n',
+	).toBe(9007199254740993n)
+})
+
+await testStep('anotherLarge should be a bigint', async () => {
+	expect(
+		typeof anotherLarge,
+		'🚨 anotherLarge should be type bigint',
+	).toBe('bigint')
+	expect(
+		anotherLarge,
+		'🚨 anotherLarge should be 1000000000000000000n',
+	).toBe(1000000000000000000n)
+})
+
+await testStep('sum should be the addition of both bigints', async () => {
+	expect(
+		typeof sum,
+		'🚨 sum should be type bigint',
+	).toBe('bigint')
+	expect(
+		sum,
+		'🚨 sum should be largeNumber + anotherLarge',
+	).toBe(largeNumber + anotherLarge)
+})
+
+await testStep('userId and anotherId should be symbols', async () => {
+	expect(
+		typeof userId,
+		'🚨 userId should be type symbol - use Symbol("user-id")',
+	).toBe('symbol')
+	expect(
+		typeof anotherId,
+		'🚨 anotherId should be type symbol',
+	).toBe('symbol')
+})
+
+await testStep('symbols with same description should not be equal', async () => {
+	expect(
+		areEqual,
+		'🚨 areEqual should be false - each Symbol() creates a unique value even with the same description',
+	).toBe(false)
+})
diff --git a/exercises/01.primitive-types/04.solution.bigint-and-symbol/index.ts b/exercises/01.primitive-types/04.solution.bigint-and-symbol/index.ts
@@ -0,0 +1,21 @@
+// BigInt and Symbol
+// Less common but important primitive types
+
+// BigInt for large integers
+const largeNumber: bigint = 9007199254740993n
+const anotherLarge: bigint = 1000000000000000000n
+const sum: bigint = largeNumber + anotherLarge
+
+// Symbols are unique
+const userId: symbol = Symbol('user-id')
+const anotherId: symbol = Symbol('user-id')
+const areEqual: boolean = userId === anotherId // false!
+
+console.log('Large number:', largeNumber)
+console.log('Another large:', anotherLarge)
+console.log('Sum of bigints:', sum)
+console.log('userId:', userId)
+console.log('anotherId:', anotherId)
+console.log('Are symbols equal?', areEqual) // false - each Symbol is unique
+
+export { largeNumber, anotherLarge, sum, userId, anotherId, areEqual }
diff --git a/exercises/01.primitive-types/FINISHED.mdx b/exercises/01.primitive-types/FINISHED.mdx
@@ -9,6 +9,8 @@ You learned:
 - 📝 **Strings** hold text data and support template literals
 - ✅ **Booleans** are the foundation of conditional logic
 - ❓ **Null and undefined** represent absence of value in different ways
+- 🔢 **BigInt** handles integers larger than `Number.MAX_SAFE_INTEGER`
+- 🔑 **Symbol** creates unique identifiers that never collide
 
 🦉 A key insight: TypeScript's type inference often figures out types for you.
 You don't always need to write `: number` or `: string`—TypeScript can infer
diff --git a/exercises/01.primitive-types/README.mdx b/exercises/01.primitive-types/README.mdx
@@ -9,11 +9,15 @@ const name: string = 'Alice'
 const isActive: boolean = true
 ```
 
-These three types cover most of what you'll work with day-to-day:
+The core types you'll use most often:
 
 - **`number`** - All numeric values (integers, decimals, negatives)
 - **`string`** - Text data (always in quotes)
 - **`boolean`** - True or false values
+- **`null`** - Intentional absence of a value
+- **`undefined`** - Variable not yet assigned
+- **`bigint`** - Arbitrarily large integers
+- **`symbol`** - Unique identifiers
 
 ## Why Types Matter
 
diff --git a/exercises/02.variables/02.solution.reassignment-vs-mutation/README.mdx b/exercises/02.variables/02.solution.reassignment-vs-mutation/README.mdx
@@ -13,7 +13,7 @@ can be rearranged (mutation).
 🦉 If you want truly immutable data in TypeScript, you can use:
 
 - `as const` for literal values
-- `readonly` arrays: `readonly string[]`
+- `readonly` arrays: `ReadonlyArray<string>`
 - Libraries like Immer for complex immutability
 
 But for now, just remember: `const` = "I won't reassign this variable" not "this
diff --git a/exercises/02.variables/02.solution.reassignment-vs-mutation/index.ts b/exercises/02.variables/02.solution.reassignment-vs-mutation/index.ts
@@ -1,7 +1,7 @@
 // Understanding Reassignment vs Mutation
 
 // This array is declared with const
-const shoppingList: string[] = ['milk', 'eggs', 'bread']
+const shoppingList: Array<string> = ['milk', 'eggs', 'bread']
 
 console.log('Original list:', shoppingList)
 
diff --git a/exercises/03.control-flow/02.solution.loops/index.ts b/exercises/03.control-flow/02.solution.loops/index.ts
@@ -1,7 +1,7 @@
 // Shopping Cart Calculator
 // Using loops to process arrays
 
-const prices: number[] = [29.99, 9.99, 49.99, 4.99, 19.99]
+const prices: Array<number> = [29.99, 9.99, 49.99, 4.99, 19.99]
 
 let total = 0
 
diff --git a/exercises/03.control-flow/03.solution.for-of-iteration/index.ts b/exercises/03.control-flow/03.solution.for-of-iteration/index.ts
@@ -1,7 +1,7 @@
 // Shopping Cart Analysis
 // Using for...of for cleaner iteration
 
-const prices: number[] = [29.99, 9.99, 49.99, 4.99, 19.99]
+const prices: Array<number> = [29.99, 9.99, 49.99, 4.99, 19.99]
 
 let total = 0
 let highestPrice = prices[0]
diff --git a/exercises/04.functions/04.problem.arrow-functions/README.mdx b/exercises/04.functions/04.problem.arrow-functions/README.mdx
@@ -0,0 +1,48 @@
+# Arrow Functions
+
+👨‍💼 Arrow functions are a concise syntax for writing functions. They're
+especially useful for callbacks and short functions.
+
+```ts
+// Function declaration
+function double(n: number): number {
+	return n * 2
+}
+
+// Arrow function equivalent
+const double = (n: number): number => {
+	return n * 2
+}
+
+// Arrow function with implicit return (no braces!)
+const double = (n: number): number => n * 2
+```
+
+## When to Use Each Form
+
+| Context                       | Use                  | Example                           |
+| ----------------------------- | -------------------- | --------------------------------- |
+| Top-level named functions     | Function declaration | `function processOrder() { ... }` |
+| Callbacks                     | Arrow function       | `items.map((item) => item.price)` |
+| Short single-expression funcs | Arrow (implicit)     | `const double = (n) => n * 2`     |
+| Object methods                | Method shorthand     | `{ calculate() { ... } }`         |
+
+🐨 Open <InlineFile file="index.ts" /> and:
+
+1. Convert the function declarations to arrow functions
+2. Use implicit returns where the function body is a single expression
+3. Create a `processNumbers` function that uses callbacks with arrow functions
+
+💰 Implicit return syntax (no braces, no `return` keyword):
+
+```ts
+const add = (a: number, b: number): number => a + b
+```
+
+💰 Arrow functions in callbacks:
+
+```ts
+const doubled = numbers.map((n) => n * 2)
+```
+
+📜 [Function Forms](https://kentcdodds.com/blog/function-forms)
diff --git a/exercises/04.functions/04.problem.arrow-functions/index.ts b/exercises/04.functions/04.problem.arrow-functions/index.ts
@@ -0,0 +1,34 @@
+// Arrow Functions
+// Converting between function forms and using implicit returns
+
+// 🐨 Convert this function declaration to an arrow function with implicit return
+function double(n: number): number {
+	return n * 2
+}
+
+// 🐨 Convert this function declaration to an arrow function with implicit return
+function greet(name: string): string {
+	return `Hello, ${name}!`
+}
+
+// 🐨 Convert this to an arrow function (keep the explicit return - it has multiple lines)
+function calculateTotal(prices: number[], taxRate: number): number {
+	const subtotal = prices.reduce((sum, price) => sum + price, 0)
+	const tax = subtotal * taxRate
+	return subtotal + tax
+}
+
+// 🐨 Create an arrow function `isEven` that returns true if a number is even
+// 💰 Use implicit return: const isEven = (n: number): boolean => ...
+
+// 🐨 Create a function `processNumbers` that:
+// - Takes an array of numbers
+// - Returns an object with: doubled, evens, and sum
+// - Use arrow functions in the callbacks (map, filter, reduce)
+// 💰 {
+//   doubled: numbers.map((n) => ...),
+//   evens: numbers.filter((n) => ...),
+//   sum: numbers.reduce((acc, n) => ..., 0)
+// }
+
+export { double, greet, calculateTotal }
diff --git a/exercises/04.functions/04.solution.arrow-functions/README.mdx b/exercises/04.functions/04.solution.arrow-functions/README.mdx
@@ -0,0 +1,27 @@
+# Arrow Functions
+
+👨‍💼 Great work! You've learned when and how to use arrow functions.
+
+🦉 Key takeaways:
+
+1. **Implicit returns** work when the function body is a single expression—no
+   braces, no `return` keyword needed
+2. **Arrow functions are perfect for callbacks** because they're concise and
+   don't rebind `this`
+3. **Function declarations** are still best for top-level named functions
+   because of hoisting and clearer stack traces
+
+```ts
+// Use arrow functions for callbacks
+const doubled = numbers.map((n) => n * 2)
+const evens = numbers.filter((n) => n % 2 === 0)
+
+// Use function declarations for top-level functions
+function processOrder(order: Order): Receipt {
+	// ...
+}
+```
+
+The `this` binding difference matters in React class components (rarely used
+now) and some object-oriented patterns. Arrow functions capture `this` from
+their surrounding scope, while regular functions get their own `this`.
diff --git a/exercises/04.functions/04.solution.arrow-functions/index.test.ts b/exercises/04.functions/04.solution.arrow-functions/index.test.ts
diff --git a/exercises/04.functions/04.solution.arrow-functions/index.ts b/exercises/04.functions/04.solution.arrow-functions/index.ts
diff --git a/exercises/04.functions/FINISHED.mdx b/exercises/04.functions/FINISHED.mdx
diff --git a/exercises/04.functions/README.mdx b/exercises/04.functions/README.mdx
