Live Instruction · JavaScript · ES6 · Masterschool
ES6 Features —
Open Gym Session
Two live open gym sessions covering the core ES6 feature set: destructuring, spread, rest parameters, for...of loops, arrow functions, default parameters, and template literals with live coding and real-time student Q&A.
The Session
Review, extend, and apply
ES6 introduced a set of syntax improvements that all aim at the same problem: less repetition and cleaner access to data. Destructuring, spread, and rest parameters are the core of that — three features that look different on the surface but share the same goal. This session was built around making that connection visible, rather than presenting each feature in isolation.
The session ran as an open gym — structured enough to cover the material, flexible enough to follow student questions. I started with a quick review for students who had attended the morning session, then extended into new territory: rest parameters, additional spread patterns, object destructuring inside function parameters, and template literals. Students asked questions and contributed answers throughout, including a type coercion discussion that turned into a live demo.
A NaN bug surfaced during the object destructuring demo — a missing property in the stats object — and rather than cutting away, I worked through it live: reading the output, forming a hypothesis, testing the fix. That kind of real-time debugging is exactly what students need to see alongside clean examples.
2
sessions · morning and evening
Masterschool Coding Bootcamp
JavaScript · ES6 · Udacity Curriculum
International cohort · Open gym format
The Content
What the session covered
Seven ES6 features across array and object manipulation, function syntax, and string formatting — taught live with student participation.
Array Destructuring
Demonstrated how to pull values out of an array using destructuring assignment — assigning x, y, z from a point array in one line instead of using bracket notation three times. Showed how extra commas skip elements to target specific positions.
Object Destructuring
Walked through destructuring an object to extract named properties without dot notation — pulling type, color, and carat from a gemstone object in one assignment. Extended the pattern to show destructuring directly inside a function parameter list.
Spread Operator — Combining Arrays
Showed how to use the spread operator to combine two arrays into a new one without mutating the originals — a pattern that shows up frequently in functional programming and React state management. Contrasted with the + operator, which coerces arrays to strings.
Spread Operator — Function Arguments
Demonstrated spreading an array into individual function arguments — using Math.max(...values) to find the maximum in an array rather than passing each element manually. Connected the pattern to how JavaScript treats function arguments.
Rest Parameters
Introduced the rest parameter syntax for capturing any number of arguments into a single array inside a function. Live coded a sum function with students — initializing a total variable, iterating with for...of, and returning the result.
Arrow Functions and for...of Loops
Reviewed the arrow function syntax — removing the function keyword and adding => after the parameter list — alongside the for...of loop as a cleaner alternative to traditional for loops when iterating over arrays.
Default Parameters and Template Literals
Covered two patterns for default parameters: inline defaults in the function signature, and using the || operator inside the function body. Closed with template literals — backticks, multi-line strings, and embedded expressions without string concatenation.
The Approach
Open gym with structured depth
Open gym sessions have to work for students at different stages. Some had been in the morning session; some were seeing this material for the first time. Starting with a brief review let returning students consolidate what they had already seen while giving new arrivals enough context to follow along. From there, the session moved forward into territory the morning session hadn't covered.
The live sum() problem was built with student input — one student suggested initializing a total variable at zero, another suggested the for...of loop, another filled in the accumulation step. Coding exactly what students said, rather than leading them to a pre-written answer, keeps the session collaborative and makes the solution feel earned.
The type coercion moment — when a student asked whether you could concatenate two arrays with the + operator — was unplanned but useful. We tried it live, saw that it coerced the arrays to strings instead of combining them, and used that to reinforce why the spread operator exists. Real questions produce better teaching moments than prepared examples because they reflect what students are actually confused about.
The session closed with a preview of the next day's topic — ES6 applied to functions — and a reminder that the recording and code snippet would be posted for anyone who missed it.
Quick Review
Recap for returning students · orient new arrivals
Core Concepts
Destructuring · spread · rest · for...of · arrows
Student Problems
Live sum() function built with student input
Live Debugging
NaN bug · read output · form hypothesis · fix
Q&A Throughout
Type coercion · join() · array + operator demo
Session Recording — Part 1
Morning Session
Destructuring arrays and objects, spread operator, rest parameters, for...of loops, arrow functions, and default parameters.
Session Recording — Part 2
Evening Session
Extended open gym with additional spread patterns, object destructuring inside function parameters, type coercion demo, and template literals.
Reflection
ES6 as a cluster, not a list
The risk with teaching ES6 as a feature list is that students walk away with seven disconnected syntax patterns instead of one coherent idea. Destructuring, spread, and rest parameters all solve the same problem — getting data in and out of arrays and objects with less repetition — and making that explicit changes how students remember and apply them.
The live debugging moment reinforced something that's easy to forget when sessions are over-prepared: students learn as much from watching you read an error and work through it as they do from watching you write correct code. The NaN bug wasn't planned, but it demonstrated exactly the kind of iterative troubleshooting that professional development actually looks like.
3
patterns · one goal
Destructure · Spread · Rest
Less repetition · cleaner data access
Arrays · objects · function parameters
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.