452

April 27th, 2022 × #JavaScript#Front End Development#Web Development

JavaScript × STUMP’D

Wes and Scott quiz each other on random JavaScript interview questions and discuss techniques and concepts like weak maps, promises, and variable swapping.

or
Topic 0 00:00

Transcript

Announcer

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

Topic 1 00:02

Announcer intro

Wes Bos

Ready.

Topic 2 00:15

Wes and Scott introduce stumped episode

Wes Bos

Rid In the world, we've got a Stumped episode for you. We we realized we haven't done a Stumped episode in, I don't know, probably 6 months or something like that.

Wes Bos

Rid. And Stumped is where we will ask each other random interview questions, And Scott and I will attempt to answer them and make fools of ourselves. So this is always a really fun one. I like this one a lot.

Wes Bos

Do we usually keep score on this? No.

Topic 3 00:39

Wes and Scott discuss keeping score

Wes Bos

I don't think we do. I don't think we should keep score. Because Yeah. Yeah. I'm I'm a pretty competitive person. But yeah. No. I I don't need to keep score here. But rid We're sponsored today by 3 awesome companies. First 1 is Content by Kentico. They are a headless CMS. Second 1 is LogRocket

Wes Bos

JavaScript session replay. Rid. And 3rd is FreshBooks cloud accounting. We'll talk about all of these awesome companies partway through the episode.

Topic 4 00:59

Wes introduces sponsors

Wes Bos

My name is Wes Bos. I'm a developer from Hamilton, Canada. And with me, as always, mister Scott Tolinski. How are you doing today, Scott? Doing good. Beautiful weather out here. So, you know, I I got to Spend some time cleaning the garage yesterday, and I was cleaning the garage. And I had my trimmers out, and I was trimming the the The hedges, and I was cutting back some trees. And, yeah. Gotta love it. It's one of the best parts about spring, to be honest. It's, like, finally So good seeing all that stuff that's overgrown or whatever all all winter long, and you're like, oh, I'm gonna be able to tame this. Yeah. So I I'm feeling good. I'm feeling a little bit a little bit of rejuvenized.

Wes Bos

So everybody else in the family is sick, though. So it's only a matter of time before I get sick and get brought down. Oh, boy. Rid. I I just went down a rabbit hole of,

Wes Bos

garage storage systems, and, like because we we bought a new house that has an rid. Awesome new garage. And, like, right now, we've got these, like, like, hooks that you kinda screw into the studs everywhere. But Yeah. I've been looking into this, like, slat wall Or you can just make the whole wall slats, and you could put hooks wherever you want. Can you send me a slat wall? Oh, yeah. I'd love to see that wall. I'll continue.

Wes Bos

Rid. Just or just Google, like, garage slot wall. They call it slot wall.

Wes Bos

So it's a slot wall. Not a slot wall?

Wes Bos

So well, it it's it goes by both, and then you can buy, like, different types of hooks and baskets on Amazon.

Wes Bos

And so, like, I went I was like, okay. Like, I wanna do They sell it in, like, 4 by 8 sheets. So I was like, okay. Well, I want to do, like, 8 foot high around the entire garage. Oh, I see. And then, like, do, like, a really cool paint job. Yeah. And then the the

Wes Bos

you can do, like, these epoxy floors. I think that'd be really cool. So I we could have a whole episode on Garage Talk because, like, Our our garage is actually, it's not it's not finished or anything like that, but it's so we had started drywalling and insulating. So half of it is drywalled and insulated. And I was thinking, like, we just should get somebody in here to finish this, paint it up, and then do the epoxy flooring.

Wes Bos

And then Yeah. I I've looked into the epoxy flooring. You have to do the whole etching. You have to make sure it's all level. Like, you have to be really legit about it, or else it just peels up. So So I, like, don't trust myself. Like crazy. Yeah. I don't trust myself with the prep for that.

Wes Bos

Yeah. Unfortunately, that is all things painting.

Wes Bos

Rid. Mhmm. You gotta, like, really prep. It's so frustrating because you just wanna get going and get the thing done, but long term, it's not gonna work out. I'm liking the the slot wall. I'm gonna have to

Wes Bos

rid To do do some digging on this myself, I got a lot of possibilities in our garage right now. So Yeah. There's some, like, silly expensive options. Yeah. But they sell like a MDF

Wes Bos

a version at Home Depot. That's, like, $60 for a 4 by a sheet. I was like, doing the math. I was like, you rid You can do a double car garage for $700.

Wes Bos

Oh, wow. But they they sell, like, they sell stuff that's, like, 5 times more expensive than that, and it's just like, okay. Like, I don't need like, this is not a race car garage. You know? Like, I just wanna be able to hang stuff up. I kinda want a race car garage, though. That'd be sweet.

Wes Bos

Alright. Well, let's get into some stumped questions.

Topic 5 04:18

Wes and Scott play rock paper scissors for who goes first

Wes Bos

So we pick a random GitHub repo every time full of, rid. JavaScript and CSS and whatever, questions. This this time, we've got one called JavaScript interview questions, rid. And there are 435 questions. We wrote a little bit of code to randomly select one of the questions. You wanna do a rock, paper, scissors for whoever goes first? This is gonna be tough. Okay. You ready? Yeah. Are we doing on shoot? Right. Right. Right. Right. It it rock, paper, scissors, shoot. Okay. Yeah. Yeah. Ready? Alright. Rock, paper, scissors, shoot.

Wes Bos

Oh. Scissors, double scissors. Alright. One more. Alright. Let's go again. Ready? Rock, paper,

Wes Bos

scissors.

Wes Bos

Shoot.

Wes Bos

Bow.

Wes Bos

Boom. All right, you go first. All right.

Wes Bos

Rid. Do you wanna give me a number? Do you want me to generate a random number? K. Question number 208.

