Live Instruction · JavaScript · ES6 · Masterschool
ES6 Exercises —
Destructuring, Ternary, and Defensive Programming
A live exercise session working through the core ES6 feature set — object and array destructuring, arrow function shorthand, default parameters, rest and spread, the ternary operator, and the nullish coalescing operator — with students presenting answers live and a React preview at the close.
The Session
Exercises first, debrief together
Students came to this session having already worked through a set of ES6 exercises on their own. The open gym format put the answers in their hands first — the debrief was a chance to compare, correct, and extend what they'd built, not hear it for the first time.
The session moved through nine exercise types in sequence: object destructuring, arrow function shorthand, destructuring assignment, nested object destructuring, array destructuring with rest, default function parameters, spread with Math.max, object spread, and the ternary operator. The nullish coalescing operator came up as a natural extension of the ternary discussion.
Throughout, students were called on to present their answers live — which surfaced real questions, including a student's alternative approach to nested destructuring that turned into a live investigation. The session closed with an introduction to Epic React and Kent C. Dodds, the next phase of the curriculum.
9
ES6 exercises debriefed live
Masterschool Coding Bootcamp
JavaScript · ES6 · Udacity Curriculum
International cohort · Open gym format
The Content
What the session covered
Nine ES6 exercises debriefed live — students presented answers, instructor added context and connected each concept to React.
Object Destructuring
Framed destructuring as removing repetitive syntax — instead of writing user.name and user.age repeatedly, you extract the values once and work with them directly. Connected to readability: as React applications grow, less visual noise matters more.
Arrow Function Shorthand
Covered removing the function keyword from method definitions — the parentheses and curly braces already signal that it's a function, so the keyword is redundant. Showed the before and after with a method that had no body, making the change concrete.
Destructuring Assignment
Demonstrated const { name, age } = user as the pattern for pulling properties directly out of an object. Showed the contrast: instead of user.name everywhere, destructure once on line three and use name directly throughout. Explicitly connected this to how props destructuring works in React.
Nested Object Destructuring
Worked through destructuring an object inside an object — pointing first to the outer key, then destructuring the inner object. A student proposed an alternative approach live, which turned into a real investigation: it was a valid technique, but the exact syntax wasn't resolving as expected, so it was flagged for the answer sheet.
Array Destructuring and Rest
Showed array destructuring as the counterpart to object destructuring — const [a, b, c] = source gives you the first three elements by position, with any name you choose. Extended it with rest syntax to capture remaining elements, connecting it to the behavior of .slice() but with three dots instead.
Default Function Parameters
Used the increment function to show why defaults matter: without a default value for the second parameter, calling increment(5) produces NaN — a bug. Adding value = 1 as the default makes the function safe to call with or without an argument. Showed both the broken and working versions.
Spread with Math.max
Demonstrated spreading an array into Math.max — which expects individual numbers, not an array. Showed that passing the array directly produces NaN, because Math.max reads the documentation contract: a set of numbers, not a data structure. The spread operator unpacks the array before the function sees it.
Object Spread
Covered merging two objects using spread syntax — { ...obj1, ...obj2 } — as an alternative to Object.assign. Live discovery moment: when both objects share a key, the second object wins and overwrites the first. Noted that students would see Object.assign again in the Udacity Redux curriculum.
Ternary and Nullish Coalescing
Converted an if/else block to a ternary live — emphasizing that the return is implicit in a ternary, unlike an if statement. Extended into the nullish coalescing operator (??): if a value is null or undefined, fall back to a default. Introduced the term "defensive programming" and connected it to API data that arrives incomplete or unformatted.
The Approach
Students present, then instructor extends
The exercise-first format changes what the session is for. Students aren't receiving new information — they're checking and extending what they already built. That shifts the dynamic: they come in with something to defend or revise, which is a more active relationship with the material than passive listening.
The nested destructuring moment is worth noting. A student proposed an alternative approach — putting the inner key directly inside the curly braces — and it didn't resolve the way they expected. Rather than moving past it, the live investigation confirmed that the technique was valid but the specific syntax needed checking. Flagging it for the answer sheet is the honest move: it keeps the session moving while promising a real resolution.
Connecting every concept to React was the throughline. Destructuring maps directly to props. Ternary operators are how React handles conditional rendering inside JSX. Nullish coalescing shows up when API data comes back incomplete. Students were a week away from starting React, so every ES6 pattern they understood was one less thing to untangle later.
The NaN demo before introducing default parameters is a good example of the approach throughout: show the broken version first so the fix has a reason to exist. A default parameter that prevents a bug lands differently than one introduced as a feature in the abstract.
Exercises First
Students work problems before the session starts
Present Live
Students share answers · group confirms or corrects
Add Context
Why the pattern exists · how it shows up in React
Investigate Live
Real questions get real answers — or go on the answer sheet
React Preview
Epic React intro · Kent C. Dodds · next week
Session Recording
Watch the Session
Live ES6 exercise debrief — destructuring, ternary, defensive programming, and a React preview.
Reflection
Show the bug before the fix
The NaN output is one of the more useful things you can produce in a session on default parameters. It appears specifically because something is missing — the function received undefined where it expected a number — and it tells you exactly what kind of problem to solve. Triggering it on purpose, before adding the default, gives students a real error to recognize rather than an abstract rule to memorize.
The object spread key collision discovery worked the same way. The merged object came back without the expected value from the first object, which opened a real question: what happens when both objects share a key? That's not a gotcha — it's the actual behavior, and finding it live is more durable than reading about it in docs.
9
exercises · one session
Destructuring · Rest · Spread
Ternary · Nullish Coalescing · Defaults
Student answers · live investigation · React preview
Keep Exploring
Related Case Studies
Interested in working together?
I'm open to remote opportunities in technical learning experience design, developer education, and customer enablement.