"use strict";

// TOPIC /////////////////////////////////////////////////////////////////////////////////////////////////////

// Control Flow and Conditional Statements

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// 1. What is Control Flow?

// 2. What is an if...else conditional statement?

// 3. What is a switch...case conditional statement?

// 4. What is a ternary operator?

// 5. What are loops and what kind of loops can we use?

// 6. What is a for-loop?

// 7. What is a while loop?

// 8. What is a do...while loop?

// 9. What is an infinite loop?

// 10. What is a for...in loop?

// 11. What is a for...of loop?

// 12. What are the uses of the keywords break and continue in loops?

// 13. What is try/catch/finally?

//

//

// NOTES ///////////////////////////////////////////////////////////////////////////////////////////////

// 1. Useful information about control flow and conditional statements from study, research, tutorials,

// mentor meetings, peer discussions, and good ole' fashioned curiosity. I've put the document in Question

// and Answer format for improved readability.

//

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

/*

1. What is control flow?

////////////////////////

-- control flow allows your code to take certain actions based on certain scenarios.

-- control flow allows you to dictate how your code runs under different conditions or until a certain condition is met.

-- control flow can be achieved in 2 ways:

-- conditional (if, else-if, else).

-- try/catch/finally.

*/

/*

2. What is an if...else conditional statement?

//////////////////////////////////////////////

-- A conditional uses a command and executes whatever is in the curly braces if the expression evaluates true.

-- `if` always comes first in an if...else conditional statement.

-- `else if` is used if there is more than one condition in the if...else condtional statement.

-- `else` comes at the end if none of the previous blocks of code are executed.

-- Below is an example of a if..else conditional statement:

if (condition) { // if the FIRST condition evaluates true...

statement; //... return this statement.

} else if (anotherCondition) { // if the SECOND condition evaluates true...

statement; //... return this statement.

} else if (anotherCondition) { // if the THIRD condition evaluates true...

statement; //... return this statement.

} else { // if NONE of the conditions above evaluate true...

statement; //... return this statement.

}

-- In a functional example:

*/

function guessPrimaryColor(str) {

let color = str;

if (color === 'red') {

console.log(`correct! One of the primary colors is red!`);

} else if (color === 'blue') {

console.log(`correct! One of the primary colors is blue!`);

} else if (color === 'green') {

console.log(`correct! One of the primary colors is green`);

} else {

console.log(`sorry, that's not a primary color. Try again!`)

}

}

guessPrimaryColor("red"); //-> correct! One of the primary colors is red!

guessPrimaryColor("blue"); //-> correct! One of the primary colors is blue!

guessPrimaryColor("green"); //-> correct! One of the primary colors is green

guessPrimaryColor("yellow"); //-> sorry, that's not a primary color. Try again!

/*

-- in another example using more complex conditional logic:

*/

function greeting(num) {

let hour = num; // we turn our input into a variable...

if (hour >= 6 && hour < 12) { // if the hour is less than or equal to 6 AND less than 12...

console.log(`Good morning!`); // return statement.

} else if (hour >= 12 && hour < 18) {

console.log(`Good afternoon!`);

} else if (hour >= 18 && hour < 24) {

console.log(`Good evening!`);

} else {

console.log(`Go to bed`);

}

}

greeting(6);

greeting(16);

greeting(22);

greeting(2);

/*

3. What is a switch...case statement?

/////////////////////////////////////

-- A SWITCH statement os a conditional statement that tests whether something is true or false.

-- a switch statement contains a collection of case blocks.

-- when a switch statement runs, ONLY ONE will get hit and have thier code executed.

-- a switch statment works like this:

- a switch statement starts with the statement itself (i.e. switch ).

- the statement is followed by parentheses. HOWEVER, instead of a conditional statement (if..then) we add a VARIABLE.

- this variable will be compared to each case statement in the code block.

- inside the body of the switch statement, we have one or more CASE STATEMENTS.

- each case statement will be compared to the variable at the beginning of the case statement.

*/

