STUMP’D Interview Coding Questions

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming again hot. Here is Wes Barracuda Boss and Scott

CSD.

Welcome to Syntex. On this hasty treat, we're gonna be playing a game of Stumped. Stumped is the The show where we ask each other interview questions from JavaScript, HTML, CSS, and more, and we try to stump each other. Now we aren't picking up the hardest questions. What we have is a resource called 30 seconds of interviews.org.

And what we do is we run a quick little script that grabs 1 at random, it. So that way, we are playing nice and fair here. We're not trying to not trying to You can try their work if you want, but it. Trying to get we're just trying to get random interview questions so that not only you can see exactly, that the pros struggle with this stuff too or it. Just that on the fly, sometimes coming up with these questions is hard, but we'll also go into the answers so that you can understand the answers to these interview questions. It's a lot of fun. And if you like this, we have many more stumped episodes in the back catalog. My name is Scott Tolinski. I'm a developer from Denver, Colorado, and with me as always is Wes, boss.

Excited to be stumped. I'm excited to be stumped too, and I'm excited for 2 of our excellent sponsors today. This Episode is sponsored by 2 amazing companies, Sentry, the perfect place for all of your errors and exceptions, And LightStep incident response, intelligent on call scheduling and escalation.

LightStep instant Response is built on the ServiceNow platform, which is used by over 6,000 companies.

You pay for the services you actually use not the number of the people on your team, which is important because you can scale your incident response team without adding to your bill. You get intelligent on call scheduling and escalations.

You can get the full context on your service health, active alerts, and who's on call. LightStep incident response immediately pinpoint issues and groups alerts with machine learning, reducing your time to respond. And this means less noise and more personalization for precise notifications where you can take control on declaring incidents automatically notifying the right teams. And you can get unified incident response by seamlessly orchestrating alerts and incident triage with on call scheduling across Slack, Teams, Zoom, desktop, and mobile. So what you'll want to do is head on over to lightstep.comforward/syntax, and you'll get a free 30 day trial.

Listeners of Syntax will also receive a free LightStep incident response t shirt after firing an alert or incident. So check it out. Are you in need of incident response? Check out lightstep.comforward/syntax.

This episode is also sponsored by Sentry at century.i0.

Now Sentry is the perfect place to really stand everything about your application's performance and status.

You can get all sorts of custom dashboards, alerts, and User performance metrics and even user feedback, everything that you'd wanna know about how your users are utilizing and working on your site. I've been using Sentry for quite some time to track all of my releases. I can see just how buggy a specific release is, or I guess I should say how not buggy a specific release is. And then if it is in fact having some bugs, I can go and fix them, mark them as complete, and then watch in horror as I get an email later saying that there was a regression.

It. So you'll want to head on over to [email protected].

Use the coupon code at tasty treat, all lowercase and all one word, and you'll get 2 months for free. That's sentry.i0.

Thank you so much First Century for sponsoring.

Okay. Cool. So I have the very 1st question here for you, Wes. And I've run my little script that you wrote, and it is to spit out the question is, what is a higher order component?

Higher order component.

Okay. A higher order component is an idea in a lot of these component driven Frameworks like React and Svelte or whatnot. It's based off the idea of a high order function where, Oh, man.

We've done high order function on this stump before, and I nailed it. Now I'm struggling to to come up with the idea. So the idea with the high order component is that it is a component that runs at a higher level That passes information down to a lower level, component. So, should you need to fetch some data or CS restrict access to a lower level component. You can wrap it in that component, and that component will be in charge of running first When then it passes the result down to a lower level component.

That sounds just about perfect. Just about thank you.

Yeah. No. I don't have anything to add there. I mean, you're you're just wrapping something to to give it some bit of extra something, whether that's functional. A little bit of extra. Yeah.

All right. We we were starting to scrape the bottom of the barrel of some of these questions. Some of them we've had already. All right. This is kind of an interesting one. It. What is functional programming? This is under hard a hard question. What

is, functional programming is well, there it's funny because they're in my understanding of functional programming is that There's different levels different levels to functional programming, but the the main idea with functional programming is that it. You are writing pure functions that do not have what are called side effects. The the big thing here is that Instead of utilizing classes, instead of writing things using classes and having class methods, what you're writing Is a function that does something and returns a value. And what you end up having in practice is a function that does one single thing, returns a value. Another function returns a thing. You call another function. You can string these together, and it's a string of functions. You're using functions to functionally program.

