The Drunken UX Podcast

#116: Coding Pop Quiz Part 3 (Back to JS)

In this episode, Michael and Aaron finish up taking their tests by comparing notes on some additional JavaScript challenges. Are two heads better than one? What sneaky tricks will derail them? Jump in and answer along to see if you can solve some unique questions about JavaScript behavior.

Followup Resources

Transcript

The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.

breakout your wireframes and heat up those get repos, we’re ready to tackle topics ranging from accessibility to front end design, user experience and beyond. You’re listening to the drunken UX Podcast with your hosts, Michael Fienen. And Aaron Hill. Well, hello, everybody, and thank you for joining us on The drunken UX podcast. This is episode number 116. For June 6 2022, we’re gonna be talking about JavaScript quirks. And I am your host, Michael Fienen.

And I’m your other other host, Aaron, and I have a question for you, Michael. Hi,

Michael. I mean, Aaron. Yes.

What’s the use to end for?

User?

A sure user. You experience

an old joke. That she checks out, sir. Why? What is the you stand for?

I don’t know. I was asking you. Oh, okay.

I thought you were leading into something but

no, I was I it was a lot funnier in my head.

You were you were setting me up to fall down. I was said I was setting

you up for like, like a fun gag. And I didn’t pull it off. You didn’t

warn me first is sort of the problem, right? I’m sitting here with a slice open underneath my eye because I played with my dog a little too rough. And she said Michael back off, and I paid for it. So I’m going to be drinking some some whiskey tonight to numb that down just a hair. Hey, everybody. That’s a change. This is the third episode in our series on quizzing each other on different technology. Episode Number one was 114, where I tested Aaron on JavaScript, episode number two was 115, where he tested me on Ruby. And now we’re going back to JavaScript.

But with another twist. We don’t want to just do the same thing over again. So I found a page that had some pretty good questions, at least I thought, and instead, we’re both going to do it together. I’m going to be sort of the Smart kid at the front of the class and Aaron’s going to be the the hooligan behind me who is looking over my shoulder trying to steal my answers. And so we’re going to talk through distracting

you. Because that’s more interesting than answering questions. Yeah. Well, that to hooking you in the back repeatedly, throwing, like spitballs at the back of my ear. Yeah,

not that I’ve ever had an old school except that. So this is gonna be from Dimitri pollutants blog. He’s got a series of seven questions lined up. And so we’re gonna look at those. Before we do that, I do want to talk real fast about what we’re drinking. So my painkiller is not an album by three days. Grace, it is something a little different. I’m going to show this to you, Aaron, as I’m saying it, it is I’m gonna route emirate Oh, I’m okay. Indian single malt whiskey. Interesting, bottled at 46%. It’s apparently been produced since the 40s.

I’ve never heard of this. I was in our local store. And the owner was like, and I asked him, because he’s an Indian gentleman. And I was like, I haven’t heard of this. And he’s like, Oh, no, it’s very good. Any Indian restaurant you go to, they’re gonna have this if they’re a good restaurant, and and it was cheap. I don’t remember what I paid for. But I think it was under 50 bucks. And I was just like, You know what, let’s just see, you know, Japanese single malt is a thing. And it’s great.

You know, there are other folks even like here in the states now that are trying to do like variations on the idea of single malt and whatnot. So I thought, hey, I’d give it a chance. Turns out it is actually pretty great. It’s not real complex. It’s kind of like a maybe like a glenmoor ng tin. Just a very simple, young Highland type scotch, it’s sort of lightened feathery, doesn’t have hardly anything on the nose. That was what struck me real hard with it was a rather didn’t strike me hard. When I say it’s not like it didn’t strike, or it didn’t strike me hard.

I had to like bury my nose in the bottle to like, get anything off of it. And it was just like the sort of light floral and like a generic like floral and the flavors kind of like that. It’s not strong. It’s very sort of, you know, yellow grass forward. Sweet Grass wheats. You know, that grainy flavor kind of comes through a little bit of that just malt funk that you can get. And that’s about it. Like it’s not crazy. It’s warm. It’s 46%.

So it’s it at least, you know, does the job and pretty unoffensive for the most part I was surprised I’m gonna say not anything that’s going to be like an OH MY GOD favorite like I mentioned last week with the Glenlivet listen still, I got this in the same batches that though I was kind of on an adventure, so I just got some stuff, but I would not not recommend that and certainly throughout an Indian restaurant and they have it, I think it’s very much worth trying. All right.

I have the same as last week actually have the kilchoman Kill showman kilchoman gilham And he’ll come in,

I thought you come in watch the video. That’s when I don’t know the right pronunciation pronunciation ensemble dry.

I think it was like kilchoman or something it was the accent was on the second syllable. I’m very sorry for butchering your name. Scotch brand. It is

a Gaelic didn’t want to be butchered. They shouldn’t use less vowels. And if you are weird consonants together.

I know the issue with Gaelic was, I know I’m thinking of Welsh. Welsh has too many consonants, right? That’s the well, yeah,