function role(str) {

let user = str; // the input is assigned to the `user` variable that we will use from now on.

switch (user) { // we start the switch statement with keyword and the variable to compare.

case "guest": // the first case we compare is `admin` to the value of `user`...

console.log(`Guest User`); // ... if `admin` equals the value of `user` execute this code ONLY...

break; // ... and if this case was TRUE, then we BREAK out of the switch statement.

case "moderator":

console.log(`Moderator!`);

break;

default:

console.log(`Unknown User!`);

}

}

console.log(role("guest"));

console.log(role("moderator"));

console.log(role("Tom"));

/*

4. What is a ternary operator?

//////////////////////////////

-- A TERNARY OPERATOR is short-cut conditional statement.

-- A ternary operator is the only JavaScript operator that takes three operands.

-- In the example below, we want to determine whether a person can drink (or not).

-- Also note that although you dont need the parentheses fro the logical expression, it does help in visual identification.

let canIDrink -- is the keyword and variable name.

(age >= 21) -- This is the logical expression, specifically IF age is greater or equal to 21...

? -- If this condition is true...

'Yes, you can drink' -- Return this.

: -- If the condition is false...

'No, you cannot drink' -- The value returned if the condition is false.

*/

let age = 21;

let canIDrink = (age >= 21) ? 'Yes, you can drink' : 'No, you cannot drink';

console.log(canIDrink); //-> Yes, you can drink

/*

-- Additionally, a ternary operator is right-associative, so conditions can be chained together.

-- Note that the format can be a single line or multiple lines depending on your format preference.

*/

let direction = 'right'

let myDirection = (direction == 'left') ? 'wrong direction' : (direction == 'right') ? 'right!' : 'where are you going?';

console.log(myDirection);

//or//

// let myNumber = 4;

// let result = (myNumber == 1) ? "a"

// : (myNumber == 2) ? "b"

// : (myNumber == 3) ? "c"

// : (myNumber == 4) ? "d"

// : "e";

// console.log(result));

/*

5. What are loops and what kind of loops can we use?

////////////////////////////////////////////////////

- loops allow you to iterate (repeat) a set of instructions a set number of times OR until a specific condition is true.

- loops are a generic way for repeating code with control over how many times the code repeats.

- There are THREE kinds of loops you can create in JavaScript:

-- for loops

-- while loops

-- do...while loops

- each of these loops allow you to specify the code we want to repeat a number fo times and a way to stop

the repitition when a condition is met.

- there are also TWO kinds of loops we can use to iterate over the properties of an object or elements in an array.

-- for...in loops

-- for...of loops

*/

/*

6. What is a for-loop?

/////////////////////

-- A for loop repeats an action a number of times

-- A for loop allows you to repeat a set of instructions a set number of times UNTIL the expression you specify returns false.

-- A standard for loop code would look like this:

initialization condition final expression

\ | /

for ( let i = 1; i <= countTo; i++ ) {...}

\

block of code that runs through every iteration in the loop

-- from the example above, you have 3 statements:

1. initialization.

2. continued condition being true.

3. final expression

-- INITIALIZATION

-- initialization is where the initial expression where we start the loop.

-- so you declare your LOOP VARIABLE with `let` and name it i (short for index) and set it to what you need.

-- if you want to increment, you start at the lowest number (i.e. 1 or 0).

-- if you want to decrement, you start with the value or the variable count you have in a seperate variable.

-- in the example above, we have initialized the variable to 1.

-- at the end, use a semi-colon to terminate the statement.

-- CONDITIONAL

-- conditional compares i to something else.

-- the loop will run as long as this condition is TRUE.

-- for example:

-- i < 5 //-> 1,2,3,4 - as long as the loop is LESS than 5, the loop will execute.

-- i <= 5 //-> 1,2,3,4,5 - as long as the loop is less than or equal to 5, the loop will execute.

-- countTo = 4

i <= countTo //-> 1,2,3,4,5 - as long as the loop is less than or equal to countTo (4), the loop will execute.

-- Remember, terminate the statement with a semi-colon.

-- FINAL EXPRESSION

- (aka increment or decrement expression) adds (or subtracts) what you specify as the loop goes through.

*/

///// STANDARD FOR LOOP UP (INCREMENTING) //////////////////////////////////////////////

function countUp() {

const countTo = 10;

for (let i = 0; i <= countTo; i++) {

console.log(i);

}

}

