This vs That × map vs reduce, forEach vs for in, and more!

There you go.

Okay.

let let's say I want to send email to 10 people, and I don't want to Fire off all all 10 at once because because of whatever reason or if I only wanted to write to a file 1 at a time.

let's say you have 100 items and you are sending out the items and then you say, okay, I found the one I needed.

synchronously

A go over each value 1 at a time.

with promises

Accumulator and then use literally everywhere. People loved it, but

The only time I'm usually reaching for

Then I'll reach for 4 each and just chain it on the end there and like, all right, I got these finally things. And then for each of them, I need to asynchronously

a potato. So yeah.

that that's, like, the big thing for me there,

Queue up some value.

inside of a for in loop, whereas you cannot you cannot not that position absolute is bad, but there are often

in terms of, like, I I find myself needing to iterate over an object maybe sometimes more often. I reach for them

You can either break a loop and that loop will stop running or you can,

Open a can of worms as open Pandora's box. Bring home the bacon. Bring home the bagels. I like that.

promise. Like, you can use promise dot all Mhmm. With a map and return all of Those promises and those will all fire at the exact same time. But if you need to For Hasown property, if you overwrote the entire functionality. Right? So the idea with static methods is that,

probably even amount. If I'm already working with map filter, whatever, reduce, Is that you just sign up for Prismic.

I'm not interested in doing any work on them, but I want to continue my work. So then I can you can just type the word continue and it will skip that iteration of the loop, but go to the next one. Most people say, oh, I'll just filter it before I loop over it. Right? That's another way to do it. That's the that's the whole reason of the show. There's many ways to do it. What did they say? There's many ways to skin a cat? Does that that's the tea? for in and for of loops is they can be stopped early.

and, like, grab the hammer, break the window, They have this idea of slices. So for every component that you have in your application,

with your work. And it is very, very nice. There is A reduced trick you can do, but it is awful to look at, very hard to read, and it's not worth it in my opinion. A a function in our code base that's just async For each that I've been using

Then a for in is is perfect for that because you can use an await inside of there. The whole loop will pause while that value is being resolved. And then when it is resolved, you can kind of continue knife. That's also a knife. Yeah. Let the cat out of the bag and Spell the beans.

If I need to wait for each one. So, like, let's say

like, skip items in a loop, which means, like, continue,

since, like, since async await came out essentially to have just an async seemingly similar features and talk a little bit about what How they're different, which ones we end up using more, and just our general thoughts on them in general. General thoughts in general. My name is Scott Talinsky. I'm a developer from Denver, Colorado. And with me, as always, is Next one is has own property,

Yeah. Bring home the bagels. Be that the bring home the bagels. It's definitely because it only takes 2 arguments. And if you want it to have multiples or You wanna you wanna put something in the middle? Like, you're like, give me these defaults, Take the bull by the horns is take the flower by the thorns.

Meaning that you say, okay. You know what? This item in in this loop,

It is awful. Yeah. As I was saying it, I was like, I don't do I do I need to go through it saying the rest of this? if you're going to be

But more often than not, I find myself needing to do something skirt something around in CSS, how many packs are sold in US, in Canada, and in internationally.

in because it allows you to easily iterate over properties in an object.

Which is a method on an object or the in keyword

and And I wanna count How many of those packs in each of those 3 categories are 1 pack, 3 pack, or 10 packs? And that's a perfect use case for reduce because I need to start with zeros all the way down right? You can sort of string. Beautiful. Well, that was fun. I I think we should ask the audience, Because JavaScript is literally anything.

In this Monday, hasty treat. We're gonna be talking about this Versus that, in terms of JavaScript and CSS stuff where we talk about,

the tastiest web development treats coming again hot. Here is Wes Barracuda

nifty. So the way that it works with has own property is that somebody could overwrite He has own property.

Four courses. I want them all on this website, and Prismic will allow you to click together those slices. It's really cool. It's like it's like a website builder. Right? But, like, It kinda tricked me into using a website builder because when you're working with an array and you need to do something with that array,

