STUMP'D - Coding Interview Questions

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Bos. Welcome to Syntax. This is the podcast with the tastiest web development treats out there. Today, we've got something we haven't done for you in a while, and that is a stumped episode. This is where Scott and I will try to stump each other with read. JavaScript coding interview questions.

Today, we are sponsored by 3 awesome companies, FreshBooks, Cloud Accounting, LogRocket, JavaScript Session replay and Auth0.

Easy way to add authentication to your app. We'll talk about all of them partway through the episode. With me, as Always is mister Scott Talinski. How are you doing today, Scott? Hey. I'm doing good. And,

if you may may have noticed, my audio is not as Chris Bora is clear. You may be hearing some dogs barking here or there or some noises. I am without my normal microphone, my normal setup. In general, we are just T minus a couple days here till the move, so all my stuff is in boxes. It's all over the place. So this will be officially the last episode ever recorded in The current level up studios before we move into the new level up studios of which, the name I think is probably gonna be the level up lodge courtesy of Wes Nice little name exploration for me. But, yeah, I'm doing good. Yeah. You know, I I spent all weekend working on a, this is actually, like, Kind of related to coding stuff, I spent all weekend working on a, GraphQL code generator plug in for myself. Oh. And let me tell you, dude, It's easy. I mean, it's surprisingly easy. I I wanted to we can talk more about this in another episode, but I wanted to rid sort of remove the dependency that is Apollo because we weren't using most of Apollo. Right? Just like, you know, in the past with Meteor, we weren't using most of it, so might as well not use it. So with Apollo, we weren't even using Apollo's cache. We were just using it as a fetch for Svelte and then using Svelte's own cache Yeah. For their their subscriptions, not their cache. So I wrote my own GraphQL plug in. Just do a quick fetcher, and then I was like, oh, I bet I could integrate this with Codegen so we will hardly have to touch a thing. And sure enough, it it works super well. And my new GraphQL fetcher is a 100 lines of code versus an entire library, And, it's gonna be a huge, huge, huge dependency removal from our project. So I'm pretty psyched about that. That's wicked. Yeah. And since it's all cogent And I'll type and everything. We're not gonna have to, like, even think about it. It's gonna be fantastic.

Sick. Yeah. That's my kind of refactor.

Every time we do one of these stumped episodes, we go and We go to these, like, interview question GitHub repos. There's there's a bunch of them out there. Today, we are grabbing them from Sudhir, Jay, which is a huge, huge repo of 425 questions.

We're going to start off with randomly pulling them and trying to trying to get each other with them. And then if we are doing too well, we'll we'll try to, handpick rid to try to stump each other. For 1st time listeners, do you wanna give an overview, like a a very brief overview? Yeah.

So these are just, like, questions like, what is a constructor or, what Are what does immutability mean? Or just the general rules to we're doing the new JavaScript today, but we've done CSS and HTML and, rid Node. Js in the past as well. And then we try to stumble through them, and it's often hilarious because

We either drop the ball huge or absolutely nail it. Usually, nowhere in between. Yeah. And it should be noted that this is without any preparation here or anything like that. It's It's meant to illustrate really just how how you can get tossed curve balls all the time in interview questions. I remember being asked some very, like, Things that I would have thought were easy outside of an interview and then put on the spot, I'll get flustered and, you know, miss the question in the interview and then kick yourself about it later. So Definitely meant to to replicate that sort of off the wall experience of an interview question, stuff you can't necessarily prepare for. Hopefully, it gives you guys some, some predictability and maybe potentially seeing some off the wall questions come in your own situations.

Alright. So we have written a little code, math dot seal rid Brackets math dot random times 425 and output that give me 11, which means I'm gonna ask you the first question, which is the 11th question rid in this repo, Scott, what is a first class function?

A first class function.

I read the the the question, and I was like, I don't think I know this. And then I read the answer because, oh, I remember that. So

I remember talking about 1st class functions. I remember sort of what they are.

This might be fun for me to get wrong. Let's see. A 1st class function is I'm wondering if it's you know, I'm going in a couple directions if it's the it's like a functional programming thing or if it's a it's defined sort of thing. I think a 1st class function is is it something that only returns one thing?

No. K. I didn't think so. That was a Shot in the dark. Do you want you want me to give you the answer? You were you were pretty close there with the functional programming.

Yeah.

Rid Is it I mean, this is to have to do with, like, the same inputs give the same outputs. Is that a first class function, or am I, like I I I'm, like, conflating it with something else. That's a pure function. Pure function. That's what Yeah. Yeah.

Now first class function, give it to me. Alright. So a first class rid

function means that in languages that have first class functions are mean that functions are treated like any other variable or any other value. So a function can be stored in a variable. A function can be passed into another function, like a callback. A function can be returned from another function. That's the kinda, that's the functional programming aspect of it. So just rid Being able to move around, pass in, and capture functions as a value like you would a string, a number, or a Boolean.

