Real-world applications don't run on isolated strings and numbers. They run on users with profiles, shopping carts full of products, and lists of data that need to be searched, filtered, and transformed.
Without a solid grasp of how to structure and manipulate data, you'll constantly fight your own code. You'll write brittle programs that fall apart the moment requirements change. You'll loop through arrays manually when a single method call would do the job. And you'll create bugs that stem from not understanding how objects reference memory.
The Structured Data Workshop picks up right where Programming Foundations left off. You'll learn how to organize data using objects, arrays, and purpose-built data structures like Maps and Sets-- then master the patterns for manipulating that data efficiently.
This workshop is hands-on from the start. Every section builds on the last, taking you from creating your first object literal through chaining map, filter, and reduce to transform complex datasets in a single expression.
Objects
Objects are the most fundamental data structure in JavaScript. You've been using one every time you type console.log-- console is an object and log is a property on it. But creating and working with your own objects is where things get interesting.
In this section, you'll build a user management system while learning how objects work from the ground up:
- Creating object literals with properties and values
- Accessing properties with dot notation and bracket notation
- Defining reusable object types in TypeScript
- Working with optional properties and the optional chaining operator
- Using dynamic keys with computed property names
Arrays
If objects are baskets of named things, arrays are baskets of numbered things. They're everywhere in JavaScript-- lists of users, collections of products, sets of search results. Knowing how to create, access, and iterate over them is essential.
This section takes you from basic array creation through typed arrays of objects and multiple approaches to iteration:
- Creating arrays and accessing items by index
- Adding items with
pushand reading length - Typing arrays with TypeScript generics (
Array<Product>) - Building arrays of objects and accessing nested properties
- Iterating with
for...ofloops and traditionalforloops - Filtering items into new arrays based on conditions
Spread & Rest
Before spread and rest syntax existed, combining arrays and objects was tedious and error-prone. You'd have to manually index into arrays or copy properties one by one. Three little dots changed everything.
This is one of the most practical features in modern JavaScript. You'll use it constantly for merging configurations, copying objects, and writing flexible functions:
- Spreading object properties to create copies with overrides
- Understanding property order and which values win in conflicts
- Shallow copying vs. deep copying and the pitfalls of nested objects
- Accepting any number of arguments with rest parameters
- Spreading arrays into function arguments and new arrays
- Combining rest and spread for flexible utility functions
Destructuring
Pulling values out of objects and arrays one property at a time gets old fast. Destructuring lets you extract multiple values in a single statement-- and it's especially powerful in function parameter lists where you can pluck off exactly the options you need.
Here you'll practice the patterns you'll use daily in real TypeScript codebases:
- Extracting multiple properties from objects in a single declaration
- Renaming properties with aliases during destructuring
- Setting default values for missing or undefined properties
- Destructuring directly in function parameter lists
- Array destructuring with positional variable assignment
- Using rest syntax (
...rest) to collect remaining properties
Array Methods: Map
Transforming data is one of the most common tasks in any application. The map method lets you take an array and produce a new array where every item has been transformed-- without mutating the original.
This section teaches you the most-used array method in JavaScript and the patterns that make it powerful:
- Mapping an array of objects to an array of specific properties
- Transforming values during iteration (formatting prices, extracting labels)
- Creating new objects from existing data with
map - Implicit returns with arrow functions and the parenthesized object expression trick
- When to use
mapvs. aforloop
Array Methods: Filter & Reduce
Filtering narrows an array down to just the items you care about. Reducing collapses an entire array into a single value-- a total, a grouped object, or anything else. Together with map, they form the core toolkit for data transformation.
This section covers the remaining two powerhouse array methods and how to chain them together:
- Filtering arrays by property values, price ranges, and boolean flags
- Chaining
filterandmapfor concise data pipelines - Understanding
reducewith the accumulator pattern - Reducing arrays into totals, objects, and grouped categories
- When to reach for
reducevs. afor...ofloop - Passing
Booleantofilterto strip falsy values
Maps & Sets
Plain objects and arrays cover most situations, but JavaScript provides two purpose-built data structures for when you need fast lookups or guaranteed uniqueness. Maps let you use anything as a key-- not just strings. Sets automatically deduplicate your data.
In this section, you'll learn when and why to reach for these specialized structures:
- Creating a Map from an array of key-value pairs
- Looking up, checking, and deleting entries in a Map
- Using objects as Map keys for metadata storage
- Removing duplicates from an array with a Set
- Converting between Sets and arrays with
Array.fromand spread - Understanding referential equality and why identical-looking objects aren't deduplicated