just there’s, there’s a law and I forget exactly where this is. But the in the UK where they have to print their signs in English and Welsh. And yeah, it kind of like in Quebec, how they do English and French. And there’s this picture of the site. And this may be totally internet like bullshitter II, as far as I know, but I think it’s real. And the signs that the English on top, which is perfectly normal on the bottom is is Welsh, which did there’s no possible way for me to read it.

But apparently, whoever put in for the translation sent the email over, they got the email back with the translation, they copied it, pasted it in and printed the deal. And somebody pointed out that the sign says, whatever it says in English, like, you know, so far to this place, take a write blah, blah, like it’s, it’s a handful of words. And bottom says, I am out of the office, please contact me on whatever date. So you got an auto responder in well, oh, and I’ve copied and pasted it, so

Oh my god, that’s so great.

I mean, it’s believable. Like I can say it this could not be this may not be real. But we know it happens like that is not an uncommon thing, especially with like China. Oh, sure. So yeah, like Sure. The whole like Google copy and paste and things like that is very real. So it’s like I I absolutely believe it would happen.

Yeah, I mean, it seems very plausible. Um, hey,

I want to start real fast with a quick bit of news that is super timely because it was super today. And at least today as in when we’re recording which is just ahead of release. If you keep up on your WordPress news, you might have noticed a press release come out from WP Engine today. That they have acquired delicious brains.

Yeah, I don’t know who to wishes brings us though.

They are the purveyors of what they’re they’re purveyors of what’s the word for like really high end food? Boutique, not not boutique?

Craft premium.

High quality highfalutin zombies. Okay, are humans rather for zombies? Have you ever watched the show iZombie like it’s kind of like that zombie. What they also do though, like on the side it’s kind of a black market thing they make a lot of WordPress plugins so delicious brains if you if that name sounds familiar, but you’re not quite sure where they have a whole list of plugins they make they’ve done WP offload SES better search replace WP offload media WP migrate and most significantly, ACF the advanced custom fields plugin which if you are a WordPress Dev, you probably have touched and used at some point.

I’ve used that one before that’s that’s pretty big news. As delicious brains was just acquired like a year ago if my memory is right by somebody or are delicious brains acquired the people who made I can’t remember the flow like it’s so hard to remember the way all of these things go but basically all of this stuff exchanged hands a year ago and now it has happened again with WP Engine picking them up. Good, I think is my initial reaction to that i i trust WP engine without fawning too much. I will preface that by saying I am a WP Engine customer.

I use their service I’m very happy with it. The tools they built we’ve talked about on here Atlas content modeler the WP developer kit they purchased local by flywheel and have made it available for everybody. So thus far, WP Engine has not done anything to sort of, you know abuse the trust in sort of the WordPress Bass, they bought woo themes WooCommerce, the whoo organizations now owned by them. Now I’m trying to remember like all of the different acquisitions over the years. Genesis, they own the Genesis suite. So there’s, there’s a whole lot going on that they now

control. So it will

remain to be seen, like this is one of those things that it could get a little hinky. You know if they decided to change posture or position on all of this stuff. But I think for the moment, it’s very good, and I think it’s good for the plugins, I think it’s good for the community. And I’ll be interested to see what happens with like the Pro versions of some of these tools. Because that could be very interesting as well, if you know if WP Engine customers might get access to Pro versions out of the box. Maybe? Oh, yeah.

Right now, like the the current news is no news. It’s basically business as usual for all of the things. But you know, down the road, I think we could certainly see some changes to that model. So that’ll be interesting. And it’s going to be something to just kind of keep an eye on. And for now, the the biggest assurance to everybody is nothing’s happening, any of these plugins external, they’re still available. If you have subscriptions, those will continue as normal.

So this is one of those change without change, I think a little bit for now. And but big news, nonetheless, like these things as they move around. It’s kind of interesting to see over time, what happens to them. So cool WordPress news to kick off the light. Okay, so you got your, your quiz I

have it or what have you. It’s the same title of it already.

So so this is seven simple but tricky. JavaScript interview questions. These are a couple of years old. But as far as I know, they’re still pretty relevant. As far as that goes. I mentioned I had skimmed it, but I did not pay attention to the answers. Aaron is not looking at the answers. And we may totally embarrass ourselves. And I think that will be pretty damn funny if that happens. So let’s see what happens. And let’s just kick off with the kickoff.

Right. So what we got is an accidental global variable. We have a function foo. Yes. And in function foo, we say let A equals B equals zero, then we a plus plus, which is an incrementer. And then we return a, then what they do is they run through and then they say type of A and type of B.

And what will those be?

I have the initial chunk of information, I think. So. One of these is easy. Which one do you think is the easiest? A or B?

I mean, I would presume a because it’s both the first variable names and also its return. Okay, so what

is the type of a? Let’s start this right. What are our type options here? That would probably make sense. Number.

