Finals have arrived here at Drunken UX, and it’s time to take the test. Aaron is in the hot seat as we look at questions related to tricky JavaScript behavior. It’s a great way to dive into the matter of weird code behaviors and the idioms that cause it. In upcoming episodes, we’ll do the same with Ruby, and another installment with JavaScript.

Followup Resources


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. Hello, everybody. This is the drunken UX podcast. I am your host, Michael Fienen. And this is episode number 114. For may number the nine. How are y’all doing?

Felice Libby de mio? Michael,

who the hell is that? That can’t possibly be my other other hosts,

I’m your other other host. Hello, I’m Aaron. Well, the other other hosts,

I’ll be damned other other hosts. You’re gonna be so excited because we are going to be taking a test tonight. Yes, we’re gonna see just how good you are at the scripts of Java.

Oh, I am betting I’m betting I fail. but barely.

It’s going to be bad. Yeah, it is absolutely going to be bad. And I am going to keep score. So we went out and found just for anybody who’s interested, because that’s what this episode is gonna be about. We found a couple little sites that had some JavaScript quiz questions. And these are partly designed as like, Hey, these are the kind of questions you might get asked in an interview. The reality is, yeah, I don’t think anybody’s ever gonna ask you this. Technically, no,

these are questions designed there like the gotcha trivia question. Yeah, they

are. There are some old gotchas. A plane crashes

on like the river between Kansas and Missouri. Where do you bury the survivors? Like it’s that kind of question. Yeah.

Where do you bury? Survived?

It depends on Oh, they’re

survivors. You don’t bury them here? I got it. I thought it was gonna be one of these questions about like, you know, how many life vests do you need or something? And it’s like, well, it’s a river, not the ocean. So the rivers can be deep out anyway. So yeah, these are JavaScript quick questions. And so I like it, because it’s gonna give us a chance to actually talk about why some of these behaviors are though. And so we’re gonna explain, we’re not just going to take the quiz, we’ll explain why are these things? I think that’s where the real value will come from in this.

I know that I bust on JavaScript a lot. And like, because of this, like, why, why? Why are you the way that you,

you can 100% make the same kind of quiz for PHP? Or Python? Like they all have these kind of quirks?

Oh, I don’t know if you can see them, these kinds of quirks. Oh, they do that? It has has some idiosyncrasies,

challenge accepted. Oh, okay. Challenge. So we’re going to do this for this episode on JavaScript. You should find some Ruby examples to do to me. All right off the DAG. Go dig and go do some Googling. I’m sure I will. I’ll bet yeah, there’s a site just like this Ruby. Before that, let’s dive into what is on top of this evening with my friend and I. The reason why he is taking the quiz and not me is because I’m drinking Ardbeg Corty dragon. I may be dead by the end of the show.

Oh, yeah, that mean that goes on saying this.

This is bottled at 56% it is effectively cask strength, although I don’t think it’s like actually marketed as cask strength, but it’s strong. You’ve probably heard me say before I don’t really like Ardbeg a lot because I don’t like Isla scotches that much. Which is has sort of an asterisk next to it and I don’t like our big tin very much. I got into the Ardbeg and no, which is going to be coming up on a future episode. I had it at a tasting event and I really liked it. And I went oh, Martin Vegas has some interesting things.

And my friendly local neighborhood liquor store had this bottle of Corey wreckin at it. And I’m like interesting. I don’t know anything about this. So I said screw it and I bought a bottle. This Scotch is like a nuclear weapon going off in your mouth. It will and I am not kidding you. It will numb your tongue. You have two glasses of this and you can’t taste anything else. Like it is that strong. But it is so good. It doesn’t lean as hard into the that iodine flavour and those phenols that come out of like the normal Ardbeg 10 Or like a frog.

Sure it hits hard on like uncracked peppers, and like wet leather and steak. It’s got like this thick meaty quality to it like a smoked brisket type of flavor to it. It’s laced with like a little bit of citrus Not much, just a little bit. It hits you pretty hard on the nose but isn’t like it doesn’t attack you. It’s just strong. And it really it’s the kind of thing like I’ll drink a glass or two of it. And that’s all you need. But boy does it like it gives you a lot to chew on quite literally. I’ve got the Glenmorangie nectar adore nectar door. No, no, it’s door to door. I don’t know

Dior. Yeah, it’s D apostrophe or is that is that like Scotch saying it a third D apostrophe or

it’s Yeah, I think it’s is it slang for gold? I think I don’t know. Okay. Um, think?

Well, anyways, it’s, it’s very good. I think you’ve had it on the show before I haven’t.

Yeah. Yeah. That is my favorite Glenmorangie. Yeah,

it’s got a bunch of

great flavors. It’s it’s not to like

excessive like, in all the ways that your Scotch this evening is very potent. Mine is not. Yeah, it’s just a nice all around. Good time.

I was right, it is gold. By the way. Gold nectar. That’s what it means. So good. Margie, nectar, Dior, Dora. Or however you want to say that it’s finished in South turn casks. So it gets this very, very high sweet. It’s a very light like a creme brulee, a crispy sweetness on a whole high note.

