Comparison Operators

As mentioned earlier in this week’s lesson, “the Boolean is sometimes known as the truth value, which is a “value indicating the relation of a proposition to truth”.” In other words, a Boolean value is the result of evaluating a proposition for truth.

As an example, if I said;

• “Oxygen is required for humans to survive.”

You would agree that to be a true statement.

Likewise, if I said;

• “All trees in the world are purple!”

You would politely inform me that to be a false statement.

Boolean Evaluations

In computer science, Boolean evaluations result in a statement returning true or false.

Boolean evaluations often occur as a result of using a comparison operator also known as relational operator. A comparison operator is used to compare two values about their relationship to each other.

Equality Operator

The first comparison operator to discuss is the equality operator. The equality operator compares two values to see if they are equal.

As an example, if we asked whether the Number 4 is equal to the Number 4, the result would be true.

The equality operator is two equal sign characters placed together (==). The values that are being assessed for equality are placed on either side of the operator.

The above discussed example would look like the following in JavaScript code;

4 == 4; // returns 'true'

The result of this statement (or any statement using comparison operator’s) can be passed as the input parameter to the if statement. This can be done directly (i.e. calling the comparison operator statement inside of the if statement), or through the use of a variable.

if( 4 == 4 ) {
    // The statement results in the
    // 'true' function block being executed.
}

let eqResult = 4 == 4;
if( eqResult ) {
    // same result as above occurs.
}

NOTE: You are going to accidentally swap out the equality comparison operator and the variable assignment operator. Be on the look out, and hyper-vigilent, that you are using 1 equal sign character to assign variables (var der = 4;), and 2 equal sign characters to compare for equality (if( 4 == 4 )).

The following example uses the equality comparison operator to change the background color of the sketch. There is a variable, loopNum, which is incremented by 1 every frame. When this value equals 4, then background of the sketch is changed from ‘red’ to ‘purple’.

By combining some arithmetic operators, we can start to compose more complex sketches.

In the following sketch, a ball that moves across the screen has its fill color randomly set every 30 frames. To do this;

• The variable x_pos is incremented by 1 every frame.
• This incrementing value is evaluated against modulo 30 ( x_pos % 30) and stored to the variable fill_counter.
• fill_counter is compared for equality to the value of 0 within the if statement, where when true, a random color value is calculated, and stored in the variable ball_color.

Inequality Operator

The counterpart to the equality operator is the inequality operator. The inequality operator returns true when two values do not equal each other.

The inequality operator is an exclamaition mark and equals sign placed together (!=).

In the following, the background of a canvas is randomly set every frame as long as a random number generator does not return 0. Once ‘0’ is found, no more numbers are searched, and the background turns ‘pink’. There is also text in each of the function blocks to update the user on the state of the machine.

Less Than and Greater Than

Another way of comparing numerical relationships is whether one value is less than or greater than another value.

As you may remember, traditionally, the less than and greater than operators in algebra are carets, which show which way the comparison is occurring. I.E. When checking whether the left value is greater than the right value, a caret with an opening on the left is used. Likewise, when checking if the left value is less than the right value, a caret with the small end on the left is used. This is true for the JavaScript version operators as well.

// is 5 greater than 4
5 > 4; // ⇒ true

// is 5 less than 4
5 < 4; // ⇒ false

Less Than or Equal To and Greater Than or Equal To

As with algebra, JavaScipt can also check whether a value is greater than or equal to or less than or equal to. These comparison operators append an equal sign character to the relevant comparison operator from the section above.

<= // ⇒ 'less than or equal to'
>= // ⇒ 'greater than or equal to'

As with the above operators, the greater than or equal to and less than or equal to operators check if the value the relationship of the value on the left of the operator to the one on the right.

// is 5 'greater than or equal to' 4
5 >= 4; // ⇒ true

// is 4 'greater than or equal to' 4
4 >= 4; // ⇒ true

// is 3 'greater than or equal to' 4
3 >= 4; // ⇒ false

// is 3 'less than or equal to' 4
3 <= 4; // ⇒ true

Comparison Operator Examples

As an example of the comparison operators, the following, sets the background of the canvas to be black if the mouse’s X position (mouseX), is greater than the middle of the canvas (width/2). Otherwise, the background color is set to white.

Shiffman on Conditional Statements

Shiffman Making a Bouncing Ball