Lambda School Pre-course 9: Learn to use basic control flow and 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.

precourse9

Learn to use basic control flow and if/else statements

This section of the pre-course focuses on control flow. Its basically conditionals and branching so that a program doesn’t just do everything in its code, from the first line to the last – it lets the program do things based on input and conditions. The sections covered include:

  • Control flow
  • Undefined and Null
  • Truthiness
  • Comparison Operators

Control Flow

As per Wikipedia:

In computer science, control flow (or flow of control) is the order in which individual statements, instructions or function calls of an imperative program are executed or evaluated. The emphasis on explicit control flow distinguishes an imperative programming language from a declarative programming language.

Within an imperative programming language, a control flow statement is a statement, the execution of which results in a choice being made as to which of two or more paths to follow. For non-strict functional languages, functions and language constructs exist to achieve the same result, but they are usually not termed control flow statements.

Essentially, control flow is the process by which programs become dynamic and can respond to a user’s input or some other stimulus, to cause it to act in a specific manner based on that input/stimulus. Everything from typing in a word processor (which causes letters to appear on a screen) to pressing spacebar to jump in a computer game – any action, essentially, is dependent on control flow. In real life, its akin to a person turning left or turning right on a road, or making any other choice, really.

Flow is generally dependent on a condition. Its generally a true/false condition. If something is true, take this action. If its not, take this other action instead. Its possible to even await a variety of “trues”, but in that case, generally only the first one to trigger happens – for example, maybe in a computer game, a player can jump, move left, move right, make an attack (which can be one of a variety of attacks), use an item (probably also one of a variety of options), open a map or other window (like a character inventory or maybe a chat system)… whichever of these is activated first is what happens. Computers are fast enough that many of these actions can even be chained together so they appear as if they’re all happening at once, or at least happening in “real time”. For example, a person’s character could move left WHILE jumping and making an attack in midair – 3 actions, which happen within a split second of each other, but to our perception are effectively viewed as a single process.

For purposes of this pre-course, and probably the full course to follow, flow will likely be simpler though. I’m sure it’ll mainly be based on clicking hyperlinks or using a drop-down or other selector to make decisions on a web page, or typing in information and having the program perform an action based on that.

Here’s an example of flow control and comparison operators from the pre-course. It will check to see if a condition is true, and execute code accordingly.

function canDrive(age) {
if (age > 15) {
return true;
}
return false;
}
canDrive(16); // true

What we have here is a function, and an if statement. The if statement looks at a condition to see if its true. In this care, its looking at a variable called age and testing to see if that variable is greater than the number 15. If it is, it returns a true response to the main program, which (if the function name is to be believed) indicates that the person whose age was reviewed is old enough to drive. If the number is not greater than 15 (its 15 or less), then it returns false, indicating that the person is not old yet old enough, but can maybe pay for gas.

As per the Lambda School text:

The “Greater Than” symbol ( > ) that you see in the last example is called a Comparison Operator. Comparison Operators evaluate two items and return either true or false. These operators are: < , <=, >, >=, ===, !== . We will learn more about these operators later in this lesson.

Undefined and Null

Undefined and null are values which can be assigned to variables in JavaScript. Undefined means that something does not exist – either a variable does not exist or it doesn’t have a value yet. Its assigned by the computer. Null is a value that’s assigned by a developer to a variable or object. It means that the item exists, but it does not yet have a value assigned to it.

console.log(unkownVar); // undefined
let phoneNumber = ‘123-456-7890’;

phoneNumber = null;

phoneNumer; // null

I know that in our software at work, the development team often assign “null” to fields in our database that don’t have information yet, but still are important parts of a collection of data about a patient. For example, if a new patient is entered into the system, and data entry has only just begun, their phone number might initially be set to null, until its changed by a user in the Admissions department.

As per the Lambda School text:

One last thing to note, neither undefined nor null are strings. They are written just as they are with no quotes around them, like a Boolean.

Truthiness

Boolean values can be either true or false. Because of this, its easy to make decisions based on them, both in real life and in programming. If its raining outside, carry an umbrella basically means that if raining = true then execute the procedure to search helplessly for an umbrella in working condition in the house and try to sneak out with it before the kids see. Other variables in JavaScript have an inherent true/false value associated with them as well. They can essentially reduce down to a Boolean value.

As per the Lambda School text:

In these lessons, we have talked a lot about the Boolean values, true and false. When using an if statement or other statements that expect a Boolean value (such as the !, NOT), and the expression given is not a Boolean value, JavaScript will do something called type coercion and transform whatever it is given into a Boolean value. This is known as truthy and falsey. Every data type has a truthiness to it. Here are some examples:

items that are coerced to true:

true
1
’ ’
[] // an array, you’ll learn more about this later
{} // an object, you’ll learn more about this later
function() {}

items that are coerced to false:

false
0
undefined
null
''

Comparison Operators

Comparison operators (>, >=, <, <=, ===, !==) evaluate two expressions to determine if their values are the same (equal) or different (not equal, greater than, less than, etc.). Essentially, as math is performed on an expression, it is evaluated down to being true or false (or, more accurately, coerced).

1 > 2; // false
2 < 3; // true
10 >= 10; // true
100 <= 1; // false

As per the Lambda School text:

The “triple equals” sign ( === ) must not be confused with a single equal sign (which indicates assigning a value to a variable). The triple equal will compare everything about the two items, including type, and return if they are exactly equal or not: (Something to note: there is a “double equals” ( == ) sign which will compare two items, but it will NOT take into account their types (1 == ‘1’ // true). Due to this, it is considered bad practice to use the double equal sign. We would like to see you always using the triple equal sign, and you will always see us using it.)

1 === 1; // true
1 === '1'; // false
'cat' === 'cat'; // true
'cat' === 'Cat'; // false

Finally, we have the NOT (!) and NOT EQUAL (!==) comparison operators. “Not” (!) means use the opposite value of an expression – so, if its true, then use false, and vice versa. “Not equal” (!==) means that the two values are not equal in any manner. It will return true if the items being compared are NOT equal to each other, either by value or type.

  • != checks the value of two expressions (and older, looser comparison operator)
  • !== checks both the value and type (the newer, stricter comparison operator)
1 !== 1; // false
1 !== '1'; // true
'cat' !== 'cat'; // false
'cat' !== 'Cat'; // true

2 thoughts on “Lambda School Pre-course 9: Learn to use basic control flow and if/else statements

Leave a comment