Yeah, number Boolean number, undefined, undefined String, String.

I, while it’s an option, there’s no string involved in the function. Right? So I think we really have three, three types. We could have here, right? We could have a number, we could have a Boolean, we could have an undefined.

Alright, so looking at the title that it’s called accidental global variable. I’m presuming that is a behavior that it looks like it should be, which is that they should both be undefined is perhaps not the case. So let’s say that maybe a is a number and B is undefined. Okay.

I’m pretty certain on this one, that your backwards. Really, a is undefined and B is a number. But so here’s the question Do you trust my answer? Or do you think I’m wrong?

I am going to trust your answer in this case, but I don’t understand it. Here’s here’s why I think it is so backwards from what copier a copy your answer onto my quiz. is so

so here’s the thing, a, I’m 99% Certain is undefined, I’m not a 90 I’m 100% Certain A is undefined, because keep in mind let is a block scoping declaration. So let a while we are returning a we are returning the variable A we’re only returning the value of it which is zero. So a itself if we call a type of outside of the function that’s going to be undefined every time.

But here’s the thing, B isn’t declared.

And so, in order to execute the expression, let a equal b equals zero. It has to assume that there is a variable b up the scope. And in the absence of one it will create it and as a result, it would be a number.

Wow. Okay, and I am correct, honestly, that it seems ridiculous, but it seems it’s like a Ripley’s Believe It or Not thing, right. Like it seems so ridiculous that it might it’s gotta be

true. Yeah, yeah. No. Yeah, but no, yeah. So here’s to be clear.

I have not looked at the answer. I see the answer heading. But I have not scrolled down that far. So I don’t know if you’re correct.

No, I am. I’ve already scrolled down here. So it says no, variable B is declared neither in the food scope or global scope to JavaScript interprets b equals zero as window dot b equals zero.

So there you go. Cheeses may know little

seems dangerous, little funky. That’s actually a, you know, a good deal to know too, if you are working with multiple variables inside a function. And if you aren’t paying attention to like your hoisting, or things like that, or where in your code variables are being declared, you can both overwrite variables that you don’t expect to, or you can create variables that you don’t expect to especially if you’re trying to work inside of something like a private function or something like that of a class. You don’t you know, you may not want to expose some of that stuff. So

yeah. Wow. Okay. All right. So that’s a good question arrays called array length property array length property. And it says, what is the value of close brackets zero. So

that’s index zero, which is the first item in an array,

when we have const, clothes equals brackets, and then a string jacket, comma, and then a string t shirt, close bracket, semicolon, and then quotes dot length equals zero. And now they want to know what close the zero is.

So let’s, let’s go the same the same route here, right? So close zero. Can be could be jacket. Could be T shirt. Could be neither. could be both.

Could be undefined. So that lets it be it could be not a number. It could be a number. Why not? Why not? Oh, that’s,

that’s fair. You’re alright. It could also be not a number. So let’s think about closed dot length. Right? So we have a property of an array closed dot length. Is that property? immutable?

Right. Yeah. So is closed dot length. Like, basically, I get her only? Or is it like a full like, so

yeah, so if we say closed dot length equals zero? Is that changing the property if changing and

really want it to be read only? Yeah, I’m afraid it’s not. But I really want it to be. I can never be disappointed.

So you you look up at my bubble sheet, and you see me filling in the bubble for clothes, index zero is undefined.

Wow. And trust me. Do you not? Um, trusted me last time? Yeah.

Do you want my explanation for why I think it’s undefined?

Well, I mean, is your explanation that you can in fact set like the length property?

Yeah, let’s let’s do that backwards. Let’s not go with my rationale. You can’t ask me during the test. You see my answer? And right. Why would you say if you agree, why would I? How would you get to undefined? Right. I would defy that answer to yourself.

If I if I was presuming that you were correct, in my assumption is that dot length does allow read right? Even though I think that is just ridiculous.

And so what would be happening in that situation? If you set it to zero?

Then see, oh, my assumptions are are based on, like, JavaScript behaving like a normal programming language. You know, like, I’m thinking like, you know, pointers and memory allocation and stuff. And if you if you’re saying that like this thing has zero elements, then it’s like, you know, resetting the, the width of the array. Um,

is that what happens? Yes. Setting the length to zero truncates the array to that length ship powers like a lot of the internet dude. Similar to like, substring something. Now you if you want to have a weird thing, now, I’m saying that that’s my understanding of it. I have not scrolled down to the answer yet. But the reason for this, and the thing that will and why this stands out to me is because dot length is immutable in different circumstances.

So for instance, while you can set the length of an array to zero, and as a result, it will truncate it down. If you had, let’s say it was a string, let’s say clothes equals jacket,

clothes dot length would be five. And if I set clothes dot length to zero, clothes still equals jacket. It doesn’t truncate strings. Right. Why? Why did they let you change the length of an array via that property?