console.log("FOR loop -- incrementing UP")

console.log(countUp());

///// STANDARD FOR LOOP DOWN (DECREMENTING) ///////////////////////////////////////////

function countDown() {

const countFrom = 10;

for (let i = countFrom; i >= 0; i-- ) { // note that the decrement inverts the initialization and conditional.

console.log(i);

}

}

console.log("FOR loop -- decrementing DOWN")

console.log(countDown());

///// STANDARD INCREMENTING LOOP (LABEL EVEN OR ODD) ////////////////////////////////

function countUpEvensAndOdds() {

const theCount = 10;

for (let i = 1; i <= theCount; i++) {

if (i % 2 === 0) {

console.log(`the number ${i} is even`);

} else {

console.log(`the number ${i} is odd`);

}

}

}

console.log("FOR loop -- incrementing up counting evens and odds")

console.log(countUpEvensAndOdds());

///// STANDARD INCREMENTING LOOP (PRINT ONLY ODDS) ////////////////////////////////

function printOddsOnly() {

const pod = 10;

for (let i = 1; i <= pod; i++) {

if (i % 2 !== 0) {

console.log(`the number ${i} is odd`);

}

}

}

console.log("FOR loop -- incrementing up counting odds only")

console.log(printOddsOnly());

/*

7. What is a while loop?

////////////////////////

-- while loops are used to run a block of code a set number of times as long as some logical condition is true.

-- the key difference between a for loop and a while loop is that for loops is that the loop variable (i.e. i = 0) is part of the loop itself.

-- in while loops, that variable has to be decalred EXTERNALLY.

*/

function whileLoop() {

let i = 0; //-> the variable in the while loop is declared EXTERNALLY.

while (i <= 5) { //-> the condition goes in the parentheses...

console.log(i); //-> all statements go in the code block...

i++; //-> finally, at the end of the block we need to increment i.

}

}

console.log("this is a while loop:")

console.log(whileLoop()); //-> 0,1,2,3,4,5

/*

8. What is a do...while loop?

//////////////////////////

-- do...while loops are similar to while loops but are slightly different.

-- a do...while loop variable must be declared externally like a while loop.

*/

function doWhileLoop() {

let i = 0;

do {

console.log(i);

i++;

} while (i <= 5);

}

console.log(`this is a do..while loop:`)

console.log(doWhileLoop());

/*

9. What is an infinite loop?

////////////////////////////

-- an infinite loop execture indefinitly.

-- an infinite loop is executed by simply forgetting to add the i++ incrementation.

function infiniteLoop() {

let i = 0;

while (i <= 5) {

console.log(i); // note the omission of the i++ at the end of the while code block. This will crash your editor.

}

}

*/

/*

10. What is a for...in loop?

///////////////////////////

-- a for...in iterates over the properties of an object.

-- a for...in loop can also be used to iterate over an array, but it is not an ideal way.

-- we start out with an object (person) with two properties (name and age).

-- we start out with an object (person) with two properties (name and age).

*/

var myObject = { "key1" : "value1",

"key2" : "value2",

"key3" : "value3" }

/*

-- if we want to display all the properties of this object, we use the for..in loop.

-- a for...in loop we dont have the classic three part design (i.e. (initial expression; condition; increment) ).

-- instead we only have TWO parts:

properties (in) object

\ /

for (let key in person)

-- essentially, we are looping through the properties (i.e. key) in the object (person).

-- below, we loop through the properties of 'forInObject'

*/

for (let key in myObject) {

console.log(key);

} //-> key1

// key2

// key3

/*

-- to display the values of an object, we can use either:

-- dot notation (i.e. person.name)

/or/

-- bracket notation (person['name'])

-- remember that if you dont know ahead of time what property we want to access, use bracket notation with is calculated at runtime.

-- also remember to add quotes

*/

for (let key in myObject) {

console.log(myObject[key]);

} //-> value1

// value2

// value3

/*

-- and then if we want to print out the key AND value, all we need to do is specify that in the console.log.

*/

for (let key in myObject) {

console.log(key, myObject[key]);

} //-> key1 value1

// key2 value2

// key3 value3