Yeah. That makes perfect sense. I don't know that I would've would've got that once. That would that's a pretty tricky one, I think. Yeah. What it it's a it's an explanation of something that, like, JavaScript

is not necessarily like a Yeah. A technique or something, so to say. I for some reason, I was thinking it was like a technique, and I don't know why it was there. But, yeah, in this context, makes a lot more sense ready. Alright. Next question. I have one for you, and this is question number 191.

What is the purpose of using rid Object is method.

Let me read the answer here. Okay. The object dot is? Yes. The object's is method. What is the purpose of using the object's is method? There are 4 answers here.

Object dot is.

So it's like the there's an object there's a dot is rid method static method that lives on capital o object.

I'm gonna say you can use that rid to check the status of an object, meaning that you can Check if it is maybe if it's frozen or if it is equivalent to another rid No. I don't think that. I'm gonna say you you can use it to check if it is frozen.

Okay. So you were closer with the thing that you said wasn't true. It's actually really interesting because it's it's funny because I would have probably gone the same way you would have with the thinking if it was frozen or something like that. To be honest, there's actually a method called is Frozen Oh. Which is what you would use for that. So object dot is, as you might know, Wes, I know you know, everything in JavaScript is an object. Right? Oh. Object. Is is used a little bit a little bit more interestingly than I think you might expect.

So it is used for the following 4 things. It is used for comparison of 2 strings.

It is used for the comparison of two numbers.

Is used for the comparing the polarity of two numbers, and it is used for the comparison of 2 objects Is the last one. So Really? The 2 objects comparison. Yeah. It's really weird. So if you do object dot is and then pass in 25 comma 25, it's The equivalent of using the triple equals.

MDN says, this is not the same as the double equals. This is also not the same as the triple equals. Rid The difference is that object is in triple equals in their treatment of signed zeros and not in numbers. For example, the triple equals operator and the double equal operator treat the number negative zero and positive zero as equal.

Triple equals operator treats number dot nan as man as not equal. So interesting. I don't know when you would use this, but this seems like a rid Crazy little edge case here for maybe something in in in the instance in which positive 0 and negative 0 need to be false, would be 1 or Man. Or not a number and number dot not a number

equals true. It's obviously in there. So it's not If you have 2 objects that have the same properties, it will just be false because they are not the same objects. Correct. But if you have 2 of the same objects Or if 2 of the same numbers or 2 of the same strings,

it will return true. Interesting. Never have run across that before. Good. You stumped me. Rid Yeah. I stumped you. You stumped me. It's all it's all in the name of the game.

Alright. Here we go. Next question is, what is the purpose of the error object? So I'll give you a little bit more insight into this. Like, what is the purpose of saying new error? Like, why would you create an error object?

We need to keep track of a specific error. Right? Because if you're anytime you throw, you can throw an existing error to track its own thing. This is error happened once. Right? Yeah. So, like, you could pass an error around without creating a new one. You can throw an error without rid creating a new one. So that's my guess. Only the only the way I've used in practice new error is always to indicate that this is in fact you are creating a new error. Rid Exactly. Nailed it. Yeah. You could you could create your own error. You do not have access to that. You do not have enough balance is in the example here. So nailed it. I'm gonna say 10 out of 10 on that one. Nice. Nice. Nice. Yeah. I always think about that because it's like, you can always just throw new error anytime rid You anytime you throw, but, like, if it's if you're not throwing a new error, you should just be throwing the current error that you're you're catching. You know what I mean? Yeah. Read. I use it in my in my advanced React course a lot because we catch those errors and display them to the actual user. Yep. Because there's a whole bunch of possible things that could happen. You don't have access to that. You're not allowed to you're allowed to read it, but not write it, things like that. Yep. Yep. Yep. Yep. Alright. This one is going to be one that you will get. I'm gonna tell you that right now. So this is a little bit of a softball here, I think this one's good for our audience, especially the people who are newer to JavaScript. So this question is, number 268, what rid Is oh, I'm sorry. I'm sorry. This is the question number 269.

So it's funny because the questions are very similar.

268, 269. 269, what? How about this, Wes? Sorry. Just triple preface here. You're gonna answer 268 and 269 because I think they're gonna be good for the audience and you'll get them both. Rid Number 268 is, what is minification? And number 269 is, what are the benefits rid of minification.

Alright. So minification is when you take your JavaScript that you have written And you run it through a minifier, and the minifier will, it'll try and make it as small as possible. So it will take out unused rid bases from your JavaScript. It will rename variables like Scott to s, and everywhere Scott was, referenced. It will it will reference that. It will remove duplicates.

Some minifiers will find unused code, which can be stripped away. And the benefits of that is that you will ship a smaller

