What's New in Javascript

Node, but it allows you to return an array rather than a single value. And, typically, if you use map and you return an array, it's going to have an array within an array. You could think of it as like, okay, we're mapping over this thing. We've returned an array, and then you end up having But sometimes people need to work with big old numbers, and I don't need to personally. But maybe there's a time where I need a big old number. And so they 2, if you would need that numbers larger than that, which is a crazy large number, then you're going to get to go ahead and use the big Good.

and the syntax is a little bit funky. So if you want to check

does not exist,

and that's kind of annoying because Wes. If you have, like, a variable that you wanna replace, then you have to write an external regex and pass it in via reference. Replace all will allow you just to pass a string then it will be obviously false. So I guess if you if you wanted to check if something Replace will replace multiple instances

Yeah. Cool. Hey. I like this. So, I don't have everything else. Do you have do you have any more?

is pnpm,

that's what this API is for. And I'm on these because it means less

I wanna kill the build and install it and restart it, so I just kinda did it. And, I'm so happy that this is it. The one thing that I want to say for this is it also works with arrays,

who has a street Node, And maybe that street name, you're not sure if that street name is or you're not sure if the address itself is even there. So if you were to write False.

you've got a capitalized function, cloud accounting, all of your invoices, all of your expenses, all of your time tracking,

which let me tell you, it's such a breath of fresh air to have the animation library baked in because it's opinionated. It does everything correctly. You don't have to struggle with a whole bunch of different knowledge or interface. Everything just works really well. So I'm going to Scott out to Sapper, need to get myself some Figma. You do. You gotta check out I'm doing a course on Figma this month, so I'm, like, super into it right now. They have these, like, auto layout things where when you type in a button, the button automatically resizes itself. That's so cool. And they just added links into Figma documents. So now you can link from one thing to another. So when you click on it, it links you somewhere else so you can make links. And then that's gonna be great because it's like you can it's it's perfect for the design system stuff that I'm I'm doing right now. So yeah. Yeah. I have been saying next big design project I have, I'm doing it in Figma. You're gonna love it, man. You're gonna love it. It's fantastic.

tool that I I always talk to my wife. I'm like, we need to get the in here.

then that's I'm cool with that.

It loaded in

It's a tool that we reach for. Yeah. It's it's it's convoluted.

r e g e x r. It looks like exactly the same thing. It's from Grant Skinner who was and pipe that into Peace.

if you use a regex, store a variable called score, and you say the score is equal to the user dot score value which is nifty. Maybe you can abuse it and stop using arrays.

and, and, and, and. Yeah. Usually, I would just do the secondary because I didn't feel like installing Lodash.

already start to use this without having to do Destroy it.

JavaScript, we think. And did you see do you see somebody from Microsoft close, like, a a super old Chromium bug that's, like, existed for some time. So No. I think Node everybody was rejoicing about that. I didn't actually know what the bug was. But, like

not false, and not 0,

Function to string?

FreshBooks is a small business accounting software that makes billing painless if you Sanity to spend less time on the books.

API, which is navigator.canshare

JS, I always regret when I have to do it. I use I always, like, almost every single time and I don't know if you're you're familiar with the regex Node zero one, I believe, is the site. Regexone01.com.

then you can use this new operator, which is question mark question Yarn, and we can say,

130 or or 98 or something like that, like, it stopped

previously, you'd have to, like,

in JavaScript, the upper limit for a number This is super useful in things like code splitting. You can use dynamic imports to say, alright. I'm going to import this section of my website, but only when it's needed. So when it's needed, then,

it was a lot of fun to work in. So check it out if you are interested in building something fast, that you need to be fast, and you need it to be easy, Sapphire is pretty cool.

import star as whatever And then symbols go at the end. Uh-huh. So

just to get it, but I love it. Yeah. Replace all is is stage 3, but match all is in. So I don't know why, but, yeah, related.

then you find yourself Yeah. Skinner.

Next up, we have string Scott match all,

design systems within Figma. So if you're interested in learning about design systems, if you're a developer and you wanna pick up some design knowledge, a little warp. Check it out. It's gonna be really cool. A lot of fun.

and Twitter value.

values

Because, typically, what it does is is if you have an object with objects inside of it, right, And maybe you're unsure of the data that's coming in. So let's say you have a user

is, if you use create server Deno Node or use f s dot open, Today, we are gonna be talking about what is new in JavaScript. There's a whole bunch of new APIs that are coming to the browser, to Node, to ECMAScript, which is just the JavaScript language in general.

that says get countries, and then you'd have to await that inside of your your loading functions. Now you can just await it at the top of your module, So I don't know if it'll ever make it, but I it'd be pretty cool to get it. Yeah. Could just be in limbo like decorators forever and ever.

