JavaScript × STUMP’D

syntax. 30 day free trial. No credit card required. Thank you, FreshBooks, for sponsoring. Sick.

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

Yes. FreshBooks method

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.

is the cloud out accounting with the mostest.

the the 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.

They also have, like

So if you are

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

right inside of FreshBooks, rid. Whether it's they have their own payment processor. You can also hook up Stripe or PayPal.

that's the,

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.

a small business,

of modules, and why would you need modules? 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.

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.

Yeah. Unfortunately, that is all things painting.

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.

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

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, probably has to do with something with data objects.

Oh, wow. But they they sell, like, 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.

like, $60 And bind then you could do that.

And so, like, I went I was like, okay. Like, I wanna do

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, Is number 300 and or not 300,

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,

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

Our our garage is actually,

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,

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.

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.

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 Oh, The symbol dot iterator,

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 Easier control over this. I I

garage storage systems,

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.

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

a version at Home Depot. That's, and I thought that was it was really it was really good because you have, like, No. You cannot.

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

paint it up, and then do the epoxy flooring.

So in JavaScript,

238.

in accordance of when they came in and also, 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.

Messages are sent.

queue.

rid When things happen, So if you

JavaScript event API.

The question is, what is rid. An event

238.

random events, clicks, hovers, Values, keys, rid Is it does match Boom. All right, you go first. All right.

This question

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,

They are added to the event queue for the browser to deal with them. Rid. So as they

I don't know myself, and there's no answer here in the, what? Yeah. So I'm gonna read out, an answer from

rid. PMPM said we'll get JSON five, but then, like, that doesn't work with

code in JavaScript, You also said earlier,

ever update JSON.

that tons of stuff reads your package JSON, and all those tools would need to get along and also support They don't rid. The sun doesn't get to them or the UV rays doesn't get to them. They don't break.

the only way to do that is with promise based rid. Functions. So something that temporary value In which you put the value in just to hold it for a second.

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

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?

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,

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? So if you wanted to find

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,

And a key value pair of structured data. Yeah. Yeah. So, like, performance.

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,

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

programming languages as well. Right? It's JavaScript Object Notation. That's what it's called. But literally every Rid. Question number 410, how

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

rid. Which is 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

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, 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.

compatible with JavaScript objects. So that way, you can

JSON? scissors,

5 in, Oh, here's one. Oh, great.

and then, like Yeah. Comment dangle. People in npm are are just like, no. Absolutely not. Never. Oh my

Oh, this is a good one. Why do you need of the,

Programming language out there can

a JSON 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,

Why do you need it? I don't know why it says I, but can you, Wes, 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.

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 an like a a car,

So you need to be able to either run it

Rid. What that does is it explicitly puts it at the end of the event queue so that you What do I got here for you? Number 115.

In the past is when you have to await

rid YouTube video. It's probably 10 years old, but it's it's still valid,

rid. You have the call stack, I would just take the 0th in JavaScript that you can use the .next method 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

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

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 So, yeah, looping over it, you can also really handy thing to do is to destructure the

or a pop, like, a set time out.

are not Checking for something before the render has been done so that you get into, like, weird,

rid. Event loop works,

rid. Event loop thing where you're like, no. I need this to go at the end of the event loop, not

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

being stuck in there. Yeah. Interesting. Interesting. Cool. Well, that one Obviously, stumped that there was no answer provided, so stumped them as well.

only once that thing has happened,

I think the the only, like, weird thing that I've had they got the mostest.

Yeah. That's there is a really good,

with the applied it's not from one to another. And also, like, JSON is rid. You can do across rid. Whether you're using the Promise, Chainable, then syntax, or you're using async await, 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, rid. Is the same thing as 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.

are used

the this context. Mhmm. Apply

will run a function

But and what's the usage? Yeah. I think it the use case is rid. If you're using generators Where modern digital experiences 1st and second value of that second array scissors.

running the function immediately, ready. It will return a loaded function, meaning that it's been set up with those variables, by default, the browser will rid. Throw a little UI up there to to tell you what's going on. However, you can programmatically

again,

but it is is not actually run until you supposedly go and run it with parenthesis on the end.

call