bundle of code at the end of the day. Yeah. That's, I mean and what's the benefit of shipping a smaller bundle of code at the end of the day? It will load faster

when the person visits your app or website. That's correct.

That is correct, Wes. You did it.

Alright. Next question we have here.

Oh, you're not gonna like this one. Oh, yeah.

Man. Yeah. Yeah.

Number 291, how do you declare a namespace?

Rid there is a namespace keyword. How do you declare a namespace? Because we've used namespaces before in our code base. Rid I should say Not TypeScript. JavaScript does not have,

like, first class namespaces.

So if you wanna create a namespace, There's a couple different ways that you could make them in JavaScript, and I'm willing to bet you don't like this one because rid of just using like, modules have their own scope, and you don't necessarily have to worry too much about this. And it's also much more of

a class based approach. But Sorry. I've said too much. I know. That's one way that you would do it if you wanted to create a name space. You would create a class. Yeah. And that's probably how I would do it because it's funny. I was talking about this GraphQL thing I created. I created, basically, you know, a name space for that, and it was just by using a A class extends object.

So I would say, you know, you'd create a class in in my experience or you would create an rid. An object that would encapsulate all of that stuff. You nailed it. Well, I mean, you did basically tell me the answer, but, yes, that Sorry. I would have gotten it, I think, because rid. I I literally just did that yesterday when I was, like, thinking about this GraphQL codegen thing. So I'm so used to working on code for my own things. And I was like, well, what if, like, What if other people wanted to use this thing and create a new client like you do with Apollo client? How do you do that? Oh, oh, you just create a class, And then you have the path and the constructor. You construct the whole thing, and then each time you want to use the methods, you say, you know, g dot fetch instead of defetch as a function. Right? So yeah. Yeah. Definitely just did this one. And, yeah, namespacing. It's funny. We we don't think about it. You're right. Have our our modules. We have our our our files that are all encapsulated and nicely nicely neat encapsulation there or candy.

But, yeah, definitely useful. How I used to do it is, yeah, you'd create an object. I would always call it app. And then on that app, you would have your rid. Your data, that would look like app dot people, and then you would have your methods, app dot add person. Other ways you can do it is you can create re Iffy, which is an immediately invoked function expression.

And what that will do is it will create a scope, and you can just put all your functions inside of that. That's kinda similar to how we do modules These modules are scoped to that file.

And then also it says you can use

if you use let and const, you can just use curly brackets because They're scoped to a block, so that's another way. I've never seen anybody do that, but that's kinda interesting. Yeah. Just I've actually seen that that block scoping technique, but I've never used it I never really found the meat, but No. Have seen it in the wild before, and it been a little bit like, oh, interesting. I wonder why they chose to do it this way.

Something that is going to be very interesting for you, Wes. I don't know if you'll get this or not. Alright. This okay. Number 144, What are labels in JavaScript?

This is one that it's funny. Svelte uses labels in some kind of interesting way. So rid What are labels? Are they like like, is this just a part of JavaScript? It's just a part of JavaScript. Like, this is just something that is in JavaScript that's called labels? It's called a label. Or it's a technique.

It's a label statement.

Oh, man. I don't know. I never heard of that. Yeah. I hadn't heard of it until somewhat recently.

Do you wanna do you wanna get have the answer to your Yeah. Let me let me let me guess. Let me guess. Hold on.

A label in JavaScript is a way to describe It's a property on a function.

No. Not a property.

It's a a keyword to describe what a function does. That's not Right. But I'm that's what I'm throwing out there. It's not far off. A label statement allows us to name loops and blocks in JavaScript.

We can then use these labels to refer back to code later.

For example, the code below with labels avoids printing the numbers when they are the same. So Sorry. I just read the the example code part, but basically, it the syntax is the way they have it is they have a, like, a a for loop. And so they would say loop 1, colon, and then the for loop, and then loop 2, colon, and then another for loop. Oh. And then they use this syntax It says continue loop 1. This might not be something you've ever heard. I I will are we posting these in the the show notes? Maybe we should be doing that as we go. I say because I have, I have some the MDN links for this. If not, you could just look up label on MDN. That actually has a much more concise way of looking at this. Re But label statement can be used with break or continue statements. So it's a way to, like, name your loops,

And then you can call those Or any blocks. Yeah. Loops. It's similar to, like, you know, like, a set interval and a clear interval. You they return you an actual value, and you can use that to clear it. This is a way to name your loops, and then you can then break or continue them When you are nested. Oh, man. That's cool. That that's this is a good good repo. I've literally never seen that before.

Rid I have only seen it not in real practice before. I've only seen it as like, hey, this thing exists. So I've I've not actually used this before. I've never seen it in real code, definitely a good one to at least have on your your mind as it's a thing.

Wow. That's that's like another one for, like, syntax highlighters. That's a syntax I've never seen either. That's cool. Yeah. That's super interesting.

