JavaScript: From First Steps to Professional

Conditionals Exercise

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
JavaScript: From First Steps to Professional

Check out a free preview of the full JavaScript: From First Steps to Professional course

The "Conditionals Exercise" Lesson is part of the full, JavaScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:

Anjana provides an exercise to practice writing conditional statements and walks through the solutions. Students are instructed to write a conditional that logs whether first name or last name is longer, a function isEmpty(array) that returns whether a given array is empty or not, and a conditional that returns whether an empty array is truthy or falsy.


Transcript from the "Conditionals Exercise" Lesson

>> Okay, so let's put it to the test. We're gonna write a conditional that looks at your two and maybe you have multiple names, but split your name into two parts, let's say first and last. Or it can be [LAUGH], your pet's name and your name, whatever you want, and log a message saying which one is longer.

And then try to write a function called isEmpty, that takes in an array and tells you whether or not that array has anything in it, whether or not that array is empty, length zero. And then the last question I have for you is, what is the truthiness of an empty array?

And you can test it out by writing a conditional in your console. So let's just do all this on the console just to wrap our heads around conditionals and truthiness. Okay, so let us write a conditional that logs a message saying whether your first name or last name is longer.

Who would like to walk me through, what they would do to write this conditional? How about Jason, do you wanna take a stab at it with me?
>> Sure, so what I would do is I might set a variable for my firstName.
>> Okay, so I'll use mine just while I'm typing, okay, so firstName.

Do you wanna do one for lastName too?
>> Yea.
>> Great. Okay.
>> Then my conditional would be, if,
>> If.
>> First name
>> Okay, like this? Just if space firstName?
>> Need a paren.
>> Parens yeah exactly, just just being a little pedantic on the syntax here because we wanna wrap our heads around it.

Okay, so if firstName.
>> .length.
>> Length, great.
>> Is greater than.
>> Greater than.
>> lastName.length.
>> lastName.length, yep. So remember, length tells us how many characters are in a string. Okay, then?
>> Then we'd have a curly brace.
>> Curly braces, our good friend that shows up in so many different places in JavaScript, yes.

>> And I forget, did we wanna say if it's returned true, if it's firstName is longer than lastName.
>> We wanna, let's say log a message and just say, firstName is longer.
>> Okay, yeah, then it'll be console.log text that's just saying that firstName is longer than lastName.

>> Sure, we could say we could say just like firstName is longer in a string. Or we can use our little comma friends that we just found out, actually since we have variables for these things, we could say, firstName is longer than lastName, for example, similarly to how we did the numbers before, yeah?

>> Yep.
>> Great.
>> And then have an else.
>> Okay let's do an else, yeah.
>> That would just say console.log.
>> So like this, else console.log.
>> Then another open.
>> Just like this?
>> Well, I think if it's just a single line, do we need a curly brace?

>> So, yeah, it's flexible in JavaScript. Sometimes you'll see conditionals that don't have curly braces around them. But I would say, when in doubt, let's put curly braces around it to make it really clear that we have a different block of code happening. You will though in your JavaScripted ventures, reading other people's code, you'll sometimes see conditionals that don't have curly braces.

And in fact in a minute we're gonna look at an even shorter way to write this out. But for now, yeah, we will use our curly braces, and then I think I know where you're going. It would be, let's say, lastName is longer than, or you could say firstName is shorter than what have you.

Okay, seem good?
>> Yeah, okay, we got the semi colon. Yep, good.
>> Awesome, Anjana is longer than Vakil, it has six letters instead of five. Look at that, all right, great. Now, how about a function called isEmpty, which takes in an array and returns true if the array is empty, and false if the array is not empty, if it has things in it?

Who would like to help me take a stab at this one? Paul?
>> Sure So, We want to create it as a function, right?
>> We want a function, yeah. There's a few different ways we go up, a couple of different ways we could do that. You get to pick because you're driving.

>> All right, function, Then is what was the.
>> So we usually named functions like this, that are telling us a true or false value we usually call it say name them like, it's called a predicate basically, like isEmpty or is longer than or something like that, yeah.

So let's name it isEmpty.
>> isEmpty, and then give it the arguments. So let's just say array.
>> Okay, right, so we're gonna say we have a parameter called array.
>> And then curly braces.
>> Curlys, always with the curlys.
>> And we need the if statement in there.