Topic 6 05:08

Wes asks first question about WeakMap methods

Wes Bos

Question number 208 for Wes is list down the collection of methods Available on week map.

Wes Bos

So it says here.

Wes Bos

So okay. So, basically, what are I'm gonna make this a little bit easier, because this is a tough question. What are 4 methods available on week map? They're like the the main methods.

Wes Bos

Yeah. Has?

Wes Bos

Yes. That's that's 1, has.

Wes Bos

Add?

Wes Bos

No.

Wes Bos

Because okay. Because so there's you can check if there's something there. You can add something. You can remove something, and then you can get the, not the length, but the so dot size is another one.

Wes Bos

That's how it is. Weak. Yeah. Weak map. It's week week. I don't think you can get the size of week.

Wes Bos

You you are really close, to thinking about all of the operations here. So maybe Is it so maybe just start listing off things that could be operations, like what you had Remove? So,

Wes Bos

Close. Delete. Delete. Dot delete. Okay. K. Delete. So has Delete.

Wes Bos

So it's not add. It's it's not push, is it? It is not push. It is not add.

Wes Bos

Think React even though it's not weak, man. What's a word that you use a lot?

Wes Bos

Keys? Set.

Wes Bos

No. Oh, that's set. Oh, yeah. Yeah. Yeah. Okay. It's funny that the map has a method called set, but then there's also sets.

Wes Bos

Rid. Mhmm. Sets. K. So. Alright. What's the one I'm missing? Set, delete,

Wes Bos

has and get.

Wes Bos

Okay. Obviously, get. I know.

Wes Bos

Okay. Wow. Okay. I yeah. That's a tough one because it I mean I have a course on this stuff, folks. Rid. Yeah. But weed map is not one of the things that everyone's reaching for all the time. No, man. Alright. I have a equally difficult probably

Wes Bos

No. This 1, I I I put a 1% chance that you'll get this. Oh, that's wonderful. Yeah. This is very tricky just to set some expectation.

Wes Bos

Rid. Question number 410, how do you make an object iterable in JavaScript? Rid. So meaning that you can you know, like, when things are iterable, in JavaScript that you can use the .next method To get the 1st, the 2nd, the 3rd, and then eventually it will you'll be empty. So to to clear this up for people who are wondering, it's not How do you how do you loop over an object? No, right. No, no. Like like this is over. You could use it or values. Yeah. Yeah. Using an iterator and JavaScript teacher.

Topic 7 07:20

Scott asks Wes about making objects iterable

Wes Bos

I you know what? I honestly have no clue. I don't work with it herbals At all, really. No. Yeah. Okay.

Wes Bos

I don't think I would have been able to get this one either. But basically, you have an object, and you set The symbol dot iterator, method on it, and you can code the logic inside of that.

Wes Bos

Rid. So inside of that, you can make a closure, which is a like a I variable to to 0, and then you return an object with a next value on it, and that will increment.

Wes Bos

Oh, quite honestly, I would just object dot Values, keys,

Wes Bos

entries What's and loop over them? For this? I mean,

Wes Bos

and what's the usage? Yeah. I think it the use case is rid. If you're using generators or if you need to pass it to, something that expects an iterator, but rid. Quite honestly.

Wes Bos

Again, I've never had to do that.

Wes Bos

Yeah. I I have not either.

Wes Bos

It's funny how these things come up. And and For those of you who are listening, this might be your 1st time listening to Stumped.

Wes Bos

One of the reasons why we do this is to to show everyone that, like, interview questions can be really hard. And a lot of times that they're not, I mean, they're they're practical and that it's like the language. Right? But at the same time, you can't know everything. So, just just so those out here, you're listening and you might be wondering, about interview questions, they'd be hard. That is just how it is.

Topic 8 09:05

Wes says hard interview questions are normal

Wes Bos

Okay. Next question is from 129.

Topic 9 09:28

Scott asks Wes how to uppercase first string letter

Wes Bos

How This will be a nice one for you, Wes. This is a nice little change of pace. How do you make the first letter of a string into uppercase? Rid. Not with CSS because that's easy.

Wes Bos

So strings can be referenced by their index.

Wes Bos

So I would just take the 0th Value of a string, which is like, let's say, const name equals wes. And then from that, I would return name square bracket 0 dot to uppercase plus, and then the rest of the the thing so you could slice it or or just reference it,

Wes Bos

off the of the rest of it. Yeah. You really covered all the keywords there.

Wes Bos

Their example answer uses a string dot char at character at dot. So It uses the character at method to saying string dot character at 0 dot to upper case plus string dot slice, starting at the 1st position. So same answer, same business, but excellent job, Wes.

Wes Bos

This Also easy one. Man, we started off with some doozies. Sometimes they're easy. Sometimes they're they're not. So this one, what is the Type of operator.

Topic 10 10:37

Wes asks Scott about typeof operator

Wes Bos

What is the type of op or like like is this, like, a existential question? No. Like, what does it do? Well, it it it lets you know what the type of something is. So those of you who are, like, you know, you don't know a ton about JavaScript and JavaScript types. JavaScript types are are loose. They're loose types. JavaScript things have types, but they can transform themselves into anything easily. Right? So we have types in JavaScript, But they're loose types. And because of that, you're often wanting to check to see to make sure the thing that you have in your code is what it should be. Type of String is equal to string of string. So, yeah, that's what a

Wes Bos

that's what type of does. It literally says rid. It really says in the answer, it returns the type of Yeah. A variable. The type of variable expression. Very, very descriptive.

Wes Bos

And that's actually something you end up, I think, using a lot more after you get into TypeScript too, just because you're you're checking types a little bit more often to do logic breaks. Ready. Yeah. It it kind of like says, like,

Topic 11 11:29