Before we get into this next one, that was a a fresh new part of JavaScript that neither of us I've never seen that some fresh pow pow for us to to shred up. And so, we also have one of our sponsors today is pretty fresh. I'm talking about FreshBooks. Wes, do you wanna talk about them FreshBooks?

I do. FreshBooks is cloud accounting, meaning that you run a small business. You're a freelancer. You're just throwing out a couple invoices, or you are running a massive re company. You need to send out invoices. You need to collect the money. You need to track your time. You need to track all of your expenses. You need to turn those expenses into Invoices for your clients. That's exactly what FreshBooks is for. Makes everything so simple, and you can get back to actually doing, rid. Like, working on your business then versus working in your business mean that you go back to coding and and building stuff rather than fussing with rid Invoices. So check it out. Freshbooks.comforward/syntax.

Use syntax in the how did you hear about us. That's gonna get you a 30 day unrestricted free trial With no credit card required. Thank you, FreshBooks, for sponsoring.

Alright. I've got another question for you here.

This is a, pretty modern API.

List the methods that are available on a weak set. Oh, gosh.

On a weak set.

We have set, and then we have weak set. Yeah. That's the part. Yeah.

Oh, god.

On a week set, gosh. Is there something to get the properties? Honestly, I have no idea. How many methods are we talking about here? Well, how many are they looking

4.

4? There's only 4 on a week set that are unique to a week set? Yeah. Oh, god. I have no clue. I have no clue. You know when the last time I used a week set was? When?

Never?

Yeah.

Oh, never.

Read. Alright. I am going to give them to you.

So a week set has add, delete, rid has and length. Length is interestingly a method, not a property on a a set versus like a versus like we would do on in array. Now that's a tricky question. Can I give you a follow-up? That might be a bit trickier. I mean, considering I didn't get the easier one.

Let's go for it.

What is the difference between a set and a weak set? You know, it's funny. Rid I I shouldn't have done this, Wes, but I I started googling after you'd already started reading the answer. Oh, okay. So I don't know the answer to that question specifically, But I'm going to guess that the answer to that is that it actually it'll lead us into a follow-up question that I have that we can talk about, but What's the difference between a weak ref and a ref? So that's the difference, I think, is that a weak set sets a weak reference, and a set is a non weak reference, a a normal reference.

I know that's probably the answer, but it's, like, such a non answer. Yeah. You just use the name to describe what it does. But that is the literal answer is that one deals with weak refs And one deals with normal graphs. So I guess the answer is, like, what is the difference there?

The importance is that a weak Version, a weak set, and a weak map, they can hold only objects, so you can't put numbers and stuff in them rid or strings, and those objects must exist outside of your set. And when those objects rid are cleaned up or no longer referenced in your JavaScript. They are what is called garbage collected, and then they are automatically removed from that weak set. So if you've got an object and then because you're using it nowhere else in your application except it's part of the set, Then the set will automatically clean itself up and remove it from there. So, garbage collection is the difference there and only being able to hold objects.

Interesting. So I do see some notes on MDN here, which does kind of give me some support here in terms of my ability to answer this question. It says here on MDN, please avoid where possible.

Correct usage of weak ref takes careful thought. It's best to be avoided. So those of you out here all of a sudden, like, oh, let me use weak set and weak ref for stuff. Well, maybe just make sure you know what you're doing first, because it does say to avoid weak graphs where possible. So but it is interesting that that does exist. For those of you who are working with higher level out there might be a bit more fascinating than those of you who are just getting started. Yeah. But it's always good to know that these things exist.

I really like that the fact that We've had, like, 3 things already that we're like, oh, wow. I've never had to use that before because that's sometimes the problem with these interview questions is that, like, would you need to know that?

Like Yeah. It's kinda silly. It's kind of silly. But maybe if you're interviewing at a, you know, a hotshot Company, they might expect you to know that because maybe their code uses that. And maybe that's one of those things that you've you heard it on an episode of syntax, and the next time you're in a job interview, you can say, oh, you know what? Week graph, I know what that is. I've never used it, but I did hear those, those guys talking about it on on the, on my headphones. They're coming in on the AMs AM radio. Let's go ahead and do this next one here, Wes. I'm I'm very confident you'll probably get this one, but I think it's also a good one for the audience. What is the use rid of prevent default.

Oh, I like this one.

It will prevent the default action. So when an event fires, Like, let's say, a form submit or a button click or a mouse drag, those are all events in JavaScript, rid. And those all have some default, functionality that is assumed with them. A form will automatically send the data to wherever the action is pointing to. Read. A button click will either submit the form or or clear a form or do something like that. A mouse drag will attempt to Drag whatever is under your cursor at the time. So those are all the default. Those things are built into the browser, some base level functionality. And rid. Sometimes you want don't want that to happen because you are going to be providing the functionality, and prevent default will allow you to Stop the default functionality for happening. Generally, that's it's a method that lives on the event. So you say, add event listener, submit, re e dot prevent default, that stops it, and then you can go ahead and do the rest of your stuff, make a fetch request or or just put a loader on the screen, something like that. Yeah. And the event dot prevent default is one of those ones that we're using way more today in the JavaScript forward,