I’m holding my glass up to the microphone so the audience can smell it.

Oh, yeah. Yeah, that’s actually I didn’t think about doing that with mine here. Everybody. here’s the here’s the quarterback and just take take a good whiff of that. Right. Like a deep way. I wish we could figure out how to let him do a tasting through the microphone, though. That’s, I didn’t pay for that USB connection, though. Yeah, I’m

running through two different audio interfaces. So I’d probably lose it somewhere. Yeah, yeah.

The DA converter? Probably. Yeah.

Yeah, I get it. Plus, it’s running through a cloud lifter. That just makes it more alcoholic.

Yeah. Oh, that’s true. Yeah, it would like distill it further. Well, you should definitely shouldn’t do that. Then you end up with like, 80%.

Is this like the infinite chocolate thing? Can we make infinite Scotch by pouring it through a microphone?

Like the Banach Tarski talks of scotch

and like, do it, you know, just run it through an amplifier and get more scotch? Is that how that works?

That would be great.

Well, here goes last number two for me, by the way. You’re gonna be toasted by the end of this, it’s gonna be bad. Okay, so it’s quiz day, you have arrived to class unprepared. You forgot there was a test you didn’t study. You don’t even have your pencil sharpened young man.

You’re describing like school to me.

So this is

for for the course for

the friendly listeners at home. I’m sharing my screen with Aaron so that he can see these, these questions, I will describe them for you all, to the best of my ability. And we will see what he has to say about things and go from there. So we’re gonna start, I’m going to bounce, we’ve got two different examples of these quizzes, I’m just going to kind of bounce between them because they, they’re formatted pretty differently. And so just to break up the back and forth, we’ll do the two different kinds here. And so we’re starting with JavaScript quiz.

This is a site and we’ll have a link in the show notes made by Marco Denic and Oliver jumpers out of I believe Austria, if my memory is correct on that. I mean, that could be out anywhere. I don’t know. But Marco is out of Austria for sure. All of her I don’t know. So all of her shout out to you, though. So these two gentlemen made this site. And it’s just got a very nice, simple multiple choice thing. I’m not going to read the multiple choice answers, even though Aaron can use them. And you just as I’ll read them, yeah, I’ll read them. Okay.

And as I read the question, it’s your job to see if you agree with Aaron or don’t agree with Aaron and then we’ll go over the what and why. So the first question is, can you guess what will be the output of the code below and the code is very simple. It’s a console log statement. That just says, type of na n Yeah, First off, what is in a N? N A M means not a number not a number. Okay.

Um, and that type of is

that’s like querying what the type of the argument is.

The options that I have to pick from are n a n, number, no. And undefined. And the question is, what do I? Well, there’s two questions here. The first one is, what do I think the type of na n is? And then the second question is, what do I think JavaScript thinks the type of NASM is? So

let’s get let me help. Everybody think through this. Right? What does type of do

if you had like a quote unquote, string, then it would be string. If you had the number five by itself, not in quotes, it would say number. I presume if you had an array, it would say array, but I don’t know that for certain.

I’m gonna and the word you’re looking for as primitive, right? Like, it returns? What what is the expression of this primitive? Yeah, yeah, that would be accurate. I’m gonna say,

I want to either say undefined or no.

Let’s go with no, gonna go. No, no, it is a number. It is a number.

Oh, fuck you, man. JavaScript, no, like any and literally means not a number. But it returns it’s the type of number like, oh,

the reason for this is a little complex and goes back to some stuff with floating point standards. The easy answer is that not a number is saying, hey, this thing is not a number. But because you expected it to be in number. The primitive that is assigned to it is one. So the expression of na n is sort of an abstraction of a number, even though it’s three letters. And even though type of returns a string, that’s the other thing you always know type of returns a string expression every time so it’s not literally returning a number all returning.

You know what? You know what this feels like? Since since today is well, when recording it, it’s technically May the fifth, which is the Star Wars thing, right? May the fifth be with you? This feels like when fans of Star Wars talk about the whole parsecs thing from episode four, when Harry Han Solo was talking with Ben Kenobi, and he’s saying how he did the Kessel Run and like, like so many parsecs

and then trying to say like, like, explain it backwards.

Like like, oh, yeah, he knew what he was talking about. He was just bullshitting or something like now. We’re gonna all pretend that NPN is actually number for this reason. But I think that really, it’s just like, silly JavaScript behavior. And we’re trying to justify it now. Okay, well,

let’s do another one. This one is, do you know what this will output from this code? And now, it’s console dot log, type of type of one. That’s right, literally, to type of the type of one.

But it’s not just type of type of one. It’s type of space type of space one. Yes. So you already have an ambiguous argument. Because JavaScript like, like, Ruby doesn’t require you to use parentheses for argument lists. You can if it makes it less ambiguous. But JavaScript you’re supposed to. So it’s weird to me, that you wouldn’t have that here.

Do you know why? You know why you don’t those parentheses with type of? No, it’s because technically type of is an operator. It’s not a function?