you've got a yell function, so many places where I've had this. You check for the 1st property, and if that's there, then you check for the 2nd property. And if that's there, you check for the 3rd property. It's such a pain, So they send it as a string as well, and that's what you need to use, if you wanna link to a specific tweet. Cool.

use promise to all settled.

they go based on ascending integers. So if you have a key on an object that is a number, which is weird, but you can do it in JavaScript,

in insertion order, meaning that in the order that which you add the properties to an object,

also blast off whenever your code

gives you access to the GPS

similarly named export This will resolve when all of them are either resolved or rejected, I'm gonna sick pick. I I sick picked this a couple years ago, but I often like coming back to things after having them for however long and seeing how they go. And this is the DEWALT oscillating multi tool, I actually use it quite a bit to send stuff air I I use AirDrop a lot or send something to

0.

1, 2, 3, 4, 5. Then

a new or cannot use access street of undefined. Whatever. We get that error all the time. And so, typically, a solution to this would be like, if user and user dot address, then check user dot address dot street. Right?

who has an address,

A second tweet was probably 2.

before that module runs, And for the longest time, that was fine. And, at some point, the number of tweets exceeded the amount that this number that you were talking about, his last name, and Cher's last name is undefined because she doesn't have a last name. She's just there's just no it's never been set. She was born a Cher.

syntax.

export star as utils.

Yeah. I never use arrays for very much. I mean, other than, like, collections and whatever. No. I never use no. I never use an array. Never. No. Of course not. So with all of these features, you're gonna be able to blast off and and, write some really fancy Node. And just like one of our sponsors today JS LogRocket,

it's an open standard of sharing data between 2 things. And if that works, then the everything sort of is just, like, weaved in a little bit more simply. Yeah. So I use it in Sketch quite a bit. It's built into OS X. So It's built in well.

which is pretty pretty cool. I hope that this comes in. I don't use it all the time, but I think there's a lot of people that would. Yeah. I I guess with, like, map filter reduce, we already Scott get this piping layout, but that's just because Yeah. At least for, I think that's it. Wow.

import this thing

And, almost always, when I'm trying to Pretty cool. Oh, yeah. So that's just kind of a little convenience method around just first mapping and then taking your array of arrays and then

And you can save your own.

cutting out

Yeah. I don't know. At first glance, I didn't know if I would use this, but I I do use export asterisk

close angle bracket, the dishwasher, Last 1 I had here is that Safari has finally introduced resize observer, which is a bit of a bummer. It looks like Safari and

for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop a review if you like this show.

a module, Because, like, it's like find everything but numbers or find phone numbers or or match URLs, things like that. I like this. I like I like this.

leading zeros or big numbers if you know you're gonna go over that. Interesting. Those are some, API's life cycle,

And this is already added to Babel preset ENV, So, basically, Next one we have here is module namespace this is very much like gulp. Remember gulp piped everything? That was the best. Yep. Pipe. Pipe. Pipe. So you just take a value. You pipe it into a function, and then you can just chain your piping and this is just, it's a experimental You're super into this one. I like it. Oh, I'm super into global this one.

you know, or it looks great or whatever. And sure enough, I decided to pick Sapper because I thought it was interesting to try. Now Sapper is sort of the Next JS analogous,

but you wanna do that as, like, a sub object, you can use this new syntax, which is

You know what? You wouldn't have to do that if you used Figma because it's all in the cloud by default. So there you go. Yes. I need to lessons from the the trenches here.

So what that will do is you

exists, then do this thing and you don't have to worry about your code breaking. I use this constantly, especially with data that you're not sure if it's going to be, existing or not. So this is this is a big one for me. I love the optional chaining.

you can share to cloud app. So it'll, like, automatically upload it, and then you don't have to do the whole, like, export it and then upload it. So, like, just, basically, a library author thing, but I thought it was kinda interesting to mention as well. Totally. And I would keep going with these. I'm I'm interested.

size of blades, which is really good. Oh, that it that is good. Yeah. Alright. I'm gonna stick pick something fun here. It's gonna be a code project. That's fun. Right? Usually, we do all sorts of, like, actual things, but this is going to be a code project, and that's sapper.

Node after another. And the the syntax for that So, like, all of the apps on your phone, they all have, like, that little arrow where you can share it. You can airdrop it. You can text message it. You can save it to your your photos, in Sketch, My friend referred to it as the get out of jail free tool, Mean that when you can't get a tool in a specific place or you need to cut something in a weird angle or I just trimmed a bunch of spray foam insulation in my office with it. That's fun. And, like, it was so so handy

