Truthy and Falsy Assignment

Truthy and falsy evaluations open a world of short-hand possibilities!

Say you have a website and want to take a user’s username to make a
personalized greeting. Sometimes, the user does not have an account,
making the username variable falsy. The code below checks if username is
defined and assigns a default string if it is not:

let username = '';

let defaultName;

if (username) {
  defaultName = username;
} else {
  defaultName = 'Stranger';
}

console.log(defaultName); // Prints: Stranger

If you combine your knowledge of logical operators you can use a short-
hand for the code above. In a boolean condition, JavaScript assigns the
truthy value to a variable if you use the || operator in your assignment:

let username = '';

let defaultName = username || 'Stranger';

console.log(defaultName); // Prints: Stranger

Because || or statements check the left-hand condition first, the
variable defaultName will be assigned the actual value of username if it is
truthy, and it will be assigned the value of 'Stranger' if username is falsy.
This concept is also referred to as short-circuit evaluation.

Instructions

1.
Let’s use short-circuit evaluation to assign a value to writingUtensil. Do
not edit tool yet, we’ll return to tool in the next step.

Assign to writingUtensil the value of tool and if tool is falsy, assign a

default value of 'pen'.
Checkpoint 2 Passed
Stuck? Get a hint
2.
Notice that text 'The pen is mightier than the sword' logged to the
console. Which means the value of writingUtensil is 'pen'.

What if we reassign the value of tool to 'marker'. Let’s see what happens

to the value of writingUtensil.
Checkpoint 3 Passed

Stuck? Get a hint

Concept Review

let tool = '';
tool = 'marker';
// Use short circuit evaluation to assign  writingUtensil variable below:
let writingUtensil = tool || 'pen'
console.log(writingUtensil);
console.log(`The ${writingUtensil} is mightier than the sword.`);

CONDITIONAL STATEMENTS

Ternary Operator

In the spirit of using short-hand syntax, we can use a ternary operator to

simplify an if...else statement.

Take a look at the if...else statement example:

let isNightTime = true;

