Learning JavaScript: Part 6: Conditional Statements

Learning JavaScript

JavaScript is an interpreted programming language commonly found in web browsers. First appearing in 1995, it has grown to be the de facto web programming language used in most websites and on many systems serving webpages.


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 affect if other sections of code will be run.

If Statements

Screenshot 2018-09-22 12.36.21

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

Screenshot 2018-09-22 12.44.37

Beyond numbers and strings, JavaScript also supports a data type called a Boolean. This type of data is named after George Boole. 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

Screenshot 2018-09-22 12.48.40

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.

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 created complex conditional statements.

  • EqualScreenshot 2018-09-22 12.56.57Written 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 EqualScreenshot 2018-09-22 12.59.22
    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. However, two values that are both the number four (4) would be.
  • Not EqualScreenshot 2018-09-22 13.02.27Written 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 EqualScreenshot 2018-09-22 13.01.29Written 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. This means that the number five (5) and the string four (“4”) would not be equal because they are both different values AND different data types.
  • Less ThanScreenshot 2018-09-22 13.07.09Written 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 EqualScreenshot 2018-09-22 13.11.45Written 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 ThanScreenshot 2018-09-22 13.09.20Written 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 EqualScreenshot 2018-09-22 13.14.55
    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 value or statements that would result in a Boolean value.

  • NotScreenshot 2018-09-22 13.18.05The 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.
  • AndScreenshot 2018-09-22 13.20.46Written with two ampersand symbols (&&), the And operator tests to see if all values (or the values as a result of some code) are ALL true. If so, the condition is also true.
  • OrScreenshot 2018-09-22 13.29.09Written 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.

Codepen Example:

See the Pen Learning JavaScript: Part 6: Conditional Statements by Dan Cox (@videlais) on CodePen.

Repl.It Example:

Test it on Repl.it!

Mozilla Thimble:

Remix on Mozilla Thimble!