Conditional Statements
Conditional Statements
In JavaScript, like with many programming languages, each line of code is called a statement. Using the metaphor of the English language, code in JavaScript can be thought of as stating something.
In previous examples, this was setting or retrieving values. With calling functions, values could be computed or changed and then returned. Each line did something. However, sometimes, lines are conditional and have an effect on if other sections of code will be run.
If Statements
JavaScript supports a common conditional statement called “if statements.” Through previous parts, values were set and shown. Nothing was done with the values other than to see what certain calculations would do to them.
“If statements,” like other forms of conditional statements, can be thought of like the pattern for using functions. There is a section of code within curly brackets that is only run if something else happens. In the case of functions, this is if it is called. For conditional statements, this is if its conditions are true.
Boolean Values
Beyond numbers and strings, JavaScript also supports a data type called a Boolean. This type of data is named after George Boole Links to an external site.. It is either true or false.
Conditional statements test to see if some condition is true or false. If it is true, the conditional statement, in the case of “if statements,” runs some section of code. If the condition is false, the code is skipped.
If and Else Statements
Because “if statements” test to see if a condition is true or not, JavaScript also supports “else statements.” Like “if statements,” “else statements” work to run the if the condition was false. It is common to pair if and else together in this way to run some section of code if the condition was true and another if it was not. This is because we still need to do something with the input either way in most cases. One common example of this is data validation, where a user might be asked to enter their email. If the email is formatted properly, the code might move forward and store it in the database. However, if the email isn't formatted properly, the "else" statement code would ask the user to try again.
Type of Conditions
So far, the type of conditional operator shown was the equal (==) one. However, there are several that can also be combined to create complex conditional statements.
-
Equal
Written with two equal signs (==), the equal operator tests if two values are the same value. This means that the number four (4) and the string four (“4”) could be equal.
-
Strictly Equal
Written with three equal signs (===), the strictly equal operator tests if two values are the same value AND data type. This means that the number four (4) and the string four (“4”) are not equal. Even though they are the same value, they are different data types. However, two values that are both the number four (4) would be.
-
Not Equal
Written with an exclamation mark and equal sign (!=), the not equal operators tests if two values are not the same value. This means that the number five (5) and the string four (“4”) would not be equal.
-
Strictly Not Equal
Written with an exclamation mark and two equal signs (!==), the strictly not equal operators tests if two values are not the same value AND not the same data type. As the flip-side of strictly equal, there is only one circumstance in which this is false: when it is the same value AND the same data type ("4" and "4"). If it's the same value but different data type (5 and "5"), same data type but different value ("4" and "5"), or different data type and value ("4" and 5), it will be true.
-
Less Than
Written with a less than sign (<), the less-than operator tests to see if the left-hand value is less than the value on the right-hand side. The less-than operator does not test if values are the same data type.
-
Less Than Or Equal
Written with a less than or equal sign (<=), the less-than-or-equal operator tests to see if the left-hand value is less than OR equal to the value on the right-hand side. The less-than-or-equal operator does not test if values are the same data type.
-
Greater Than
Written with a greater than sign (>), the greater-than operator tests to see if the left-hand value is greater than the value on the right-hand side. The greater-than operator does not test if values are the same data type.
-
Greater Than Or Equal
Written with a greater than or equal sign (>=), the greater-than-or-equal operator tests to see if the left-hand value is greater than OR equal to the value on the right-hand side. The greater-than-or-equal operator does not test if values are the same data type.
Advanced Condition Operators
Along with the standard set of conditional operators to test two values, JavaScript (like many other programming languages) also supports three more advanced operators to work with Boolean values or statements that would result in a Boolean value.
-
Not
The not operator is written as an exclamation point (!) and goes in front of some value. When that value (or something that results in a value) would be true, it negates it to false. When that value would have been false, it negates it to true.
-
And
Written with two ampersand symbols (&&), the And operator tests to see if BOTH (or all) of the values (or the values as a result of some code) that you've asked about are true. If so, the condition is also true.
-
Or
Written with two bar symbols (||), the Or operator tests to see if at least one value (or the value as a result of some code) is true. If at least one value is true, the condition is true.
Play with the Code (Repl.it):
Take a moment to play with the code and concepts in the embedded Repl.it viewer below. Try changing both the values and the operators until you're confident about what what will happen.