Lambda School Pre-course 10: Learn to write control flow using if/else statements

There are nine units in Lambda School’s Full Stack Web Development Pre-course. I’m going to summarize what the pre-course covers for each of them. This material is basically ground-floor information that students need to know before they start the full course.

precourse10

Learn to write control flow using if/else statements

The if/else statement is the prototypical conditional statement in program. It evaluates an expression and introduces branching to a program, allowing it to perform different tasks based on user input. Conditionals rely on the evaluation of expressions using logical operators to perform comparisons. They either act on specific values (including true/false), values in a given range or by the absence of a value (a default, usually at the end of the conditional, preceded by an else statement).

As per the Lambda School text:

Nearly every programming language has process in which we use to tell our programs where to start, what to have happen when the process starts and when that process should end. Luckily in JavaScript this ability is baked right into to core foundation of the language without having to worry too much about managing things like memory on our computers etc. This lesson takes us through some basic techniques on how to tell our computers what to do, based on conditions with which we provide it.

Logical Operators

Logical operators are reserved symbols (or words) that compare two or more pieces of information – usually expressions. They generally are used to test whether the expression is true or false (Boolean expressions). Just like truth tables in high school math, expressions can be evaluated using logical operators to see if either is true, both are true or neither is true.

&& (AND)

The  “AND” operator is written with two ampersands (&&). It evaluates two expressions and will return true if BOTH expressions are true. If EITHER expression (or both of them) is false, then this operator will return false:

if (100 > 10 && 10 === 10) { 
  console.log(‘Both statements are true, so this code will be run’); 
} 

if (10 === 9 && 10 > 9) { 
  console.log('One of the statements is false, so the && will return false, this code will not be run'); 
}

|| (OR)

The “OR” operator is written with two vertical bars (||). It evaluates two expressions and will return true if ONE or BOTH of the expressions is true. It will return false if BOTH expressions are false:

if (100 > 10 || 10 === 10) { 
  console.log(‘Both statements are true’); 
  console.log('This code will be run.'); 
} 

if (10 === 9 || 10 > 9) { 
  console.log('One of the statements is true so the || will return true'); 
  console.log('This code will be run.'); 
} 

if (10 === 9 || 1 > 9) { 
  console.log('Both of the statements are false, so the || will return false. ');
  console.log('This code will not be run.'); 
}

! (NOT)

The “NOT” operator is written as a single exclamation mark (!). It will return the opposite Boolean value of what is passed to it:

if (!false) { 
console.log(‘The ! will return true because it is the opposite of false.’); 
console.log('This code will be run.'); 
} 

if (!(1 === 1)) { 
console.log('1 does equal 1, that expression returns true. The ! operator will then return the opposite of that.'); 
console. log('This code will not be run.'); 
}

Notes About Logical Operators

As per the Lambda School text:

The expressions are evaluated in order, and the computer will skip any redundant expressions. In an && statement, if the first expression is false, the second expression will not be evaluated because BOTH expressions need to be true. Same for the || statement. If the first expression is true, the second will not be evaluated because there only needs to be one true statement to fulfill the requirements of the operator.
Use parentheses. As we saw in the second ! operator example, we used parentheses to evaluate what was inside of the parentheses FIRST, then applied the ! operator. We can wrap ANY expression in parentheses and it will be evaluated before evaluating the expression as a whole.

Control Flow (continued)

We can use the if statement to check and see if an expression is true. If it is, a set of code can be executed. If it is not, that code can be skipped and the program can continue to run.

if (1 + 1 === 2) { console.log('The expression is true!'); }

The else if and else statements expand on the base if statement. These statements can only be used with if and must come after it. They are evaluated if the initial if returns false. The else if is like another if statement that has been chained to the first one. There is no limit to the number of else if statements that can be included in a single block of code. However, only one if or else if statement code block will be run. The first such statement that returns true will have its code executed and the rest will be skipped:

if (false) { console.log('This will be skipped!'); } 
  else if (true) { console.log('This code will be run.'); } 
  else if (true) { console.log('This code will NOT be run.'); }

The else statement will always come at the end of an if-else chain. It acts as a default, if no other condition is met; so if none of the expressions return true, the else code block will execute. The opposite is also true. If any of the previous if/else expressions are true, the else statement code block will not run.

if (false) { console.log('This will be skipped!'); } 
  else if (false) { console.log('This code will NOT be run'); } 
  else { console.log('This code will be run'); }

Why use else if?

So, what’s the difference between using a bunch of if statements versus using else if? When using an if/else block, only one code block will execute, even if more than one are true. The first one will run. If a series of if statements are run, every one of them that is true will run. For example:

const age = 21; //using if/else statements

if (age > 20){ console.log('older than 20!'); } 
  else if (age > 15){ console.log('older than 15!'); } 
  else { console.log('younger than 15!'); }

In the above example only older than 20! will be logged even though the first two statements were true.

const age = 21; //using multiple if statements

if (age > 20){ console.log('older than 20!'); } 
if (age > 15){ console.log('older than 15!'); } 
if (age <= 15) { console.log('younger than 15!'); }

In the above example the first two if statements would console log because both of them are true.

Ultimately, its up to the person writing the code to decide between having multiple actions based on input/data or just one action.

Leave a comment