arguments, 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 cloud accounting. We'll talk about all of these awesome companies partway through the episode.

to take a function

rid. An array of values instead of,

rid

call, apply, and bind?

we do we need these? We have No. Like, what does it do? Well, it it it lets you know what the type of something is. So 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

in 2022,

Just to make an arrow function, there was something on Twitter the other day. Someone's like, when would you ever need bind? are queued up, but then What questions. This this time, we've got one called JavaScript interview questions, rid. And there are 435 Key and value pairs, and I'll I'll go further and say of an object.

What year is it? I don't even know anymore. In 2022,

multiple arguments.

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,

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 Shoot.

but instead of or prep it with certain arguments.

And you can also pass the 1st argument is that is bound but not run. Meaning that, like, you

These are not really used All that often anymore

This is this is a rid Classic. Interview quiz is a classic one. Yeah. Alright. So call, apply, and bind courses,

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

rewind.

What else do you like, Scott. Oh, actually, before before we do the transition, 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

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

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

in JavaScript.

That's what you said? you can syntax Next question here is,

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.

Thunk.

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.

Scrubbable

you know what I like, Wes? What? Today's sponsor. I like today's sponsor. It is LogRocket.

or explain what's the difference between call, Your Ajax request comes back. Your interval comes back. Then they're added to the callback queue in in in which order they,

where there is 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,

These,

limited length That's why people like it. But for the most part, it's just structured data

you might be stumped. All this is a good one. Okay. Give an example

but

So Object literal.

being added to it. I I actually have no idea. Yeah. Stubbed.

would be something with, like, a

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 And during event loop processing, the user agent will choose from which task queue it will execute the next task.

object on your element. So just select it, dot validity.

you get a Boolean that says range overflow, and that is either true or false, meaning that the value is higher or lower

the range

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, This question is, how do you return

property.

attributes And then rid You would say square bracket,

these kind of methods that exist inside of This task may fire events or invoke callbacks.

check if your inputs are valid as well 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 Okay. Yeah. But that the for in will only give you the value. How would you get the

or I guess no. Maybe it doesn't. It's just Overflow is a word that is basically

you have 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

And then inside of there, Do we usually keep score on this? No.

Range overflow Yeah. Hydration multipliers.

rid. You've got, like, a type of email, and you can have min and max on input values. And, are, function

Rid. Not with CSS because that's easy.

and then the rest of the the thing so you could slice it or or just reference it,

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

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, 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

but excellent job, Wes.

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

So

plus,

How same answer, same business,

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?

What is the difference between

question here 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 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.

Question number 3.

is

number 3.

We'll call it fancy pants. Alright. What do you got for me? Next

Rid the goal. Yes.

they don't blow away or anything like that. And it's just just great quality.

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 I you know what? I honestly have no clue. I don't work with it herbals At all, really. No. Yeah. Okay.

we bought this stuff. It's called CR Plastics.

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,

Rid That's annoying. And then you have to cut them to match. So my wife and I, we standardize on black, is is the for of loop and use object dot entries. And what that will do is it will return you an array,

Rid. So about 7 years ago, we bought and

and it sits outside Kinda interesting. It is. It is kind of interesting.

Rid. I believe another big one is called Pollywood,

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.

and they are made out of apparently, out of bottle caps.

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.

They're amazing because, like, we bought this stuff about 7, 8 years ago,

but there's all kinds of companies out there. They range in in thickness and quality, but, rid So we pick a random GitHub repo every time Rid. So this one is not like JavaScript core, but kind of an idea 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. 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,

a plus b

rid Router thunk saga. Yeah. Okay. So what version do I need? And make sure you don't get React Redux React how the JavaScript or sorry. Let's say it again. If you have an object called person, Yeah. Has?

you run

Rid So to me, that's just that's just a function

Yeah.

Very glad those and, also, what I find with a lot of these, like, funny words

Okay. Next question here is They're like the the main methods.

in Redux land. Right? But I've never used them myself. So honestly Oh, yeah.

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,

the example they give is just like an arrow function. And then inside the arrow function,

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,

I e, it is used not to execute now, but sometime in the future.

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.

208.

You you are really close, No. It's okay. Last question here.

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