Of course it is.

It’s yeah, I mean, that’s, that’s why, yeah, of course it is.

Okay, so I’m evaluating this right to left. And first type of one. I’m zooming in right and left. I’m like, when you’re because I’m imagining even though we don’t technically have parentheses in there. I’m imagining that it works similar to a function where it’ll evaluate

like, okay, kind of like, peds Miss thing, right?

Yeah, yeah. So like you have you have type of you have the first type of is going to ask Hey, what’s what is your, what do you evaluate to so I can get your type. And the cycle is gonna say like, I don’t know, hold on, because it as the query, its arguments. And then we just keep going, just turtles all the way down. So, because of that, I’m gonna go right to left, in this case, I’m kind of like you’re stacking, you’re making your set, you’re pushing things onto the stack, and then popping them off once you get to the end.

So lastin, first out, type of going right to left. So type of one. I am going to give JavaScript a bone here and assume it will return number and not some weird shit. So number is technically like a class name. And I don’t think that it would return as a string.

It’s a might primitive name. Yes, yes. I’m just reinforcing what we used from the first question. So sure, sure. So yes, yeah, it would return a primitive name. We’ve we’ve assessed that. Yeah.

The question is, does type of primitive name return? Does it evaluate it to a string? Or does it evaluate in different way? I don’t know what different ways it would be. I’m gonna say that it evaluates it as a string. I’m gonna guess string

strings. Is that your final answer? Yes. Man, we can we do lifelines for the Ruby episode? A guess? You are correct, sir. Michael, future Michael insert some applause here. Yes. So you’re you’re right. So type of one is going to return number, but it’s returning literally the string number. Yeah. I realize I gave you a hint to that when we were discussing the first question that it returns a string representation of the primitive name. So yeah, type of one comes back as number.

And then type of, quote number quote is string. So that is entirely correct. Gray, cod, this one is is fun. So console dot log, all of these are console dot log for what it’s worth, you’re just trying to determine what the output of the expression is. So so this is just an expression. Right? And it’s a question of three greater than to greater than one?

Yeah, three space greater than space two space greater than space one.

And is it true or false? Right. Okay.

So similar to last time, I’m evaluating right to left, two is greater than one, which is true. So the question is, is three greater than true?

And I believe that’s going to be false. And false? Yeah, false. Yeah. Except I do think you did it backwards. But you got to the right. That the left to right. So in this case, it actually evaluates. Yeah, left to right, you You went right to left again. Okay. But because it’s evaluation, right, the left side is evaluated first. So three greater than two is true. But true is not greater than one. Because true is not a number.

I guess the difference is that in the case of this with going left to right, you have all of the information necessary for the greater than operator to evaluate. So it can just resolve. Whereas with type of type of the first type of can it fully evaluate the second type of unless it called it an operator, I guess? I don’t know.

So there is a secondary thing going on here, too, that’s worth pointing out, which is because the greater than operator expects a number, it does try to cast What is there to a number. So strictly speaking, it’s not evaluating true, greater than one. It’s evaluating one greater than one, which is all it’s still false. Like that’s, that’s still a false statement.

All I was, I was, I guess, right? But technically wrong.

Yeah, it’s, you’re, you’re half right. I’m giving you the points on it, though. So I failed up, build upwards. But yeah, so you could rewrite that in a way where if just greater than or equal to eight would work? I’m like JavaScript might go and failing upwards. Okay, you two for three. Let’s keep going. Okay. This one console, log one string, the string prototype dot raw, and then a string literal of Hello, Twitter, backslash in the world. No sights and this and it’s wrapped in backtick. Since rapid and back ticks, I’m not familiar with that.

We call it literal Okay, it’s just a way of writing a JavaScript string, then we’ll evaluate what is inside of it. So you can do things like put a, you know, normally you would concatenate variables with, like, you know, single quotes with a string, and then a plus sign your variable and a plus sign and more quotes, with a template literal, you can just put $1 sign curly bracket and your variable name inside your string, and it will just evaluate when, okay, and that’s like, double quotes and Ruby.

Yeah, it’s an ES six thing that, you know, will get transpiled if you’re using Babel or something will handle making it like string concatenation.

So, so I didn’t know that it would evaluate stuff that might have changed my initial answer. What I see is, I know what string is. Dot raw means that it’s a like a class method. In this case, it’s like utility method. The backticks I’m presuming is a means of like, indicating a string argument. I think it’s weird that you have neither a space after ra nor parentheses, but I’m just going to run with it.

The syntax is a little unusual, but it is valid, that the options here are important to

Yes, yeah, So option one is no spaces. Hello, Twitter, backslash n world. The second one is Hello, Twitter, and then a carriage return world. Why would there be a carriage return there? backslash n backslash it newline. Now, the third one is Hello, Twitter space world. And the fourth one is Hello, space, Twitter space world. So I know it’s not the fourth one because there’s nothing to indicate that there should be a space there are between both words, right?

