This workshop is important because:
"Control flow" refers to the way our computers move through a program's code. Understanding control flow allows us to trace the flow of a program based on its code. This skill is essential for programming in every language and paradigm. In particular, conditionals and loops are fundamental to understanding modern programming languages.
After this workshop, developers will be able to:
- Predict the output of boolean expressions, including "truthy" and "falsey" values.
- Write syntactically correct conditional statements.
- Compare & contrast for and while loops.
Before this workshop, developers should already be able to:
- Create and change variables of many types in the Chrome developer tools.
- Access and change values with objects and arrays.
At the very lowest level, computers understand our instructions as sequences of 1s and 0s. This "binary code" drives everything a computer does, from outputting text in the terminal, to displaying complex video game graphics, to communicating with other computers across the internet.
Boolean logic is the closest web developers need to get to thinking about binary code. In boolean logic, every value is either true or false.
typeof(true) // boolean
typeof(false) // booleanJavaScript blurs this line a bit by using "truthy" and "falsey" values. The positive effect is that conditionals don't have to be phrased just in terms of boolean values. Downsides are that we have to memorize which values are "falsey," and it can take practice to quickly predict results.
To check whether some value is truthy or falsey, try the following structure in your JavaScript console:
var myValue = "fishing";
if(myValue){
console.log(myValue, " is truthy!");
} else {
console.log(myValue, " is falsey!");
}| English | "and" | "or" | "not" or "bang" | "double bang" |
|---|---|---|---|---|
| Javascript | && |
|| | ! |
!! |
| e.g. | a && b |
a || b | !b |
!!b |
| English | A and B | A or B | not B | not NOT B |
| strict equality | loose equality | not strictly equal | not loosely equal | greater than | less than | greater than or equal to | less than or equal to |
|---|---|---|---|---|---|---|---|
=== |
== |
!== |
!= |
> |
< |
>= |
<= |
- What is the outcome of the following expressions?
- true || false
- false && false
- true && false
- (false || true) && true
- false && ((true || false) && (false || true))
answers
```js * true || false // true * false && false // false * true && false // false * (false || true) && true // true * false && ((true || false) && (false || true)) // false ``` Note that JavaScript is lazy when it can quit evaluating a boolean expression early. For example, in the last expression above, you can tell from just the first `false &&` that the whole expression will be false.- Which of the following are truthy values?
"abc"""1-0Math.PINaNArray[]Object{}nullundefined
answers
truthy: `1`, `"abc"`, `[]`, `{}`, `Math.PI`, `Array`, `Object`- What is the outcome of the following expressions?
- true && 6
- 0 || "hi"
- ["a","b","c"] || "123"
- false || null
answers
```js * 1 && 6 // 6 * 0 || "hi" // "hi" * ["a","b","c"] || "123" // ["a","b","c"] * false || null // null ```The boolean expression inside an if's parentheses will always be evaluated as truthy or falsy to determine what will happen next.
A diehard Giants fan might have the following rules for baseball games:
if (giantsPlaying) {
getTickets();
}
if (!giantsPlaying) {
watchOnTV();
}We can rephrase this more succinctly using if and else.
if (giantsPlaying) {
getTickets();
} else {
watchOnTV();
}A slightly more complex boolean expression will help our Giants fan save some money by adding another requirement to purchase tickets:
if (giantsPlaying && gameInSF){
getTickets();
} else {
watchOnTV();
}Here's a sample ruleset for commuters:
var destination = "GA";
if ( hasBike ) {
rideToGA();
} else if ( hasTransitPass ) {
busToGA();
} else {
walkToGA();
}A strategy for choosing what to drink:
var drink;
if (tooSleepy) {
if (before5pm) {
drink = "coffee";
} else {
drink = "black tea";
}
} else {
if (isHungry){
drink = "smoothie";
} else {
drink = "water";
}
}A switch statement checks the value of one variable or expression to determine which of many "cases" to jump to. Here's code for a vending machine with a different price for each row:
switch (row){
case 1:
price = 0.25;
break;
case 2:
price = 0.50;
break;
case 3:
price = 0.75;
break;
case 4:
price = 1.00;
break;
default: // the rest of the products (rows 5-7)
price = 1.25;
} ###Conditional Control Flow Tricks
Loose Control Flow (watch out for edge cases!)
if ( username ) {
// submit signup form
}
// same intent as
if ( username.length > 0) {
// submit signup form
}Ternary operator
var username = last_name ? first_name + last_name : first_name;
// same as
var username = first_name;
if ( last_name ) {
username = first_name + last_name;
}Conditional assignment: || to set to a default value
var bestCity = yourCity || "San Francisco";
// same as
var bestCity = "San Francisco";
if ( yourCity ) {
bestCity = yourCity;
}Conditional Execution: && to handle issues
badThing && alert("Uh oh!")
// same as
if ( badThing ) {
alert("Uh oh!");
}Whiteboard with a partner:
Jimmy loves roller coasters, but there are a bunch of rules (ugh!) for riding:
For starters, it costs 5 tokens. Here's how we might code that:
// assume we'll have a tokens variable
// storing the number of tokens
if ( tokens >= 5 ) {
console.log("Step right up!");
} else {
console.log("Sorry, you can't ride")
}Pseudocode or edit the code above to check the following requirements:
- Add a requirement that riders must be at least 4ft tall.
answer
```js if ( tokens >= 5 && height >= 4) { console.log("Step right up!"); } else { console.log("Sorry, you can't ride."); } ```- Add a requirement that riders must be at least 12 years old.
answer
```js if ( tokens >= 5 && height >= 4 && age >=12) { console.log("Step right up!"); } else { console.log("Sorry, you can't ride."); } ```- Replace the previous rule: now riders under 12 can participate when they're accompanied by an adult.
answer
```js if ( tokens >= 5 && height >= 4 ) { if (age >= 12 || hasAdult){ console.log("Step right up!"); } else { console.log("Sorry, you can't ride."); } } else { console.log("Sorry, you can't ride."); } ```- (If the boss isn't looking, you can go on in!)
answer
```js if (!bossLooking){ console.log("Step right up!"); } else { if ( tokens >= 5 && height >= 4 ) { if (age >= 12 || hasAdult){ console.log("Step right up!"); } else { console.log("Sorry, you can't ride."); } } else { console.log("Sorry, you can't ride."); } } ```- Riders with a park pass get in free.
answer
```js if (!bossLooking){ console.log("Step right up!"); } else { if ( (tokens >= 5 || hasPass) && height >= 4 ) { if (age >= 12 || hasAdult){ console.log("Step right up!"); } else { console.log("Sorry, you can't ride."); } } else { console.log("Sorry, you can't ride."); } } ```Whenever we want to repeat something in code, we use a loop. We can think of every loop as three parts: initialization (setup), continue condition, and update expression.
While pizza is available, take pizza!
In while loops, the initial setup happens before the loop. The continue condition goes inside the while parentheses. The updates happen inside the loop.
var minutesBeforeWork = 80; // setup: plan to wake up early
while (minutesBeforeWork > 30) { // continue condition: leave enough time to get day clothes on
minutesBeforeWork = minutesBeforeWork - 5; // update: hit snooze!
}For loops allow the setup, continue condition, and update expression to live inside the for loop parentheses.
for (var count = 1; count <= 3; count++){
console.log(count);
}
console.log("Go Team!");For loops for arrays usually use a counter variable to move through the indices of the array.
var friends = ["Bali", "Nat", "Kelly"]
for (var i = 0; i < m.length; i++) {
console.log(m[i] + " is a nice person");
}We'll see how to use special iterator methods to move through arrays sequentially. Iterator methods are wonderful for that. For loops in JavaScript are much more flexible than iterator methods, though, so it's important to get a handle on them.
For loops only really need a continue condition (or the loop will never end!). We can do setup before the loop, and we can do updating inside the loop. In this way, a for loop can look a lot like a while loop.
var minutesBeforeWork = 540;
for( ; minutesBeforeWork > 30; ) {
minutesBeforeWork = minutesBeforeWork - 5;
}Here's an example that takes advantage of JavaScript for loops' flexibility (perhaps at the cost of readability!).
for (var height=48, yearlyGrowth=1, age=8; age<=18; height += yearlyGrowth){
if (growthSpurt){
yearlyGrowth = 6;
} else {
yearlyGrowth = 1;
}
}
console.log("Adult height is ", height, " inches!");The reserved word break will break us out of a loop immediately.
for (var i = 0; i < 10; i+=2) {
console.log(i);
break;
}
var j=0;
while (j < 10) {
console.log(j);
break;
j += 2;
}Use a for or while loop to console log a shuttle launch countdown: "T minus 10", then "9", "8", "7", "6", "5", "4", "3", "2", "1", "0", "Liftoff!".
answer
```js console.log("T minus 10"); for (var i=9; i>=0; i--){ console.log(i); // can log i.toString() to convert } console.log("Liftoff!"); ```console.log("T minus 10");
i = 9;
while (i>=0){
console.log(i); // can log i.toString() to convert
i--;
}
console.log("Liftoff!");Practice with this training.
The most important things to practice right now are:
- predicting the output of boolean expressions.
- working with more complex, nested conditionals and/or loops.
- remembering the three-part structure of loops and the syntax for each kind of loop.