July 18th, 2022 × #JavaScript#HTML#CSS#Interview Prep
STUMP’D Interview Coding Questions
Wes and Scott play a game of Stumped, asking each other random interview questions and trying to explain the answers.
![Wes Bos](https://github.com/wesbos.png)
Wes Bos Host
![Scott Tolinski](https://github.com/stolinski.png)
Scott Tolinski Host
- Playing a game of Stumped interview questions
- Sponsored by Sentry and LightStep
- Question: What is a higher order component?
- Answer: Component that runs at higher level, passes info to lower level component
- Question: What is functional programming?
- Answer: Using pure functions instead of classes, no side effects
- Question: What's cache busting and how to achieve it?
- Answer: Force new resource download, add query params or random strings
- Question: What is short circuit evaluation in JS?
- Answer: Optional chaining
- Question: What is a closure?
- Answer: Function scope maintaining state
- Question: Purpose of immediately invoked function expression?
- Answer: Creates closure, runs immediately
- Question: How does CSS specificity work?
- Answer: Inline, ID, Class, Tag - add up points
- Question: How does prototypal inheritance work?
- Answer: Chain of prototypes, shared methods
- Question: Difference between parameter and argument?
- Answer: Parameters are placeholders, arguments are values
Transcript
Announcer
Monday. Monday. Monday.
Announcer
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
Wes Bos
CSD.
Scott Tolinski
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.
Playing a game of Stumped interview questions
Scott Tolinski
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.
Scott Tolinski
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.
Sponsored by Sentry and LightStep
Scott Tolinski
LightStep instant Response is built on the ServiceNow platform, which is used by over 6,000 companies.
Scott Tolinski
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.
Scott Tolinski
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.
Scott Tolinski
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.
Scott Tolinski
This episode is also sponsored by Sentry at century.i0.
Scott Tolinski
Now Sentry is the perfect place to really stand everything about your application's performance and status.
Scott Tolinski
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.
Scott Tolinski
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.
Scott Tolinski
Thank you so much First Century for sponsoring.
Question: What is a higher order component?
Scott Tolinski
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?
Wes Bos
Higher order component.
Wes Bos
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.
Wes Bos
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.
Answer: Component that runs at higher level, passes info to lower level component
Wes Bos
That sounds just about perfect. Just about thank you.
Scott Tolinski
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.
Wes Bos
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
Scott Tolinski
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.
Question: What is functional programming?
Scott Tolinski
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.
Scott Tolinski
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.
Scott Tolinski
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.
Answer: Using pure functions instead of classes, no side effects
Wes Bos
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
Scott Tolinski
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.
Wes Bos
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
Scott Tolinski
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.
Wes Bos
Next question
Question: What's cache busting and how to achieve it?
Scott Tolinski
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,
Wes Bos
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.
Wes Bos
Let's let's take CSS and JavaScript for an example. You have style that CSS and you have scripts. Js.
Wes Bos
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.
Wes Bos
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.
Wes Bos
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.
Wes Bos
The other way around it is you could do a query param.
Wes Bos
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.
Wes Bos
So that will make that will force the browser to download a new version, of the JavaScript.
Scott Tolinski
Lovely. Yeah. Just perfect. Beautiful. Beautiful.
Answer: Force new resource download, add query params or random strings
Wes Bos
Oh, I like this one.
Question: What is short circuit evaluation in JS?
Wes Bos
What is short circuit evaluation in JavaScript? Short circuit evaluation.
Scott Tolinski
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.
Scott Tolinski
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
Wes Bos
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.
Wes Bos
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,
Scott Tolinski
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,
Wes Bos
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.
Wes Bos
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.
Scott Tolinski
Exactly. The optional chaining has kind of replaced this technique.
Answer: Optional chaining
Scott Tolinski
Okay.
Question: What is a closure?
Scott Tolinski
Oh, here's a fun one that you may or may not What is a closure?
Wes Bos
Oh, alright. Here we go.
Wes Bos
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.
Scott Tolinski
It. Before I I do this, I just wanna give a quick shout out to me for being great and doing something.
Wes Bos
Before I try to just, like like, rip this from, See to my pants.
Wes Bos
Know that I have a very well thought explanation of of what a closure is. Okay.
Wes Bos
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.
Wes Bos
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.
Wes Bos
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.
Wes Bos
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
Scott Tolinski
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.
Answer: Function scope maintaining state
Scott Tolinski
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.
Scott Tolinski
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.
Wes Bos
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.
Question: Purpose of immediately invoked function expression?
Wes Bos
Yeah. It kinda relates to the last one. It's an it. You wanted to run
Scott Tolinski
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.
Scott Tolinski
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.
Wes Bos
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.
Wes Bos
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.
Wes Bos
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.
Answer: Creates closure, runs immediately
Wes Bos
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.
Scott Tolinski
I can't. Specificity.
Question: How does CSS specificity work?
Wes Bos
Specificity.
Wes Bos
It. I did it. Yeah. Yeah.
Scott Tolinski
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.
Scott Tolinski
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?
Wes Bos
Yeah. Inline rules, ID selectors, class pseudo selector and attribute selectors, and tags. Beautiful.
Scott Tolinski
Yeah. So So, basically, the amount of these you have, kind of adds up to a score.
Answer: Inline, ID, Class, Tag - add up points
Scott Tolinski
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.
Scott Tolinski
You're not going to override it with a class or even just adding multiple classes to it or something or having nested classes.
Scott Tolinski
So, basically, The specificity starts top down. So something that's defined below something else will overtake it as long as it has it.
Scott Tolinski
A, higher or even specificity
Wes Bos
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,
Scott Tolinski
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.
Scott Tolinski
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.
Wes Bos
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
Question: How does prototypal inheritance work?
Scott Tolinski
tiple pro this is my specificity.
Scott Tolinski
No. There's no c in this word. Pro Tothai Paul, how does prototypal inheritance
Wes Bos
differ from classical inheritance? I don't know what classical inheritance is. Is that where, like, your parents have money And like you are
Scott Tolinski
your your, your data's back. And Yeah. Yeah.
Wes Bos
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.
Wes Bos
So you say, okay, well, that that is a property on the dog itself.
Wes Bos
But then you say, dog dot eyes.
Wes Bos
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.
Wes Bos
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.
Answer: Chain of prototypes, shared methods
Scott Tolinski
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.
Scott Tolinski
Object instances are typically created using a constructor and the new keyword.
Scott Tolinski
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.
Wes Bos
Shout out to my beginner JavaScript .com course. You can learn about that as well.
Wes Bos
This is just an ad for my course. Yes.
Wes Bos
Alright. Last question I will ask you here.
Question: Difference between parameter and argument?
Scott Tolinski
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.
Scott Tolinski
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.
Wes Bos
I'm a
Scott Tolinski
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.
Wes Bos
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.
Wes Bos
There's p and arguments are actual.
Scott Tolinski
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.
Answer: Parameters are placeholders, arguments are values
Wes Bos
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.
Wes Bos
Peace. Peace.
Scott Tolinski
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.