Scott and Wes discuss TypeScript type checking

Wes Bos

before TypeScript is like, ah, it's by fine. Yeah. And then in TypeScript, it, like, literally makes you is like, rid. Uh-uh. There's a possibility that this thing is undefined, or you're not actually explicitly checking it, so you have to go ahead and do it before I Let you go ahead. Yep. Alright. Number 26.

Topic 12 11:56

Wes asks Scott to explain ES6 classes

Wes Bos

What are classes in e s six? What are classes in?

Wes Bos

In e s six, classes are, the ability to create an object and extend its Prototype with custom properties and methods?

Wes Bos

It's a fine way of saying it. And the the keyword that, they have in their rid. Their answer here is really just that it's a syntactic sugar over JavaScript's existing prototype based inheritance. That's The only thing is basically that it's syntactical sugar for something that has existed in JavaScript using

Wes Bos

functions in the past. Yeah. Rid. So before it was just like you have an object like a a car, and then you can say, like, capital c car dot prototype dot beep.

Wes Bos

And then the beep would be a method that would return the that would go ahead and beep or something like that. And these classes are just a kind of a nice way to To do that now instead of having to explicitly put it on the prototype. Yeah. And and it's not necessarily an uncontroversial

Wes Bos

syntax Or addition to the language, because people say, why do we need this? We already had the ability to do the same thing. Now it's just a, you know, a different version of the same thing, but I do Like looking at classes more. For some some reason, I can read them just a little bit easier even though I don't I don't deal a ton in classes. But yeah. I I like them. Alright. Rid. Let's see what we got here for you. Oh, this is a this is a nice one.

Topic 13 13:24

Wes asks Scott about enumerating objects

Wes Bos

This this comes back from the first one. How do you enumerate Key and value pairs, and I'll I'll go further and say of an object.

Wes Bos

How do you enumerate? Enumerate just means to iterate over.

Wes Bos

Yeah. It's a loop over. Loop over. That's a fancy word. Yeah. Yeah. So okay. So,

Wes Bos

you can do this a number of ways, But you could do 4 in is probably the nicest way, in my opinion, where you can say, like, 4 item in object And then loop over it. So that's how I would do it.

Wes Bos

Okay. Yeah. But that the for in will only give you the value. How would you get the

Wes Bos

the key? How would you get the key? You could do object dot keys If you're if you're wanting both of these, both the, the object object it may be object dot entries.

Wes Bos

I don't know. Bam. There you go. There you go. You got it. Yeah. So you use the For of the, is is the for of loop and use object dot entries. And what that will do is it will return you an array, rid. And then in each item of that array is another array, 1st item being the key, 2nd item being the value.

Wes Bos

So, yeah, looping over it, you can also really handy thing to do is to destructure the 1st and second value of that second array into key value. Yep.

Wes Bos

Variables. You know what? It's funny because I just did this Friday.

Wes Bos

I I'm working on a, this is actually very interesting. A little sidebar here. I'm working on, like, a storybook alternative for SvelteKit just for fun because Oh. I didn't wanna set up a webkit process. I don't wanna have a whole second thing in my code base. So I was like, well, what if I just rid. Used some Veeet tools to, like, scoop up all the routes with a story dot Svelte extension.

Wes Bos

So I used glob imports to scoop up all of the stories, and then I made some components for myself. And now I have, like, a storybook alternative that's just rid In my routing, like normal routing? Yeah. And I it's I'm really digging it. And so, yeah, I've been dealing with a lot of iterating over objects in this. And rid. Good time to ask me that question. Bad time for me to give you an answer, apparently.

Wes Bos

Alright. Before we get into the next Question. Let's take a minute to talk about content by Kinetico. West, do you want to talk about content by Kinetico?

Wes Bos

Yes. They are a headless CMS that literally everybody loves. You can enable marketers, free up developers, unify teams. Content by Kentico is a headless CMS Where modern digital experiences are made.

Topic 14 15:49

Wes introduces sponsor Content by Kentico

Wes Bos

How do you know it's that good? Well, you land on the homepage, and they have rid. Buttons for marketers and for developers. You know when a product focuses on both ends of that spectrum, rid. You got happy users and happy developers building the type of thing.

Wes Bos

It's going to be really, really nice. So you can go ahead and use it with Any of the frameworks that you're used to, they've got first class integrations, ASP .netcore, Next. Js, Gatsby, Nuxt, rid 23, Gridsome, PHP, Blazer. You name it, they got it. They have live editing with Jamstack and other apps. So Content comes with a feature called web spotlight, which allows you to bring in your Jamstack site, server rendered site, or even a mobile app Into the headless CMS and let nontechnical users work on the content directly from the same UI that they're comfortable with. That is rid Awesome. They have a REST API. They have a GraphQL API.

Wes Bos

Both are hosted on a Fastly CDN. It's going to be fast as heck.

Wes Bos

Rid it's going to be the CMS of your dreams. You wanna check it out. Go to content, k o n t e n t, dot a I Forward slash syntax.

Wes Bos

That's gonna get you 3 months for free instead of the standard one. Check it out on your next project. Thank you, Content by Kent rid. Go for sponsoring.

Wes Bos

Cool. Alright. Next question here is for Wes.

Topic 15 17:20

Scott asks Wes about event queue

Wes Bos

This question Is number 300 and or not 300, 238.

Wes Bos

238.

Wes Bos

The question is, what is rid. An event queue.

Wes Bos

So in JavaScript,

Wes Bos

rid When things happen, random events, clicks, hovers, browser events, Messages are sent.

Wes Bos

They are added to the event queue for the browser to deal with them. Rid. So as they I don't know if I'm gonna I don't know if I'm gonna be stumped by this one or not, if I can explain it super well. But As the events come into the browser, they are added to the queue, and they are handled, in accordance of when they came in and also, if it's like a web API or a JavaScript event API.