So that is good for

in a file

episode personalized

I'm a big fan. I use, with 4 numbers in it. Right. And you returned

address Wes mark dot street dryer or washer, one of the 2. And it was so impossible.

Should we get into some sick picks? Next 1 we have here is array dot from entries, import everything otherwise known as the from for null or undefined values. It checks for falsie values, which the falsie values are Scott, put you on the spot. What are all the falsie values?

You know what I I ran into the other day? I thought this was really funny, is that I was using Twitter's API,

So Flat map is, basically Well, now you can take your function, run that to string, and it's going to give you a formatted yeah. Hey. If that makes everything better,

Yeah. I can't wait.

Yeah. Classic YouTuber.

doesn't block The downside to that is that the pipe operator

the default

of what you wanna replace, and then the 2nd value is what you wanna replace it with. And then there's no getting into regexes. And one less regex that I have to write is very welcome by me. I know. I was doing some regex in this weekend, and So if you want to use the or functions, which would be pretty nifty. Pretty Sanity.

you usually don't have to put a dot before you you reference something in an array. But in this case, you use both the dot and the square brackets to reference at the top of file. That's pretty cool. Yeah. The people always said for a long time, like, isn't that a foot gun, something that you can can hurt yourself for? Yeah. Like, I Wes, if you wanna, like, put them in their own well, I don't know. We'll see. I we'll see in, like, 6 months if I've ever used it. I I don't think I would, but it's there.

Next, we have promise Scott all settled.

for this the little tool that it is. You can buy it, like, hundreds of different kinds of little blades for it on Amazon.

for something like that. And and that that's sort of another episode And then somebody comes around and says objects cannot guarantee order.

Just go to full YouTube mode. Hey, guys. Today, we're gonna be talking about trim, and let's talk about this thing right here. Yeah. No. Okay.

how do you actually declare? Is it just do you just do it? Yeah. You can just use it, and you can use it at the top of or anywhere in a module. Yeah. Is it just any like anywhere anywhere? I thought you had to declare something to make this happen this way, but it looks like no. It looks like it just does it,

Right. In real numbers. So don't use due to the current pandemic situation.

It was very out of date. So I was like, you know what?

But

There's a chance I'm gonna use it. There's there's a there is a definitive chance. Alright.

Because I used, Cool. So next Node is going to be a big one, and this is Global This. Now Global This, I know there was, like, a lot of talk around the naming of whatever they should name a Global This.

and that's a big one. Like, I had to pull in a polyfill the other day for Safari. But now that Safari has resize observer, everyone has resize observer, and that's huge for all the cool stuff that we wanna do with resize observer.

This JS one that I kind of ignored, even though I shouldn't have ignored because I have so many perfect use cases for this. So globalist comes in handy when you're working on code that's going to run-in many different places. You could think of it as like, alright. In the browser, you know, the globals are put on the window. Right? But what about Node? Right? And if you're writing code that needs to run on the browser and the window or, I mean, the sorry, the browser and the server, then all of a sudden you have to do this whole business where you're checking to see if it's the window or if it's the global or whatever. Now we have access to global this,

hopefully, by the time you listen to this, I should have my my new website live, and that's my new course page as well. So check it out.

So the pipeline operator will allow you just to take a value

and what you're gonna get is 14 days for free. So check it out. It's, super easy to set up. Just drop in some code, and next thing you know, you're gonna be seeing and watching in horror as users commit atrocities on your website.

like, if we wanna use a single await, right, then we would have to do so in a function. We have to create an asynchronous function. But, like, let's say you have some code that's just running in a module, and you're like, oh, well, I need this code to be asynchronous. You'd have to use promises. You'd have to use I mean, I know asyncs using promises under the hood. You'd have to use callbacks, whatever. It's a little bit different. But now we'd be able to use

got rid of it's wrong. Interesting. The right one. So Twitter's API solve that by just sending the ID as an a secondary property called ID underscore s tr.

undefined,

function or something like that. And if you want to run all of those functions with a piece of content, use you have to wrap them around each other. We've all done this before. So if you wanna, like, add, then multiply Oh, that's fine. Oh, this is a really cool one. It's the pipeline operator. Oh, yeah. Been around for for a long time. So you've got

then it then imports that code. It's basically just a perfect improvement, and it can be used for things like tree shaking and all sorts of nice stuff. So I I use this in Vercel up tutorials myself. I don't know if you use dynamic imports at all, Wes. Yeah. I do. Especially for, like, even just something as simple as, like, loading in some data, like a list of countries. Mhmm. There's no need to put that list of countries in your build. Just require it with the dynamic import syntax before you go ahead and render out a list of countries in that drop down. And then the 2nd time you render it out, that dynamic import, it's it's promised Bos, so it will just resolve immediately for We got some really interesting stuff that is in proposal stage right now. Knowledge coalescing.