interactivity world than we did perhaps when you were writing we wait for things. We fire off events in JavaScript, and we take the action accordingly.

Prevent default has been one of those things that you just use all the time now.

Alright.

What is a spread operator?

A spread operator spreads rid out the contents of something.

It's indicated by 3 dots. So if you ever see this in the code with 3 dots, A spread operator can take the contents of something and spread it into whatever you are attempting ready. So let's give an let's give an example here, a couple of them. So first one might be, you want to create a new object.

So if you wanted to create a new object with the contents of the old object plus some other stuff, you'd say const, the object name is equal to the 2 brackets, And then you can spread out the contents of the previous one with previous object, comma, and then you can just define the rest of your things in your object as normal, And it will create a new object with the contents of the old one plus anything else. Now you can do the same thing with arrays where you do array value array value, and it's going to Slam dunk, Scott. You nailed it. Oh, yeah. Me and, me and Spread are good friends.

Good friends.

Good friends with Spread. Yep. Also good friends with one of our sponsors today, and that's Bloggeragit.

It's the perfect place to see all of your errors and exceptions happen. Rid Let's say you tried to spread something you couldn't spread. Well, that might give you an error. Maybe you're spreading something in a old version of JavaScript that's not being re formed or an old browser or something. Maybe that's gonna give you an error too. And it might be nice to see that with your error logs. And maybe even the browser one is a good one. Right? You're trying to use some read bread syntax without compiling it. You have a user firing this thing up on IE 11. Well, this is going to pop up and and say you have an error, and it's going to show you The browser is gonna tell you, the console log, and you can see exactly what happened and why your code didn't work. It's really unbelievable Because so often, we're we're just kind of left in the dark here. So LogRocket really gives you a scrubbable video replay. That's right. Scrubbable video replay to see your errors and exceptions happen.

If you want that all that and more, check out log rocket.comforward/syntax where you'll get 14 days for free. Give it a test. It's Something that you'll really, really love. You have to see it to believe it. Very cool stuff.

Okay. So next question here. Rid Again, I apologize for my audio. I I'm feeling very self conscious about my audio. Let's go ahead and get this. Next question is number 324.

Fine. Fine. Fine. 324.

Oh, this is actually a good related question.

What is the output of the below spread operator? So this is relating to spread and the code looks like something like this. We have array brackets, a dot dot dot spread

and then a string that says West Boss. Okay. So you have an array, rid And you're spreading a string of West Boss into it. What is the output of that? The output of that is every single letter In that string, including spaces, will be an item in the array. So in the case of west space boss, you get 7 items in the array.

I like how you included the spaces in there too. I have very nice attention to detail there. Yeah. Even further, if you're talking about you have to be with those because there are some characters, specifically a lot of the emojis.

Many emojis are made up of more than 1 characters, and they're they're stuck together with rid. These things called ZedWJ, 0 width joiner, and if you try to spread an emoji, it will spread each of the emoji and not the actual emoji itself, which sometimes like, try spread the the 2 moms and 2 kids, And you you'll get the all of the pieces or try spread, like, the black Santa. You'll see, like, the orange Santa and then the black Skin tone. And then in some cases, it just garbles up because it's it's not as as clean as that. I know. You you're one you're one to find all the emoji caveats. I think that's one of your specialties.

There's a whole Twitter account called bad Unicode or something like that. This this guy just documents rid all of the weird edge cases of of the Unicode spec.

And I've dove into rid Trying to figure out if something is an emoji or not, and it is very complicated because it's a constantly evolving spec. And the the character ranges where the emojis are are not it's not a clean range. Some of them are very early on, and some of them come later. So it's We should have maybe an entire episode on, with the weirdness, of Unicode.

Yeah. You know what? One of my favorite things, I there's also another Twitter account that, like, rid. Combines emoji properties into each other that, like, don't actually exist. Like, they're, like, fictionalizing emojis. I see that. Yeah. It's like, what if you had, You know, the squiggly eye guy with the also sweat on the brow guy or something, and it's very funny. I'm, like, always cracking up with those. Alright. Next Question,

294.

Oh, I like this one.

How do you load CSS and JavaScript files dynamically.

I mean, you would just for a CSS, wouldn't you just insert into the DOM a A link tag.

All right.

Yeah, it's a link tag right out there after Yeah. I was like, so tripping on that. I was like, Wait, is there another one? I don't know why I was thinking there was like another one. Rid And with JavaScript, it's a little bit different because you do kind of the same thing. But JavaScript, nowadays, you now with ESM, you could do a dynamic import of that JavaScript as well.