Wes Bos

I don't know myself, and there's no answer here in the, what? Yeah. So I'm gonna read out, an answer from Stack Overflow to see if if this can clear things up. Basically, there is task sources which all map to different task queues.

Topic 16 18:23

Wes discusses async timing issues

Wes Bos

And during event loop processing, the user agent will choose from which task queue it will execute the next task.

Wes Bos

This task may fire events or invoke callbacks.

Wes Bos

These tasks are queued by various means either as part of other tasks, Either from IPC messages directly user, also known as user initiated events. So it seems like Exactly like what you're talking about, but this does specifically mention the user agent. So that would be the client. Right? The browser. That would be whatever you're using to access the the website and render the website. Okay.

Topic 17 19:18

Scott reads StackOverflow answer on event queue

Wes Bos

Yeah. That's there is a really good, rid YouTube video. It's probably 10 years old, but it's it's still valid, how the JavaScript rid. Event loop works, and I thought that was it was really it was really good because you have, like, rid. You have the call stack, and then you have your your call stack can run like web APIs. Right? It could be a fetch request or it could be a set interval or rid. Could be a click on something. Right? And, like, those things are queued up, but then they don't only once that thing has happened, Your Ajax request comes back. Your interval comes back. Then they're added to the callback queue in in in which order they,

Wes Bos

were fired off. It's yep. It's It's one of those features or aspects of JavaScript that I've never had to dive too deep into. You know? No. It just works. Yeah. Mission critical event, rid. You know, worry about event queues or anything like that. So yeah. Yeah.

Wes Bos

I think the the only, like, weird thing that I've had In the past is when you have to await 0 or a pop, like, a set time out.

Wes Bos

I I got this a lot in, I think it was in Jest.

Wes Bos

Rid. We're, like, adjusting. We're firing before things were being rendered.

Wes Bos

Rid. What that does is it explicitly puts it at the end of the event queue so that you are not Checking for something before the render has been done so that you get into, like, weird, not necessarily a race condition, but you get into a weird rid. Event loop thing where you're like, no. I need this to go at the end of the event loop, not being stuck in there. Yeah. Interesting. Interesting. Cool. Well, that one Obviously, stumped that there was no answer provided, so stumped them as well.

Wes Bos

What do I got here for you? Number 115.

Topic 18 21:07

Wes asks Scott about need for promises

Wes Bos

Rid. Let's do it.

Wes Bos

Oh, this is a good one. Why do you need JSON?

Wes Bos

Why do you need it? Yeah. You don't need it. You there I mean, there's all sorts of form formats that do the same thing. Just comma CSV is fine. Why do you want it? I don't that's a weird question. Why do we need Like, what, like, why or why do you need it? Like, what's what's it for? Like, what's yeah. What's JSON? Like, why do you need it? Structured data. Basically, it's a structured data that's easily compatible with JavaScript objects. So that way, you can Easily convert a JSON object to a JavaScript object.

Wes Bos

That's why people like it. But for the most part, it's just structured data And a key value pair of structured data. Yeah. Yeah. So, like,

Wes Bos

you know, that if you want to be able to send data from one thing to another thing, Data can really only be sent as text, that it it can be encoded. But at the end of the day, it's just text. Right? So you need to be able to rid Keep that in a format where it holds all the data about it. Right? But, it's not from one to another. And also, like, JSON is rid. You can do across programming languages as well. Right? It's JavaScript Object Notation. That's what it's called. But literally every Programming language out there can convert

Wes Bos

JSON into its object equivalent in that language. Yeah. It's nice. It's easy to work with. I do wish we have that, you know, the the more evolved form of

Wes Bos

JSON files where you could have comments and all that stuff. Oh, yeah. There was, I I like, I don't know. Maybe a year ago, I brought up, like, can we please get JSON 5 in, NPM Is that what it is? It's JSON 5? Rid. Yeah. JSON 5 is the like, you could put comments, you can do comma dangle, and then, like Yeah. Comment dangle. People in npm are are just like, no. Absolutely not. Never. Oh my rid. And there's a huge, like, flame thread going on right now being like, okay. Well, like so, like, this is it. This is it forever because, like, if you were to introduce a JSON 5 package to JSON, you would it'd be disruptive because it would break a lot of the tooling, rid. Which is valid. But then also, like, are we gonna have to live our entire lives not being able to put a comment in our package JSON? Rid. It'd be so nice. So, like, I I don't get what aspects of it would break because it seems like it's backwards compatible. No? Like, rid. It's no. It's not at all because, like, JSON 5 adds stuff so that you anything that needs to parse it parse a package JSON rid. Needs to be able to parse JSON five, so that's not built into any language right now. Yeah. That makes sense. But so then you have to install another package to do that. But then also, rid. So, like, there's a huge ecosystem of tooling out there, not just NPM, that tons of stuff reads your package JSON, and all those tools would need to get along and also support JSON five. So, like, maybe so, like, people in npm are like, no. Like, add it to the language first. Yeah. And then Yeah. You know? But then language is like, well, we're not gonna ever update JSON.

Topic 19 23:50

Wes asks Scott about range overflow

Wes Bos

And then, like, and then, I think Yarn or rid. PMPM said we'll get JSON five, but then, like, that doesn't work with NPM. You know? It's just kinda like everyone's just kinda Pointing fingers being like, no. We don't wanna break it, which makes sense because, like, look how mad people are at

Wes Bos

how hard ES modules are in node. Right? They are they are Exceedingly obnoxious, though. They are obnoxious. Yeah. Yeah.

Wes Bos

Next question here is, I think this is one you're gonna do just rid Fine with the West. This is number 52. Why do you need a promise? Why do you need a promise?

Wes Bos

