032
LVL 02 — CIRCUIT BREAKER SESSION 032 DAY 32

MODERN JS

🎫 PIXELCRAFT-020
🔧 Refactor | 🟡 Medium | Priority: 🔵 Low

The codebase mixes old and new JS patterns. Modernize using ES6+ features. Clean up awkward code patterns.
CONCEPTS.UNLOCKED
{ }
Destructuring
const { name, value } = filter — extract properties into variables. const [first, ...rest] = list — extract array elements. Cleaner than manual dot-access.
...
Spread Operator
[...arr] copies arrays. {...obj} copies objects. {...defaults, ...overrides} merges with overrides winning. Non-destructive data manipulation.
?.
Optional Chaining
user?.settings?.theme — safe navigation. If any link in the chain is null/undefined, returns undefined instead of crashing. No more "Cannot read property of null."
??
Nullish Coalescing
value ?? defaultValue — use default only if value is null or undefined. Unlike ||, it doesn't treat 0 or "" as falsy. Perfect for settings with valid zero values.
=
Default & Rest Parameters
function resize(img, width = 800, height = 600) — defaults if not provided. function sum(...numbers) — rest collects remaining args into an array.
&&
Short-Circuit Evaluation
isLoaded && applyFilter() — only calls applyFilter if isLoaded is truthy. Concise conditional execution without an if statement.
HANDS-ON.TASKS
01
Refactor with Destructuring
// Before: const name = filter.name; const value = filter.value; const intensity = filter.intensity; // After: const { name, value, intensity } = filter;
3 lines become 1. The variable names must match the property names (or use renaming: { name: filterName }). This works for function parameters too.
02
Safe Navigation with ?. and ??
// Before: crashes if settings or advanced is undefined const blur = filter.settings.advanced.blur; // After: returns undefined safely const blur = filter?.settings?.advanced?.blur ?? 0;
Optional chaining (?.) stops and returns undefined if any part is null/undefined. Nullish coalescing (??) provides a fallback only for null/undefined (not 0 or "").
03
Non-Destructive Copies with Spread
// Clone pixel data without mutation const copy = new Uint8ClampedArray([...originalPixels]); // Merge settings (user overrides defaults) const settings = { ...defaultSettings, ...userSettings };

Spread creates a shallow copy. Properties from the later object overwrite earlier ones — perfect for merging defaults with user preferences.

04
Refactor 15 Code Snippets

Go through the codebase and modernize 15 code snippets using destructuring, spread, optional chaining, nullish coalescing, default parameters, and rest parameters.

05
Fix 3 Existing Crashes

Fix 3 existing crashes caused by accessing properties on undefined values. Replace with optional chaining + nullish coalescing.

06
Close the Ticket
git switch -c refactor/PIXELCRAFT-020-modern-js git add src/scripts/ git commit -m "Modernize codebase with ES6+ features (PIXELCRAFT-020)" git push origin refactor/PIXELCRAFT-020-modern-js # PR → Review → Merge → Close ticket ✅
CS.DEEP-DIVE

Language evolution.

JavaScript was created in 10 days in 1995. ES6 (2015) was the biggest upgrade. Each feature solves a real pain point.

// ES6 (2015) — the biggest upgrade:

Destructuring    → solved verbose extraction
Arrow functions  → solved this confusion
Promises         → solved callback hell
Modules          → solved global scope chaos
Classes          → solved prototype confusion

// Optional chaining (?.) solves the
// "billion dollar mistake" — null reference
// errors, coined by Tony Hoare, inventor
// of null.

// Understanding WHY features were added
// teaches you to recognize the problems
// they solve — in any language.
"Modern Refactor"
[A] Find every instance of manual property access (obj.a, obj.b, obj.c) in the codebase and convert to destructuring. Count how many lines you saved.
[B] Add a "deep merge" function for nested settings: { ...defaults, filterValues: { ...defaults.filterValues, ...userSettings.filterValues } }.
[C] Research the TC39 proposals for upcoming JS features (stage 3). Pick one you're excited about and explain why it would improve PixelCraft's code.
REF.MATERIAL
ARTICLE
Mozilla Developer Network
Complete reference: object and array destructuring, default values, nested patterns, renaming, and computed property names.
DESTRUCTURINGMDNREFERENCE
VIDEO
Web Dev Simplified
Practical walkthrough of destructuring, spread, rest, default parameters, template literals, and optional chaining.
ES6+PRACTICAL
ARTICLE
Mozilla Developer Network
Safe property access: syntax, method calls, computed properties, and short-circuiting behavior.
OPTIONAL CHAININGMDN
ARTICLE
javascript.info
Interactive tutorial on destructuring: objects, arrays, nested patterns, function parameters, and smart defaults.
DESTRUCTURINGINTERACTIVE
VIDEO
Fireship
Rapid overview of spread and rest: copying, merging, function args, and destructuring combinations.
SPREADQUICK
// LEAVE EXCITED BECAUSE
Code that took 10 lines now takes 1. Modern JS is concise and expressive. You can read the codebase fluently.