Monday. Monday. Monday.

hangin' out.

that associates it with the data that is needed in that component, and then you start clicking them together. You say, alright. I need 3 products, 2 people, So if you need to is now replaced with more than one way to peel a potato. Okay. And is there, though, put all your eggs in 1 basket is put all your berries in a bowl. Okay. They're they're actually kind of, like, kind of funny and, like, it. Feed 2 birds with 1 scone. Berries in a bowl is fine, but, like, are is there more than one way to skin a potato? Yeah. There is. You could you could use a knife. You could use a potato peeler. You could throw it in a You could use a knife. A brand new And then I need to loop over the results.

into Prismic and you can obviously make your content types. But in order to click them together for pages on your website,

Just hangin' ready to ready to chat some this versus that. You know how it is. This verse that. I'm excited about this one, because we have often I don't know. You you often get people in web development be like, it. Reduce versus literally every other array method. Would you use? Oh, well, it's kinda like a screw versus, said, like, 1 step further is

I do. Prismic I can only send

syntax. Nice. This episode is also sponsored by Century at century.i0.

Hey.

syntax.

error exception handling service. And let me tell you, Wes, I had some I had some errors over the week over the weekend. I I woke up, put to some errors, and, You know how that can happen. I I did the whole deploy on Friday thing. You know how that, in Do do you end up using either of these one more than they're there? I pretty much spread everything. I know I know when they've spread first dropped, people were maybe a little or has own.

boss.

Welcome to Syntax.

They have all kinds of, And we just give her a first name. And she inherited everything else about me.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest,

you know,

I don't know. A hammer? Screw versus a nail? Yeah. Screw versus yep. Okay. Alright. Well, this episode is sponsored by 2 awesome companies, Make and Sentry. Wes, do you wanna talk about Prismic? anyways. If

I was just coding the whole time. So check it out. Prismic.i0forward/ And, usually, people cry out, oh, the performance.

What's up? Oh, nothing's up, man. Just hangin'. Just

And then out the other end, you get an API. It can be a REST API. It can be a GraphQL API, but I think the special sauce that we need to focus on with Prismic here is that they have this idea of slices in that You don't go

Boss and Scott

the craziest,

You right away can go ahead and start creating content types.

I I definitely had to put in some weekend time here pawing through my Sentry it. To see the errors, how many people it was affecting, and what specifically was going down.

really good starters there, whether it's for Vue or React or They've they've got it for everything. Check it out for your next project, prismic.i0forward/ And go up, down, left, right.

When you're first getting into programming, you might be thinking, I don't know, reduce. What does this do? What? Yeah. But, I mean, you could think about it like in cooking. You, like, reduce something down. It. You're cooking the water off or is that what reducing does? I don't even know what reducing does. Yep. Yeah. You cook Exactly. You're you're you're you're getting rid of water. It's Usually water. That's what's boiling off, and you reduce it down into something that is generally, they would think smaller, but you reduce it into something that is different Yeah. From the Input. You're changing in state. Yeah. Yeah. And I think, like, I often will post, like, screenshots of code where I chain 3 or 4 filters and 3 or 4 maps together,

and then just count them all. Yeah. Perfect. All right. The next 1 we have here is That'd be 1. Oh, yeah. There's so many. There's I just need to go it. To the like, anytime I post a screenshot of code, I need

the last resort

From an array of data, typically in a different form, it's going to be reduced.

and you can do some heavy operations. Cash in. That's true. Yeah. If you if you have to loop over once and that value stays the same for as long as the inputs are, then you can just cache that return value and then just return it instead of actually having to loop over them. So, yeah, I'm a big fan of reduce, but I think that especially as You because, like, we for It is very new. Yeah. Right? Very new. So is this single way. Right? So, And like you

And, like, of course, like, if I'm my performance.

for each,

have some data that is derived