So the third one seems possible. And I have to think does, would string.ra eliminate a backslash n and not evaluated? And it’s possible, but it seems unlikely. The second one, hello, Twitter, carriage return world would mean that it’s evaluating the string or violating the backslash n. And my thinking here was that it’s probably not because it’s raw. And so usually, when you do raw, it’s wanting to take exactly what’s in the thing, like as is and not evaluate anything. So I’m going with the first one.

It is yes, that is the correct answer. I’m gonna put on my game show voice this week. Yeah, and so basically exactly what you stated, which is then dot raw takes a template literal and will process anything in it. But raw won’t do any escape sequences, like backslash in and will just return what you have. Basically, it will evaluate variables if there was a variable in there, but it will not evaluate escape sequences. Right. Next five, can you guess the result of God? So yeah, so we have some parentheses, B plus A plus, although

no, it’s not B plus A, it’s the string yen that literally plus the

actual string B plus the actual string a plus plus space plus the string a plus the string a, and then to lowercase. Right? And the answer is either banana, ba, banana, or an NS.

Alright, so again, process of elimination here. It’s not a non US, that doesn’t make any sense. Because why would you choose to be

an ad? Right? The first one. The first one kind of clues me into, like, oh, right, if we don’t have an argument there might return not a number, right?

And then being two lowercase that would make the ends lowercase, and having two A’s there. Also, you know, that would make sense. Um, the second one is, I just presumed that not having an argument, assuming it evaluates, it’ll just do the best that I can. The third one, even though I know that’s the correct answer. I don’t think it should be and I’m not going to pick it. I’m not there are four lights here for lights. So I’m going to pick the first one knowing that it’s

wrong a in a in a yes, I forgot. Yeah. That was a mistake. Yeah. Can

you do the why? I want to know why were the last day

ago. Yeah. So I worked out basically the same thing that the plus plus is going to generate an n a n error. So not enough to

be clear, I wouldn’t have guessed that a generates na n. I’m inferring that because two of the options have Nan, and then makes a silly joke.

So here’s what happens. First off, you end up with B plus A, which is VA, then you end up with B plus plus the string a. So then this is where things are basically breaking because plus plus string a, it doesn’t know how to evaluate that. And so you end up with n a n. It’s saying, Oh, this is not a number. You’re trying to add a to nothing. So it’s because nothing plus A equals not a number. So then you so now you have BA plus na in. So there’s your bond man. And you’ve lost that second A.

And then the last step is you add that last day. So now you have banana with two capital NS and the two lowercase, takes it all down to lowercase. So it’s a it’s a case of the expression plus plus a. I thought, when I was looking at this, I was like, well, plus plus, I just thought would evaluate to not a number because there was nothing in there. But I forgot to take it as a whole expression. What it’s actually doing is trying to add plus plus a to the BA and it drops.

Is this your king people

this? This is a weird, like, I don’t know how you could I mean, everybody’s got code for something. I don’t know why you would run into something like this. But it’s an interesting, understand understanding of how string concatenation works, basically, and how you’re concat. And you’re using a plus symbol to concatenate strings. Yeah, but if you do it wrong, it does evaluate to numbers. Like it’s so it defaults to a math operator when it can’t figure something out.

So in Ruby, you would get something like this, you’d probably get, you get an argument error, because you need to have I’m pretty sure you get an argument or because you need to have something there. But generally speaking, what it would probably do otherwise, in other situations, it would try to evaluate it, we presume that since a string is calling the operator after it, or a string is calling the method after it that you’re going to want to have a string as the result. So it wouldn’t infer that you wanted a number there.

Okay, so the next one here, this one’s got a couple lines, first, we have an array, let array equals 123. And array, one, three, and then we say, array index six equals nine, right? And then we say, array index five, right? The first statement,

let array equals and then it’s array short notation. 123. That’s straightforward. I know that’s valid. One second one is

array to array two would be three integers, zero, and guest.

So array six equals nine. So I was leaning on my JavaScript experience that I’m pretty sure that it treats arrays, more like hashes, or like dictionaries, right, than actual arrays, like how you would in C or C++, where you have allocated memory. And so I was, I was going on a limb that I think mine to where it says the six index of array, assign nine to that. I’m assuming that it’s going to allow that and just say, Okay, here you go. And this is that, we’re gonna go ahead and assign that. So array five, nothing has been assigned to it. I’m gonna go with undefined.

Undefined is the correct answer. So yeah, we ended up because it basically backfills the rest of your indexes with unknown. So it does actually treat it like a property. Yeah, yeah. So it will backfill those arrays, and it will also increase the length. Like if you did a length on that, it would return length seven. Yeah, I wouldn’t, I wouldn’t have assumed that. Yeah. So it tries Yeah, it does. In that sense, it does allocate all the rest of the indices up to that point out. Okay. You know, the output of this code, okay.

This one says the number one, so it’s a number of primitive actual numbers, plus votes, two plus votes two. Yes. I think I think that one plus a string representation of the number two, would probably evaluate to not a number. And then you would have not a number which we know From Question one is considered to be a number, even though we don’t want it to be one. And then you can have that plus a string. So I’m gonna go with not a number. Yeah, and,

