STUMP’D Interview Coding Questions

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.

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

All right. We we were starting

is, you're you're not going to override the specificity

functional programming? This is under hard a hard question. What

That sounds just about perfect. Just about

thank you.

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.

nothing else.

well, there it's funny because they're in my understanding of functional programming is that There's different levels

is For every set of, 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.

instead of classes.

that do not have what are called side effects. The the big thing here is that Instead of utilizing 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.

It always is going to return the exact same thing if with the same

different levels to functional programming, but the the main idea with functional programming is that it. You are writing pure functions I can't. Specificity.

So Beautiful. Functional programming,

Is a function that does something and returns a value. And what you end up having in practice do that. You do that with what? With or drop a review if you like this show.

instead of writing things using classes and having class methods, what you're writing So short a circuit evaluation

Is there. So if is or you say is admin

early so that it does not finish the last amount of rounds without having to,

loop. I think that's what that what we're talking about is short circuit evaluation where, This is just an ad for my course. Yes.

So short short circuiting, that will make that will force the browser to download a new version,

a loop, and it's supposed to go for 10 rounds.

Like, how do you skip just that one? You know?

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?

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.

nonperforming code, but also maybe preventing you from, points.

apparently is when you check if something properties or functionality

particularly It's

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

You can break out of that loop

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

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

If you have, like, a loop that needs to stop at 5 and it's just counting,

break or Yeah. Like a 4 in loop, you can break. Yeah. You can

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, What is short circuit evaluation in JavaScript? Short circuit evaluation.

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

display admin bar,

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.

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.

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.

let's see. Objects in object instances

is, oh, man. I'm 5050 on this one.

Object instances for me, closures are, like, one of those those words I just hear.

So tiple Use the coupon code at tasty treat, all lowercase and all one word, and you'll get 2 months for free. That's a actual 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

are typically created using a constructor and the new keyword.

Lovely. Yeah. That that's great. Classical inheritance functional programming

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

and functions from a class,

Alright. Last question I will ask you here.

you know what? You're inheriting sentry.i0.

which acts as a blueprint for the object.

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

A, higher or even specificity

it.

So, But the most specific would be, like, an important tag 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, Yeah. So

Which is cutthroat, man. There's I'm playing ranked ranked only ranked matches only in virtual reality, table tennis,

yesterday, Both of our our spouses, your data's back. And Yeah. Yeah.

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.

table tennis, 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 classical inheritance and then Now Sentry is the perfect place to really

The specificity starts top down. So something that's defined in an argument.

of an important tag or an inline style.

I won I won 3 games of Risk online, 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.

below something else will overtake it as long as it has

And the reason why it matters is because, like, if you have something that's ultra specific,

basically, a So when you have a function, You're not going to override it with a class or even just adding multiple classes to it or something or having nested classes.

and I think I won, like, 8 matches in a row, which is unheard of.

1 decimal out so that, basically,

shout out to me. I, the perfect place for all of your errors and exceptions,

Dot prototype, I'm a and you can test that very easily

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

that's really handy when you're using classes idea. So the idea with the high order component is that it is a component that runs at a higher level

No. There's no c in this word. Pro Tothai alerts,

the map function

Prototypal inheritance works 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

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

Paul, how does prototypal inheritance And what we do is we run a quick little script that grabs 1 at random,

dog dot eyes.

Hey. It doesn't exist. It's undefined. What are you doing? It will go up the chain of prototypes 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.

But then you say,

when you access a method or a property on an object,

That so that's that's a question for, like, I'm assuming that is because it's different Probably the best way is to just name every single time you ship JavaScript or CSS.

pro this is my specificity.

At dog.feet.

And you have a dog that extends an animal like, and you visit your web page. You refresh your web page, and the web page says, Is every time you make a function in JavaScript, The other way around it is you could do a query param.

Right. So they all have 2

say, Exactly. And that anonymous function

your your, guess what? I want I was playing a virtual reality

because you could have the typical one we always use is you have an animal class And the idea in JavaScript behind that is that you can maintain

and And only when you want to have a specific that that that is a parameter. I always say parameters There's are placeholders.

array It will which you can then store variables in. So the benefit Okay. The benefit of that is that, many days on building.