Dynamic import syntax is just an import function that returns a promise after you give it a path.

So I'm not sure what it's looking for here. I think you did a better job than the answer says. So, yes, for CSS, you just make a link tag. You make the DOM element, and then you'd you dump that into the head or something like that With append child.

And it's also for JavaScript, it's saying do the same thing, but with a script tag. But I think your answer is even better is

Use e s m dynamic import. Yeah. I think you could use either of those, like, depending on what you need to do. Right? Like Yeah. Here's an event that happens or maybe you're visiting a page. Maybe you want this now, this JavaScript to to show up or but, yeah, I personally have been leaning way towards more doing the dynamic importing. Just because you do, you get that promise. It feels like you have a little bit more control than, oh, I just threw this thing on the body, and now I gotta make sure it loads or whatever. So Next question here is run let's see.

387.

Oh, this one will be fun.

What are tasks in the event loop? In an event loop, I was too this is asking, what are tasks an event loop. Oh. What is the word task?

So I know that I think we even had a show on this. With the event loop, you've got re Events that happen, and then you have tasks that are queued up.

I think tasks are things that are in the web API.

So something like a set time out or a query selector, something like that. Is that right? Yeah. I think you're you're

dancing basically on it here. I think you have it, which is just that a task is any JavaScript code which is rid to the task queue. So a task is added to a task queue when a new JavaScript program is executed directly from the console by running in a script element. It's added to the task queue. Also added when an event fires. An event callback is added to the task queue.

When a set time out or set interval is reached, the corresponding callback is

queue right now. Yep. That's interesting that understanding the event loop is a very good interview question because it shows a person Has gone past just being able to write JavaScript, and they've gone into understanding

how it works under the hood. I think that's the type of interview question you'll really, really want to to spend time on because it's a type of thing that you probably know the answer of if you're writing JavaScript in some sort of way, but you might not know the language.

The language sometimes, for me personally, is somebody who has trouble with language. It can trip you up. And and that's the type of thing where if they ask you a question, you very well may know the answer, the difference between you giving them a right answer and a wrong answer is just whether or not you can articulate it, which is, I think, always interesting.

Alright. My next question here is this is funny. What is a weak map? Question 206.

Is a weak map Wait.

So it's it's just like a set, but with a map.

And the map is an array has to an object.

So it's a weak it's an array of weak references?

Yes. That's pretty close. A weak map is a collection of key value pairs in which the keys I think you got it mixed up.

A map is not an array, and a map is an object. Yeah. You're right. Yeah. But You I think you got it there. The weak map is a collection of key value pairs in which the keys are weakly referenced.

In this case, the keys must be objects, And the values can be anything.

So that is important because just like the weak set, if the object goes away, the key of the map will It will know that the object is no longer referenced in JavaScript and will be garbage collected or cleaned up from that map. Dang. Man, read. Weak. Weak. Weak. Where's that where's the soundboard? Yeah. That's just me Yeah. Me emulating the soundboard. Weak.

Weak.

The next question is, what are the differences between a weak map and a map? Oh god. A map can have anything as keys. Rid Yeah. Yeah. That's actually one one benefit of of using a map over an object is that you can use objects as keys in your map.

So if you wanna store metadata about an object, you could. If you're out there and you're using

week map rid. In weeks set on the regular or you're using them in any sort of, like, interesting way, please let us know because it seems to be a theme for this show. And I honestly like I said, I don't really come across that much code that uses this. So if you're using it in your day to day and you have some interesting use cases for it, I think that would be something that, some of our audience would really enjoy, and we can give you a retweet there. Just thinking back to my e s six course, e s six dot I o, use coupon code syntax for 10 plus tops, And that's where I taught

week maps and week sets. And what we did, as an example, is that We were tracking the number of times that a DOM element was clicked. So if you have a DOM element, that's an object. And if you wanna track how many times that element has been clicked, you have a couple options. You could just put a property on the DOM element rid And increment it every single time. But you could also create, like, a totally separate dictionary that is a map or a weak map, And you could use that as sort of a separate metadata collection, and that's really handy because all of the metadata about all the elements that have been clicked is stored rid in an in a single area. And the thing about that is that if the DOM element is deleted from the page, you don't also have to go to the weak map and remove it from the weak map. Because the DOM element is no longer referenced, it is garbage collected, and then it is then taken out of the weak map. You don't have to worry about Taking it out. Yeah. Interesting.

But, again, that's another one of those things that I've only ever done in Teaching or explaining, and I've not had to run into that in actual,

building apps. It's a whole another world, right, because you do get into your flow of doing rid Same stuff over and over again, and then you get exposed to this different world or these different ideas at various points.