That is not a question that I can answer, dear sir, all I can tell you is that is how it works. Huh? So and I’m scrolling? Yes. And so we are correct. Closed, zeros undefined because close the close array has been emptied. Reducing what what they say here. It from ACMA is reducing the value of the length property as the side effect of deleting own array elements whose array index is between the old and new length values. Wow. And that’s that is straight out of ACMA. 2015. So

yeah, wild man.

That was that was a little interesting. I think it’s especially weird that it truncates on arrays, but not on strings. Yeah, the difference in behavior. There’s is kind of weird, and I’m sure there’s a reason for it. But

that is that is the case.

All right. Are you ready to keep going? Are you already heard us? Yes.

No, I’m okay. Okay.

Keep with us.

I’m glad you’re sitting in front of me. I’ll just say that gets

weird or it gets weird. What is the content of numbers array? So this is called the eagle eye test. And I have no clue why. So okay, we have a constant length equals four. So variable length equals four, we have a constant numbers equals array.

Okay, we have a for loop.

Ver i equals zero. And then while i is less than the length, increment, or iterate i plus plus, and then what it is, is numbers dot push, i plus one.

Okay, so I think from the last time we did this, you clarified to me that the const, like, declaration keyword, I’m not sure I’ll be able to call that but it just means that you can’t assign something to the variable that’s named. But you can mutate the value or back the fields within Yes,

that is an excellent observation. And I’m, I’m glad that it stuck with you. So you can you can learn, I can be taught. Yeah. So the fact that numbers is set to an empty array as a constant only means it cannot be recast. You can manipulate the array.

Right? So then the for loop looks like it’s pretty standard. And it starts at zero, and but we’re appending we’re incrementing it by one when we push it, so I’m gonna guess that it is 1234

hour in an array, you’re gonna be so mad. Ah, this one’s dirty. And the listeners you don’t know what the problem is. I just spotted it. And now I understand why it’s called the eagle eye test. So we read off the code. Yeah. Let me look at that. Take a second there. So the the return of numbers is going to be an empty array. That’s my guess. Okay? Why? Why would I guess it’s going to be an empty array? This is dirty this is this is downright mean this this should not even be like, Uh oh, simple that tricky interview?

I see I see it. There’s a semi there’s a semicolon after the four. Yep.

Yeah. Oh, for loop has a malformed expression. So in after the parentheses, but before your curly brace, they stuck a semicolon in there, which terminates? The D. So the following code never runs. That’s mean. So oh,

I mean, no, it’s fair. Like I mean, oh, JavaScript or even php. I’m wrong. I’m wrong.

The answer is an array with the laundry of five.

Oh, wait,

it’s uh, yeah. Can you figure out why without?

Because we, if it doesn’t, doesn’t I fall out of scope after the for loop is ended? You would think that wouldn’t Yeah.

What did we just go over in that if statement in the first question?

Yeah, like it presumes it, but it’s being declared as a VAR though. So it’s the Curtis as a local variable to that scope, isn’t it? No.

No, no, I mean, by default, yes. Let me really rephrase that. Yes, it is being declared with var, but var, that that’s the difference between var and let

o var is a global variable if you let i

equal zero, instead of var i equals zero. Yes. So yeah, so the I or the I’m sorry, the Yeah, the i ends up being scoped to the window. And our declares it globally. So we, but we were correct in that nothing happens on the push in that for loop because of that semicolon. But what does happen is the four executes. So the four fires, but all that’s happening is it’s just looping through I until I was four, and then it quits. Right, but now I equals four at the window scope.

And the curly brackets basically create the equivalent of just an anonymous function that runs that says numbers dot push for plus one.

Alright, so if you did, if you did either for i equals zero, i less than like, etc. Or for let equals let let i equals zero, i is less than like, or for var i equals 02 of those three cases is going to be inferred to be a global right?

I think to what you just said, yes.

Oh, wow.

But that’s that’s the that’s why we like using let so much. I guess so. Because let is, lets you control that scoping a lot better. And I actually will go back, I said numbers would be Oh, no, yeah, numbers would still I still would have said numbers should have been empty. I would have said the follow up and the reason why it was empty was because that semicolon would throw like an exception or something. So like, it’s not just ignoring it or whatever.

Like it would actively throw an error, but it doesn’t it does run and it results in four plus one. So an array length one with index zero being five, that one Okay, so that’s the first one that goddess

cheese. I like in the comment. He says, I asked the interviewer it was from a job interview. It’s very this came up for him. And he says as the Interviewer What is the reason behind dirty tricks like this and the interviewer replied, because we need people that have good attention to detail. Oh, that’s terrible. Well,

you know what, that’s funny that you saw that and just read it because what was what did I just say about like this? This is not an interview quit like this is a bad interview question. Because it’s shitty. It is it is a trick. It is absolutely a trick. Yeah, I don’t like that. Good on him for not going through with that company. Because

I think if you’re gonna like, interview like you, you got like, basically one shot to get it right. But in the real world, like you would run this and it’d be like, Oh, that’s not working. Why is it not working? And then you look at it like Oh, semicolon. Yeah. And it would and then you fix it.

