Operators and Expressions

Operators

In the Variables, Comments and Data Types note set, we learned about JavaScript’s = assignment operator:

let experimentName = 'Stroop';

We also saw an example of the + concatenation operator which can be used to join together strings:

console.log('Welcome to the ' + experimentName + ' experiment.');

Let's explore some other operators available in JavaScript...

Arithmetic Operators

To perform math calculations, JavaScript has several arithmetic operators. Examples:

// Addition +
console.log(5 + 5); // 10 
// Note how when + is used with Strings it joins them together, 
// but when used with Numbers it adds them

// Subtraction -
console.log(10 - 5); // 5

// Multiplication *
console.log(10 * 1.5); // 15

// Division /
console.log(23 / 5); // 4.6

// Remainder %
console.log(23 % 5); // 3

// Exponentiation **
console.log(4 ** 4) // 256

// Increment ++
let age = 20;
age++;
console.log(age); // 21

// Decrement --
age = 20
age--;
console.log(age); // 19

Comparison Operators and Boolean Expressions

JavaScript also has comparison operators which are used as part of Boolean expressions.

As briefly discussed when we learned about the Boolean data type, we know that a Boolean expression is an expression that compares two values and evaluates the expression to either true or false.

To construct Boolean expressions, we use comparison operators such as <, >, <=, >=, ==, != which are all demonstrated in the following examples:

// `>` Greater than operator
console.log(10.5 > 5) // true

// `>=` Greater than or equal to operator
console.log(10 >= 10) // true

// `<` Less than operator
console.log(4 < 4) // false

// `<=` Less than or equal to operator
console.log(4 <= 4) // true

// `==` "Equal to operator" 
// (not to be confused with the single = which is the assignment operator)
console.log(10.3 == 10.3) // true
console.log(10.3 == 11.2) // false

// `!=` "Not equal to" operator
console.log(4 != 5) // true (because 4 does not equal 5)

All of the above examples used numerical values, but we can also use comparison operators with Strings:

console.log('apple' == 'apple') // true
console.log('apple' == 'orange') // false
console.log('apple' != 'orange') // true

And building on all this, we can compare values that are stored in variables, e.g.:

let response = prompt('What is 10 + 10?');
console.log(response == 20);

Logical operators

Expanding on the above Boolean expressions, we can create compound expressions that use the following logical operators:

&& (and)
|| (or)

With the && operator, both sides of an expression have to be true for the entire expression to evaluate to true. Example:

console.log(5 > 3 && 10 < 4) 
/// false, because while 5 is greater than 3, 10 is not less than 4

Contrast this to the || operator, where either side of the expression being true will cause the entire expression to evaluate to true. Example:

console.log(5 > 3 || 10 < 4) 
// true because at least one side of the expression is true (5 > 3)

These logical operators can also be used with straight Boolean values:

console.log(true && true) // true
console.log(true && false) // false
console.log(true || false) // true
console.log(true || true) // true
console.log(false || false) // false

There’s really no practical reason you’d need to write straight JavaScript code to evaluate something like “true || false” (or any of the other above expressions) but it’s important to understand how these expressions evaluate because you will often break down compound expressions into their individual Boolean evaluations.

For example, if we were trying to evaluate the following expression in our heads:

console.log(4 > 3 && 6 < 2 || 7 > 3)

We could simplify 4 > 3 && 6 < 2 || 7 > 3 to true && false || true.

Then, reading from left to right, true && false is false.

And then finally, false || true is true.

So 4 > 5 && 6 < 2 || 7 > 3 evaluates to true.

Order of operations

Boolean expressions operate similar to mathematical expressions in that we evaluate them left to right unless there are parenthesis- at which point that part of the expression takes priority.

For example:

4 > 5 && (6 < 2 || 7 > 3)

Instead of starting on the left, we start in the parenthesis:

6 < 2 || 7 > 3
- false || true
  - true
4 > 5 && true
- false && true
  - false (Final answer)

Practice exercises

Would the following expressions evaluate to true or false?

5 == 5 && 10 > 1
'red' == 'blue' || 1 < 10
20 > 15 < 15
12 % 2 == 0
'red' != 'green' || 'orange' == 'purple'
(10 >= 10) && (false == false) && (20 !== 19)
true && true || false

To check your work, you can output the results of each expression via a console.log in one of your JavaScript files. E.g.

console.log(5 == 5 && 10 > 1);