await I'll talk about it in a minute here, but I have not seen this in anything else personally. If you do an array dot flat and then you pass in the keyword capital I infinity,

and then you wanna export it immediately. We we've had that, but the as utils part is new, meaning that you can import everything from a module and then export it out, but as a single named value, which is, in this case, utils.

pretty stoked on it. Yeah. Absolutely.

optional chaining is one of the greatest features for me.

without having it be wrapped in a function, Screw this. I'm gonna, I'm just gonna do something new here. I'm just gonna start throwing things together and not care if it really runs, let's say it's like 1, 2, 3, 4. You would get 1

then you have to, like, save it in a variable and then throw it into your own function. So this will allow you to have that nice chaining map filter reduce and then also throw in your own And

Use coupon code syntax for $10 off any of my courses, and they were likely also still be on sale export a function you wanna Navigators how you tap into the environment that your website is running on. So navigator.getusermedia

And my courses are at leveluptutorials.comforward/pro.

if something is in an array, like, you wanna check for the 2nd item of an array, you do the array Wes mark Scott square bracket and then the index of it, which is weird because

Awesome. So now we're going into some, browser stuff. I am interested,

numbered the podcast as, like, podcast

So let's get into Wes 2020.

let's say share features, which is different than promise dot all because promise dot all will resolve. If one of them is canceled or one of them JS rejected, then the whole thing is over. Mhmm. So if you wanna, like, wait for everything to finish, Big ant was my rap name in university. That's pretty good, Rodney.

ascending order. So, because it's been cached and downloaded already.

Next, we want to talk about

Mhmm. So if you've ever added items to an object, you'll look at them, and they you say, oh, that looks like they're going in order at which I put them in.

transferred.

reduce

especially on Windows Mac. I have no idea what that looks like, to be honest.

and, obviously, that will take a little bit longer

Yeah. Because we have had trim in JavaScript forever.

if the user's score was 0, And if they don't have a score value, it will fall back to 10. That's why we always use the the pipe. Like, pipe pipe is the or operator in JavaScript.

really thin ones for cutting just little pieces of trim off. So check it out. It's called the the you don't have to get the DeWalt one. That's just like you buy whatever color batteries you have. What? in my JavaScript, of course, we use Teller from Penn and Teller Yes. And Cher.

exports.

a module What is Big Ant? Wes, okay. So let me tell you let me tell you about BigInt because this is not something I've ever really had a huge problem with, but I know people who deal with large numbers e s 2019 and e s 2020 you can just use a question mark here before the dot. So it now is user

Much like React has mount and unmount and update, you'd be able to to hook into those things. So when something connects, you can do as far as from reading the docs, that's what I can understand it is.

Python, Golang, whatever. So this site is fantastic.

reduce use cases that we we used to always go for, we don't go for them as often because, like, a rate dot reduce has always been this, like It's convoluted.

those of you who are working with big numbers, maybe you've hit that limit, and you've been like, wow. Why why this why is this math not working? You're gonna wanna go ahead and check out BigInt because it all it does is basically allows you to use numbers that are larger than that upper limit in JavaScript.

Top level await is yeah. I know. I know. I know. I know.

Wes mark dot

and Twitter's API sends you the ID of the tweet. And then if you try to take that number and display it as a string, that would actually equate to being sibling files. So if you are

Holler. Yes.

And and they they close. And if you wanna be able to listen for It's likely this is more of a

Yeah. That's interesting.

in here. Now the cool thing about this site, shout out to this site, is that they give you a quick little reference here. So if you need to, like, look up and search for, like, okay, I wanna reverse this or I wanna do this or whatever, it gives you all that nice little reference there. And, of course, you can change it to JavaScript, Next one is going to be dynamic import. Now dynamic import is something that is going to be super useful to a lot of people. What it does is it basically allows you to Do you have any sick picks for us today, Wes?

a falsie value, and then it would just default their score to 10, which is not what you want. Right? Right. Or if somebody's last name Then format into into money, And object dot from entries is this most helpful one. I've got a bunch of links in the notes to some examples that we have here, but even even something as simple as if you have they will be guaranteed or which,

which you could use for things like imports. You could just await and import,

Object keys do have order, and here is the order that they go in. First, Awesome.

Next up is is top level await, which I think a lot of people are awaiting.

But they're so helpful because you can and that clogs the, like, the drain. And then it overflows, and there's a sensor in the bottom that's just 2 pins.

and you've got a

or it's an object Empty string.

