Transform your arrays efficiently with the powerful map method. Discover how to reshape data and enhance your JavaScript skills today!

[00:00] Let's jump in. So we're gonna transform these products into a couple things. So starting with this one, we're gonna grab all the names. So we're going to go from an array of objects to an array of string and names. So we're going to say products dot map.

[00:14] We're gonna pass a arrow function. You could also pass a function expression here. This would work just as well. You would need a return statement here because function expressions do not have an implicit return. So this would work just as well.

[00:28] And the cool thing about this is you could actually give it a name. So, get product name, and that could be useful. But like almost maybe not not quite a 100% of the time but like 99% of the time, I'm gonna be using an arrow function. It's really terse. It's very obvious what's going on, and so that's the way I like to do it.

[00:49] One quick tip that I didn't mention when we talked about arrays. You don't have to have the parenthesis on something like this. So those parenthesis are actually optional when you have one and only one parameter. If you want to have the index here, then you do have to have the parenthesis. Javascript gets confused if you don't.

[01:10] And if you have no arguments, then you also have to have the parenthesis. Javascript will get confused if you don't. So anyway, I pretty much always add the parenthesis or in fact, my formatter will add them automatically for me. So, anyway, just a fun little quick tip for you as an aside. But we're gonna make this arrow function that accepts the product.

[01:32] So that's what map does is it calls this function, gives each individual item. So it's gonna call it a bunch of times and it'll give each individual item. Accepts that product and then returns the product name. And so as it's going through, it's gonna add, each one of these. In fact, let's do this.

[01:48] Let's do, the for loop version of this. So here's our names is an array of strings and then we'll say four, four products. There we go. That is the equivalent of what we have done here. So we've got our names array.

[02:07] We're gonna iterate over all the products and we're going to push onto, that product. Now, actually, let's iterate a little bit more on this. What if we wanted to make a general map? So we're gonna say, function map. We'll take, an array and a callback.

[02:23] Here we go. So we're gonna genericize this, make it more generic so that it works with anything. And so we're gonna map, an array of anything. We'll also accept a callback that iterates on each one of these. And now we can say our names is map the products where each product, we pluck the name off of, off of that.

[02:46] So there you go. That's a couple different ways to do the exact same thing. The array method has this built in, so we just use that one. But if you wanted to do do it this way, it would work exactly pretty much exactly the same. And then you can make a generic version of that so that you can map all sorts of, arrays.

[03:04] But again, it's built in, so we'll just use the built in. Okay. Sometimes I feel like it helps to see how would I do this if that function didn't exist there. And actually, one of the earliest bits of advice that I got when I was learning about JavaScript in the first place was, somebody recommended that I go and implement, utility functions from a utility library that we were using. And by doing that, I just get a lot of practice.

[03:29] So, something to think about if you ever wanna get some practice with JavaScript. Just go and implement some utility functions that you're finding in other libraries or even built in utilities like this one. Okay. Great. So let's go ahead and get all the prices and we're gonna have them be formatted.

[03:44] So we're gonna map, the products, each product. We're going to, create a string with a dollar sign and then, we'll interpolate the product's price too fixed, with the decimal of two. So that way if it's got, $0.00 3, whatever, it's gonna just fix it down to, that decimal place. And that gives us our names and our prices. Let's, get those both logged.

[04:07] Here we go. Here are all the names. Here are all the prices formatted nicely. So, it's not just grab the, the item but you can actually perform a transformation on each item as we go. And then, we can actually use map to create new objects as well.

[04:24] So, we just want the name and the price label. We can map through each one of these and we're or or not destructuring here. We are, creating an object here. That, parenthesis is actually important. Here's another fun tip for you.

[04:39] So you know how, arrow functions have that implicit return. We could write this differently, by saying that. Right? It's the exact same thing here. Let's, do the summary thing there.

[04:51] There we go. So, if we wanna use the implicit return, then we just get rid of the return. We get rid of that curly brace, we get rid of that curly brace. But what that looks kinda funny. Right?