and you’re getting it wrong right now. Boom, yeah, that’s 122 Oh, really Holy shit. Because and here’s the here’s the whole reasoning why it, it will, when it goes to figure out what it needs to do. Rather than failing, it will say, Oh, no, we have two objects here that we can do something with. And because I don’t know what the string is, even though it could conceivably try to like do a two integer on it or something, it will treat the number as a string and concatenate them.

And then the two plus two is just a straight string concatenation. And so you get 122. But it is the string representation of 122, not a number representation of 122.

So so it’s coursing based on the arguments you’re passing to it. Basically, it’s like reverse duck typing.

I didn’t write the runtimes. And the device layers will store

that’s like, it barks and it has fur, but you feed it duck food, therefore, it must be a duck.

Okay, next one. This is this is such a trap question and explaining why is going to be fun.

Point one we have, we have the primitive float by 0.1 plus point two primitive float and then equals equals, remember to float. Point three, true or false? I would say that that would evaluate true. But because we’re in topsy turvy JavaScript world, I’m going to assume that it’s going to interpret it in the weirdest way possible. And that what it’s going to do is it’s going to evaluate like 0.1 Plus

false. Imagine that instead of point one plus point two, imagine it was just one plus two plus two equals equals equals three. Is that true or false?

What like I said, in the normal world, that should evaluate left to right. And it would be one plus two is three, and then equals

equals three. Right? And

but because this is JavaScript, is

that true? Do things? Oh, it should be true. Should be true. Yeah. So point one plus point two equals equals point three.

To be true. prints, ostensibly.

I don’t know why I’m helping you. You’re working through this. Keep going.

Wait, I’m opening up a Ruby code. No,

no, don’t do that. Don’t cheat. I’m not cheating. Actually. This problem shouldn’t be in Ruby two. Can we get a meme? Can we get like the the angry? Why, you know why? You know guy mean with with point one plus point two.

But I picked false because I was like, this has to be dumb. Yeah. It has to be ridiculous. And so that’s why it’s gonna be false. So false is correct. It was like a spiteful, yeah, answer that.

So So why the whole reason behind this just goes back to like the general problem with floating point math, which it is 2022. And it turns out, we are still terrible. Floating Point math.

What’s this? We business? You got a mouse in your

pocket is the industry, the computer world, the JavaScript engine world?

You’ve got a screenshot right there in the channel that shows you that it’s been it’s been

a dress language, fake language, and get on my level, man. So yeah, strictly speaking, wow. In JavaScript point one plus point two equals point 30000000000000004. Yeah, of course it does. So it wouldn’t. This comes back to a problem that is based in float floating point math. Basically, floating point math is not precise. It’s not accurate because we are. What’s the word I’m looking for it we are faking it with electricity, as it were. So what you have to do, there’s there are a few different things that you can do here.

What some people will do is if you need very, very precise math, multiply it out to integer so in this case, take it times 10. So you would say one now we would be in one plus two equals three and that is true. And if you needed output that you would then divide it by 10. That’s the easy solution. If you’re dealing in currency This is an obvious problem. Actually, that’s that’s a really good point. The Superman three problem right

Exactly, when I’ve done Rails apps where we’ve done e commerce transactions, the it is like the best practice is you always store dollar values in cents. Yes, it’s like it’s a predictable calculation. You never need fractions of sense, smallest common denominator, right. And you just always track it and cents. And then that way, when you have to present it to the user, you just divide it by 100. But that avoids that site completely sidesteps any possible floating point issues.

The other thing you can do is run a to fixed the number primitive has a, a method called to fixed, which is basically a rounding operator that will return a precision of however many decimals that you’ve placed. So that is another way to evaluate it. The thing is, you know what to fix returns a string, just know that I,

I stand corrected I did earlier with the screenshot I sent you was one plus two equals equals three. But if I do 0.1 plus 0.20, hold on. I did three. Let me try it with zero. Satellites. Yeah, so it’s still 0.1 plus 0.2. Still does that long string you just shared with the four on the end. And point one plus point two equals equals three evaluates to false in Ruby as well.

Yeah, I was gonna say, this is this isn’t a JavaScript problem. This isn’t a Ruby problem. This is a floating point, math coprocessor on the CPU problem kind of thing. But

interestingly, 1.0 plus 2.0. equals equals 3.0. evaluates to true.

Yes, because zero, doesn’t. It truncates it to one plus two at that point. Sure. So the last thing I’ll throw out there about this, because Aaron, I know you’re probably old enough for this. Remember when it became a really huge deal when CPUs got dedicated? coprocessors math coprocessors floating point? Oh, yeah, it was like that was that was a thing. And there was at one point, you could buy daughter boards for like old 380 sixes and 480 sixes to add a floating point processor specifically did that. So all of you people younger than the age of 30? You’re welcome.

I did just also check 1.1 plus 2.1 equals equals 3.2 evaluates to true,