and that for a specific piece of content is sometimes hard to do in a specific web page. So navigator.share

let's see,

which is what Gatsby uses. It's what Next. JS uses.

Alright. Thanks so much for tuning in, and we will catch you on Monday.

Yeah. Next Wes have here is Nullish Coalescing, and it will turn them into an object. So, object dot keys, object dot values, and object dot entries, these will always return to you an array of values.

And, No more worrying about whether or not the window exists or whatever. You can just use global this rather than window or dot global or whatever you need to use based on your environment.

doesn't check

the import happens. Like, let's say you have a

the 1st time your module Node. But that will allow you to share different pieces of content. It's still get that into just a nice clean array so you can work with it, you need to flatten it. So the new dot flat method exists on all the arrays, and this is just another Welcome to Syntax. This is the podcast syntax,

have been asking for big int for a long time. Node, typically

everything that you need, reports of how you're doing, profit and loss,

in some of these because I am a little bit less up on the browser things than I am on the JavaScript features. So this first one you have is

from blank a lot. So maybe I would use this as well to sort of bundle up some of these into, like, an object. Right? Yeah. Interesting.

I so so stupidly

browser

You're very cool about that. I would've panicked.

apps and more fully featured

100 milliseconds.

I wanna see where is it at It's because of, like, being Bos base 10 or something like that. I remember going through it down a rabbit hole, and I had to redo every single

Scott share navigation dot share.

and their keys have no order.

different points in a callback's life. Mhmm. So the the example that they have

primarily Lodash has. I don't know if you use Yeah. Has. I would use Lodash has, or I would just kinda

a little tool. You slap a battery in it, and you put, like, these little blades on the end. And it's the perfect tool for string keys, this is most likely what you're using. So anytime you add a new key that is just a word or we can say property. If you add a property to your object,

int. Now big int is a function

1. Like, I thought it was, like, so cool This is a pretty common thing that I hear from people who are running their own business or running their own show for a while, and they say, like, I got a job because I'm sick of doing the, like, the business side of it. I just wanna be a developer, and, totally, I hear you on that. And the one tool that makes me able to do that is FreshBooks, number 1, then that's fine. But I think once we hit, like,

and there's another one. Where's I don't see it in here, but it was, string dot replace all. It's right below it. What's odd is that replace all is still in stage 3.

that aren't as they're, like, not as good as as the app. You Node? We we see that a lot. This is another step towards that. I wonder what it does on desktop. I don't do much, like, desktop click sharing things, Yeah.

that. That's really it. It's not that exciting, but certainly helpful.

Head on over to syntax.fm

awaiting something inside of a module,

Mhmm. Which is just a, and then wait for it to load. And then when it loads,

We're going to shamelessly plug our courses now. Mine are available at Wes Bos .comforward/courses,

So the,

their order will always be maintained, and that is guaranteed as of Wes 6, which is kinda interesting.

And I've said that many times probably on this podcast, and I learned It's super helpful, and it's what we reach for when we need to do really anything, and there's not that built into JavaScript. Right. And now we have these custom built methods for it, and I much prefer those because the array dot reduce Kill build. Oh. That's pretty dumb. Kill build should kill it, delete your package lock, delete your node modules, delete your Yarn lock Yeah. And re npm install, and then start it again. Done. I'm gonna add that to my my code base. That sounds great.

share Now what is what is this about? of your users making mistakes. Now it doesn't turn on their webcam and and show them, you know, freaking out about your website, but what it does is it gives you this session replay, they call it. And the session replay is so cool because it shows you in a scrubbable time line the user committing a bug. They click on something, the site breaks. It turns purple. It turns upside down. It turns into a tomato. Whatever happens, well, LogRocket is going to capture that in a scribble video with the network requests and all those console logs and errors and Redux store stuff that you don't get anywhere else. So if you want to stop guessing why your bugs happen, head on over to log rocket.comforward

the prototype has the method on it. But as soon as you get into the situation where you have your own method that's not on the array prototype,

import

numbering our podcast starting with double 0.

int, you wanna parse, like, a string Deno zero one into,

Next 1 is going to be this is fairly,

So if you wanna check if something is either null or undefined Whether that's good or not for gives you access to the camera of your device. Mhmm. Navigator.geolocation object order kinda is guaranteed, last name is null because he explicitly It's just that if you only wanna trim one side of it, for whatever reason, maybe you was greater than I don't know. Yeah. Right? Yeah. Scott of good use cases for it. We just can't think of a interesting one right now. Well, this will be the use case where I finally use it, so API, so it might not even get anywhere. But as far as I can see and understand what it is, it's sort of like event listeners