[05:02] Because we have the curly brace from the object. And so JavaScript, the parser gets a little confused. Like, wait. Is that curly brace for an object or is it for, the body of your arrow function? And so, to eliminate that confusion, we add parenthesis and that says, no, no.

[05:18] This is an expression. It's not a a function body or a block. This is an expression I want you to evaluate as an expression and that means implicit return. So that's what's going on with this, parenthesis and the curly brace and then we got three or or two parenthesis right here. One of them is for our object expression and the other one is for the map function that we're calling.

[05:40] You might sometimes, if you're looking at something and you're like, well, there's just too much going on there, you just select the, a portion and expression that you know is a thing and I'm command, I hit command period and that pulls up, this option here for me in in cursor and v s code. And you can actually extract to function in module scope. So this is our Oh, nope. That's not gonna be it. Let's extract it to a constant.

[06:05] Yeah. Here we go. So map products to summary. And, there you go. Okay.

[06:12] So now, like, you can kind of see a little bit more how this works. You can also see why we like to inline these functions because we have to add typing information to all this whereas normally it can be inferred. It's It's kind of a pain. But but yeah, hopefully, by extracting pieces, you can kinda see, oh, okay. So the products map, we're just passing a function and so that function is this.

[06:33] That's just that function expression there. And with that, now we've done all the mapping that we need really need to worry about doing. So, map is super powerful. You can map to individual properties. You can transform properties.

[06:48] You can map to other objects. You can map to arrays. You can map to anything. Just what do you want to do on every one of these items? What do you wanna replace that with in your new version of the array?

[06:59] Sometimes, it's still useful to use a for loop. Sometimes, there are things that you wanna do like if you wanted to skip an item or something like that. There's some interesting clever ways that you can do that, but for loops are often gonna be more, efficient anyway. So, hopefully, that is helpful to you and, we'll see you in the next one.

[00:00] Hey there. Alright. It's time to get into mapping arrays. This is one of my favorite methods on arrays. It allows you to take the array items that you have and for each one, it allows you to transform that data.

[00:11] And then by the end, the result that you get is an array that is the transformed version of all the items of that other array. Really great. I use it all the time. So I'm gonna have you jump in and do it for this one. Have a good time.

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 `push` and reading length
- Typing arrays with TypeScript generics (`Array<Product>`)
- Building arrays of objects and accessing nested properties
- Iterating with `for...of` loops and traditional `for` loops
- 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 `map` vs. a `for` loop