Rid. Mhmm. Sets. K. So. Alright. What's the one I'm missing? Set, delete, rid. Take an expense in and then convert that big I use that all the time.

Question number 208 for Wes is

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.

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

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

down the collection

No.

has and get.

So it says here.

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

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, That was really fun. Thank you everybody for listening to our huge episode of Stumped.

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 and it has Too many things

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

not the length, but the so dot size is another one.

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.

task sources

user, also known as user initiated events. So it seems like Exactly like what you're talking about, but this does specifically Yeah. Modules

to see if if this can clear things up. Basically,

Stack Overflow

Either from IPC messages directly What is the type of op or like

These tasks are queued by various means either as part of other tasks,

generated based on 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,

Can I declare?

Yeah. Can you? Sometimes 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

306.

literals.

computed dynamic properties, which is the square brackets So what you would do is

You cannot redeclare So strings can be referenced by their index.

have an object called name they don't Keys? Set.

What? The flavor enhancers for your water. Yeah.

question, number 317.

or not really. Should you? No. Ever. Next

open, close, rid. Parentheses.

I don't know.

enhanced 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 So that's the shorthand. And then there's also the, In e s six, classes 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 Rid. What are some benefits 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.

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.

Where the property of your object can be dynamically shoot.

Enhanced object literals. Interesting.

object literals?

What is an enhanced

redeclare

Okay.

object

beep, you could just say beep,

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 you would it'd be disruptive because it would break a lot of the tooling,

let and const variables? And then

Yeah. I I have not either.

Rid. So meaning that you can you know, like, when things are iterable, Because when you want rid. To work with asynchronous

something that expects an iterator, but rid. Quite honestly.

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

Again, I've never had to do that.

Oh, quite honestly, I would just object dot

and you set 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/ Okay. Obviously, get. I know.

Rid. So inside of that, you can make a closure, which is a like a I variable to to 0, and then you return This is part of ESX, HTML has Then what was allowed because you set something in the min or max, 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 and then you can say, like, capital c car dot prototype dot beep.

or if you need to pass it to, A promise, So the answer here that it it can be encoded. But at the end of the day, it's just text. Right? Simple,

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,

and you can code the logic inside of that.

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

on it,

iterator and JavaScript teacher.

an object with a next value on it, and that will increment.

rid in a string, what method would you use? into And then

everything

For global, and that will return you all of the matches for a

that matches the regular

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

all matching strings against a regular expression? available on week map? 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,

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

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.

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 starting at the 1st position. So

use dot rid with the value of the thing if they are the exact same things.

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,

I would

yeah. Match. So you use a match method, but you pass it the g flag if it's like a web API or a is the exact same thing but takes

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

questions. We wrote a little bit of code each other random interview questions,

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

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, 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.

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

full of, rid. JavaScript and CSS and whatever, 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

Bow.

Allow you

JavaScript giant JavaScript apps, especially UI code, Breaking that into smaller chunks and modules.

to encapsulate

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.

than me.

You need to utilize it so it prevents issues of variable naming scoping using

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, Friday.

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

a file, but also reference and use that file whenever even though it's not weak, man. What's a word that you use a lot? Their example code 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.

organization.

But, yeah, namespacing,

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.

we will ask 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 an opt a a very

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 what are enhanced into key value. Yep.

JavaScript session replay. Rid. And 3rd is FreshBooks convert that is the best way Add? does not resolve right away, but it's also not blocking the rest of your code rid With you grab an input. There's a Yeah. It's a loop over. Loop over. That's a fancy word. Yeah. Yeah. So okay. So, Rid. Shameless plugs. I'll plug all my courses. If you wanna learn a thing or two about web development, 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

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

how do I build a website with React? Or I need to learn JavaScript from scratch. Check it out, westboss.com/ You can list all your clients. You can

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. Or, like, composite chairs How do you know it's that good? Well, you land on the homepage, and they have rid. Buttons

like, explicitly have that idea in JavaScript. But you can kinda make it work, which is the function.

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.

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? Both are hosted on a Fastly CDN. It's going to be fast as heck.

is equal to

This is an example I use all the time, which was,

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, Can I

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.

this is a a fairly rid. I I thought this was just like a really entertaining look at the lives and histories of various, 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.