and it is really super cool. My my entire site let's see what my entire site is because it, like, you can load this as a Node app or you can do static

I bought like a little blade kit and some of they have like sanding ones and they have metal cutting ones and they have change something about an object, I'll quickly pop it into an array, loop over it, and do what I need to do, and then I need to convert it back into an object.

If you need a list of countries

Node, typically so, or something. It still said I worked in Dearborn, Michigan.

Kill build. Kill build that just just that just deletes the build.

wrapping format money in multiply in add. Right? And if you wanna figure out what happens, you have to sort of start

30 day unrestricted free trial. Make sure you use syntax in the how did you hear about us section. Thanks so much to FreshBooks for sponsoring.

is what is it? It's something funny. It's let me find it. Let me find it. Thousands. It's it's in 1,000.

60 k b total alias or something.

do my new website,

bite and chew and and write out the entire

Let me check that out. Make sure that's the website I'm thinking of. Yes. Regxone01.com.

that's to open a file. These things, they start, they run,

simply by declaring

And then, also, we talked about this before, but Edge now runs on Chromium.

So it's pretty dang quick. It's pretty small. There's, like, no framework. The thing functions really nicely. And you get all of the awesome stuff from Svelte. Like, I'm using the built in Svelte animation library to do these really neat transitions on on my pages,

It's still not totally implemented in all the browsers, Node proposal. Yeah. I think this has been around for a while. Yeah. 2 years ago.

It's what most things use. So you can We talked about this one. We did a entire episode on the new promise methods.

That's okay. Big Ant? Yeah.

from a specific utility, but we've never had the

and statically generate me a gorgeous site.

stage. I don't know if it is even stage, is it? Oh. Stage

then they will go in whatever order from the diversity of the browser landscape, that's a whole another Right. Whole another thing, but I don't know. I'm pretty there's a couple other things. Yeah. I will link to the blog post here. I don't think it's, totally our wheelhouse to to totally explain it all, but check it out. There's a really good post on v eight Scott dev We use that to define the difference between null and undefined because Teller's

I'm, sick picking sapper because I've been using it to video

a a string with, like,

Oh, is it? Yeah. I've I've already been using it in Oh, yeah. I've actually I had to put a polyfill in node, they are true numbers. So you can say, like, ten is greater than infinity, ten. Like, that's the default value. Mhmm. And and what that will do is it will check if the user has a score value.

is bad. And what I mean by that is what LogRocket does is it captures

different points in that, so the score is equal to the user dot score question mark question mark 10 sorry. Let me read the whole thing first. Export star as utils from utils.js.

that that is untrue.

was nothing like Cher

or like the like the mobile default share menu? Like, is that what it is? It's, like, popping up the mobile share menu?

websites

which is like I it's just slapdash. It's thrown together. By the time you see this, it might even be a little bit better. But I was just figuring, you know, my my previous site was from, like, 2013 default number only goes up to 2 to the 53rd power minus 1, which is a big old number.

I'm gonna use this in a React content. So let's say you have a Node page, and then you have maybe a forward slash tutorials page. And on that forward slash tutorials page, there's a whole bunch of code here. You don't want all that stuff to import and load and whatever at that time so you can dynamically import it. That way, when they click the route,

look at, like, commonly used regexes. Oh, this is cool. Yeah.

Chrome for Android

allows you to represent very large numbers.

and return a promise. So instead of importing the module at the top, what we're able to do

or 10. So if the user score is null or the user score is undefined, then fall back to 10. And I think you should probably start using this wanna,

Let's get into some sick picks.

in everything JS I've certainly hit this bug before where Yeah. Anywhere where you're not using numbers or whatever. Yeah. Yeah. Yeah. So cool. Pretty cool.

experimental.

immediately

ES 2020, and I think it's starting off with a big one. And by a big one, I mean, Big Ant.

Blasting it out. It's Yeah. Unreal. So useful. You wanna trim from the start, trim from the end. You wanna do both? You can do it. Them together? Yeah. You could do it. Node make sure if if you like that this kind of content, go ahead and just destroy that like button. Just push it so hard.

that explains why we now have access to that. Even just something like like I said, like a like a list of countries.

Fantastic.

array dot with the treats that are pretty tasty.

in the middle and work your way out to understand what order is happening.

Mhmm.

And at a certain point, if you wanna parse a comma and then you wanna split that comma, With me, as always, is mister Scott Tolinski. How are you doing today, Scott? Hey. Yo. Hey. Yo. Hey. Yo. Hey. Yo.

are looping over some stuff and you need to include the space at the end of a word, but you wanna trim any spaces that are at the front of a word, then there you go. It's it's not like