or like you you only use that if you need to. Like like, for example, yeah, right Now I'm selling my stickers,

not actually in your code. Yeah. Because the database is gonna be able to to do essentially those operations faster.

and I get people being like, you could do that in one reduce. And to that, I say, That is very hard to debug because often I wanna throw a debug right in the middle. Like, okay. I'm I'm 3 steps in. I wanna see what I have, Then I'll do that. I'll just throw a debug in the middle of that. So I might refer the readability of multiple chained.

And then if I need to Change what it is outputting. Like you said, if it's an object or a number or something, then you throw then I'll throw a reduce on there myself.

you know what? I think the thing that I I always go to 1st and foremost when I'm deciding is It and then inspired a a syntax card for an episode I might wanna do called how to code under pressure

Which is the array method for each, So if you want to loop over something in JavaScript,

run stats on my course sales. And if I need to run stats on a year's worth of course sales,

database size. So if you're doing anything really that heavy, then maybe needs to sit on the database, not in, what do you reach for when you need to do a bunch of stuff? Do you do you chain multiple array methods together or do you use 1 big reduce? I will chain, tools So there's more ways to skin. A cat is Poppy.

But Exactly. Another thing there is caching too. You cache it, What's the input and what's the output? Right? If my if my input is an array and the output is an array, I'm almost always reaching for map, Or are you just gonna say I'm using has own property right now? Oh, it looks like there's a the problematic Loop like that to be able to await each step of a a four loop. So I Oh, there you go. That's interesting to me. Don't need that. Probably don't need that. Hey. That's a video that I could write. You don't need to do this thing that I'm doing.

You know, Because has on property only returns true for the direct properties where the in keyword,

If if I need to count something, I'm going into reduced territory. If I need to,

and the 4 in or 4 of.

an object or even a single variable.

Yeah. Like, for example, I,

string If you haven't seen the in keyword before,

And so

don't know the difference, actually. It's it's not in all the browsers yet. So I haven't used it before. Yeah. That's kinda what I'm getting at. Is is it is it something that you think about, I think it's people know what it is now. So Spread fan. Yeah. Totally. Spread fan. And you can use it you can use it with arrays as well, which is really nice. So you You don't have to, like, think, like, oh, I need to copy something. It's different if it's an object or if it's the headless CMS for your next project. They make your website editable for the whole team. Prismic is pretty nifty. I haven't said that in a while, but this is bonafide

in example

You might have something that's like

Will return true where if you were to say example dot hasOwnProperty I actually didn't know too much about hasOwn property versus hasOwn. So so there's there's a little bit of nuance there. But, basically, I find myself coding very often. So, which of these am I reaching for? Probably for each if I'm reaching for either of them.

like, the fact that they say to use has own pro has own as in has own Comes in as the replacement, but there's not as good of support yet for it. Oh,

if Poppy has a last name, has own property, it will say

Oh, that's that's interesting. I actually had never heard of Hazone, so I'm glad you brought that to the table. Yeah.

Yeah. In in my beginner JavaScript course, I forget what exact example we learned when we're we're explaining this. But the the sort of the example is is when You're using, like, class based or you're extending a prototype of something like let's say you have a parent. First name, Wes, last name, Boss. And then I have my kid,

So if you were to check Yeah. That works. I like that. Be the guinea pig is be the test tube. Okay. Hold your horses as hold your phone.

the to string method based on what I need. But

of to string

Oh.

as in anything that's on the prototype, anything that's upwards on the chain. It. If there's, like the good example that they use in in Iosan MDN was that

Will return true using the in keyword. So the string

because Poppy was never assigned a last name. But if you look up the prototype chain,

where you can pass it both an object as well as a property you wanna check for. Yeah. And so do you know about has own verse, has own property? I just said that. Yeah. No. No. I mean, like, If you don't pass it a starting value, you get the first 2 at first, and it can, like, add values together. That's often how we show reduce works, but then you can also just

