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

Reduce

[00:00] Let's jump into this, reducing data. We're accumulating arrays into a single value. And what's interesting about that is actually a single value could be another array or it could be an object or it could be a string or it like it could be any number of things. That's the beauty of reduce where map is gonna take an array and it's gonna give you back an array that has the exact same length and filter is gonna take an array and give you back an array that has a shorter length. What reduce does is it takes an array and it you can do anything you want to with it and then it gets whatever you said you would return.

[00:31] So it's just so much more powerful. You can accomplish anything that you can do with filter and map using reduce instead. But it is a little bit more complicated. And so if you can use filter and map, then that's a little bit preferred. But for various reasons, reduce might actually be faster or a for loop is always going to be, well, almost always gonna be the fastest.

[00:54] In practical terms, this the performance of this is not going to matter very often. The the differences are pretty minimal. So anyway, let's jump into, actually implementing this. And like I said before, I want to implement this with a for loop first and then we can take a look at how to convert that to reduce. So we wanna accumulate the prices into a total.

[01:15] So we're gonna say let total equal zero and then for all the products, we're gonna take that, that total and just continue to accumulate to plus equal that total with the price. And then here, we'll come down here and just log that total. Okay. Great. So, there's the total.

[01:33] That's the correct answer. The for loop is really simple. There's not a whole lot going on there. So, that's fine. Now, converting this over to reduce, we're gonna say total is product reduce accumulator product accumulator plus product and then that zero thing.

[01:48] Okay. Okay. Maybe I'm gonna, the I was thinking about rewriting this. We could maybe it'll make more sense to rewrite this. So, or, yeah, reduce total.

[02:02] There we go. And then we'll turn this into that. Oh, wait. And no arrow. There we go.

[02:10] Okay. And then here we're gonna say let or or const initial initial value is zero. There we go. So maybe that helps clear up a little bit of it with all the arrow function and stuff. It kinda can get confusing.

[02:24] So, what's going on here is reduce, just like filter and map, is going to accept a function as an argument, but it also accepts as a second argument an initial value. So, when when it comes to reduce, you're gonna take an array and turn it into anything else, and the way that it does that is it does that by calling your callback function, This function here calls it for every item. But, to be able to turn it into something else, you have to receive that something else, for every iteration so that you can modify, that something else. This this something else is what we call the accumulator. So that's what that ACC.

[03:03] Let's rename that to accumulator. So this is the thing that we're we're slurping every item into. In our case, we're gonna take that accumulator and, we're going to add the product price. So the initial value of that accumulator for the first time that this function is called is going to be zero because that's what we set the initial value to. And then we're going to, on that first product, we're gonna take that product's price and add it to the accumulator and then we return the value and that turns into the new value of the accumulator.

[03:35] So then it gets called again with the second product and we add, and and the current value of the accumulator and then we add, the product price to that. Maybe it would also be helpful if I made a reduce, function here that's gonna take our array and there's our, callback and here's our initial value. There we go. This is the implementation of reduce if we wanted to implement it ourselves. So let's get our total.

[04:05] There we go. Reduce products. Here's our, our callback and then, our initial value. So the way that this kind of sort of looks like under the hood is it takes your callback, it has a accumulator and the current, the current item, the current product in our case. And we're going to initialize our accumulator to the initial value And then we're gonna do a for loop over that array.

[04:31] And for each item, we're gonna call the callback with the current value of the accumulator and pass the item. We'll assign the return value to the accumulator. And then when it's all done, when all of the items have been iterated over and that accumulator has changed for each one of those, then we're gonna return that accumulator. So, if this part is like, if you need to totally pause the video, maybe talk about it with your AI assistant, to really understand what's going on right here. Alright.

[05:01] So with all of that said, let's get this back to what I would actually do. So total is, products reduced, accumulator product, accumulator plus product price started out at zero. And that's gonna get us our total. This is great. So let's apply this to another example.

[05:21] This, is all done. There we go. We've got our, start with the initial product and compare prices. So we want to, find the most expensive product. So we're gonna, start with the first product and we're going to compare the price between, the max, that's what we're calling our accumulator, and, the the next product.

[05:43] So if the price is greater than the max price, then we're going to take, the price from the Or or we're gonna take that product. Otherwise, we're going to do, whatever the last max was. So as we're iterating, we're, like, we're going through the array and we're saying, oh, here's one, a product. Let's compare. Is that product's price greater than the last product's price?

[06:06] It's not, so okay. We'll just go to the next one. Is it greater than the last product's price? Oh, it is. Great.