Now the thing the reason people like this, it makes code easy to test because instead of having to test a class and all of its stuff, you just have a function that does one singular thing For every set of, inputs, it will always have the same output is the what they say. Right? Yeah. So if you if you pass in The let the number 1 into this function, and this function does nothing else.

It always is going to return the exact same thing if with the same Okay. Sorry to to phrase this in a better way. With the same inputs, it will have the same outputs every single time. A side effect is typically considered when you have, like, table outside of that function, inside of the function that's taking that data without being passed in as an argument that can manipulate that, and that is not controlled In the same sense that functional programming is because you you don't necessarily always have the same outputs with that same input because the input is not controlled by the function.

So Beautiful. Functional programming, pure functions always returns the same thing with the same output. But in practice, it ends up being a little bit more like, You just have a bunch of functions that just do a bunch of stuff and, instead of classes.

Yeah. Beautiful. I you nailed that. I think you did a better job than the answer was here. You all of the thing the big one was pure functions and makes it easier for testing but like that was that was an excellent

a explanation of what functional programming is. That's that's what you want to do. Functional programming is a promise. Put that on TikTok, Kit or Kit. Yeah. Like, like, let's take let's TikTok it. You know what? It. Functional programming is one of those things that really scared me because people make it seem like it's this big scary thing. Oh my gosh. It's a whole different way of programming. It's just like You're making functions and returning stuff instead of doing classes, and, that's pretty much it. Yeah. I just don't know how object oriented programmers don't use functions.

They do. They do. They I hate jokes like that. Object oriented people do use functions, but, like, they will often store the data inside the, inside their class, like, maybe have a time ago method on something, or it will check this dot time. And A time ago function and functional programming will take in a time and return the the actual value, but Scott did it way better. One thing I really like about functional programming is that I I

Literally never think about the word this. I just never think about it. It's so great. Yeah. Yeah. That's that's a good way around it. Alright.

Next question

for you. Okay. Here's one that you'll like. What's the purpose of cash busting, and how do you achieve it? Cash busting. So,

The idea with cache busting is that, you're most likely your browser, sometimes your CDN, it will download a resource, an image, Some CSS, some JavaScript.

Let's let's take CSS and JavaScript for an example. You have style that CSS and you have scripts. Js.

You update those. You upload that thing to your server, and you visit your web page. You refresh your web page, and the web page says, Style. CSS, scripts. Js. I downloaded that before. Not going to redownload it. I'm just going to use the one that I have in my bag here in the cache.

And that can be an issue because, you need the updated version of it. So ways to get around cash busting is to Probably the best way is to just name every single time you ship JavaScript or CSS.

Give it a unique identifier. So instead of scripts.js, It's scripts.doggy.js, and that that d o g g y is is just a random identifier.

The other way around it is you could do a query param.

I do this on my end. Just do style that CSS query param v equals 12 or v equals. Sometimes people will even put, like, a time stamp on it, which will tell you when it's been last updated.

So that will make that will force the browser to download a new version, of the JavaScript.

Lovely. Yeah. Just perfect. Beautiful. Beautiful.

Oh, I like this one.

What is short circuit evaluation in JavaScript? Short circuit evaluation.

So short a circuit evaluation if if I'm thinking about this the correct way, because I don't think I ever refer to it as this, would be the way that you can Escape something early, particularly like a loop or a function. I don't know if it's like that likewise in a function, but let's say you have, like, a a loop, and it's supposed to go for 10 rounds.

You can break out of that loop early so that it does not finish the last amount of rounds without having to, do that. You do that with what? With

break or Yeah. Like a 4 in loop, you can break. Yeah. You can Break or you can use continue, which will skip that iteration of the loop, but keep going on the next ones. Oh, I've never used continue. Yeah. And That's nice because, like like, let's say you're doing, in every single iteration of the loop, you're trying to fetch something. Hey, Nook. You know what? This one, I don't wanna fetch this one, but I wanted to fetch I wanna keep going.

Like, how do you skip just that one? You know? And with that, you can just say continue, and that will skip it. You can obviously do it with an if statement as well, kinda like a return in a function. Oh, yeah. And so the reason why this becomes important for those of you who don't know, basically,

if you have any sort of expensive operation, expensive operations being like An API call or some perhaps some expensive or inexpensive computation. You you you don't need to run that extra code if if you don't want If you don't have to. Right? So it's preventing you from potentially having nonperforming code, but also maybe preventing you from, If you have, like, a loop that needs to stop at 5 and it's just counting,