Next 1 we have here. I'm curious about what your thoughts on this is.

no

looks up the chain of the object.

You could overwrite the has own property, and then you're you're pooched because how do you check

object, and that's going to return a true or false. Right. That's going to be a boolean. So you could use this in a conditional to say, is this

property in this object? The thing within, though, it. Is that in returns true for all inherited properties

static methods on object, then maybe you got bigger problems. But yeah.

These are useful if you're checking to see if an object has a property as the name might suggest.

three d, and you're gonna wanna do so,

prepares for something to be able to be moved. So I I can't speak on to, like, What exactly the the paint flow? Yeah. Well, why exactly the paint flow there makes them more performant? It just is. It's what it's made for. Yeah. And that's been the case for usually Usually we always say, like, don't

memorize these things, but that's probably one that you should memorize. It's been true for, like, at least 10 years now. It's just use transform if you're animating it.

You got to move it over up, down, left, right, a couple pixels.

spread the contents out of that, The object you're copying and to create a new one. So these are both methods of copying an object.

you're pulling it out of the document

that are in CSS for the next Last 10 years that are are better than using position absolute. I think about position absolute when I want to

So you could think of it as like, the word itself, it it kind of

translate

x

And I know you do a lot of animations. I'll let you take this one. Yeah. Well, the thing be even before we get into the animation thing, I think the Key thing here is that when you you're inherently giving something position absolute,

and then skirt it top right bottom left with With top right bottom left values. Or you could use,

Okay. We can get 1 more in here, and that's going to be, is is is not not supposed to be done, but I had a special The reason why I had to do it, I had to do the deploy, and the deploy broke some things. So

actively pull something out of the flow of the document. That's when I'm reaching for a position. Absolutely. Exactly.

But it's important to realize that both of these methods are just a shallow copy as in if your object is many layers deep, those many layers will remain, CSD.

it's it's it's container. Its home is still there, but the item that was inside of the home has now Moved.

this one that I think People saw it a lot in when Redux came into Flow because you're creating a lot of new objects. So object data sign within the first parameter is an empty object, and the 2nd parameter is the object you would like to copy to create a new object based on the contents of the old object. And then there's the whole spread version of it, where it's just you create a new object and then

it's going to keep its space in the document, but then move it from that space.

flow entirely.

It's moved itself. So the document isn't going to reflow into that position. So it's It's important to know, like, does the document flow depend on this thing? And if it does, you know, you can use position absolute with transforms

the position absolute left, Whatever. That's not made to be able to animate something. And I I don't know exactly why it is besides the GPU aspect of things, But it has to do with how the browser paints something and how the browser

that is it's going to give you a more performing animation. It's gonna give you closer to that 60 frames per second that You want to have in a smooth experience, but it's also just flat out what they're made for, where And so, or filter depending on what you need there. But if the input is an array and the output's an object, I'm thinking reduce. Right? You're reducing this down into something else. You're reducing the data down into,

animating and moving something, if you're going to be moving it over time, Every single time you want to use a translate

If you are trying to To MongoDB aggregation. So I need to move it out of JavaScript entirely into

We're like, if you're translating something,

And we're not talking about margin here because we're not we're not Actually, reflowing the document, but we're just bumping things. You could use position absolute Then I'll use the for in loop because you can await

positioning something absolute just to left top right left it. That's kind of annoying. Like Scott says, it gives up its its place in the document flow, and then then it's overlapping stuff. And if you do want to overlap things, and also you can use I

instead of doing any sort of top left animation

It. That's very funny. Okay. Yes. Alright. Well, cool. We will catch you on Wednesday in our tasty treat. Thanks so much for listening.

for a full archive of all of our shows.

And don't forget to subscribe in your podcast player

an array or string,

little like, I don't know if if this is readable.

I can't remember the last time I've used object out assigned Peter came out with a list of, like, like, alternatives to all of, like, you know, 2 birds, 1 stone.