## 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 `filter` and `map` for concise data pipelines
- Understanding `reduce` with the accumulator pattern
- Reducing arrays into totals, objects, and grouped categories
- When to reach for `reduce` vs. a `for...of` loop
- Passing `Boolean` to `filter` to 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.from` and spread
- Understanding referential equality and why identical-looking objects aren't deduplicated

Learn to handle real-world data using objects, arrays, maps, sets, destructuring, spread, rest, and array methods for cleaner, more reliable code for real teams

Structured Data

Programming Foundations

Type Safety

Object Oriented TypeScript

Advanced TypeScript

Practical TypeScript: Foundations to Fluency

Master structured data in TypeScript and JavaScript with hands-on exercises on objects, arrays, and powerful methods to enhance your coding skills.

Intro to Structured Data

Introduction to Structured Data

Master JavaScript objects by organizing data effectively, accessing properties, and leveraging optional properties for cleaner code in this engaging exercise.

Intro to Objects

Master object literals by creating user objects in a hands-on exercise, enhancing your web development skills and understanding of JavaScript syntax.

Object Literals

Master property access in JavaScript objects to enhance your coding skills and manipulate data efficiently. Dive into practical exercises now!

Property Access

Master object types by creating a type definition that enhances your coding skills. Dive in and elevate your development expertise today!

Object Types

Master optional properties in TypeScript by exploring user profiles. Enhance your coding skills and effectively handle dynamic object types.

Optional Properties

Master dynamic keys in JavaScript by creating an error pages object with bracket syntax, overcoming syntactical limitations and enhancing your coding skills.

Dynamic Keys

Master object manipulation in programming and enhance your skills. Break down concepts and solidify your knowledge with engaging exercises and community support

Break Objects

1. Objects

Master arrays in TypeScript! Discover their structure, syntax, and how to ensure type safety while managing data efficiently in your projects.

Intro to Arrays

Master array fundamentals by building an inventory system. Interact with essential data structures and enhance your coding skills today!

Array Basics

Master array types in JavaScript by exploring objects within arrays. Enhance your coding skills and build dynamic applications with this engaging exercise.

Array Types

Master array iteration with hands-on exercises using loops. Enhance your coding skills by exploring array manipulation and discover new possibilities.

Iteration

Master array manipulation in JavaScript and TypeScript to enhance your coding skills, complete fun exercises, and boost your programming confidence.

Break Arrays

2. Arrays

Master JavaScript's rest and spread operators to effortlessly combine arrays and manage object properties, enhancing your coding efficiency and elegance.

Intro to Spread and Rest

Master object spread to seamlessly combine properties in JavaScript, enhance your coding skills, and boost your development efficiency today!

Object Spread

Master rest parameters to create flexible functions that accept any number of arguments, simplifying your JavaScript code and enhancing functionality.

Rest Parameters

Master the art of retention with Break Spread and Rest. Enhance your learning, boost memory, and prepare for your next development challenge!

Break Spread and Rest

3. Spread and Rest

Master JavaScript destructuring to simplify variable assignments, enhance function parameters, and streamline your coding workflow—boost your efficiency today!

Intro to Destructuring

Master object destructuring to simplify your JavaScript code. Transform property access into concise variable assignments with ease and efficiency.

Object Destructuring

Master array destructuring syntax, uncover its differences from object destructuring, and enhance your JavaScript skills with this engaging exercise.

Array Destructuring

Enhance your skills with effective retention strategies and discover how to apply your knowledge to real projects for greater success in web development.

Outro

4. Destructuring

Master essential array methods like map, filter, and reduce to transform data efficiently and unlock powerful JavaScript programming techniques.

Intro to Array Methods

Master array filtering to streamline data manipulation. Enhance your coding skills by learning to efficiently extract and refine information with ease.

Filter

Master the reduce method by comparing it with for loops and map/filter techniques, enhancing your JavaScript skills and coding efficiency.

Reduce

Master array methods in JavaScript and TypeScript to enhance your coding skills. Gain confidence with practical exercises and engaging insights.

Break Array Methods

5. Array Methods

Master object methods in JavaScript to efficiently manipulate data. Discover keys, values, and entries to transform objects into arrays for powerful coding solu

Intro to .object-methods

Master object keys and values methods to enhance your JavaScript skills, streamline your code, and improve object manipulation efficiency.

Keys Values

Master object entries and from entries in JavaScript to transform arrays effectively. Enhance your coding skills and debug with confidence!

Entries From Entries

Master object methods in JavaScript and enhance your coding skills. Engage with interactive quizzes and retain key concepts effectively.

Break Object Methods

6. Object Methods

Master maps and sets in JavaScript to enhance data efficiency and eliminate duplicates. Unlock powerful data structures for smarter coding!

Intro to Maps and Sets

Master JavaScript maps by efficiently creating data structures to quickly access user information. Boost your coding skills and enhance your development toolkit

Maps

Explore the power of sets in programming, a unique data structure that enhances array management and optimizes data retrieval for faster performance.

Sets

Master the use of maps and sets in web development, enhancing your coding skills and optimizing data handling for your projects.

Break Maps and Sets

7. Maps and Sets

Wrap up your structured data journey with key takeaways, solidify your knowledge, and prepare to build amazing projects. Keep coding and exploring!

Structured Data

Structured Data

Transcript

Map

Transcript