So, in your

active, comma, benched JSON five. So, like, because it's often easier just to make a quick little arrow function.

square bracket, benched, rid Comma active. And what you're essentially doing there is you're creating an array of the opposite values

rid you have 2 people playing in some sort of sport, and 1 person's on the bench, 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.

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 that's that or at least

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 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 Rid. Let's do it.

Neat.

Scott, forgive forgive the title of this podcast because it's gonna make it sound goofier than it is. It's called Who Arted, you're often wanting to check to see to make sure the thing that

I I've always been a big fan, and I found this podcast recently called which all map to different task queues.

Artists overall, you learn all the things about the people, 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?

like, yeah. It's very clear that this guy just had ADHD

painters,

yeah, I

when they describe his, like, personal rid. Characteristics. Of course, like, you know, at that point in time, nobody would have ever thunk in Redux sagas and re like, you just apply Why do I Why do I need React? React Redux React

rid Frequently brings on other art teachers, and it's not stuffy, but also not super goofy. So, yeah, who arted? Who arted? Beautiful.

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 validity overflow

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

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,

and you wanted to check if not necessarily a race condition, but you get into a weird I don't think I would have been able to get this one either. But basically, you have an object, 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.

You wanted to let you you intentionally type something that is higher than allowed,

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

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

Alright. Next question is 347.

check if your This is not something I've, rid Again, used before, and this is very interesting to me. So,

inputs are valid. Yeah. Totally. You might not necessarily need to

Pretty cool. Yeah. Learn something new every day.

rid. Good time to ask me that question. Bad time for me to give you an answer, apparently.

rid. And then in each item of that array is another array, 1st item being the key, 2nd item being the value.

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

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.

This this comes back from the first one. How do you enumerate There's also the new shorthand method syntax. So if you have a method inside of an object, instead of typing rid Keep that in a format where it holds all the data about it. Right? But, for sponsoring. Oh, this is interesting one.

You could do object dot keys

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

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

loop over it. So that's how I would do it.

If you're if you're wanting both of these, both the, the object object it may be object dot entries.

the key? How would you get the key? 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 You can make changes to that SVG,

Enumerate just means to iterate over.

How do you enumerate?

content by Kinetico?

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

properties and methods? but we don't

the ability to create an object and extend its Prototype browser events, rid And, 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, There you go. It it it says maintainability, 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, in JavaScript?

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

with custom

functions in the past. Yeah. Rid. So before it was just like you have an object I don't know. Bam. There you go. There you go. You got it. Yeah. So you use the For

And then the beep would be a method that would And then, like, and then, I think Yarn or is a thunk Function.

Rid.

Peace. Peace.

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

or drop a review if you like this show.

for a full archive of all of our shows.

And don't forget to subscribe in your podcast player if the container is too small for the the stuff that you're putting into it.

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

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.

you have in your code is what it should be. Type of String is equal to string of string. So,

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, I know this is something that you see on week map.

like is this, like, a existential question? Easily convert

types. JavaScript things have types, but they can transform themselves into anything easily. Right? So we have types in JavaScript,

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 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

But they're loose types. And because of that, Rid. What does it have to do with

yeah, that's what a

Ready.

Outdoor furniture and that it is recycled plastic outdoor furniture. Oh, cool.

becoming a very popular do you make an object iterable and, like because we we bought a new house that has an rid. Awesome new garage. And,

is sick picks. I'm going to sick pick some outdoor furniture,

way to buy To work with a new synchronous code in JavaScript are the only way, I guess. Yeah. Well, callbacks, I guess, but it's not call, Router Thunk. Saga thunk because that's the wrong one.

And this is a

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.

Rid it's going 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 0 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, a package JSON

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.

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, 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.

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.

are made.

Cool. Alright. Next question here is for Wes.

We have a new tutorial course every single month, and the one I'm going to be releasing in just rid of days object to a JavaScript object.

and it's no frameworks either. Just straight up vanilla JavaScript. It's so cool. So check it out. Level up rid .com.

here is on JavaScript 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.

and then you can save to the an actual file all from the browser, man. No node code,

Okay. Next question is from 129.

about interview questions, they'd be hard. That is just how it is.

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.