right, it could stop you from counting or something that additional amount and Incorrectly functioning. All all of that is right, and that's exactly what I would have said. But the docs here say that that is not what it is.

So short short circuiting, loop. I think that's what that what we're talking about is short circuit evaluation apparently is when you check if something Is there. So if is or you say is admin and and display admin bar, You know where you do that? Instead of saying like an if statement, you just say, is it min? That's a boolean. True or false? And and or or. So So apparently, that's what short circuit evaluation is. I've never heard it called that. It's basically what we use optional chaining for now. Mhmm.

Exactly. The optional chaining has kind of replaced this technique.

Okay.

Oh, here's a fun one that you may or may not What is a closure?

Oh, alright. Here we go.

Before I say this, I'm gonna shout out to my JavaScript, beginner JavaScript course, which has a very good, well thought out explanation of this that I spent many days on building.

It. Before I I do this, I just wanna give a quick shout out to me for being great and doing something.

Before I try to just, like like, rip this from, See to my pants.

Know that I have a very well thought explanation of of what a closure is. Okay.

A closure Is every time you make a function in JavaScript, you have scope, and that scope is allowed to contain variables Even after that function has been closed.

So if a function runs and closes, it's I've heard it been described as it's being closed over, but the variables if you are referencing the variables From that function somewhere outside of the function. So most likely would be you have a function, and then inside of that function, you have another function, and you have variables that are created inside that variable. They can then be they can still be referenced even though the function has run and being closed.

And the idea in JavaScript behind that is that you can maintain general use for maintaining state Past many function calls. So I have an example of where we have, we have like a hockey game and you're keeping score.

The state of that hockey game is thrown into a closure so that we can maintain it, past many calls over and over again. I don't know if that's

it. Tell me how I did. I honestly am not the the right person to tell you how you did because for me, closures are, like, one of those those words I just hear.

I just hear it. And so I'm gonna go ahead and say you're right because you wrote a really amazing course on this, and, and you preface your response with that. So I it. I wanna say that you you you know what you're talking about with closures based on the fact that I don't personally know how to explain them in any sort of real way. Thank you.

Both of our our spouses, brought us meals in the middle of this recording, so shout out to our our lovely wife. Shout out to the spices.

Yeah. All right. I'm going to get you a really good one. Oh, here's a good one. What is the reason for wrapping the entire contents of a JavaScript source file in a function that is immediately invoked like an iffy.

Yeah. It kinda relates to the last one. It's an it. You wanted to run

is really what it is. You got some code you want it to run. Now, basically, you know, this could be used for the first stuff that needs to be, you know, invoked immediately Upon loading, so the code loads and then the functions run.

So another way that you could do this would be to just put everything of your code inside of a function and then just Call that function itself. So it'd be like, I'm making a function name start, and then the very first line of the code is just start with parentheses in it. And so, basically, this is just skipping that step and saying all of the stuff is inside of an anonymous function that just runs immediately.

Exactly. And that anonymous function Creates a closure which you can then store variables in. So the benefit Okay. The benefit of that is that, Like, for mine, I had a a function called create a hockey game.

And in that, you can have a score variable. Well, what happens if you wanna it. Create another hockey game in the same. You can't use global variables for that because then then you can't run 2 hockey games at the same time. So an IFFE or or a named function, like Scott said, probably better to use a named function so it's named something like start.

Then both of those functions have their own closures. They can all contain their own variables, and they will never overlap each other it. Unless you explicitly go out to the window or the global scope. Alright. Alright. Alright. Okay. Alright.

There we go. Can you just I don't know if we've done this one or not. Well, well, let's give it can you describe how CSS specif specificity works.

I can't. Specificity.

Specificity.

It. I did it. Yeah. Yeah.

Okay. So everything there's different layers of specificity that have different number of values associated with them, And then you add them up, or they count for points, essentially, and specificity points.

I'm going to goof up the order of those specificity points, But the most specific would be, like, an important tag that would have a an ID would be next, And then you would have a class and then an element. I don't there's probably more nuance in that. That's exactly the that's exact there is more to it, But you you said it exactly as the answer stated. That's amazing. I knew in, like, all of the diagrams that show the counting there, they have 4 things. So I was like, alright. What are the 4 things? You know?

Yeah. Inline rules, ID selectors, class pseudo selector and attribute selectors, and tags. Beautiful.

Yeah. So So, basically, the amount of these you have, kind of adds up to a score.

