🟨JavaScript operators

essential math + logic + beyond (the "conjunctions")

Operators look at data and try to do something with them:

Due to the essential nature of operators, many of these operators will look similar to those used in other programming language: so if you learn it one language, you will learn it in most of them!

Arithmetic operators

The mathematical operations we know from grade school, with slight variations, e.g.:

• * for multiplication, to avoid confusion with the letter x

• / for division, because ÷ keys don't exist much on keyboards

• % for modulo (remainders), somehow not avoiding confusion with "percents"

Operator symbol	Meaning
+	add
-	subtract
*	multiply
/	divide
%	modulo (not percent!)
**	exponent ("to the power of")

Examples

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 // 2^2^3 = 2^8 = 256

A popular use of modulo determines whether a number x is even (0) or odd (1):

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 advanced from second grade, we came across these concepts:

Operator symbol	Meaning
>	greater than
>=	greater than or equal to
<	less than
<=	lesser than or equal to
==	equal to
===	equal to or equal type to
!=	not equal to
!==	not equal or not equal type to
?	ternary (see below)

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 why == and === ? Well:

• == compares a number like 17 regardless if it is a Number or a String

• === ensures that a number like 17 is a Number and not anything else

Also, note the amount of equal symbols in != and !== :

// 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)

We see comparison operators used mostly in branching (decision) statements:

Examples

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 had concepts like these:

Operator symbol	Meaning
&&	"and"
||	"or"
!	"not"

Examples

if (x > 100 || x < 0) {
    // do something if x is greater than 100 or less than 0
} else { 
    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 17 
    }   
}

Unary operators

We use unary operators if we want to:

• change a Stringinto a Number (+variable)

• negate a Number (-variable)

• flip the boolean (!variable) = swap the true to a false (and vice versa)

• typeof is also considered a unary operator and it simply returns the data type

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 as a shorthand for if and else statements with the format:

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

For example:

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

Increment/decrement operators

Operator symbol	Meaning
++	increment the existing value (add 1)
--	decrement the existing value (subtract 1)

Note the subtle but important difference between postfix and prefix operators when dealing with the increment and decrement operators!

Postfix

An easy way to remember this is that the variable returns first, and then increments:

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

let y = 1
y-- // returns 1, then assigns 0 to y

Prefix

An easy way to remember this is that the increment or decrement happens first, and then returns/displays the new value:

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

let y = 1
--y // assigns 0 to y, then returns 0

Prefix is used only when necessary; in most cases postfix gets the job done and so we see it more commonly in code

Assignment operators

These basically function as shorthand to the aforementioned arithmetic operators:

Operator symbol	Meaning
+=	add to the existing value
-=	subtract from the existing value
*=	multiply by the existing value
/=	divide by the existing value

The programming language "C++" plays on the ++ operator to mean "the next version of C"

Examples

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 has an order of operations just like mathematics (remember the BEDMAS rule?):

• brackets

• exponents

  • if two or more exponent operators exist, then the calculation will happen right to left

• division

• multiplication

• addition / subtraction

  • if both operators exist, then the calculation will happen from left to right

    • so unlike BEDMAS, addition does necessarily NOT come before subtraction!

let e = 2 ** 2 ** 2
// 256

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

If we want to ensure addition happens first, then we need to place brackets:

let f = 8 - (5 + 3)
// 0 (as it should be)