user dot address dot street name and address did not exist, the whole thing would break because you cannot use property of undefined. We've all seen that error. Cannot find street

and Bos are the only ones that support it. And then there's another each of them return

You gave me a great idea by saying kill build. I'm going to now write, for Svelte,

Unreal. It's like this is probably, like, the best thing in this entire Node. Yes. This optional chaining, it makes All brands have this multi tool, and they all take the same there's also, like, trick in JavaScript to fall back to a value so

I always have to go to this site. I paste in my my test strings, and then I write my regular regular my regular my regular expressions Thick ant.

the array value.

That is really cool. And it's funny. It's got a scary name. I think it throws people off. But we got some really nice question marks and new syntax in 2020. And another, excellent question mark syntax JS, optional chaining, which is something that I've been using for quite a bit through Babble and through whatever. And, thankfully, TypeScript added it because

Yeah. I thought that was kinda inter we had the same problem with, Peace.

Yeah. That sounds fun. Just another option there for our promises.

tricks and kickflips that we do, they're hard to read. It's hard to parse. Yeah. Yeah. It is. It's hard to parse. And and I don't I never, like, look like, when I see a reduce in my code, like, I have to leave good comments on it because I come back to it. I'm like, okay. What is this doing exactly? Okay. Yeah.

the whole thing JS going to short circuit and return an undefined for you, Therefore, allowing you to do some really nice if statement checking to say, like, if this question mark dot this question mark dot that

an array, and then we're able to do that because flood. We didn't clean out the I don't know. Somebody in our house is thinking that you can just put a a plate full of corn directly in for a lot of people, that's totally fine to to do.

custom Babel configs. And it's in in TypeScript too, so t s people. That's so good. I'm a big fan of this. It's so good. What did Julie do before optional training? which basically is a standard way of accessing the global object itself across environments.

returns a Boolean whether you can or cannot share it. So do these use the thing that I'm seeing with a lot of these new methods is that every time we come out with a new one of these methods, flat flat map Mhmm. From entries, they sort of the

or whatever. And you will no longer have those errors because if at any point any of those properties

little pieces of wood or trim or cutting off a nail or flush cutting something.

So if you want to import and export something this is big in the Flash world even before JavaScript.

that,

then you can So those are all those values equate to false in JavaScript. They're that's why we call them falsie. They're good enough to be false.

Wes.

is to

I'm so stoked about trim end. Yeah. Let me tell you.

regexr,

I'm I'm, I'm super into this one. Yeah.

is going to be a new API

Sign up to become a pro today, and you'll get access to, well, just a ton of premium content that I've been releasing over the years. And what I do is I release a new video series every single month. The video series that's coming this month is on

and then you need to loop over and turn it back into an object, Object. From entries is coming in clutch. Previously, you've had to use, And when that those pins hit the water, it it can tell that there's been a leak. And we just, like, left it for, like, 2 2 days, and we're, like, put a heater on it. We're, like, it'll dry out, and it just didn't

Function to string. I don't know what this does. Does it just make your function a string? It does. It just Wes it sounds. So if you have a function and you would like to turn it into a string to do something with that string, maybe display it or something. I don't know why with the use cases for this. Maybe it is displaying code. Right? You wanna show off some code. Here's a function.

of the device. So if you wanna be able to access the device's

/ syntax,

other modules that are running are not blocked by that. So you're not actually blocking anything. You're just awaiting that that specific module.

Yeah. Like, that's that's the whole thing about navigators.

which is a very interesting name. I thought this is pretty cool. This is cool. I like this one. You can start to use.

3 functions that all do something. Like, and not an empty string, like, me as, like, the JavaScript developer who wants to use new things, that's good. Yeah.

This next one is a Node API. It's called Async Hooks,

Whereas with optional chaining,

So we've had the syntax

alright.

top level away

We've we've

map,

Just hanging out. You know, everything in life right now is sort of breaking. My, something that there is a chance of you using as Wes. And that's I'm talking about FreshBooks here. It's the freshest sponsor we've got. Yeah. Sanity was more on FreshBooks JS Wes.

invoicing and accounting and expenses, all that good stuff. We'll talk about them partway through the episode.

array inception. Right? Because it's returning an array. Well, with flat map, the cool thing is is that it flattens that array just like it would sort of when you're returning an array from a function. And now

dish my dishwasher JS not working.

And it's like, well, I'm not gonna buy the tool for this one time use. So I saw a video that showed you how to do it with screwdrivers. And I had, like, several screwdrivers, and I'm, like, pulling them and trying to get the tension right on this thing. And, oh, my Node, I I think it was one of the only times where I've had to, like, set everything down, just step away, and, like, take 10 minutes to cool myself off because I was getting so angry.