I have a a next question for you if you are ready here. I'm ready. Believe it or not, this is one that I actually know the answer to, but I'm not sure you will because it is very kinda specific if you've had to do this or not. Yeah. But I also think this will be a good one for the rid Users. So this is a a a newish API, not brand spanking new, but newish where you would probably need to polyfill in in some older ones. How do you get the query string values in JavaScript?

Oh, you do a new URL, And you pass it the you can pass it either window dot location or a string.

And then From that, you can no.

No. No. No. No. It's not new URL. It's URL search params.

Yeah.

Rid. Yeah. And then that will then parse it out.

Yeah. Is that right? Yes. It is. It's great because, for For a long time, that was, like, something people were wondering about in React Router. Why doesn't React Router have this? Why, like, why can't I get the search params Yeah. The query string values from React Router? And their answer is always, it's in the browser. It's use use it's in the browser. Just use the browser's thing and just pass it in. And, you know, it would be nice To have that in the router sometimes, but, personally, I never had it too much of a problem using your new URL search brands. But that's definitely one that you would have encountered If you would have Googled that error at some point, why can't I get search params in React Router? I'll use this. Yeah. URLs are trends. Assign it seems so easy. Just rid Split it on ampersand

and then split it on equals, and then it's just a rabbit hole of edge cases rid all the way down because sometimes there's multiple of the same ones, and that's an array of values. And sometimes there's encoded values in there that need to be decoded, and So glad it's in the browser.

Alright. Let's,

what do we have right now? 48. Man, I'm I'm having a blast here.

We do the last sponsor and then a couple more? Yeah. This is a perfect way to,

leave my my current office even though I don't have a good mic. But, in my new office, Wes, I'm gonna be getting a whole new set of keys, and I'm gonna authenticate myself in to that new office and and to install myself. Yeah. Do you wanna, talk about our next sponsor, which is Auth0, also a excellent solution for authentication keys?

Yes. Auth 0, handles all the authentication, authorization, roles, and permissions for your application. That's always a very hard part of building an application in Auth0 is something you can add into your application. It's a service, and it will make things like logging in with Twitter, Google, Discord ready. Super easy. You can make a customizable login page. You can integrate it with your Node, Express, React, Next. You name it. They have a SDK for your language And for your JavaScript, they've got all kinds of features. They have biometrics. You wanna put touch ID into your app? You got it. No problem. So rid Check it out. Your next application, try throw Auth0 into that app and have them do all the authentication. Check it out at a zero dot t o. So rid. Authzeroa0.t0forward/ syntax.

Thank you, auththezero, for sponsoring.

Sick.

Alright. I gotta I'm gonna get a brain buster for you. This is 343.

I don't know what it is. As if my brain has not been busted enough already. I think you'll get this one. This is a good interview question. What is the purpose of the array method dot sum?

Oh, The purpose of it the purpose is to Like, what does it do? Yeah. Yeah. It's to create a new array. That's Part of it. Right? So it creates a new array with some of the values of the old array.

No. Is it kind of like filter? Was thinking I was kinda like and then I was like, wait. That's what filter is.

Yeah.

What's wrong about that? I never used sum. Rid dot sum

will test an array if some Oh. Of the values meet a criteria. So true or false? So The example I always give Yeah. Is you have an array of family members, and you wanna make sure that at least 1 of the family members is over 18 years old. So you say dot sum, and then you pass it a callback function. You check if the the age of each person is over 18. And if at least 1 of them

is over 18, then it will return true. Otherwise, it's false. Yeah. I knew I was getting into a hole when I was describing it. Because as I was doing, I was like, wait. This is filter. I'm talking about filter. I'm just grabbing filter. Yeah. That's, that's what's going on here. Okay. Cool. Next one is 40.

40.

Re How do you delete a cookie?

Oh, if it is a client side cookie, Meaning it does not have HTTP only set on it.

You can Yeah. I would say it is the question because they don't differentiate there.

Rid So I would say it is a client side cookie. Okay.

You have to take document dot cookie and parse it out rid because document dot cookie is just a string. So you have to parse it out based on the spaces and the semicolons, and then you have to remove the one that you don't want, And then you have to set document dot cookie

to the new updated string. What if you want to delete it?

Oh, you're saying the updated one. So you removed it. Yeah. So you you take the string, yank that part of the string out, or use a library that will parse it And then put the string back in. I think that works. But in their answer,

they specify the cookie with no value.

So, like, if the cookie was, like, cookie name, it would be cookie name equals and then semicolon.

Oh, yeah. Like the cookie has no value. But I think Your way probably works. I don't know. I almost always set cookies via JavaScript library, so that's a great question.

Yeah. I'm wondering I'm just trying to set document dot cookie to be an empty string right now, and it doesn't look like that works.

But If you were to set it to an empty, the one part of it oh, never mind. I'm trying to set, a GPU only cookie. Yeah. So both of those should work. Cool. Well, do you wanna cap it at that? Yeah. Yeah. That's good. That was fun. We haven't done that one in a while, so hopefully you learned a thing or two. There's Obviously, plenty more questions, so maybe we'll do another one of those in a month or two.