Because when you want rid. To work with asynchronous code in JavaScript, the only way to do that is with promise based rid. Functions. So something that does not resolve right away, but it's also not blocking the rest of your code From continuing to run, there's also other benefits if you can run multiples at the same time and wait for them to all come back.

Wes Bos

A promise, rid. Whether you're using the Promise, Chainable, then syntax, or you're using async await, that is the best way To work with a new synchronous code in JavaScript are the only way, I guess. Yeah. Well, callbacks, I guess, but it's not Yeah. Yeah. That's true. Yeah. Callbacks are I guess Yeah. Callbacks are considered asynchronous. Yeah. They are. You're right. They are. It's just different.

Wes Bos

Oh, here's one. Oh, great.

Wes Bos

Simple, but you might be stumped. All this is a good one. Okay. Give an example or explain the range overflow property.

Topic 20 25:51

Wes asks Scott about JS enhanced object literals

Wes Bos

Yeah. I'm gonna use some context clues here and just get in kind of guess. I'm guessing overflow has to deal with, like, a memory overflow where or I guess no. Maybe it doesn't. It's just Overflow is a word that is basically if the container is too small for the the stuff that you're putting into it.

Wes Bos

So Range overflow would be something with, like, a limited length and it has Too many things being added to it. I I actually have no idea. Yeah. Stubbed.

Wes Bos

This is not something I've, rid Again, used before, and this is very interesting to me. So, you have HTML has rid. You've got, like, a type of email, and you can have min and max on input values. And, by default, the browser will rid. Throw a little UI up there to to tell you what's going on. However, you can programmatically check if your inputs are valid as well rid With you grab an input. There's a validity object on your element. So just select it, dot validity.

Wes Bos

And then inside of there, you get a Boolean that says range overflow, and that is either true or false, meaning that the value is higher or lower Then what was allowed because you set something in the min or max, attributes

Wes Bos

on the HTML element. Yeah. That's great. That's It's also really interesting. I I don't do a lot of form validation like that. I mean, that's that or at least these kind of methods that exist inside of These,

Topic 21 27:43

Scott and Wes discuss form validation techniques

Wes Bos

you know, form inputs, I think that's really neat. Range overflow, range underflow. Me too. I've I've never had to use that one before, and Pattern. That is really cool. It make Sense that you can programmatically check if your inputs are valid. Yeah. Totally. You might not necessarily need to

Wes Bos

Just lean on the UI. And it's going to give you yeah. It's going to give you If you're using, like, React test library

Wes Bos

and you wanted to check if You wanted to let you you intentionally type something that is higher than allowed, then you could do that.

Wes Bos

Cool. Cool. I like that. Yeah. Yeah. That's a good one. Pretty cool.

Wes Bos

Pretty cool. Yeah. Learn something new every day.

Wes Bos

Alright. Next question is 347.

Topic 22 28:23

Wes asks Scott about matching regex strings

Wes Bos

This question is, how do you return all matching strings against a regular expression? So if you wanted to find everything that matches the regular rid in a string, what method would you use?

Wes Bos

I would use dot rid Is it does match yeah. Match. So you use a match method, but you pass it the g flag For global, and that will return you all of the matches for a regex. However, there I believe there's a new thing in JavaScript called Dot match all Yes. Which will allow you to forego the regex

Wes Bos

and just pass a string. Yeah. But you can also use regex as well and not have to worry about rid. G. And if you

Wes Bos

don't put the g in the regex, then it'll only find the first one, though. I'm talking about with match all. Oh, with match yeah. With match all, The the benefit of match all is that you don't need to pass a regex at all. You could just pass a string. Right? But you can also pass a regex.

Wes Bos

You can also pass a regex, but You don't have to pass a g flag. Oh, interesting. Okay. Yeah. Cool.

Wes Bos

Yeah. I like it. I like it. I like it.

Topic 23 29:36

Wes introduces sponsor LogRocket

Wes Bos

What else do you like, Scott. Oh, actually, before before we do the transition, their example with match all does have the g. So maybe you do need the g even with match all, but then it what's the point Other than I don't know. Yeah. I'm sorry. Let's get to the bottom of that really quick before we do it to add transition, because I wanna know if you need to pass in g. Alright. MDN Plus Also uses g in their examples.

Wes Bos

The regular the regex object must have the g flag. So rewind.

Wes Bos

The match all does require the g flag, so I don't know. That's where we're at with that. It's basically the same. But you know what I like, Wes? What? Today's sponsor. I like today's sponsor. It is LogRocket.

Wes Bos

Those of you who have listened to the show have probably heard me talk about LogRocket before, but it's a perfect place you see all of your errors and exceptions happen in your Scrubbable video replay dashboard. It's so cool. You can see that you have an error. You can click on it. You can watch the video happen. You can take the little scrubber and Step by step as the user clicks something that then produces an error. And because of that, you get great visibility into the bugs, issues, and errors that are happening on your site. But not only that, you also get, behavior in performance metric tracking as well. So check it out at logrocket.comforward/syntax.

Wes Bos

Sign up today, and you'll get 14 days for free. Thank you very much for LogRocket

Wes Bos

for sponsoring. Oh, this is interesting one.

Wes Bos

Rid. So this one is not like JavaScript core, but kind of an idea in JavaScript.

Wes Bos

What is a thunk Function.

Wes Bos

Thunk.

Wes Bos

That's what you said? Yeah. A thunk thunk? I Thunk thunk. I don't know. I never used thunks. I'm gonna straight up tell you. I do not know.

Topic 24 31:15

Wes asks Scott what a thunk function is

Wes Bos

I know this is something that you see in Redux land. Right? But I've never used them myself. So honestly Oh, yeah.

Wes Bos

Rid. What does it have to do with probably has to do with something with data objects.

