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:

let v = 1
v = v + 1 
// 2

let w = 1
w = w - 1 
// 0

let x = 2
x = x * 3 
// 6

let y = 2
y = 6 / y 
// 3

let z = 10
z = z % 8 
// 2

let e = 2
e = e ** 2 ** 3 
// i.e. 2^2^3 = 2^8 = 256

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

let x = 200
console.log(x % 2)
// 0 (i.e. even)

let y = 201
console.log(y % 2)
// 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:

// Number 7
const x = 7

// String 7
const y = '7'

console.log(x == y) 
// true (the == doesn't check type)

console.log(x != y)
// false (the opposite of above)

console.log(x === y)
// false (the === checks for type)

console.log (x !== y)
// true (the opposite of above)

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

if (x > 100) {
  // do something if x is greater than 100
} else { 
  if (x <= 50) {
    // do something else if x is less than or equal to 50
  }       
}

Logical operators

Later on in school, we learned logic:

if (x > 100 || x < 0) {
  // do something here if x is greater than 100 or less than 0
} 
  
if (x >= 25 && x <= 50) {
  // do something else if x is between 25 and 50
}   

if (!(x === 17) {
  // do something else if x is not a number equal to 17 
}

if (!(x === '17')) {
  // do something else if x is not a string equal to'17'
}

Unary operators

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

const x = '100'
const xNumber = +x

console.log(x) 
// '100'

console.log(xNumber) 
// 100

console.log(typeof x) 
// 'string'

console.log(typeof xNumber) 
// 'number'

const y = 100
const yNeg = -y
console.log(yNeg) 
// -100

const z = true
const zFlip = !z
console.log(zFlip) 
// 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:

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

In general:

(/* comparison */) 
    ? /* one-liner if true */ 
    : /* 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

let x = 1
x++
// displays 1, then assigns 2 to x

let y = 1
y--
// displays 1, the assigns 0 to y

Prefix examples

let x = 1
++x
// assigns 2 to x, then displays 2

let y = 1
--y
// 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

let x = 1
x += 2 
// 3, same as writing x = x + 2

let y = 1
y -= 2 
// -1, same as writing y = y - 2

let z = "Hello"
z += " World"
// "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

let e = 2 ** 2 ** 3
// 2 ** 3 will be done first
// so this is like e = 2 ** 8
// thus e = 256

let f = 8 - 5 + 3
// 8 - 5 = 3 
// then 3 + 3 = 6 
// (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:

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