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.