JavaScript operators

Operators look at a piece data and try to do something with them, e.g.

• add/subtract something to it
• perform arithmetic on it
• check for its equality with another piece of data
• check its data type
• ...and so on

Arithmetic operators

The "mathematical" arithmetic operators we know and love from grade school, include, with slight variations in symbology:

1let v = 1
2v = v + 1 
3// 2
4
5let w = 1
6w = w - 1 
7// 0
8
9let x = 2
10x = x * 3 
11// 6
12
13let y = 2
14y = 6 / y 
15// 3
16
17let z = 10
18z = z % 8 
19// 2
20
21let e = 2
22e = e ** 2 ** 3 
23// i.e. 2^2^3 = 2^8 = 256

We often use the modulo operator (%) to determine whether a number is even or odd:

1let x = 200
2console.log(x % 2)
3// 0 (i.e. even)
4
5let y = 201
6console.log(y % 2)
7// 1 (i.e. odd)

Comparison operators

As we advance from our first days of primary school, we came across comparison operators, which check to see if one value equates to another (or not):

A confusing phenomenon for the beginner in JavaScript, we use:

• = to mean "assignment" or "re-assignment"
• == to mean "equal value"
• === to mean "equal value" and "equal type"

So what's this about == and ===? Well:

• == checks a piece of data like 17 at face value
  • it neglects whether the 17 is a string or a number
• === checks that 17 and its data type

Also, note that the equivalent of:

• == is != (not equal to)
• === is !== (not equal to and not equal type to)

It takes some getting used to:

1// Number 7
2const x = 7
3
4// String 7
5const y = '7'
6
7console.log(x == y) 
8// true (the == doesn't check type)
9
10console.log(x != y)
11// false (the opposite of above)
12
13console.log(x === y)
14// false (the === checks for type)
15
16console.log (x !== y)
17// true (the opposite of above)

In programming, we often use comparison operators when dealing with branching (decisions):

1if (x > 100) {
2  // do something if x is greater than 100
3} else { 
4  if (x <= 50) {
5    // do something else if x is less than or equal to 50
6  }       
7}

Logical operators

Later on in school, we learned logic:

1if (x > 100 || x < 0) {
2  // do something here if x is greater than 100 or less than 0
3} 
4  
5if (x >= 25 && x <= 50) {
6  // do something else if x is between 25 and 50
7}   
8
9if (!(x === 17) {
10  // do something else if x is not a number equal to 17 
11}
12
13if (!(x === '17')) {
14  // do something else if x is not a string equal to'17'
15}

Unary operators

We use unary operators if we want to perform an operator to a single piece of data, e.g.:

1const x = '100'
2const xNumber = +x
3
4console.log(x) 
5// '100'
6
7console.log(xNumber) 
8// 100
9
10console.log(typeof x) 
11// 'string'
12
13console.log(typeof xNumber) 
14// 'number'
15
16const y = 100
17const yNeg = -y
18console.log(yNeg) 
19// -100
20
21const z = true
22const zFlip = !z
23console.log(zFlip) 
24// false

Ternary operators

We use ternary operators (three-sided operations) when we want to have a fallback value for something if a comparison is false:

1let y = (x > 100)
2  ? "too much"
3  : "just right or too little"

In general:

1(/* comparison */) 
2    ? /* one-liner if true */ 
3    : /* one-liner if false */

Increment and decrement operators

There exist two different ways of using these operators: postfix (after a number) and prefix (before a number)

Postfix examples

1let x = 1
2x++
3// displays 1, then assigns 2 to x
4
5let y = 1
6y--
7// displays 1, the assigns 0 to y

Prefix examples

1let x = 1
2++x
3// assigns 2 to x, then displays 2
4
5let y = 1
6--y
7// assigns 0 to y, then displays 0

Note: we see the postfix operator much more often than the prefix operator in living code. (This is where the programming language C++ got its name!)

Assignment operators

1let x = 1
2x += 2 
3// 3, same as writing x = x + 2
4
5let y = 1
6y -= 2 
7// -1, same as writing y = y - 2
8
9let z = "Hello"
10z += " World"
11// "Hello World" - possible to use with Strings!

Order of operators

JavaScript arithmetic has an order of operators just like mathematics (similar to the BEDMAS rule):

• brackets
• exponents
  • calculations will happen right to left when two or more exponent operators exist in a single statement
• division
• multiplication
• addition / subtraction
  • calculations will happen left to right when two or more such operators exist in a single statement
  • addition does not necessarily come before subtraction

1let e = 2 ** 2 ** 3
2// 2 ** 3 will be done first
3// so this is like e = 2 ** 8
4// thus e = 256
5
6let f = 8 - 5 + 3
7// 8 - 5 = 3 
8// then 3 + 3 = 6 
9// (not 0!)

If we want to ensure that a "post-subtraction addition" happens first, then we can use brackets to override the subtraction that comes to the left of it:

1let f = 8 - (5 + 3)
2// 0