an array with a number and a number times 2 generation for these things. So my entire site

rather than nested arrays.

What does that even mean? Just some words. Really, really Scott of nuggets. These are things that you're, like, be able to use now or within, I bet, the next 6 months or so. So let's get on into it. Today, we are sponsored by LogRocket,

done quite a bit to

Our dishwasher broke the other day too. What happened to your dishwasher? It's just not cleaning.

you know, the handle broke off my microwave. The, instead of being

which is online session replay, network activity, all kinds of interesting stuff that will show you what is going wrong with your website JS well as FreshBooks, which is online

It was like, oh, the seal's only $20, but the tool that they use to apply the tension band around the seal is, like, $90.

and, it's just not working very well. All of the appliances were purchased, like, 2 owners ago in this house, so we Oh, yeah. They might be hitting that age where they're gonna have some problems, and I'm gonna have to start taking some things apart and figuring it out or who knows? I don't know. I don't wanna buy a new one, but Yeah. It might have to happen. They're old. We had ours

check out why. You know, there's no clogs. We've run a lot of cleaning cycles. We've run run it with, you know, vinegar. We've done all sorts of things,

in this example, let's say we had an array I don't wanna say benign, but this seems like pretty useful, which is trim start and trim end for strings. So you can now run a method, trim Scott or trim end on strings. And what that's going to do for you, it's going to remove the white space either in front of the string or the end of the string. A nice little thing there. You're not gonna have to remove it via, you know, whatever. Find this find the empty space and replace it with the nothing kind of tricks that we've done in the past.

e s, I don't know. I don't know any of these.

you get,

go Oh, no. Back. So, finally pulled it out and just tipped it over and drained it out, and it went back to being fine. But Hey. Appliance repair is very frustrating And the response to this is that

The ice maker is not working.

I'm doing good.

2 and then 2 times 2, and then 3, and then 3 times 2, and then 4, and then 4 times 2, all within 1 flattened array

you know, getting your hands in there. I mean, we need to fix this. We need to, like, change the seal on our,

I was so angry.

how like, it's it's definitely possible to fix these things. Like, we've talked about that before, but it's the parts are often really expensive and They require frustrating. A lot of, like, like, tax summaries, how much do you owe on whatever local taxes in your area. You wanna check it out, freshbooks.comforward/

array array array inside of an array,

given

and, maybe some things beyond. We're gonna be talking about some of these basic features, but some more advanced stuff and some really interesting things. So I'm gonna kick it off with flat map.

and then 1 times 2 and then

But, yeah, that's how things are going over here, man. I'm just generally working on some co working on some fun Svelte stuff, maybe we'll have to do an episode on. But let's get into some of this JavaScript because there is a lot of cool stuff that came in 2019,

props.

Yeah. Isn't that weird? You can obviously pass it as many levels deep as you want. Infinity is it's been a keyword in JavaScript forever. There's also negative infinity. I've never used it. Interesting. Yeah. No. Neither have I. I don't know What other why you would need it. Like like, if you need, like, the upper bound and the lower bound of something, gives an ID to every single tweet. Mhmm. Like, the 1st tweet was probably 1.

it does it every single nested layer deep. Because if you just do that flat and you have multiple nested arrays, it only flattens

itself. Did you see this Sanity keyword? Have you seen this infinity keyword in anything else before?

and this is super interesting to me. I've I've used this Node 3 times already since it came out, and it only came out just a little while ago. I'll link up some tweets where I have some code examples.

the 1st level. So if you use the infinity keyword, it flattens all of them. I didn't realize you could pass it infinity.

So at this point, probably no surprise that a lot of these things are being added to JavaScript string of your function, exactly as it sounds.

And this is object Scott from entries, and what this allows you to do is you take an array of values,

reason why you don't have to load in, a Lodash or something like that, the utility library, because it's just built in. That seems to be a pattern with this modern JavaScript stuff, even, like, all the way back to Wes 6 and onwards.

running with the next one that we have here, which is just dot flat on the end. So there's a bunch of new methods

or, like, object dot entries, object dot values, There There's a couple of new ones. This one is part of ES 2020.

Like, we've just been seeing a lot of the features that have been in Lodash being implemented in native JavaScript. It's funny. There's probably gonna be like, you don't need Lodash at some point because it is. It's like the most used utility library in JavaScript.

All of these new methods will return to an array of arrays.

And if you want to Is it just the function name or all the code inside of it? The code inside of it. The whole thing. Next Node we have here, and this is not new at all, but this is something I've said many times in the past and and many people have told me JS that objects object dot keys.

and Wes Bos.

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Tolinski