Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved

JavaScript Booleans What is a Boolean? A Boolean value equates to either true or false. Examples: true; // equates to true false; // equates to false TRUE; // error (incorrect case) True; // error (incorrect capitalization) 4 == 4; // true (equality) 4 == "4"; // true (equality) 4 === 4; // true (identity) 4 === "4"; // false (not identity) 2 booleans.html

What is false? Examples: Boolean( 0 ); // false Boolean( -0 ); // false Boolean( "" ); // (empty string) Boolean( null ); // false Boolean( ! true ); // false 3 false.html

What is also false? Examples: var x; Boolean( x ); // (undefined) Boolean( NaN ); // false Boolean( 0 / 0 ); // (NaN) Boolean( 4 / "Fred" ); // (NaN) 4 falseAlso.html

What is true? Examples: 1; // true -1; // true 3 < 4; // true 4 <= 4; // true 3 != 4; // true (not equality) "4" !== 4; // true (not identity) !(3 > 4); // true 5 true.html

What is also true? Examples: Boolean( ! false ); // true Boolean( "this is a string" ); Boolean( 1 / 0 ); // (Infinity) Boolean( -1 / 0 ); // (-Infinity) Boolean( Infinity ); // true Boolean( -Infinity ); // true 6 trueAlso.html

Dialog: confirm() Description: The confirm() dialog displays “OK” and “Cancel” buttons. 7

Dialog: confirm() Description: The confirm() dialog returns a true if the user presses “OK” or false if the user presses “Cancel”. // open confirm dialog var answer = window.confirm( "OK for true.\n" + "Cancel for false."); console.log( answer ); 8 confirm.html

“if” Statement Flow Chart Description: The “if” statement has one branch. If the condition is true, the block of code is executed. If the condition is false, the block is skipped. 9 IF Code Block truefalse “if” branch “else” branch