And the reason why it matters is because, like, if you have something that's ultra specific, it's it's like a, what, like, a 1,000 point value or something. I forget the way it works exactly, but it's a it's 1 decimal out so that, basically, you're you're not going to override the specificity of an important tag or an inline style.

You're not going to override it with a class or even just adding multiple classes to it or something or having nested classes.

So, basically, The specificity starts top down. So something that's defined below something else will overtake it as long as it has it.

A, higher or even specificity

score to what's above it. Beautiful. Beautiful. Beautiful. You've been you've been now it on them today. You're you're on it. You know what, Wes? I I I gotta say,

shout out to me. I, yesterday, I won I won 3 games of Risk online, and then guess what? I want I was playing a virtual reality table tennis, Which is cutthroat, man. There's I'm playing ranked ranked only ranked matches only in virtual reality, table tennis, and I think I won, like, 8 matches in a row, which is unheard of.

My my my point score is just going up. So I gotta tell you, I'm on a cognitive high lately. I don't I don't know if it's I'm taking brain pills or something. I'm I'm feeling I'm feeling with it.

That's awesome. Yeah. Alright. What do you what do you got for me? Let's do 1 more each. How does prototype how does proto

tiple pro this is my specificity.

No. There's no c in this word. Pro Tothai Paul, how does prototypal inheritance

differ from classical inheritance? I don't know what classical inheritance is. Is that where, like, your parents have money And like you are

your your, your data's back. And Yeah. Yeah.

That so that's that's a question for, like, I'm assuming that is because it's different in JavaScript than it is in like Java and C and all that stuff. But I'll tell you how prototype Prototypal inheritance works is that, when you access a method or a property on an object, It will first check if that object has that value. And if it does not have that value, it doesn't immediately say, Hey. It doesn't exist. It's undefined. What are you doing? It will go up the chain of prototypes to look for it. So, that's really handy when you're using classes because you could have the typical one we always use is you have an animal class And you have a dog that extends an animal and properties that are shared among animals like, what's this is just a stupid example because then you start thinking about what what are animals like. But, like, let's say let's say, At dog.feet.

So you say, okay, well, that that is a property on the dog itself.

But then you say, dog dot eyes.

All animals have 2 eyes. So they set that value up at the animal level, not at the dog level, because then you don't have to reimplement that code when you go and create a cat and a bird.

Right. So they all have 2 2 eyes, and you can test that very easily by making a new array. You just make an array of 1, 2, 3. If you try to access array dot map, the map function And only when you want to have a specific properties or functionality on that specific piece do you define it at at that lower level. But it's generally better to share that code base among all the instances at a higher level as high as you can get it. And that's where if you simply just take capital array Dot prototype, you will see and you open it up, you'll see all the methods that are there. Dot filled, filtered, defined, defined index, dot flat. It. All those things are shared amongst them all. So that's how array prototype works.

Lovely. Yeah. That that's great. Classical inheritance classical inheritance is, let's see. Objects in object instances inherit their properties and functions from a class, which acts as a blueprint for the object.

Object instances are typically created using a constructor and the new keyword.

So you know what? You're inheriting properties and, you're inheriting things like That sounds like the exact same thing to me. So yeah. Makes sense. Need to do a deep dive here. Yeah.

Shout out to my beginner JavaScript .com course. You can learn about that as well.

This is just an ad for my course. Yes.

Alright. Last question I will ask you here.

This is a good one. I like this one. What is the difference between a parameter and an argument? Oh, yeah. So this is, you know, my my dyslexic ass is going to swap these, Of course. But, a parameter in an argument.

So when you have a function, You have the things that you pass into a function are It's oh, man. I'm 5050 on this one.

I'm a

I'm trying to I'm trying to envision this in my My JavaScript, like, learning brain. The properties that a function accepts are its parameters, and the things that you pass into a function are its arguments. Nailed it.

Yes. Nailed it. So when you define a function like say hi to names, that that that is a parameter. I always say parameters There's are placeholders.

There's p and arguments are actual.

So the act arguments are the actual values that you pass in And the parameters are the placeholders that hold it for when you're defining the function. See, using mnemonics instead of just trying to visualize in your mind's eye what the right answer is. I kinda like that. I like that a lot. I got a actual placeholder, man. That's way easier to remember. Yeah. Beautiful.

Alright. That's it for today. Thanks, everybody, so much for tuning in to this episode of Stumped. Hopefully, you learned a thing or 2, And we will catch you on Wednesday.

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.