- Identify truthy expressions and falsy expressions in JS.
- Refactor code using your understanding of truthy and falsy values, and the NOT
!
operator.
Expression
- a statement that produces a value, for example,(5 > 3)
produces a value oftrue
Conditional
- an expression that evaluates to true or false, or a control flow statement that executes codeTruthy values
- values that evaluate as true in a boolean contextFalsy values
- values that evaluate as false in a boolean context
Open this Jamboard and add any information that you already know about truthy and falsy values!
Consider the following function:
function evaluateTruthyness(expression) {
if (expression) {
return "This expression is true!"
} else {
return "This expression is false!"
}
}
The conditional statement in this function, if (expression)
, will always evaluate as true
or false
. If it evaluates as true
it will return "This expression is true!". If it evaluates as false
it will return "This expression is false!".
Falsy
false
0
or-0
""
,''
- an empty stringundefined
null
NaN
Truthy
- Anything that is not falsy is truthy.
A few examples...
true
- any non-zero number (
9
,-18.5
,80
, etc)- a string (
"iguana"
,'twenty'
,"coffee"
, etc)
The NOT operator `!`
The NOT operator
!
, a.k.a. "bang operator", creates the opposite value in a boolean context. It basically says that a value is NOT that value. In other words,!true
means "not true".!false
is "not false".
- The NOT operator in front of a truthy value is falsy.
- The NOT operator in front of a falsy value is truthy.
Examples:
!undefined
is truthy!9
is falsy!0
is truthy!"strawberry cheesecake"
is falsy
function evaluateTruthyness(expression) {
if (expression) {
return "This expression is true!"
} else {
return "This expression is false!"
}
}
Remember, if (expression)
, will always evaluate as true
or false
.
Look at the following examples. We are invoking the evaluateTruthyness
function with different arguments. What would each of the following return? Write your answers in your notes. After you write each example, click the arrow to check your answer.
Be prepared to talk about why the function would return "true" or "false" for each argument.
1. evaluateTruthyness(!null)
"This expression is true!"
2. evaluateTruthyness(2 - 2)
"This expression is false!"
3. evaluateTruthyness("false")
"This expression is true!"
var pets = [ ];
var puppy;
4. evaluateTruthyness(pets)
"This expression is true!"
5. evaluateTruthyness(pets.length)
"This expression is false!"
6. evaluateTruthyness(puppy)
"This expression is false!"
Using what we know about truthy and falsy values, we can rewrite conditionals to make them shorter and cleaner.
Let's refactor some conditionals. Open this repl and fork it.
1. if (hungry === true)
2. if (userName === undefined)
3. if (tacos.length > 0)
4. if (message !== "")
Possible solutions for future reference...
1. if (hungry)
2. if (!userName)
3. if (tacos.length)
4. if (message)
Use what you have learned about truthy and falsy values to work through these examples. After opening the link, fork the repl and begin.
You will work partners in a breakout room.
Review Learning Goals
- Identify truthy expressions and falsy expressions in JS.
- Refactor code using your understanding of truthy and falsy values, and the NOT
!
operator.
After class, please take a few minutes to complete this brief reflection survey. This will help you know how solid this topic is for you, and which parts you may want to further review.
If you would like to learn more about this topic, I encourage you to read MDN's documentation on Truthy and Falsy values!
Also, please feel free to write me with any additional questions about this topic. My Slack handle is @Bruce.
Thank you for coming to this lesson! It was a joy to teach you today. Cheers!