okay. All right. Ninth question. We have two constants, I’m setting two constants, one constant is called is true, the other one is called as false. The first one cons is equal to true equals equals an empty array. The other one is equal to true equals equals not an empty array. So the

first one that the variable name is true is true, or sorry, the constant name. And the second one, that constant name is false.

And then the the output is, what is is true plus is false.

Okay, so I actually don’t know what the behavior will be. But I’m going to like walk us through it. And first, I’m going to infer some things here. So logically, true equals equals an empty array. And true equals equals not an empty array. One of those is going to evaluate to false. I’m presuming. If it doesn’t evaluate to true or false. I don’t have any idea what its gonna be.

And I have you walk through walk through a Boolean process, right? In terms of when you think about what means true, and what means false. What would cause one of those to be true and one of those to be false? I have no idea. I could guess maybe like, like, I mean, maybe an empty array might evaluate to false because it’s empty. And so if you have sometimes true equals equals false, you get that if we get false,

and then true equals equals the not the bang, the exclamation point means not. Yeah. And so you would have true equals equals not.

So what is it? Yeah, what does the bank do? Invert invert value, there you go. Also, there are a lot of times

the bank will not only invert it, it will also coerce it into being a Boolean. So there’s a trick in Ruby and I think you can use other languages to where you do double bang, and then do something. And that coerces whatever it is into being like a firm

Boolean. So, you’ve got four options here. None of them are false. Yeah.

All right. So we have one, zero quotes true. And then actual truth, room value. I like how the third one is quotes true. It’s like like scare quotes saying like, Yeah, true.

Yeah, um, Okay,

so So my initial thinking is that one of those two constants is going to evaluate to false and one is gonna evaluate to true. And I’m inferring that because want they’re the same with the exception of the Boolean inverter. The weirdest possible circumstance, I could think of where this would be true, or sorry, where this would work is that the first one evaluates to let’s say, like, undefined or something. And then the ladder gets coerced into being a Boolean, because of the inversion operator.

So I think they’re like if you take a Boolean, true plus a Boolean false, or a Boolean, true, plus, whatever, undefined or something. Both of those are going to be weird. I’m sad that not a number isn’t an option. Because I feel like that’s a good place for that. I don’t think it’s one.

It’s probably not zero.

I’m gonna pick Boolean true, because I think that’s the most ridiculous possible.

Okay, Boolean true. Oh, my friend. 00. Yeah, cuz, remember, Boolean evaluate to zeros and ones. And what’s happening in the console log. Remember, what is the plus sign default to? It’s a math operator. Yeah. Yeah. So it is immediately it coercing you, I think you use that word just a second ago. It coerces the boolean values into zeros and ones. And you were absolutely right, in that this, these are backwards, that is true equals false and is false equals true because of the bag.

Okay, so they both did evaluates an empty array comes back as false. And so true, doesn’t equal false. And so an empty the opposite of an empty array is true. So true equals true. More importantly, like, true,

I mean, both of those could evaluate to false. Because true doesn’t actually equal either of them. True is not an empty array, nor is it not an empty array.

So Ruby knows, true and false, right? Like, that’s the thing does Ruby have and

actually, true and false are instances of true class and false comm. Okay.

Does Ruby have an understanding of truthy and falsy if I say it that way?

Yes. So there are truthy and falsy.

Yeah. So that’s kind of what’s happening here in that you can set a variable to an empty array. And it’s not undefined. It’s not no, it’s an empty array. But that still evaluates in the context of a Boolean, to false. Because an empty array is nothing. Right? An empty

array is like it’s the sad van. Yeah, I think of I think a truthy and falsy is like happy and sad. Like a truthy value is like, a positive number, not because it’s like positive is happy, but just like you have something Yes, I have something I can work with. Whereas like zero or empty or nil are all false. Because, you know, it’s empty, it’s gone.

And this is actually a really good example of there’s an MDN doc on this that gets into like, what is truthy, right. And so the list of what is truthy is huge, like, it’s long, the list of what is false, it is very short. So it’s one of those things of like, or rather, I should, I should say that backwards. A lot of stuff is truthy, very few things are falsie. But when you evaluate it, it’s the opposite. which I know sounds like it doesn’t make sense, because a quarry record is also the name of a whirlpool, up in Scotland, in a bay, and it’s spinning my head around right now.

No, it’s just this notion that there there’s a very finite list of things that can be false. But that very finite list of things can also encompass a lot of stuff so to speak, to false zero, negative 00. In empty strings, empty array is null undefined in a in, comes back up. As long as it’s got a value, a string value, a number value, an instance of an object, even if it’s empty. An instance of an object is truthy. So if this notion of a boolean true or false is a literal, either zero or one, or true, false, that’s it. Those are literal, true false. bullions.

truthy and falsy basically is sort of like an is set or is not set. kind of mindset. Yeah, that’s I agree with that. And so this is this question is playing with that idea. And so if we know that an empty array is falsie, and returns false, true equals equals false is false. and not false is true. It’s like It’s like multiplying two negative numbers, right? A negative pleasant or a negative times a negative is a positive. And so a false false is true. And so true equals equals true.

