truthy_falsy_lesson

truthy_falsy.md

JS: Truthy and Falsy Expressions - 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.

Vocabulary

• Expression - a statement that produces a value, for example, (5 > 3) produces a value of true
• Conditional - an expression that evaluates to true or false, or a control flow statement that executes code
• Truthy values - values that evaluate as true in a boolean context
• Falsy values - values that evaluate as false in a boolean context

Warm Up

Open this Jamboard and add any information that you already know about truthy and falsy values!

Key Idea - Conditional Expressions

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

Review - Basic Values

Falsy

• false
• 0 or -0
• "", '' - an empty string
• undefined
• 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
• !9is falsy
• !0 is truthy
• !"strawberry cheesecake" is falsy

Check for Understanding

  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!"

Refactoring (Let's Be a Clean Code Crew)

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)    

Paired Practice

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.

Wrap Up

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!