What is an “if” statement? Description: A statement that allows you to conditionally execute a block of code. If the condition is true, the code block is executed. Syntax: if ( condition ) { // true // code statement; } 10

Conditional Statement: if // open confirm dialog var answer = window.confirm( "OK for true.\n" + "Cancel for false."); if ( answer == true ) { console.log( "You pressed OK" ); } 11 confirmIf.html Would this also work? if ( answer ) Would this also work? if ( answer )

One Line “if” Statement Discussion: The “if” condition does not require the curly braces “{}” if there is only a single statement in the code block. Example: var isLogin = true; if ( isLogin ) console.log( "Success" ); 12 ifOneLine.html

Discussion: The “if” condition does not require the curly braces “{}” when there is only one statement in the code block, however best practices or a style guideline may encourage its use. Example: var username = "admin"; if ( username == "admin" ) console.log( "Access granted" ); Single Statement “if” Condition 13 ifNoCurly.html

“if else” Statement Flow Chart Description: The “if” statement has one branch. If the condition is true, the block of code is executed. If the condition is false, the block is skipped. 14 IF Code Block truefalse Code Block “if” branch “else” branch

What is an “else” statement? Description: A statement that provides a fall back branch in case the “if” statement is false. Syntax: if ( condition ) { // true // code statement; } else { // if ( ! condition ) // code statement; } 15

Conditional Statements: if & else // open confirm dialog var answer = window.confirm( "OK for true.\nCancel for false."); if ( answer == true ) { console.log( "You pressed OK" ); } else { // if ( answer == false ) console.log( "You pressed Cancel" ); } 16 confirmElse.html

Code Block true Nested “else” Flow Chart Description: In order to handle more than two branches, an “if” statement can be nested inside of an “else” statement. 17 IF Code Block truefalse “if” branch “else” branch IF Code Block truefalse “else” branch IF Code Block false “else” branch true IF false “else” branch

“else if” Flow Chart Description: In order to handle more than two branches, an “if” statement can be nested inside of an “else” statement. 18 IF Code Block “if” true “if” branch ELSE IF ELSE IF Code Block “else if” true “if” false “else if” branch ELSE Code Block “else if” false “else” branch Code Block ELSE IF ELSE IF “else if” true “else if” branch “else if” false when “if” and all “else if” branches are false

What is an “else if” statement? Description: A statement that provides multiple branching in an “if” statement. Syntax: if ( condition ) { // true // code statement; } else if ( condition ) { // true // code statement; } else { // if all conditions false // code statement; } 19

Dialog: prompt() Description: The confirm() dialog displays a text box, “OK” and “Cancel” buttons. 20

Statements: if, else if, & else // open text prompt dialog var answer = window.prompt("Enter YES or NO"); if ( answer == "YES" ) { console.log( "You entered YES" ); } else if ( answer == "NO" ) { console.log( "You entered NO" ); } else { console.log( "Didn't follow directions!" ); } 21 promptElseIf.html

Logical Operators Defined && (aka Logical “AND”) Defined: “AND” is true only if both operands are true || (aka Logical “OR”) Defined: “OR” is true only if at least one operand is true ! (aka Logical “NOT”) Defined: “NOT” is true only if operand is false (invert Boolean) 22

Logical Operator Examples ! true; // false ! false; // true true && true; // true true && false; // false true || true; // true true || false; // true 23 logicOp.html

Logical Operator Precedence Discussion: What happens when multiple logical operators are used together? Examples: // && is higher precedence // and evaluated first true || true && false; // true true || ( true && false ); // true true || ( false ); // true true; 24 logicOpMulti.html

Logical Equivalence Discussion: It is often useful to know what the equivalence of a logical “OR” and a logical “AND”. Examples: // ! highest precedence !( true || false ); // false (! true ) && (! false ); // false !( true && false ); // true (! true ) || (! false ); // true 25 logicEquiv.html

var value = 4; if ( value >= 1 ) { // min range if ( value <= 10 ) { // max range console.log( "Between 1 & 10" ); } else { console.log( "Out of range" ); } Nesting “if” Statements 26 nestedIf.html

var value = 4; if ( ( value >= 1 ) && // min range ( value <= 10 ) ) { // max console.log( "Between 1 and 10" ); } else { console.log( "Out of range" ); } Conditional: “if” and “&&” 27 ifAnd.html

Conditional: “if” and “||” // open text prompt dialog var answer = window.prompt("Type YES or NO"); if ( ( answer == "yes" ) || // lowercase ( answer == "YES" ) ) { // uppercase console.log( "You typed YES" ); } else if ( ( answer == "no" ) || // lowercase ( answer == "NO" ) ) { // uppercase console.log( "You typed NO" ); } else { console.log( "Didn't follow directions!" ); } 28 ifOr.html

“if” and Regular Expressions // open text prompt dialog var answer = window.prompt("Type YES or NO"); var regexYes = /^y$|yes/i; // "y" or "yes" var regexNo = /^n$|no/i; // "n" or "no" if ( regexYes.test( answer ) ) { console.log( "You typed YES" ); } else if ( regexNo.test( answer ) ) { console.log( "You typed NO" ); } else { console.log( "Didn't follow directions!" ); } 29 ifRegExp.html

Conditional Statement: “switch” var answer = window.prompt("Type YES or NO"); switch ( answer ) { case 'YES' : console.log( "You typed \"YES\"" ); break; // exit case case 'NO' : console.log( "You typed \"NO\"" ); break; // exit case default : // else no other matches console.log( "You rebel!" ); break; // exit case } 30 switch.html

Switch with Fall-Through var answer = window.prompt("Type YES or NO"); switch ( answer ) { case 'yes' : // no break (fall-thru) case 'YES' : console.log( "You typed \"YES\"" ); break; // exit case case 'no' : // no break (fall-thru) case 'NO' : console.log( "You typed \"NO\"" ); break; // exit case default : // else no other matches console.log( "You rebel!" ); break; // exit case } 31 switchFallThru.html