that that is a property on the dog itself.

on that specific

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.

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 That passes information Yeah. It kinda relates to the last one. It's an it. You wanted to run general use for maintaining state

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.

and status.

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

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.

Thank you so much First Century for sponsoring.

And LightStep incident response,

stand everything about your application's 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.

You can get all sorts of custom dashboards,

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

intelligent on call scheduling and escalation.

and User performance metrics You can get the full context on your service health, active alerts, and who's on call. LightStep incident response immediately pinpoint issues

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

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

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,

companies.

performance if if I'm kind of adds up to a score.

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

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.

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, inherit their properties Listeners of Syntax will also

exactly, and you preface your response with that. So

it. Trying to get we're just trying to get random interview questions so that not only you can see

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 Oh, I like this one.

Like, for mine, I had a a function called create a hockey game.

an IFFE or or a named function, like Scott said, probably better to use a named function so it's named something like start.

Creates a closure

Then both of those functions 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, 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.

in a function that is immediately invoked

Oh, here's a fun one that you may or may not What is a closure? 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,

beginner JavaScript course, which has a very good, well thought out explanation of this that I spent

if you are referencing the variables

where we have, You update those. You upload that thing to your server, and arguments are actual.

you have scope,

it. Tell me how I did. I honestly am not the the right person to tell you how you did because 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

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

and that scope is allowed to contain variables

From that function The idea with cache busting is that,

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.

Past many function calls. So I have an example of

I'm gonna shout out to my JavaScript,

Even after

The state Oh, alright. Here we go.

over and over again. I don't know if that's

of that hockey game is thrown into a closure so that we can maintain it, properties that are shared among

somewhere outside of the function. So most likely would be you have a function, and then inside of that function, you have another function, has been closed.

A closure you need the updated version of it. So ways to get around cash busting is to

past many calls

but the variables

So if a function runs and closes, it's I've heard it been described as it's being closed over, 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.

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

but like that was that was an excellent

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 So you say, okay, well, by making a new array. You just make an array of 1, 2, 3. If you try to access array dot map,

inside their class, Give it a unique identifier. So instead of scripts.js,

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, Yes. Nailed it. So when you define a function

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 Higher order component.

Next question that function you're most likely your browser, sometimes your CDN, There's p

and makes it easier for testing And that can be an issue because, like say hi to names,

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.

query param

identifier.

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.

I do this on my end. Just do style that CSS

and that that d o g g y is is just a random

Lovely. Yeah. Just perfect. Beautiful. Beautiful.

Some CSS, some JavaScript.

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

It's scripts.doggy.js, should you need to fetch some data or to look for it. So,

of the JavaScript.

So

I'm trying to I'm trying to envision this in my My JavaScript, 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, 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

are into a function

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,

parameter

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.

You have the things that you pass

Monday. Monday. Monday.

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,

Boss and Scott

the tastiest web development treats coming again hot. Here is Wes Barracuda

CSD.

the craziest,

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,

Frameworks like React and Svelte or whatnot. It's based off the idea of a high order function and and It. I did it. Yeah. Yeah.

Okay. A higher order component is an idea in we have like a hockey game and you're keeping score.

component. So, it will download a resource, an image, how CSS like an iffy.

down to a lower level,

We've done high order function on this stump before, and I nailed it. Now I'm struggling to to come up with the Before I say this,

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? 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 lot of these component driven first check if that object has that value. And if it does not have that value, it doesn't immediately

Oh, man.

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?

I'm going to goof up the order of those specificity points, classes, And don't forget to subscribe in your podcast player

Specificity.

ID selectors, class pseudo selector and attribute selectors, and tags. Beautiful.

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 and you'll get a free 30 day trial.

Yeah. Inline rules,

So, basically, the amount of these you have,

I it. I wanna say that you you you know what you're talking about with closures 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.

based on the fact that I don't personally know how to explain them in any sort of real way. Thank you.

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

placeholder,

for a full archive of all of our shows,

man. That's way easier to remember. Yeah. Beautiful.

Head on over to syntax.fm

Peace. Peace.

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

works.

specif is that,

specificity in JavaScript than it is in like Java and C and all that stuff. But I'll tell you how prototype

Okay.