It would take you five minutes to catch that navy. Take care of it.

Yeah.

Yeah. Okay. Well, I hate the name of the next one already. It’s called automatic semicolon insertion. immediately realize me look at what this code is doing and be suspicious. Right? Right. So we have a function array from value, and it takes an attribute item, or I’m sorry, it takes an argument item.

And then it does return and then there’s a carriage return. And then brackets item brackets, semicolon. From the title, I’m going to infer that because return an item on separate lines, that there is a, an inferred or presumed semicolon on the return statement. And maybe it’s undefined.

Actually. Yeah, I think I agree with you. I think the return is undefined for that. Yeah, for that exactly. I think at the end of the day, because I know I’ve ran into this with with JavaScript and stuff when I’m writing, it’s like, I don’t have to put semicolons in the end of the line is a presumed semicolon on those things, unless you like are doing nested if you can do if statements and stuff that are like single expression type deals.

But yeah, I think what’s happening here, because as soon as the return fires, then it doesn’t ever even do anything with the item array that gets returned. And the answer is undefined. Yeah, yes. For exactly what we said. So it automatically interpolates a semicolon after the return. That means the function is done. The fact that they put the item argument inside an array is irrelevant, does nothing and

is effectively thrown out. I never would have gotten that one if it wasn’t for the title.

Yeah, the title definitely was a clue on that one. Yeah. Especially because it was short. That was a pretty short sample. So it’s not like there was a lot of places to look, the indenting also makes it look funny the way they did it. Okay. The classic question, a tricky closure. Now, we’ve talked about closures before. Yeah. And about the availability of variables after something has ran. Right. So we have a let AI. So this time, what do we know about AI?

Okay, so AI is defined as like, scope limited, right? Because it’s let, so it’s limited to only the scope of whatever this block is executing them. Yes. And then you have a force statement, and it’s i equals zero is less than three i plus plus. And within the block for that, it does console log equals. And then I believe this is the new syntax for an anonymous function, right?

Yes, yeah. That is that returns a value, or does in this case, the console dot log is like an implicit return.

Yeah, so it’s constant log equals mt Prinze? Hash rocket, and then curly braces, console dot log, I close braces, and then set timeout logger, comma 100. G Jesus. Okay.

I, I equals zero, I three i plus plus. So the obvious answer is that would log 123. Right.

That’s what that’s what like they want you to think, yeah, rather 012. That’s what the man wants you to think my goal? Well, yeah, so we can assume that it’s not that. Yeah. I kind of wonder if, like, you know, how within CSS like there’s different stacking indices for Z index. Like if you do a regular static content versus floating something versus position? Absolutely. Yeah. I kind of wonder if the, the anonymous function, doing a closure here creates a different, like a different scope.

And because it’s is defined with a let statement. That means that it’s not available in the closure scope. Yeah, I’m really pulling from thin air here. No, no, you’re actually I think I’m probably right, though.

I think you’re on the right track there. So what what do you think the answer is? Let’s start with that.

Okay. That’s a good question. Um, I’m gonna say, maybe undefined three times, or whatever console dot log undefined would be. Okay.

Yeah, so I mean that that would be undefined is what you get in that situation. You do you sneak a look over my shoulder. Are you concerned that maybe you don’t fully get what’s out? happening? Are you going to

stick with that answer? Um, what was what was your answer? My

answer

is 333. Okay, so I just looked at the actual answer while you’re talking. I’m still gonna stick with mine because I hate your answer. Am

I right? So I must be right. Who

are you are Chris? Okay, wait, you gotta tell me why though, man. Okay, this is my Oh, no,

no, no, it’s not. It’s one of those things. Like, it’s weird. But it does make sense. Because we’re talking about closures, right? And how, you know, the availability of variables outside of their function calls and things like that. So think about what’s happening. First, we let AI. So the AI variable is declared inside of whatever block this is. Maybe it’s a window, maybe it’s some other function? We don’t know. But we know that it is declared before the for loop. So that means it’s available outside of the for loop.

What is the for loop? Doing? Um, this has got me thinking about like, is there like a, like a process stack? Or something? Kind of? Yes. Yeah, it’s a like a, like a different thread for closure. So think of it like this. Like is the for I guess what I’m asking is like, is the for loop completely resolving? Before? The anonymous functions? Actually? Yes,

exactly. Okay. And the reason for that is because the for loop completes with a set timeout. And so it’s saying, hey, in 100 milliseconds, run log log is the flow rate log is the thing that’s available to you outside because it’s been allocated by the for loop. But when the for loop originally runs, it’s three times it’s creating cost log, it’s not executing what’s in there, it’s creating something you can reference. But that for loop, it does that three times to no consequence, except that I get incremented, then the set timeouts, fire 123.