if (isNightTime) {
  console.log('Turn on the lights!');
} else {
  console.log('Turn off the lights!');
}
We can use a ternary operator to perform the same functionality:
isNightTime ? console.log('Turn on the
lights!') : console.log('Turn off the lights!');
In the example above:

 The condition, isNightTime, is provided before the ?.

 Two expressions follow the ? and are separated by a colon :.

 If the condition evaluates to true, the first expression executes.

 If the condition evaluates to false, the second expression executes.

Like if...else statements, ternary operators can be used for conditions

which evaluate to true or false.

Instructions

1.

Refactor, or edit, the first if...else block to use a ternary operator.

Checkpoint 2 Passed

Stuck? Get a hint

2.

Refactor the second if...else block to use a ternary operator.

Checkpoint 3 Passed

3.

Refactor the third if...else block to use a ternary operator.

Checkpoint 4 Passed

Stuck? Get a hint

Concept Review

Want to quickly review some of the concepts you’ve been learning? Take
a look at this material's cheatsheet!

Community Forums
let isLocked = false;

isLocked ? console.log('You will need a key to open the door.') : console.lo
g('You will not need a key to open the door.');

let isCorrect = true;

isCorrect ? console.log('Correct!') : console.log('Incorrect!');

let favoritePhrase = 'Love That!';

favoritePhrase === 'Love That!' ? console.log('I love that!') : console.log(
"I don't love that!");

CONDITIONAL STATEMENTS

Else If Statements

We can add more conditions to our if...else with an else if statement.

The else if statement allows for more than two possible outcomes. You
can add as many else if statements as you’d like, to make more complex
conditionals!

The else if statement always comes after the if statement and before

the else statement. The else if statement also takes a condition. Let’s
take a look at the syntax:

let stopLight = 'yellow';

if (stopLight === 'red') {

  console.log('Stop!');
} else if (stopLight === 'yellow') {
  console.log('Slow down.');
} else if (stopLight === 'green') {
  console.log('Go!');
} else {
  console.log('Caution, unknown!');
}
The else if statements allow you to have multiple possible
outcomes. if/else if/else statements are read from top to bottom, so the
first condition that evaluates to true from the top to bottom is the block
that gets executed.

In the example above, since stopLight === 'red' evaluates

to false and stopLight === 'yellow' evaluates to true, the code inside the
first else if statement is executed. The rest of the conditions are not
evaluated. If none of the conditions evaluated to true, then the code in
the else statement would have executed.

Instructions

1.

Let’s create a program that keeps track of the way the environment
changes with the seasons. Write a conditional statement to make this
happen!

In main.js there is already an if...else statement in place. Let’s add

an else if statement that checks if season is equal to 'winter'.

Inside the code block of the else if statement, add a console.log() that

prints the string 'It\'s winter! Everything is covered in snow.'.
Checkpoint 2 Passed

Stuck? Get a hint

2.

Add another else if statement that checks if season is equal to 'fall'.

Inside the code block of the else if statement you just created, add
a console.log() that prints the string 'It\'s fall! Leaves are falling!'.
Checkpoint 3 Passed

Stuck? Get a hint

3.

Add a final else if statement that checks if season is equal to 'summer'.

Inside the code block of the else if statement you just created, add
a console.log() that prints the string 'It\'s sunny and warm because it\'s
summer!'.
Checkpoint 4 Passed

Stuck? Get a hint

Concept Review

Want to quickly review some of the concepts you’ve been learning? Take
a look at this material's cheatsheet!

Community Forums

Get help and ask questions in the

let season = 'summer';

if (season === 'spring') {
  console.log('It\'s spring! The trees are budding!');
} else if (season === 'winter') {
  console.log('It\'s winter! Everything is covered in snow.');
} else if (season === "fall") {
  console.log('It\'s fall! Leaves are falling!');
} else if (season === 'summer') {
  console.log('It\'s sunny and warm because it\'s summer!');
} else {
  console.log('Invalid season.');
}

CONDITIONAL STATEMENTS
The switch keyword
else if statements are a great tool if we need to check multiple
conditions. In programming, we often find ourselves needing to check
multiple values and handling each of them differently. For example:

let groceryItem = 'papaya';

if (groceryItem === 'tomato') {

  console.log('Tomatoes are $0.49');
} else if (groceryItem === 'papaya'){
  console.log('Papayas are $1.29');
} else {
  console.log('Invalid item');
}
In the code above, we have a series of conditions checking for a value that
matches a groceryItem variable. Our code works fine, but imagine if we
needed to check 100 different values! Having to write that many else
if statements sounds like a pain!

A switch statement provides an alternative syntax that is easier to read

and write. A switch statement looks like this:

let groceryItem = 'papaya';

switch (groceryItem) {
  case 'tomato':
    console.log('Tomatoes are $0.49');
    break;
  case 'lime':
    console.log('Limes are $1.49');
    break;
  case 'papaya':
    console.log('Papayas are $1.29');
    break;
  default:
    console.log('Invalid item');
    break;
}

// Prints 'Papayas are $1.29'

 The switch keyword initiates the statement and is followed

by ( ... ), which contains the value that each case will compare. In
the example, the value or expression of the switch statement
is groceryItem.
 Inside the block, { ... }, there are multiple cases. The case keyword
checks if the expression matches the specified value that comes
after it. The value following the first case is 'tomato'. If the value
of groceryItem equalled 'tomato', that case‘s console.log() would run.
 The value of groceryItem is 'papaya', so the third case runs— Papayas
are $1.29 is logged to the console.
 The break keyword tells the computer to exit the block and not
execute any more code or check any other cases inside the code
block. Note: Without break keywords, the first matching case will
run, but so will every subsequent case regardless of whether or not
it matches—including the default. This behavior is different
from if/else conditional statements that execute only one block of
code.
 At the end of each switch statement, there is a default statement. If
none of the cases are true, then the code in the default statement
will run.

Instructions

1.
Let’s write a switch statement to decide what medal to award an athlete.

athleteFinalPosition isalready defined at the top of main.js. So start by

writing a switch statement with athleteFinalPosition as its expression.
Checkpoint 2 Passed
Stuck? Get a hint
2.
Inside the switch statement, add three cases:

 The first case checks for the value 'first place'

o If the expression’s value matches the value of
the case then console.log() the string 'You get the gold
medal!'
 The second case checks for the value 'second place'
o If the expression’s value matches the value of
the case then console.log() the string 'You get the
silver medal!'
 The third case checks for the value 'third place'
o If the expression’s value matches the value of
the case then console.log() the string 'You get the
bronze medal!'
Remember to add a break after each console.log().
Checkpoint 3 Passed

Stuck? Get a hint

3.
Now, add a default statement at the end of the switch that
uses console.log() to print 'No medal awarded.'.

If athleteFinalPosition does not equal any value of our cases, then the

string 'No medal awarded.' is logged to the console.

Remember to add the break keyword at the end of the default case.

Checkpoint 4 Passed

Stuck? Get a hint

Concept Review

Want to quickly review some of the concepts you’ve been learning? Take
a look at this material's cheatsheet!

Community Forums
let athleteFinalPosition = 'first place';

switch (athleteFinalPosition) {
  case 'first place':
  console.log('You get the gold medal!');
  break;
  case 'second place':
  console.log('You get the silver medal!');
  break;
  case 'third place':
  console.log('You get the bronze medal!');
  break;
  default:
  console.log('No medal awarded.');
  break;
}

CONDITIONAL STATEMENTS

Review

Way to go! Here are some of the major concepts for conditionals:

 An if statement checks a condition and will execute a task if that

condition evaluates to true.

 if...else statementsmake binary decisions and execute different

code blocks based on a provided condition.

 We can add more conditions using else if statements.

 Comparison operators, including <, >, <=, >=, ===, and !== can

compare two values.
  The logical and operator, &&, or “and”, checks if both provided
expressions are truthy.

 The logical operator ||, or “or”, checks if either provided expression

is truthy.

 The bang operator, !, switches the truthiness and falsiness of a

value.

 The ternary operator is shorthand to simplify

concise if...else statements.

 A switch statement can be used to simplify the process of writing

multiple else if statements. The break keyword stops the
remaining cases from being checked and executed in
a switch statement.

Instructions