Should we move on to some sick pics? Yeah. You know, that was a lot of fun, Wes. I'm I'm glad we did that. So, Yeah. Let's get into sick picks here. Do you have anything off the jump that you wanna you wanna sick pick? Or

I am going to sick pick Another piece of lawn care equipment. Oh.

A blade balancer. So I recently learned as I'm getting into lawn care that my rid Lawnmower blades were duller than a butter knife. Oh, man. I bet mine are too. Yeah. I had never thought about it until I was like I was like, why does the lawn get kinda light after I cut it? And it's because it was, like, just whipping the ends of the grass off, and then the the ends of the grass would ray gray and yellow. Yeah. And that gives it a bit of a lighter look.

So I am going down the rabbit hole of Trying to figure out how to sharpen them myself because our our lawnmower has 6 blades, I believe. 6? Yeah. There's 3 rid Spinnies, and each spinny has a x because it's like Holy cow. I think one of them mulches it, and one of them I have stopped to ready. To look into it. But that little push push more, and it just has 1 wide blade. Yeah. Yeah. We are we are a pretty serious tractor based one, rid. But then you got this blade balancer.

That's another thing you can do to make sure that it cuts nicely and doesn't rattle all out. And it's just a tiny little cheap little Pyramid where you put your blade on there, and it will balance. And you can tell if it's if one side needs to be ground down a little bit more or not. So a handy little lawn tool that I never knew that I needed, and I'm excited that I have it. Cool. I'm going to sick pick

A video game for the iPhone, which I don't know if you call this a video game. You call it, like, a iPhone game, I guess. And I don't know if this is on Android. It could be. I'm very sorry, Android people. I hate it when people do that.

So so with that all said, This app is it's my kind of game. I discovered it on an airplane because I really needed to have something to play on the airplane, or while we are taking off to distract myself, and it doesn't need to check-in with Wi Fi or anything like that. So if you're the type of person who likes that type of game or or type of thing, What this is is like a factory game. It's called Builderment Builderment.

And it's a factory building and automation game, which I had never even heard of this type of genre, but maybe it's a thing that I'm not in into.

This type of game, it it's so computer programming that I was, like, making me feel like I was, like, actually gaining programming, and and it really scratched that Refactoring it that I had while I was on the airplane. I was like, man, I gotta refactor something. I'm going nuts here. So I refactored a factory Where you you mine this and you mine that, you put them on conveyor belts, and then you put them into a factory that creates a a block of rid Iron, and then you use that block of iron to create wire iron wire, and then you use that to create something else until you eventually have this, like, intricate, But as a computer programmer, I found it to be even more interesting because it allowed me to, like, think about systems and creating systems, and It didn't feel like programming. It felt like I was kind of playing a game. So it's called Builderment, and I really enjoyed it. And it is one of the unfortunately, one of those things where you can You can get yourself a little bit too wrapped up in it where, you know, you gotta put it down.

But, again, it's It's a programming and automation game. I just found it to be really, really interesting, especially to to really scratch that programming itch I had. So, Yeah. Check it out. I it does I don't know if it is for Android or let me check this out. But, yeah, it it's a really fun game. I had a good time playing it. So, yes, in before iOS only or what. So it looks like this person just built it on iOS. I'm sorry, Android people. But, again, it doesn't need online requirements or anything like that, so it's pretty cool there.

Shameless plugs. Westbostdot rid com forward slash courses. Learn some React, Node, JavaScript for beginners. There's all kinds of Gatsby, all kinds of really good courses there. Check it out. Westboss.comforward/courses.

You can even take e s six. You can learn all about maps, sets, weak maps, and all that good stuff. Rid You can use a coupon code syntax for an extra $10 off. Sick. I'm going to shamelessly plug level up tutorials.com.

And let me tell you, level up tutorials has some crazy good courses coming out. We just had a course from Colby Fayock come out That is, Next. Js in ecommerce with Snipkart, former sponsor of Syntax.

And then the course that's coming out For September, its release date is August 31st, is web components 101 meant for anybody who has no experience with web components. We don't use any libraries. We don't use any build tool. We just straight up use JavaScript and HTML to write real web components.

In that, we understand the basics of what the heck it is, why you would want to use it, what are the the concepts and the main ideas with the syntax.

And, Wes, I gotta tell you, man. We got some really, really talented course creators coming out with courses coming out over the next few months. So if you're interested in all of that and more, Head on over to level up tutorials.comforward/pro.

Sign up your team today. We have team accounts. That's right. You can sign up your entire team. Everybody can get rid in there with all that awesome content. So check it out, level up tutorials .com.

Alright. Thanks everybody for tuning in, And we will catch you on Monday.

Peace.

Peace.

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.