But each time it’s outside of the for loop, that that set timeout is running. And as a result, I because I is scoped above four, it set to three, because just like the other loop that we looked at, where we ended up with five, right, because that four, you end up with the last value. And so you’re acting on the last value. That’s what’s happening here, you’re acting on three. So okay, so it’s just a case of that log becomes a closure that you can reference outside of that scope, because the for loop knew what it was.

So you still have the memory reference there that you can call to get only inside that, like you couldn’t do that outside the for loop. If you set that if you put that set timeout outside your for loop, then it wouldn’t work because it has no idea what log is.

Right. Right. Yeah, I guess Yeah.

You may not like it, but I mean, closures are no i closers are nasty anyway, like,

I mean, like, I get it, and I think at least I’m, I’m not mad that I got it wrong. Like it seems like, Okay, this. If I understood closures better, I would have seen this as my own fault. Um, so it’s fair.

Yeah, no, and this is actually a pretty nice and lightweight way of demonstrating how a closure works like it’s not very complex.

So if you did set timeout log comma, like one, then you might get into like a race condition, right? Because the the console logs could be happening before or during the execution of the form that’s possible. At any rate, that’s that. Okay. Last two. We’re in the homestretch.

Floating Point math. Oh, wait, we know this one.

Yeah, that’s, it’s gonna be false. Because it’s like, point 300. Yeah, yeah.

So let’s we’ll walk through it anyway, just to see what you remember from the first episode. So point one plus point two equals equals equals point three. And so yeah, that’s gonna be false. So yeah, it’s, well, yeah, it is a Boolean return there. So yeah, it’s false. So why is it false?

Because point one plus point two is floating point math. And that comes out to being like, point three with a bunch of zeros and then a four.

Yeah. Yeah. So this comes back to this notion that We were doing math with lightning, we’ve trapped inside a bit of sand that we have compressed. And so there are some rounding issues. Fun fact on this on this quiz though, he links to a site. I love it, it’s 0.3000000, a bunch of zeros for.com. I’ll link in the show notes or something. But they’re, they made a site that is literally the result of that example and share it to explain why that happens. So that’s kind of neat, actually,

Oh, interesting. In base two in binary, the only prime factor is two. So you can only cleanly Express fractions whose denominator has only two as a prime factor. So one over two, one over four, one over eight will be expressed, expressed cleanly as decimals, or 1/5, or 1/10 of the repeating decimals. So point one to point to 1/10 and 1/5. While while Queen decimals in a base 10 system are repeating decimals in base two.

When you perform math on these repeating decimals, you end up with leftovers just carry over you convert computers binary numbers into a human readable base 10 representation.

Well, that’s a that’s a dense explanation. That basically means Hey, we have math being done by lightning inside a piece of silicone. No, it is interesting, though, this is a very computer science problem. And I think we talked about that last time that like this is not unique to JavaScript. This is a right language problem in general. And it’s it’s pretty interesting to think that in 2022, we still have not like, solved the floating point problem, you know, because of the way we store data.

That’s it’s gonna come back and bite us at some point, I’m sure right. Like, it’s gonna be like a new y2k thing. Once we get past the end of C time when the when the Unix epoch. And then the next thing will be like getting bitten by floating point.

It’ll be something for sure. And it goes back to this idea of like, how we do math with money, right? Like we convert everything to cents first. Then do all that and convert it back to make sure we don’t get the Superman three rounding warm air or office space if you prefer that one. Well, crap that. That’s short circuiting us to the last question. And though we’re coming up on time here, so Oh, and we get a hoisting hoisting in? Great.

Okay. What happens if you access my var and my constant for declaration? So if you have my var, and then my const, and then later on var, my var equals string value, and const? My constant equals 3.14 as a floating point number. All right, because it’s called hoisting. I’m going to assume that Well, I mean, if you just type the numbers, I guess it would it would echo back the result.

Yeah, in this case, the thing of it like you’re using it in the in a terminal or it’s got console log wrapped around it.

Sure. So I’m gonna guess that you’ll see value and then 3.14 I don’t think you should, though, I think that it should show you undefined for both. That’s what I think should happen.

I think this one’s trickier than they’re letting on.

I’m actually going to go

with both of them being undefined. Okay, which feels wrong because that feels like the obvious answer. But my reasoning is, and this is where let’s let’s see if I can humiliate myself by totally describing hoisting. hoisting works with like functions and things like that, but not with a variable declaration. So if the variable like if var my var is not set before you try to call my var, then it comes back and define it I’m going to assume that the same is from Mount.

Okay, now all all reverse. I think my var is undefined. I think my const is 3.14. I think the constant gets hoisted, because it’s a constant, but the variable doesn’t. Because it’s using the VAR declaration and is after you try to call the variable.

That’s what I’m thinking.

Does that sound like I know what I’m talking about? Because I definitely don’t this time, so whether or not trust me that

sounds dubious? I think I’ll take one for the team here. I’m gonna say undefined for fine for both. That’s that’s what I want it to be. So I’m going to say that that’s what the turrets