And you end up with when you do that additive action on the console log zero plus one equal, or I’m sorry, zero plus zero equals one. Rev. Zero. Got I’m, I’m all over the place, by the way. All right, one more, we have the last question on deck. I’m really glad this came up as the last question, because it’s kind of fun. You’re gonna complain, but it does make sense in its own way. So what we have is an array, an array called numbers. And in that numbers array are only three numbers.

It’s not just an array. It’s a constant.

Yes, that’s what I overlooked. The first I’m not being manipulated, right. And the numbers in the array are 33, two, and eight. And they’re all primitive numbers that are all just plain old numbers, no funny business. Then we do a numbers dot sort, which is a prototype method on the array primitive. And then we log out index one number, and

so I got this one. Correct. And afterwards, I was like, that was easy. Why is that one supposed to be puzzling or whatever? And I mean, the answer is eight.

Which would be the second element of a zero indexed array.

Now looking at it now, seeing that it’s a const.

I probably would have hoped that it was to, do you want to read and think like this? You want to go I think you want to go back and redo what you just said? I swear it answered, ate earlier. And it was correct. Or actually no way. No, I answered 33. Damn, I shouldn’t have said anything. I should have no, right. No, no, but but like thinking about that now. Like, why did I answer 33? No, let’s I don’t know. Yeah, I think we should go with the wrong answer, which is eight. That is the wrong answer. Yeah. Tell us why. Why do you think it’s a?

Because if I’m assuming that, like, there’s some like Meta reasoning happening here, like this quiz is full of God know

that what the quiz is doing? Tell me why you think it’s a?

Well, I don’t seeing that it’s a constant. I don’t think it should be eight. I think it should be two.

What if I told you the fact that it’s a constant makes no difference whatsoever? Then, what is even the point of anything I?

Like why, why if you can, like if I, here’s a good example, if I set a constant, if I’m getting API data back from like, a, like an Ajax request. And I’m like, Okay, it’s very important that this array of data is in the order that it’s in because it’s like, test answers or something. And so the sequence is very important, and then make it a constant. And then something somehow manages to run sort on it. I would not want that to be actually sorted.

Yeah. So I guess we need to have an episode about how constants in JavaScript are not constants in the way that you think they are? Of course, they’re not. Yeah, constants do not refer to a value that is unchanged. In JavaScript, it’s a reference that is unchanged in this case, right? It’s an array. And because it is an array is constant,

right? So you can’t you couldn’t assign something else to like, if you did const numbers equals an array of 3328. You couldn’t later on say numbers equals

five, right? Or numbers equals quote, numbers, quote. Right, right. I love it. This is the best question to end on. So let’s go back. So yeah, if I tell you the word the the, the assignment of a constant to numbers is absolutely irrelevant. There is one in the up in the next set of questions, where does matter? And so that’ll be fun. But it could be ver, it could be let numbers equals 33 to eight, and we sort those I

know that I know, I got this one. Right. That was the first time I did it, right? Because I didn’t see const. And so I thought it was just a very you got it right on

at first then. Yeah. So what is your as it runs like this? I think

it was the first question. And so I didn’t know these are going to be gotchas. I thought it was a nice quiz. Um, I think that what I would expect it to be is to, as I would expect the array to be immutable.

Okay. So yeah, so you think line two does nothing? Secretly?

I’m pretty sure it’s actually

yeah, I mean, the answer is yeah, not too often. Obviously,

but I’m afraid that’s going to be 33. So,

you are right. I mean, you’re wrong. But you’re right. You know what I know you’re not getting, you’re not getting credit for this question. You’re getting it wrong, because you don’t know why you got it right in the first place. And I’m the grater. And I’ve had the quarry wreck, and I’m sweating and unbuttoning buttons.

We’re using JavaScript, it’s all about failing upwards. And so you said to, I said, I said, I want that to be to even in 33 and 33. Why What the

hell let me pass that to you know what? No, no, I want to see if if because you use your use your primitive brain? That’s not an insult. Why? Why would 33 and in an array of 33, two and eight, if you sort that array? In what condition would 33 end up at index one and as a reminder to everybody indexes start at zero, so we’re talking about the middle isn’t a second one. Yeah. So that will let me do this is the order 833? Two or 233? Eight. If you run a sword on that, which one of those is right?

This is like a this is a bonus. This is your extra credit question. Okay. Yeah, it, it should be two 833. No, no, no, we know it’s not, you know, 33 is the middle number. We know this for a fact. So it’s either 233 eight or 833? Two. Which one? Yeah, but

see, you’re you’re asking me like, which one do I think it is? And I’m trying to apply reason to this. Like, if I ran sorta, this is what I would expect it to do. If we’re saying,

Have you run sore, and you know, the middle number is 33. You know, it can only be one of those two? Well, there are four lights. I love this episode so much already. Which

I refuse I refuse to accept the premise that sort of should return 33 as the middle night.