Wes Bos

So the answer here rid It says a thunk is just a function which delays the evaluation of the value. It doesn't take any arguments, but it gives rid the value whenever you invoke the thunk, I e, it is used not to execute now, but sometime in the future.

Wes Bos

Rid So to me, that's just that's just a function that is bound but not run. Meaning that, like, you the example they give is just like an arrow function. And then inside the arrow function, you run a plus b or you run yeah. To me, that's just a function that's been, Like set up ready to go it has all its arguments, but it's not yet called until you invoke it with the parameters. I've never heard that called a thunk Yeah. In the in the past. Interesting.

Wes Bos

Interesting. Interesting. Yeah. The only time I are learning thunk is when you're, like, dealing with a library, and it's Blank and blank thunk, and you're just like, okay. Sure. Whatever.

Wes Bos

Yeah.

Wes Bos

That was really popular in the Redux world when There was, like, Redux thunk. Mhmm. And then what was the other one? Duck? That everyone used? I don't know. Redux

Wes Bos

thunk verse. Oh, sagas. Sagas. Yep. See, these are all these. These these words are not in my opinion, they just kinda I know they all have meaning, and you learn the meaning and then whatever. But it it did it'd make working with Redux a little rid I'm iffy because people would be like, you need Redux thunk in Redux sagas and re like, you just apply Why do I Why do I need React? React Redux React

Wes Bos

rid Router thunk saga. Yeah. Okay. So what version do I need? And make sure you don't get React Redux React Router Thunk. Saga thunk because that's the wrong one.

Wes Bos

Very glad those and, also, what I find with a lot of these, like, funny words is that people are coming from, like rid. Like, oh, I worked on the Apollo spaceship, and we've stunk all the time. And, like, I'm gonna now put that in JavaScript. You know? Like, usually, they're coming from some rid. Other language that has the that idea, but we don't explicitly have that idea in JavaScript. But you can kinda make it work, which is the function.

Wes Bos

Kinda interesting. It is. It is kind of interesting.

Wes Bos

Okay. Next question here is 306.

Topic 25 33:47

Scott asks Wes about benefits of modules

Wes Bos

Can I declare? Can I I don't know why it says I, but can you, Wes, redeclare let and const variables?

Wes Bos

No. You cannot.

Wes Bos

You cannot redeclare a or const variable, and you also, when you're in strict mode, You also cannot even redeclarify our variable. Yeah. You shouldn't re redeclar variables, really, is what it comes to. Yeah.

Wes Bos

Yeah. Can you? Sometimes or not really. Should you? No. Ever. Next question, number 317.

Wes Bos

Oh, what are enhanced object literals? This is part of ESX, enhanced

Wes Bos

object literals.

Wes Bos

I don't know.

Wes Bos

What is an enhanced Object literal.

Wes Bos

What? The flavor enhancers for your water. Yeah.

Wes Bos

Yeah. Hydration multipliers.

Wes Bos

Rid. Yeah. I honestly have no idea what what what is what the enhanced tier is. There's there's a kind of a couple things in JavaScript is that you have the shorthand.

Wes Bos

So if you have an object called name or sorry. Let's say it again. If you have an object called person, and you have a variable called Name and you wanna set a property to name. You don't do name and call it name. You can simply just do name inside of the the object, and that will make a property rid with the value of the thing if they are the exact same things.

Wes Bos

There's also the new shorthand method syntax. So if you have a method inside of an object, instead of typing function beep, you could just say beep, open, close, rid. Parentheses.

Wes Bos

So that's the shorthand. And then there's also the, computed dynamic properties, which is the square brackets Where the property of your object can be dynamically generated based on an opt a a very

Wes Bos

Okay.

Wes Bos

Enhanced object literals. Interesting.

Wes Bos

Yeah. That's like a word that I don't think I've ever heard, enhanced object. I mean, I've heard of object literals, but yeah. Fancy syntax.

Topic 26 35:49

Wes introduces sponsor Freshbooks

Wes Bos

We'll call it fancy pants. Alright. What do you got for me? Next question here is number 3.

Wes Bos

Rid Question number 3.

Wes Bos

What is the difference between call, apply, and bind?

Topic 27 36:05

Wes asks Scott about call, apply and bind

Wes Bos

This is this is a rid Classic. Interview quiz is a classic one. Yeah. Alright. So call, apply, and bind are used to take a function rid And, either run it or prep it with certain arguments.

Wes Bos

These are not really used All that often anymore because it's often easier just to make a quick little arrow function.

Wes Bos

But call rid will run a function with the applied arguments, And you can also pass the 1st argument is the this context. Mhmm. Apply is the exact same thing but takes rid. An array of values instead of, multiple arguments.

Wes Bos

And bind rid. Is the same thing as call, but instead of running the function immediately, ready. It will return a loaded function, meaning that it's been set up with those variables, but it is is not actually run until you supposedly go and run it with parenthesis on the end.

Wes Bos

Yes. You nailed this to to to a perfect degree where I would be I'd be opening up my checkbook to give you a job from that one. I I think that was a a great answer, honestly. But, again, in 2022, What year is it? I don't even know anymore. In 2022, we do we need these? We have better control over this nowadays, but yeah. I I Yeah. I'm not use I'm not reaching for these this often. But, yeah, I I understand the practicality of doing this, but I often, You know, go through lengths to not have to deal with this anyways. Yeah. No. Honestly, it's it makes it's so much more readable

Wes Bos

Just to make an arrow function, there was something on Twitter the other day. Someone's like, when would you ever need bind? No. Yeah. No. There was. I had a situation where I had to use bind. And someone was like, why would you do that? And I had a I I had an answer, but I don't really know. It's very very Like, maybe once every 3 years, you'll run into, oh, this is where I have to use bind, you know? But in most cases,

