Control flow Flashcards
In programming, we can also perform a task based on a condition using an if statement:
if (true) {
console.log(‘This message will print!’);
}
// Prints: This message will print!
The if keyword followed by a set of parentheses () which is followed by a code block, or block statement, indicated by a set of curly braces {}.
Inside the parentheses (), a condition is provided that evaluates to true or false.
If the condition evaluates to true, the code inside the curly braces {} runs, or executes.
If the condition evaluates to false, the block won’t execute.
If we wanted to add some default behavior to the if statement, we can add an else statement to run a block of code when the condition evaluates to false.
Take a look at the inclusion of an else statement:
if (false) {
console.log(‘The code in this block will not run.’);
} else {
console.log(‘But the code in this block will!’);
}
// Prints: But the code in this block will!
Here is a list of some handy comparison operators and their syntax:
Less than: <
Greater than: >
Less than or equal to: <=
Greater than or equal to: >=
Is equal to: ===
Is not equal to: !==
All comparison statements evaluate to either true or false and are made up of:
`It can be helpful to think of comparison statements as questions. When the answer is “yes”, the statement evaluates to true, and when the answer is “no”, the statement evaluates to false.
Two values that will be compared.
An operator that separates the values and compares them accordingly (>, <, <=,>=,===,!==).
Logical Operators
Working with conditionals means that we will be using booleans, true or false values.
In JavaScript, there are operators that work with boolean values known as logical operators. We can use logical operators to add more sophisticated logic to our conditionals. There are three logical operators:
the and operator (&&) *When using the && operator, both conditions must evaluate to true for the entire condition to evaluate to true and execute.
the or operator (||) *When using the || operator, only one of the conditions must evaluate to true for the overall statement to evaluate to true.
the not operator, otherwise known as the bang operator (!) *The ! not operator reverses, or negates, the value of a boolean.
The ! not operator reverses, or negates, the value of a boolean:
let excited = true;
console.log(!excited); // Prints false
let sleepy = false;
console.log(!sleepy); // Prints true
Essentially, the ! operator will either take a true value and pass back false, or it will take a false value and pass back true.
let myVariable = ‘I Exist!’;
if (myVariable) {
console.log(myVariable)
} else {
console.log(‘The variable does not exist.’)
}
The code block in the if statement will run because myVariable has a truthy value; even though the value of myVariable is not explicitly the value true,
when used in a boolean or conditional context, it evaluates to true because it has been assigned a non-falsy value.
So which values are falsy— or evaluate to false when checked as a condition? The list of falsy values includes:
let numberOfApples = 0;
if (numberOfApples){
console.log(‘Let us eat apples!’);
} else {
console.log(‘No apples left!’);
}
// Prints ‘No apples left!’
0
Empty strings like “” or ‘’
null which represent when there is no value at all
undefined which represent when a declared variable lacks a value
NaN, or Not a Number
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
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.
In the spirit of using short-hand syntax, we can use a ternary operator to simplify an if…else statement.
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!’);
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!
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!’);
}
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’