Oh no. We both wrote I don’t know, but they just threw a phrase at me I don’t recognize. So they say hoisting is

the is the phrase and important concepts. Temporal denza portal deadzones. Why it’s

never heard of a temporal dead zone. Okay, okay, so there but here’s the thing, there is a difference between let and const and VAR in all of this. So they have a little kind of graphic here.

Whoa, wait, so it’s half right wait.

So accessing my var before declaration evaluates to undefined, a hoisted var variable before its initialization has an undefined value. So it exists, but it isn’t set yet. So yes, so we were both right with my var. However, accessing my const before the declaration line throws a reference error const variables are in a temporal deadzone until the declaration line.

Interesting. So,

so I was, we were both like half right half wrong. Yeah, we’re half right. On the undefined I was half right that the const behaves differently. And that var does not the value of VaR does not get hoisted up. Right. Wow. Temporal dead zone. That’s interesting. I’ve not seems like some bullshit off to look that up and see if that’s a new thing out there. Or what?

There is a link here that will share to that from Dimitris own stuff that gets into variable hoisting, and all of the sort of stuff that goes along with that, because that’s another thing that similar to like, closures can be a little difficult to grasp, but it’s very good to learn for a whole lot of reasons.

Right? Okay.

That wasn’t that bad.

No, those were actually a couple tricky. I mean, they were dirty, but I’ll give you that. These record,

there was one that was dirty, the semicolon one was dirty. The rest of them were what they were.

I don’t know. I think the other one was a little dirty, too. But the the automatic semicolon and zero Yeah, that one. I wouldn’t have guessed that because JavaScript is so loosey goosey about whitespace normal. Yeah.

Yeah, and, and it’s gotten weirder now that we have, you know, ESX and all this and Typescript and all of that, where you can go without semicolons I am a pro semicolon person. I just am like, that’s just kind of the way that I learned stuff. And, and I like the sort of finality it gives to your statements when you’re scanning them. So what what was your what was the hardest question here as far as like, something that seemed fair to you? Like,

the tricky closure was pretty close. Yeah, that was that was a legitimately good like, that would be if I had to be give be given a question on an interview. That was challenging. That would be good. Yeah, give, it’s a deck because that one, that one felt like a puzzle, it didn’t feel like a bullshit question. You know,

I’ll say that I kind of like that very first question. Actually, when it comes to the, let A equals B equals zero, to 100. Just because of like, it helps you understand the difference between let and ver and, and what happens when you reference a variable like B that hasn’t been defined yet but inside an expression and so what happens there like the the behavior of those variables, I think is another good I think I think I liked that. That was a nice

yeah, I mean, yeah, that was okay, that wasn’t my least favorite one on there. Yeah,

I really enjoyed this is the last episode of this run we’re gonna do so if you’re getting tired of hearing us go through these kinds of things. Don’t fret we will be changing pace in in the next episode. I enjoyed this simply because I like the exercise of it. I think there’s a lot of value in sitting down and like whatever language in go look up post I

yeah, I would agree with that. I mean, I clearly learned something like the I knew the one thing about the what was the thing with a concentrate where I was with the with the array, even though it ended up not mattering because it was a bullshit question,

but

I remembered that though,

you know what, I think it really does too. Because I have an example of this that like hit me a few years back was the first time I found out about JavaScript short circuiting. What so there’s a way of doing things like you can use the, the logical and or the logical or are graders to put up a statement, that will be one single line. And it will do things. So you could say something like if you said, you know, let X equal one. And then you could do something like console dot log. Whatever the variable name I just said was number or x x let console log, you could say, x.

Or, or nothing,

like the word nothing, or something. And what it would do is, say, if x is set, then I’m going to show that if it isn’t, then I’m going to say nothing. And so it’s just a way or like a ternary. Operator, right? You’ve got turn Aires and Ruby

Oh, okay, what you’re calling short circuiting. We call it depending on how you want to use it. It’s either like, memorizing, or it’s like, false.

Yeah. And I think there was a question that was like this in the Ruby episode that you gave about, like true and false, you know, so what Yeah, but like to look at like a lot of code written with things like short circuits, or ternary. Operators, a ternary operator is just basically a way of doing an if else then all in one simple line without a bunch of statements, and brackets and all of that. Right.

So like these, the way you start learning about those kinds of tricks, at least the way I learned about those kinds of tricks is to take things like this little quiz and start testing myself and see, what do I get right? What do I get wrong? What do I need to look more at? And then eventually, you hit one of those? It’s like, it’s gonna throw something at you, you don’t know. And that’s how I found out about the short circuiting and what how, what it was called, I didn’t even know it was the thing.

But I saw some code like that. And I’m like, what? Trying to say, what is this thing doing here? When it’s, you know, how does it know that it should run this function based on what the statement is, and it’s just a case of the way, you know, flow through happens on those on those expressions that it’s like, it’s basically just saying, if the left hand is true, then do the right hand, or if the left hand is false, then do the right hand. And so you take what is three lines of code and make it one line.

