📖 JavaScript Conditionals

Control Structures

Control structures are used to control the program flow based on user input and other conditions. This is the program that dictates the behavior of the page including the page content, layout and user interactions. Control structures include loops to handle repetitive tasks and conditionals to determine appropriate responses.

  • Decision Making or Flow Control: determining the order in which statements execute.
  • if statement: most commonly used decision-making structure.
if (conditional expression) {
	statement(s); // execute these statements if conditional expression evaluates true
}

Conditional Expressions

Variables and literals linked together by a comparison operator:

A == B // returns true if A is the same value as B
C > D // returns true if C is greater in value than D
X <= 10 // returns true if X is less than or equal in value to 10
  • statement(s) can be any JavaScript expressions that should be executed if the condition is true.
if (grade >= 90) {
	letterGrade = "A";
}
  • Statements inside the curly braces { } are only executed if the condition evaluates to true.
  • Any statements after the closing curly brace } are executed whether or not the statement is true.
  • You can use any of the comparison operators and logical operators in your conditional expressions.
if ((grade >= 80) && (grade < 90)) {
	letterGrade="B"; // executed only if grade is 80 - 89
}
document.write("You made a " + letterGrade + "."); // always executed regardless of grade value

if . . . else Statement

You can include an else clause in an if statement to run an alternate set of code if the conditional expression is false.

if (grade >= 90) {
	document.write("You made an A"); // executed if grade is greater than or equal to 90
} else {
	document.write("Sorry, you did not make an A"); // executed if grade is less than 90
}

Nested if Statements

You can include an if statement inside of another if or if...else statement.

if (grade >= 90) {
	document.write("You made an A"); // grade is greater than or equal to 90
} else {
	if (grade >= 80) {
		document.write("You made a B"); // grade is 80 - 89
	} else {
		if (grade >= 70) {
			document.write("You made a C"); // grade is 70 - 79
		} else {
			if (grade >= 60) {
				document.write("You made a D"); // grade is 60 - 69
			} else {
				document.write("You failed"); // grade is less than 60
			}
		}
	}
}

You can include the nested if statement on the same line as the else to make the code more efficient.

if (grade >= 90) {
	document.write("You made an A"); // grade is greater than or equal to 90
} else if (grade >= 80) {
	document.write("You made a B"); // grade is 80 - 89
} else if (grade >= 70) {
	document.write("You made a C"); // grade is 70 - 79
} else if (grade >= 60) {
	document.write("You made a D"); // grade is 60 - 69
} else {
	document.write("You failed"); // grade is < 60
}

Note: Indenting lines of text for functions and if statements can make them much easier to read. The browser ignores the whitespace, but for the programmer (and their instructor), it can make a huge, timesaving difference.

Ternary Operator

The ternary operator is a substitute for an if statement where both the if and else clauses assign different values to the same field - like this:

if (condition) {
	result = 'something';
} else {
	result = 'somethingelse';
}

The ternary operator shortens this if/else statement into a single statement.

result = (condition) ? 'something' : 'somethingelse';

Switch Statement

Switch statements control program flow by executing a specific set of statements depending on the value of an expression.

switch (expression) {
case label:
	statement(s);
	break;
case label:
	statement(s);
	break;
. . .
default:
	statement(s);
}
  • Expression can be any JavaScript expression, usually a variable or arithmetic expression.
  • Label can be a literal value or variable name.
  • Statement(s) can be any JavaScript expressions that should be executed if the expression is equal to the label.
  • Break causes execution of the case statement to end.
  • Default statements execute if no other case statements are matched.

Here is the same example we wrote in a previous example with nested if statements. As you can see, the case statement is cleaner and easier to follow. 

switch (grade) {
case "A":
	document.write("You made an A");
	break;
case "B":
	document.write("You made a B");
	break;
case "C":
	document.write("You made a C");
	break;
case "D":
	document.write("You made a D");
	break;
default:
	document.write("You failed");
}

The value of grade can also be a number. You can use a conditional in the case label but the switch value must be set to a value that matches the expression, usually true or false.

switch (true) {
case (grade >= 90):
	document.write("You made an A");
	break;
case (grade >= 80):
	document.write("You made a B");
	break;
case (grade >= 70):
	document.write("You made a C");
	break;
case (grade >= 60):
	document.write("You made a D");
	break;
default:
	document.write("You failed");
}