Topic 28 38:23

Scott and Wes discuss lack of need for bind nowadays

Wes Bos

An arrow is fine. When I had to use it, it would it was because the framework or the whatever I was working on was like, oh, yeah, you need to bind this here. Okay. I'll do that. Oh, yeah. Rid. You know? Not not necessarily, like, let me let me write some stuff that I need to be able to control the context of this that much. And then again, nowadays with arrow functions, you Easier control over this. I I I don't know. If I did a search for this in my code base, I probably wouldn't even find very many instances of this at all. Alright. Let's take a quick break to talk about our last sponsor today, which is FreshBooks.

Wes Bos

Yes. FreshBooks is the cloud out accounting with the mostest.

Wes Bos

So if you are a small business, they got the mostest.

Wes Bos

Rid. If you're a small business, you're a freelancer, you're a large business, and you need to keep your books in order, FreshBooks rid is it for you. You can track all your invoices. You can create invoices on there. You can automatically send them. You can accept payments right inside of FreshBooks, rid. Whether it's they have their own payment processor. You can also hook up Stripe or PayPal.

Wes Bos

You can list all your clients. You can rid. Take an expense in and then convert that big I use that all the time.

Wes Bos

I bought a flight for a conference. Rid. I expense it and immediately turn around and turn that expense into an invoice for the client so they can pay it. Rid. It's awesome. They have time tracking projects.

Wes Bos

They also have, like you can, like, do mileage tracking if you are driving somewhere. Rid you need to be reimbursed by the mile. All kinds of stuff. Check it out. Freshbooks.comforward/ syntax. 30 day free trial. No credit card required. Thank you, FreshBooks, for sponsoring. Sick.

Wes Bos

Cool. Let me get you a question here. Let's do it. I'm like, I'm gonna try to get 1 today. That's that's the that's the, the the the goal. Yes.

Wes Bos

Rid. What are some benefits of modules, and why would you need modules?

Topic 29 40:25

Wes asks Scott to explain need for modules

Wes Bos

Yeah. Modules Allow you to encapsulate code into a file, but also reference and use that file whenever You need to utilize it so it prevents issues of variable naming scoping where things can get overwritten. Right? You have a Module. Right? Everything is kind of scoped to that module. So that was on their name spacing? Name spacing. That is the word I was looking for. Thanks, Wes.

Wes Bos

Name spacing.

Wes Bos

You can also code split via modules, so you can remove unused and unneeded code from different bundles. It's not even on there. You you need to update this one. That's great. That's a huge benefit. That's a big benefit. Yeah. Especially nowadays, JavaScript giant JavaScript apps, especially UI code, Breaking that into smaller chunks and modules.

Wes Bos

But, yeah, namespacing, performance.

Wes Bos

You also said earlier, You said reusability or you said you can easily use it wherever you need to. Reusability

Wes Bos

organization.

Wes Bos

There you go. It it it says maintainability,

Wes Bos

which I think is the same thing as as organization. Good. Nailed it. I think you you did a better answer than this this thing had. Yeah. Yes. I did. I I not only did I get one right, I I got a better answer according to Wes, than me.

Wes Bos

No. It's okay. Last question here.

Topic 30 41:46

Wes asks Scott about variable swapping with destructuring

Wes Bos

West, my random number generator just gave me the exact same number as two numbers ago. 306 was, can I redeclare let in const variables? Random number generator out of all of these, pick 2, Oh, nearly in a row. Okay. Here is a better one. How do you swap this is a good one. How do you swap variables in the structuring assignment? So, this is a a fairly new technique because destructuring is new. But, basically, you have 2 values and you would like to swap them. How can you do that using destructuring? Oh, I love this one. That's the one. Destructuring came out.

Wes Bos

This is an example I use all the time, which was, rid you have 2 people playing in some sort of sport, and 1 person's on the bench, and 1 person is doing the sport rid. As you do in sports, and you need to switch them. Yeah. So like like, active and benched. Right? So what you would do is you would rid. Take your variables. First of all, they have to be let variables because you are switching them. They can't be const.

Wes Bos

And then rid You would say square bracket, active, comma, benched is equal to square bracket, benched, rid Comma active. And what you're essentially doing there is you're creating an array of the opposite values and immediately destructuring them over top of rid The thing and and that's amazing because previously, if you wanted to switch to values, you'd have to have a third temporary value In which you put the value in just to hold it for a second.

Wes Bos

Just put the first one in and then put the second one in the holder value. Now you don't have to do any of that. Perfect. Now that now that awesome.

Wes Bos

That was really fun. Thank you everybody for listening to our huge episode of Stumped.

Topic 31 43:22

Wes wraps up stumped episode

Wes Bos

Rid Maybe next time we'll do a bunch of CSS or we we could literally do anything. It'd be fun to find some, like, server ones, you know, like, just a kind of rid Ideas and approaches. That'd be kind of cool. Yeah. If you have any of your favorite, interview questions or questions that we might use on Stomp, make sure you hit us up because rid. That'd be really fun to have. Let's move into the next section, which is sick picks. I'm going to sick pick some outdoor furniture, And this is a becoming a very popular way to buy Outdoor furniture and that it is recycled plastic outdoor furniture. Oh, cool.

Wes Bos

And so, you know, like, you can get those decks that are like tracks rid. Or, yeah, like, composite lump lumber. Those are essentially just plastic, and they are made out of apparently, out of bottle caps.

Topic 32 44:07

Wes sick picks recycled outdoor furniture

Wes Bos

Rid. So about 7 years ago, we bought and we bought this stuff. It's called CR Plastics.

Wes Bos