/*

-- now suppose you wanted to use a for...in loop to iterate over an ARRAY.

-- to do this, instead of using 'key' you would use 'index':

-- HOWEVER, using a for...of loop is more ideal for iterating over arrays.

*/

let colors = ['red', 'green', 'blue'];

for (let index in colors) {

console.log(index, colors[index]);

} //-> 0 red

// 1 green

// 2 blue

/*

11. What is a for...of loop?

////////////////////////////

-- for...of loops are used to iterate over the items in an array

-- for...of loops are introduced in ecma6 and function just like the for...in loop.

-- with the for...of loop, we dont have to deal with the index (from the example above) or access the element at the given index.

-- in the example below, color (our loop variable) will hold one of the items in the array.

*/

for (let color of colors) {

console.log(color);

} //-> red

// green

// blue

/*

12. What are the uses of the keywords break and continue in loops?

//////////////////////////////////////////////////////////////////

-- the keywords break and continue can change how the loop behaves.

-- for example, suppose we want to jump out of a loop when a condition is true (i.e. i === 5).

-- in this case, we would use a `break`

*/

function breakOut() {

let i = 0; // the initial value of i is equal to 0.

while (i <= 10) { // the loop runs as long as i is less than or equal to 10...

if (i === 5) { // HOWEVER, if i = 5...

break; // BREAK out of the loop.

}

console.log(i); // print i and increment as long as i <= 10 AND as long as i is NOT equal to 10.

i++;

}

}

console.log(`below is an example of break`);

console.log(breakOut()); //-> 0

// 1

// 2

// 3

// 4

/*

- with the keyword `continue`m we can jump back to the beginning of the loop when a certain condition is true.

- below, when we are going through the while loop.

- IF the number is an odd number (i.e. 2,4,6,8) with the code i % 2 === 0, the loop will increment.

- HOWEVER! When we insert `continue` as the last bit of our code, we jump back to the beginning of the while loop.

- by doing this, we DO NOT print the odd numbers... only the even ones.

- so after the 2 is skipped, the next step of the iteration occurs (i.e. 3) and the if statement does not execute because 3 is not odd.

*/

function continueOn() {

let i = 0; // the initial value of i is equal to 0.

while (i <= 10) { // the loop runs as long as i is less than or equal to 10...

if (i % 2 === 0) { // when it shows an odd numnber (i.e. 2,4,6,8)

i++;

continue;

}

console.log(i); // print i and increment as long as i <= 10 AND as long as i is NOT equal to 10.

i++;

}

}

console.log(`below is an example of continue`);

console.log(continueOn()); //-> 1

// 3

// 5

// 7

// 9

/*

13. What is try/catch/finally?

//////////////////////////////

-- the try/catch/finally statement is JavaScripts exception handling mechanism.

-- try/catch/finally is used to catch errors in our programs.

-- the 'try' clause defines the block of code whose exceptions are to be handled.

-- simply put, 'try' is the block of behavior to be tested.

-- the 'catch' clause is a block of statements invoked when the exception has occured anywhere in the 'try' block.

-- simply put, the 'catch' is the block that runs if the 'try' block fails.

-- 'catch' is also always folloed by an identifier in parentheses (i.e. e).

-- it is like a function parameter when the exception is caught the value associated with it it is assigned to the

parameter.

-- the 'finally' block contains cleanup code that is guarenteed to be executed regardless of what happens in the 'try' block.

-- this is optional... the block will run whether the block runs or not.

*/

function fail() {

try { // try anything in this block...

console.log('this works');

} catch (error) { // if there are any errors, handle them in 'catch'...

console.log('theres a mistake')

}

}

console.log(fail()); // if you try this, the code works and catch block was never called.

/*

-- But what if we alter the code in the try block so that it DOES NOT work.

*/

function fail2() {

try { // try anything in this block...

consol.log('this works'); // console.log is misspelled...

} catch (error) { // catch runs...

console.log('theres a mistake') // prints 'there is a mistake'...

console.dir(error); // when you call console.dir with the error object, this prints the stack trace.

}

}

console.log(fail2());

/*

Resources

//////////

-- JavaScript - the Definitve guide.

*/