>> So if.
>> Then in it's got to still have the parentheses.
>> Parens, yeah.
>> array.length is equals 0, tripled equals 0. And then, again, the curly. And then this would be a return true. And then you would have an else, and then again curly braces and return false.

>> Like this?
>> Yes, I think that will do it.
>> Let's do it, let's give it a shot. Okay, so now if I have isEmpty on like an array with one, two, three, we should expect false because there's stuff in it. And if I give it an empty array just the two square brackets next to each other.

JavaScript [LAUGH] is like what, are you sure you meant to make an empty array really you don't want anything? All right, stop being so helpful JavaScript, yes, I want an empty array, okay. True, good, great, wonderful. All right, now question, do you think an empty array is truthy or falsy?

So we said for example, a non empty string is truthy. A number, if it's zero, it's falsy, what do you think about the empty array? This is just a guessing game, and how could we find out? How can we test? Two, you looked like you had a thought?

>> Should we write a conditional about it?
>> Let's write a conditional about it, yeah. So we wrote a function that tests whether or not an array is empty. What we want to do now is use our conditional syntax to find out, like the way that we did a little bit earlier, we found out whether zero was truthy or falsey.

>> So we have to write it like that?
>> Basically like this, yes. So let me, to help us out here I'm gonna copy this one and we can edit it. So in this case, we're interested in empty array instead of 0. And I just need to make one more change.

>> The square bracket around the 0.
>> Okay, so just the square brackets. Yeah, because if I had square brackets around the 0, is that array empty? It has length one. It has one thing in it and it's zero. Yeah, but this now is a totally empty array, it's just square brackets, so what do you think?

Let's take bets.
>> I think it's truthy.
>> You think it's truthy?
>> False.
>> Yeah, true.
>> Maybe it's truthy, maybe it's falsy, I think we have, I don't know, we have votes for both. I dunno what the chat thinks. Moment of truth, drum roll please. It's truthy.

So objects are truthy, and arrays are objects. What do you think about an empty string?
>> I think it would be truthy as well, you are not saying is nothing, you are just not passing anything into it.
>> Okay, maybe it's truthy because it's still a thing, it's still a string, it just has no characters in it, similar to an empty array has no items in it.

Any other bets being placed on other horses?
>> It's falsey.
>> Okay, maybe it's falsey cuz I don't know, there's nothingness. Sometimes these are just arbitrary choices that JavaScript developers [LAUGH] have made.
>> Someone in the chat says truthy.
>> All right, we got votes for truthy. Moment of truthyness.

Let's find out. Empty string is falsy. Do I have a strong explanation for why empty arrays are truthy but empty strings are falsy? Well, I would just say that basically, because the array is an object, and objects are kind of a corpulent thing that sits around and we said it could have properties, it could have index properties, things like that, indices in the array case.

Whereas an empty string, it's never gonna change. Since strings are immutable, an empty string is never gonna have stuff in it. An empty array we could push stuff into. So this is as close as I can get for a logical explanation to why empty arrays are truthy but empty strings or falsy?

But suffice it to say, be aware if you're working with conditionals and you're passing in a value, be aware of the truthiness, yeah.
>> What about null or undefined?
>> Let's find out. What do we think about null? The hardest part is typing. All right, who votes truthy?

Nobody, who votes falsy? Everybody, yes, indeed it is falsy. And let's try with its cousin, undefined, or sibling maybe. We could have made a function to do this, but we did not, so that will be an exercise for the later, undefined is also falsy. So nothingness is falsy.

[LAUGH] In JavaScript nothingness is falsy. Somethingness is what objects and arrays have. All righty, questions so far?
>> What if you feed in a string false? Would it still be truthy, false of the strings gonna be truthy, right?
>> Let's find out.
>> Unless you're changing it to boolean, let me know.

>> Sometimes it's hard to know when JavaScript is gonna try to trend change things to another thing and when it's not. So the best way to find out is to double check your understanding by asking JavaScript directly. So let's find out. And indeed it is a non empty string, so it is truthy, yeah.

>> Well, sure if you could trick it maybe to do something.
>> That that's a fun game.
>> [LAUGH]
>> You can go home and try to trick JavaScript into thinking truthiness of values is different.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now