Yeah. What's going on here? But me, personally,

but

More than one way to peel a potato. So we'll, we'll do another episode of this. Tweet us at Syntax FM. Yeah. So we all we could have, like, function versus arrow function.

when you use an object spread. So

feature wise, they don't they don't do anything differently,

Took the spreads and just use object that assigned. So,

like a hipster coding, like

Peace. Peace.

Head on over to syntax.fm

The they're much more readable and much more flexible

just references. So, it. Because

like, send us your ideas, either if you have opinions on them or if you're just Genuinely curious. Like, why would you use one of these versus the other?

then give me what I wanna add and then bring in what the user added. And anything that comes later will overwrite, and that that used to be a really big pain.

to search for why not and then find other people.

confidence here that this is its own thing. This is its own object. This is a new object. Yeah. Totally. So I find myself spreading a lot. Yeah.

I really want to have,

that's just kind of something important to know.

I love creating a new object out of spread. And sometimes I'm just creating a new object because I'm like, well, to string, it will return false

or drop a review if you like this show.

you can reach for often, you can reach for there's all kinds of different methods

and made my my weekend not terrible. So thank you so much for Century for sponsoring Syntex,

bombarded with issues or warnings or errors, it. It can be stressful, and having a tool like Sentry on your side do you have some visibility is one of the key components in my mind it. To working successfully under pressure. So thank you so much for Century for giving me the tools that I needed to be able to solve any it. The bugs or issues that I had this weekend

being, Any of them is using for

filter, And if I remember, I think Babbel just

on

and let's get It. Use the coupon code tasty treat, all lowercase, all one word, and you'll get 2 months for free of this amazing,

because

often we hear people being like, yeah, like, reuse can do anything, but it's very hard for me to understand where, like, you get the result from the previous one. And a an array, or you can reach for reduce. And reduce is the Swiss army knife of arrays, and it can literally do

Into it. This or that. Yes. So the first one we have here is,

map, every

Modify stuff like map, but then you could filter things out like filter or you can check. So, like, what what do you possibly use? Like,

for each. But I I guess, You know, for me, when I I find myself looping over things, I'm almost always, like, augmenting With a fine fine, I I don't use for each that much. And I I certainly don't use

Which one do you reach for, Scott? You know, almost always you can have a slice transform and translate await Inside of a map filter reduce for each value at all. I didn't know you could do that. And every time I say that, someone's like, Yeah. That's I can say every time I say that someone says, oh, you you can you can use a reduce and you can return a promise that chains on the You can just check, and I don't think you can I don't know? If you're overwriting it. Be to that horse's feet of fed horse. I like that. Yeah. And okay. That's it. All your eggs in 1 basket is put all your berries in 1 bowl. Okay. Well, there is more to skin I still have lots of code in my code base that's that uses, like, stuff like that because it wasn't a thing for the longest time, but now it is very easy. The other thing with, and I want to count extremely process intensive. But in most cases, it's just a tiny little a array of 6 things that you need to to loop over, and there's I don't see any any hurt in that. Actually, even one step further to that example is, it. My course platform, if I wanna get stats for an entire year Mhmm. Is very slow. It's very slow. And I have to move those Then I'm gonna stop here. For whatever reason, if you need to stop the loop, Anything. So, I'm not gonna be doing multiple filters maps because that is

It it's funny because it's like even getting into this looping territory. I don't know How many times I I do for each? I guess, I'm googling it right now. And by googling, I mean, searching it in my own repo

not necessarily changing it, like, reduce filter map was doing, but simply just looping over it and then doing something with each of those values. It.

Loops that much either because I I just think about the way that I program. It's like I'm always thinking I have something I need to get something else out of that. I'm gonna transform it. I'm gonna Change it. Whatever. And so for me, the the flow of creating a variable outside of a loop, doing the loop, having it be transformed in that sort of way just isn't how value

the data or returning something. So even with these, I'm almost always reaching for map or reduce.