So it’s efficiency, it’s, you know, these are the things and these start to stand out, then when you go do your code interviews, or developer interviews at other companies, when you can demonstrate that kind of efficiency and the word that I like to use now, idioms, right, that’s an idiom of the language that shows that you grasp more advanced concepts than a simple if else, you know, follow through if if else, I think that

for elsif. I think that learning, learning language idioms, I think is really important, regardless of what language you’re doing. I know that at a previous job, I was trying to update some React code. And I like really like it was ugly. I mean, more or less worked, but it was very ugly. And I was asking one of my coworkers for a review. And he said like, he audibly laughed because my JavaScript was dripping with Ruby. And I’ve definitely seen the same thing when like JavaScript programmers come over to Ruby for the first time.

There’s all these like, idiomatic things that they do, or like, or Java programmers, or PHP programmers, like everyone has their own little like, habits and idioms that they learned from their like. I don’t like native language, but like primary language, or like, former primary. So like, it’s i It’s sometimes it’s fun to play, like spot the idiom, and look at like, how they’re writing and something in the language you do and being like, huh, I think you’re coming from a PHP background, am I right?

And I think it makes a difference, just like what we’ve done these last three episodes. You know, knowing some of the idioms the way I do the while I didn’t necessarily use the right words and stuff in some of the Ruby stuff. Like I was able to kind of suss out some of those behaviors and the behaviors were a little different some cases or whatnot like it you’ll become surprised at how not different some of this stuff actually is or how at least easy it is. Once you realize what it is they’re doing.

You may not like it you may it may bug the hell out of you. But it does get easy to pick up on real fast.

I my current job I’m I am working on an app that involves some go Lang stuff and go is an interesting language but I haven’t had any training on it at all. Everything I’ve I’ve learned from it I’ve picked up from my coworker And just like studying it myself, and I can I can get through it, like I can read something and follow a path and get a rough idea of like, where something would need to be changed.

But the thing is, the thing that I found is like, you can, when you have enough experience as a programmer, you can look at any kind of program and be like, okay, more or less can Yeah, so I mean, maybe maybe not going to like assembler or something. But, you know, like, if it’s any kind of like standard flow program, you can pretty much but writing it writing it though. That’s, that’s where you like, you just have to learn the idioms.

And I think that’s really important. I think that, like 80. idioms are what they are, because they play to the strengths of the language. And it’s based, it’s like an emergent property from many, many people writing in a

very nice way. And so actually, yeah, very complimentary of you, given how much you don’t like JavaScript. So I think that’s a good note to end. On a run,

I really, I hate being the guy that’s like, Oh, your language sucks. I know that. It’s just that, like, I’m used to a different one. And I apologize to all of our listeners that are like big fans of JavaScript. It doesn’t sit well with me personally. And I know that I say mean things about it, but that’s me like immaturely venting my frustration. So I am sorry.

And with that thought, we will take a quick break and be out of here. I hope you’ve enjoyed this journey with us, as we embarrassed ourselves a few times, probably describe some stuff wrong, but help expose you to the thought process that goes behind problem solving and learning languages and all of that. And I think that is a worthwhile experience and use of time for what it’s worth. And now I know a little bit more Ruby to

gratulations you know, a little more JavaScript,

you remember how some with the floating point

I, I will say I legitimately learned stuff, ti l and I guess last week I O as well. Yeah, so you can come and talk to us about all your favorite programming idioms at Bass box and sweaters.com/drunken UX or instagrams.com/drunken UX podcast, and come and talk with us. And really tell us tell me how much I’ve hurt your feelings with all my JavaScript bashing ease? I’m so sorry. checking you out, check checking to x.com/discord. And please come and help us get transcripts made up. Drunk into x.com/support.

Yes. Okay. Or just patreon.com/because? Either either one works. Yeah, yeah, yeah. And

we’ve got a new change of pace coming up. I assure you on on that this has been fun. But it’s time to get back to other stuff. I hope you pay attention to the WordPress news. And what’s happy and exciting going on there. We’ve mentioned both Aaron and I have open positions at our company for web developers. Oh, yeah. If anybody wants to come and join us or look into what we’re doing, links are in the show notes to all of that. And you can certainly reach out and ask us any questions. We will be happy to help and please apply. We’d love to

actually, I know. I know a few other places that are also hiring. So if you are looking for work, please reach out. Yes. I like in addition to my company, if that isn’t

that is one of those high like networking sort of values, like getting to know people. Yeah, we always know. Somebody, especially right now right now is a good developer designer market. So there’s a lot out there and that always helps having somebody who can, you know, point you in a direction?

Definitely. With that,

I guess. All I can say is learn your idioms go. Take some tests, figure out what you can do. And you know what makes sense

we keep keep your languages close with your idioms closer.

Oh, I guess I’ll let you do that.

I got me five seasons and I got finally

folks, bye bye.

Exit mobile version