JavaScript × STUMP’D

Ready.

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.

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.

Do we usually keep score on this? No.

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

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

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.

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,

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.

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

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

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

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

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.

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.

Yeah. Unfortunately, that is all things painting.

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

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

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.

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.

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

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.

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

scissors.

Shoot.

Bow.

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

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

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

So it says here.

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.

Yeah. Has?

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

Add?

No.

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.

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

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,

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

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

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

Keys? Set.

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.

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

has and get.

Okay. Obviously, get. I know.

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

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.

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.

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

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.

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.

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

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

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.

Again, I've never had to do that.

Yeah. I I have not either.

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.

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.

Okay. Next question is from 129.

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.

So strings can be referenced by their index.

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,

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

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.

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.

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

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.

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,

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.

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

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

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

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.

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

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.

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.

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

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

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.

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

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.

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.

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.

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

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.

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.

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?

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.

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.

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.

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

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.

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.

Cool. Alright. Next question here is for Wes.

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

238.

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

So in JavaScript,

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

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.

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.

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

This task may fire events or invoke callbacks.

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.

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,

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.

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.

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

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

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.

What do I got here for you? Number 115.

Rid. Let's do it.

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

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.

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,

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

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

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.

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

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

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?

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.

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.

Oh, here's one. Oh, great.

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

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.

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.

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.

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

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,

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

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

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.

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

Pretty cool. Yeah. Learn something new every day.

Alright. Next question is 347.

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?

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

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

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.

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

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

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.

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

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.

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.

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

for sponsoring. Oh, this is interesting one.

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

What is a thunk Function.

Thunk.

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.

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

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

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.

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.

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.

Yeah.

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

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

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.

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.

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

Okay. Next question here is 306.

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

No. You cannot.

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.

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

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

object literals.

I don't know.

What is an enhanced Object literal.

What? The flavor enhancers for your water. Yeah.

Yeah. Hydration multipliers.

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.

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.

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.

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

Okay.

Enhanced object literals. Interesting.

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.

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

Rid Question number 3.

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

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.

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

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.

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.

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

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,

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.

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

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

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.

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

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.

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.

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.

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

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.

Name spacing.

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.

But, yeah, namespacing, performance.

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

organization.

There you go. It it it says maintainability,

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.

No. It's okay. Last question here.

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.

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.

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.

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.

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

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.

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.

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

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.

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.

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.

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

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.

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.

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,

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.

Neat.

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.

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.

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

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.

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.

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.

Peace. Peace.

Rid Head on over to syntax.fm 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.

Rid.