You know, when you hear why it’s gonna blow your mind. It won’t know. I promise it well. 2338 or 833? Two, which one? To 30. Okay. So let’s assume that’s your reason. Why not that the interest of it. Let’s assume that’s right. Okay. Yeah. Now logic it out. Why would 33 come before aid? If the order is 233?

Oh, God, I got it. Because it’s really them as a yes.

I don’t have to add in. applause I’m doing it myself. That is exactly why that is the dumbest thing sort how, because in a ration, anything, our soul

was powering so much of the internet, right? But it’s like, why is there? Why does it not automatically apply? Like I could see it being like 33 First, because maybe you like sort defaults to descending instead of ascending. I’ll give you that. But it should be evaluating it as integer primitives, because they’re coming in as integer primitive.

Let me give you an example that might ring true for you. And as to why this is the case. Have you ever had a folder full of like, maybe old mp3 files that are like badly named with like, artists track number type stuff? Yeah. Yeah. And it starts sorting a bunch of your songs, and lists, the songs that are in the, you know, the tins show up before the Yeah, too. Right, because it becomes like a two song. But it’s evaluating the ones first. Sure, but in

that case, though, you’re dealing with a file name, which is coming in holistically as a string, right,

right. But the array has the same problem, because the array doesn’t know what data types are going to come into it. So they have a good example here of an array that has a string one, a boolean true, a number 55, a float of 1.4 to one, a string of foo, and an empty object. And it’s like, if you run on that, what would happen? Yeah.

Okay. So in that case, I think that you go with whatever. Like, in that case, it makes sense to go with whatever primitive type is the one of the first element. And so like comparing them all as strings, but if you have an array, that’s all integer primitives, it should evaluate it like as integer primitives, and not as strings.

could or should. Welcome to JavaScript ladies and gentlemen, I’m gonna take a quick break for about five seconds. We’ll be right back

over What was my score? Wait, wait, wait, what was my score?

Wait? Oh all right, is everybody ready for Aaron’s final score? Because I’m ready to give it.

Okay. So I believe that I said I would fail. But

no, no, you passed. You got a six Wheeler sent. That passes? I mean, isn’t that a D? I think that’s that’s like the lowest D because I think a 60s F is it’s been a minute since I’ve been in school. But no, I think a 60s of the I’m going to ABCD that’s for units. And so, okay, let us know,

I think my my school did 6565 was a cutoff point for failing, I think

my problem is, there are a limited number of questions in this test. And so I’m going to tell you go take this test, let us know what your score is. But you will get a lot of the same questions. undoubtably. So you’ve probably heard some of the answers. So pretend like you don’t, and just try or wait a couple days, wait a couple days after this episode, then take the test and see what score you get and share it with us.

But this is fun, this is fun stuff to like, figure out the idiosyncrasies of like how coding. And it’s important because I think, at some point, we all fall into one of these traps of stuff not evaluating the way we think it does, you know,

oh, I’ve definitely had to walk like step through some JavaScript code with watching variables and everything, to figure out why something is behaving the way it is, and then eating my keyboard across the room and screaming

audibly that that last chunk about how you know, an array sort, how sort evaluates everything as a string before it sorts, like that’s one of those things that man until you ran into it, it’s just not expected.

If you have an array in Ruby, if you have 123 in an array and you sorted, or a sorry, you have 233, eight in array and you sorted, it puts it to 833.

Don’t be fancy with me, come

on. If you do, if you do like ad, ie, each has strings and you sort it or add any sort them, it’ll make ad e as the result. If you do an A string, comma, two comma 33. Any sort, it throws a argument error, because it doesn’t know what

Oh, interesting. So it’s it just fit. Yeah, that’s, that’s actually pretty interesting. It takes the opposite approach, whereas JavaScript basically forces the casing to strings to sort it for you. Ruby says, oh, no, we just can’t do that. That’s interesting. I

figured out the fundamental difference here. And it’s like, it’s reverse duck typing. It’s like, um, you’re getting duck foods. So I guess you’re a duck, rather than you’re behaving like a duck. So

that means you’re Yeah. Interesting. Well, take your test for lights Michael, four lights. Listen. I know this reference, I respect this reference. And for that, you can take us out on social

calm and tell us how many lights through our Twitter or UX, or see pictures of four lights, as there

are primitive cursors or precursors? No, I’m sorry, it was precursor. UX podcast and please joke. Come and Go and support the show and help us pay for transcripts dark

which will redirect you to our Patreon books. I hope you enjoyed this there’s going to be a second part of this this is officially part one. There is another section of these things I think will be fun. And I can’t wait to go through them because I had a lot of fun in the show. I just poured myself another glass quarry wreck and this is probably a terrible decision on my part, but I’m doing it because a it’s delicious. b

I’m hot. That’s like eating airport food at the destination airport.

You know I I used to do that in Boston because it was the first sushi restaurant I hit. And it probably was terrible, but it was still better than Kansas sushi. So I still always stop there and got sushi, folks. Ladies and gentlemen. I hope you keep your personas close and your users closer. Bye bye

Comments are closed.