Rid. I believe another big one is called Pollywood, but there's all kinds of companies out there. They range in in thickness and quality, but, rid They're amazing because, like, we bought this stuff about 7, 8 years ago, and it sits outside all the time. And it sits in the snow, beating in the sun, and it looks absolutely brand new. Like, we we bring the cushions inside, but we have a a couch And 2 outdoor furniture. And then at our cottage, we have 12.

Wes Bos

We call them Muskoka chairs. I think in the states, you call them Adirondack chairs. Mhmm. Rid I've heard Adirondack before, so They're awesome. Like, when I was a kid, we would buy these, like, plastic Adirondack chairs, And then eventually, you'd be sipping a beer and the whole thing would just give out on you and it would break. Or every couple of years, you go buy new ones and you throw them by the side of the road.

Wes Bos

Rid That's annoying. And then you have to cut them to match. So my wife and I, we standardize on black, like, composite chairs Everywhere we are, and you and that's great because you can mix and match the brands, and they're all just black. And it's just super high quality. They're heavy as hell. Like, the The chairs themselves are probably a £100, so it's, they don't blow away or anything like that. And it's just just great quality.

Wes Bos

They don't rid. The sun doesn't get to them or the UV rays doesn't get to them. They don't break.

Wes Bos

It's just a I think it's just a good way. It's a good quality. They're a little bit more expensive. But rid. If you do the math of these people buying new outdoor furniture every 4 years, it kind of just pays for itself after, like, 2 times.

Wes Bos

Yeah. We have that. I mean, I I'm into the the plastic or recycled wood for for those types of things. Our our our our patio chairs Or, like, wicker and this other type of wood, and it, like, just does not hold up. No. Essentially, they're they're new ish, and we keep them covered all the time. But it they do feel fragile in a way where it's like, alright. I do need to keep these covered in all these sorts of ways, and I need to protect them at all costs.

Wes Bos

Rid. It's like it it it does seem like quite of a bit of work at this point to to keep them all looking and feeling nice. Honestly, that rid. That's where I'm where I'm heading in my old age, or I'm just like, I just wanna buy this,

Topic 33 46:29

Scott sick picks Who Arted podcast

Wes Bos

and that's it. That's it. I'm done for my life. Exactly. Yeah. I'm never gonna have rid. Think about like, the only thing you maybe have to put new cushions on it in 5 years from now. We'll have to get some new cushions sewn or or buy them from the company. But, rid. Man, it is awesome. We just bought a bunch of new, like, side tables because they have they've got these, like, tiny little, like, 1 foot by 2 foot tables. You can put them beside the chairs, which bought a bunch more of those, and they're, like, $80 a pop. It's pretty good. Yeah.

Wes Bos

Neat.

Wes Bos

Alright. My sick pick is going to be a podcast in, you know what? I was I one of my in college, I really liked art history to the point where, like, the only class that I was getting decent grades in that was, like, writing based was an art history class. So, I I've always been a big fan, and I found this podcast recently called Scott, forgive forgive the title of this podcast because it's gonna make it sound goofier than it is. It's called Who Arted, a r t e d, Who Art ed Oh my gosh. Which, you know, it's goofy name, but the podcast isn't goofy. It's art history. And you know what? I learned a lot of stuff. And I I've taken a lot of art history in my life, and I've done a lot of work there. But, yeah, I rid. I I thought this was just like a really entertaining look at the lives and histories of various, painters, Artists overall, you learn all the things about the people, you know, who who create these works. And the one of the episodes, like, made a really good case for Leonardo da Vinci having ADHD. Ready. They're like, yeah. It's very clear that this guy just had ADHD when they describe his, like, personal rid. Characteristics. Of course, like, you know, at that point in time, nobody would have ever described anybody as being different like that. But they were just rid Oh, yeah. From everything we've learned about him, this is this is all of the evidence that points to him having ADHD. But it also go deep dive into, various paintings and the history of those things in the artist and all that stuff. So I'm a big fan. If you're a fan of art or want to get into art, I think this is a good one. It's taught it's the, the podcast is hosted by a teacher, and he rid Frequently brings on other art teachers, and it's not stuffy, but also not super goofy. So, yeah, who arted? Who arted? Beautiful.

Topic 34 48:51

Wes shameless plug for his courses

Wes Bos

Rid. Shameless plugs. I'll plug all my courses. If you wanna learn a thing or two about web development, like, what's the difference between call, rid. Or, how do I build a website with React? Or I need to learn JavaScript from scratch. Check it out, westboss.com/ courses, rid. And you can see a list of all my courses, bunch of free ones, bunch of paid ones, and you can use coupon code syntax for $10 off any of the paid ones.

Wes Bos

Rid I would like to shamelessly plug level up tutorials.com.

Topic 35 49:22

Scott shameless plug for Level Up Tutorials

Wes Bos

We have a new tutorial course every single month, and the one I'm going to be releasing in just rid of days here is on JavaScript browser APIs. We work with a lot of new and a lot of Common APIs from creating elements in the JavaScript for the DOM, working with the DOM, finding DOM elements, replacing them, all that basic stuff, and then getting into some really Interesting browser APIs like the brand new file system API. Wes, one of the things that we build in this course is in browser without node at all, You can load up an SVG.

Wes Bos

You can make changes to that SVG, and then you can save to the an actual file all from the browser, man. No node code, and it's no frameworks either. Just straight up vanilla JavaScript. It's so cool. So check it out. Level up rid .com.

Wes Bos

The course is exploring browser APIs, and it will be out the last day of this month. So check it out. Rid. Awesome. Thanks everybody so much for tuning in. We will catch you on Monday.

Topic 36 50:11

Wes and Scott sign off

Wes Bos

Peace. Peace.

Wes Bos

Rid Head on over to syntax.fm for a full archive of all of our shows.

Wes Bos

And don't forget to subscribe in your podcast player or drop a review if you like this show.

Wes Bos

Rid.

Share