071
LVL 03 — MID DEVELOPERSESSION 071DAY 71

RECURSION

🎫 PIXELCRAFT-058
🐛Bug / ✨ Feature | 🟡 Medium | Priority: 🟠 High

A designer wants a recursive blur (blur the blur N times, decreasing intensity). Also: nested layer groups (group contains layers, which can contain groups) crash with a stack overflow.
CONCEPTS.UNLOCKED
🪞
Recursion
A function that calls itself. Solve a problem by breaking it into smaller versions of the same problem. Each call gets closer to the base case — then results bubble back up.
🛑
Base Case
When to stop. Without a base case, recursion runs forever → stack overflow. The base case is the simplest version of the problem that can be solved directly.
🔁
Recursive vs Iterative
Every recursive solution has an iterative equivalent. Some problems are naturally recursive (tree traversal, parsing). Choose whichever is clearer — recursion for trees, iteration for lists.
📚
The Call Stack
Each function call adds a frame to the stack. Deep recursion = tall stack. Too deep → stack overflow. JavaScript's default limit is ~10,000 frames.
🌳
Tree Traversal
Recursion's natural habitat. A folder contains folders. An HTML element contains elements. A layer group contains layer groups. Trees are recursive data structures.
⚔️
Divide and Conquer
Split → solve subproblems → combine. Merge sort, quick sort, binary search — all divide the problem in half recursively. This pattern gives O(n log n) performance.
HANDS-ON.TASKS
01
Recursive Blur Effect
function recursiveBlur( imageData, depth, intensity ) { // Base case: stop recursing if (depth <= 0 || intensity < 0.1) return imageData; // Apply blur at current intensity const blurred = applyBlur(imageData, intensity); // Recurse with reduced depth & intensity return recursiveBlur( blurred, depth - 1, intensity * 0.7 ); }
Each recursive call reduces the depth and intensity. The base case stops when depth hits 0 or intensity drops below 0.1. The result: a layered, artistic blur effect.
02
Fix Nested Layer Groups
function flattenLayers(layerGroup) { const result = []; for (const item of layerGroup.children) { if (item.type === 'layer') { result.push(item); } else if (item.type === 'group') { // Recursion: group can contain groups result.push(...flattenLayers(item)); } } return result; }
03
Recursive Deep Clone
function deepClone(obj) { if (obj === null || typeof obj !== 'object') return obj; if (Array.isArray(obj)) return obj.map( item => deepClone(item) ); const clone = {}; for (const key in obj) { clone[key] = deepClone(obj[key]); } return clone; }
04
Add Depth Limits & Visualize

Add recursion depth limits to prevent stack overflow. Compare: recursive Fibonacci (exponential — SLOW) vs iterative (linear — fast). Visualize: draw the call tree for recursiveBlur(img, 4, 1.0).

05
Close the Ticket
git switch -c feature/PIXELCRAFT-058-recursion git add server/ src/ git commit -m "Add recursive blur + fix nested layers (PIXELCRAFT-058)" git push origin feature/PIXELCRAFT-058-recursion # PR → Review → Merge → Close ticket ✅
CS.DEEP-DIVE

Recursion solves problems that contain smaller versions of themselves.

Recursive thinking is a fundamental problem-solving paradigm. Every recursive solution has an iterative equivalent, but some problems are naturally recursive.

// Where recursion shines:

Directory traversal
  A folder contains folders

HTML parsing
  An element contains elements

Merge sort
  Sort the halves, merge them

Quick sort
  Partition, sort the partitions

Fractal generation
  Draw the shape, draw smaller
  versions inside

// Fibonacci: the classic trap
Recursive: fib(40) → 2^40 calls 💀
Iterative: fib(40) → 40 steps ✅
// Recursion ≠ always better.
// Choose based on the problem shape.
"Recursion Lab"
[A]Build a recursive file explorer component in React. Given a nested folder structure, render expandable/collapsible directories. Click a folder → expand its children (which may also be folders).
[B]Implement memoized recursive Fibonacci. Compare call counts: naive fib(40) vs memoized fib(40). Visualize the call tree to see how memoization prunes redundant branches.
[C]Build a fractal generator: Sierpinski triangle or Koch snowflake using recursive Canvas drawing. Add a depth slider — watch the fractal grow more detailed with each recursion level.
REF.MATERIAL
VIDEO
Fireship
Ultra-fast recursion overview: base cases, call stacks, tree traversal, and when recursion beats iteration. Visual and concise.
RECURSIONQUICK
VIDEO
Harvard CS50
David Malan's legendary explanation of recursion: merge sort, call stacks, and the beauty of self-similar problems.
RECURSIONCSESSENTIAL
ARTICLE
javascript.info
In-depth JavaScript recursion: execution context, the stack, recursive traversal, linked lists. With interactive examples.
RECURSIONJAVASCRIPT
ARTICLE
Wikipedia
Formal recursion theory: base cases, recursive cases, tail recursion, mutual recursion, and the Ackermann function.
RECURSIONTHEORYCS
VIDEO
PBS NOVA
How recursive self-similarity appears everywhere in nature: coastlines, trees, blood vessels. Recursion isn't just code — it's the universe's design pattern.
FRACTALSVISUAL
// LEAVE EXCITED BECAUSE
The recursive blur creates beautiful artistic effects. Nested layer groups work without crashing. Recursion unlocked a new way of thinking about problems — seeing the small inside the large.