[06:11] Now that is the max product, and then we'll go on to the next one, and we'll continue through all of them. And that's how we can find the most expensive, product. So that's nice. And here, if we get rid of that name, this ends up giving us the full and the full object itself because we're not reducing this to the product's name or anything. We are, our accumulator and our initialized value is actually a product.

[06:38] What we return is going to be either the max which is what our initialize was for that first iteration, or the product which is what we're iterating over is those products And so that's why most expensive is going to be a product. If you wanted to, just get the name, now you just take this dot name and there you go. You just get the name. Okay. Great.

[06:59] So then we return a new accumulator object, or sorry. That's Marty's instruction. So we're gonna use reduced account products by their category. So this one's pretty interesting, because, well, first of all, the types are kinda funny. Hopefully, your AI assistant helps you with this, this little bit.

[07:17] That's one of the funny things about types with reduce, is sometimes it could be a little tricky. But what this is doing is, we're map or we're converting this array into an object. And this is our initial value for that object. It's just an empty object. If we were to look at this differently, this would be our initial value like this, an initial value.

[07:39] So it's an object. We're using some TypeScript syntax you might not be familiar with. Yeah. Just because Here. Let's let's do this differently.

[07:48] Record string. Yeah. You haven't seen record yet either. We'll get into the typescript stuff later. Don't worry too much about that.

[07:55] You could also just say as, any and that will work, as well. It doesn't help you a whole lot but, for the purposes of what we're trying to do here, we'll just go with that. So our initial value and then, that accumulator is going to be this object right here. And so we're going to, set the object, product category. So that's gonna be electronics or kitchen.

[08:19] And we're going to assign that to, the accumulator at that, product category or zero. So if it hasn't yet been set, then there are zero items in there. And so we're gonna set it to zero. Then we're gonna add one for this product's category and then we'll return that object. So it might be helpful if I actually add a console log, console dot log, and we'll say adding, no.

[08:50] No. No. Where it's do this. Adding product category to that. There we go.

[08:57] So adding electronics to undefined. So we don't have that defined yet, and so it's going to start out at zero and, and so we'll add one to that. And then adding kitchen unifying, we don't have anything in the product, or in the accumulator yet. You know what? Maybe it would be even easier if we just said accumulator.

[09:15] There we go. So on the first iteration, the accumulator is empty and then second iteration, we have one electronic And then the third iteration, we have an electronic and a kitchen. And then, on the next iteration, we've got electronic two electronics and a kitchen and we continue on until we end up with three electronics and two kitchen. So, feel free to, like, stick console logs all over the place to understand how all of this works and I recommend also rewriting this as a for loop to kind of understand how all of this is working as well. It just is gonna take reps.

[09:47] The more repetitions that you do of this, the easier it will become for you. So, that is, all of that put together with reduce. Now, like I said, reduce you can do all the filter stuff you want, all of the map stuff you want with reduce but you can also reduce things down to a single value which is that accumulator. There are other methods. There's also reduce right which will have it start at the the bottom of the array or the right side of the array and work its way backward, which is kinda nice.

[10:18] You have map and flat map and you've got fill, you've got find index, you've got for each. We don't ever use for each. Don't use it. Just use for loops if you need for each. And yeah.

[10:30] Bunch of other methods in here that are all very fun and interesting. But map filter and reduce, those are the the primary ones that I find myself using. And frankly, I don't use a reduce a ton. I will typically jump into a a four of loop if I need to do something that requires a reduce because I just find that to be typically a little easier unless I'm doing something as simple as this. So, alright.

[10:54] That was fun. Thank you for, joining me on this to reduce data, exercise step. We'll see you in the next one.

[00:00] Alright. Let's talk about reduce. Now, this one is a little bit trickier and you can definitely write reducers that are kinda hard to understand and hard to read. And so for this one, I would actually recommend that you take a second to accomplish the task with four loops and then try to rewrite it as a map filter and then a reducer. There are some situations where you can't actually use map filter, that's why we're gonna be using reduce.

[00:30] But, you can definitely do all of these things with four loops. So, you might try a four loop and then compare it to the reduce that, might help you understand what the reduce is doing a little bit better too. So, in my solution, we'll start with a for loop and then we'll get into, how you convert that over to reduce to hopefully help make all of this make more sense. So, with that, let's just jump into it. We'll see you in the exercise step.

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

Programming Foundations

Structured Data

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

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

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

Filter

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

Reduce

Transcript