Operators

To manipulate values and variables, the language uses operators. An operator has at least one operand (a value on which it performs an operation), often 2, and rarely 3.

Unary Operators

A unary operator, as its name suggests, has only one operand, examples:

• typeof,
• !,
• ++,
• --

// Code snippet "o1"
typeof undefined // "undefined"
typeof true // "boolean"
typeof 'hello' // "string"
typeof 42 // "number"
typeof Symbol('a symbol') // "symbol"
typeof 3493029430349380n // "bigint"
typeof {} // "object"

typeof null // "object" Bug from ES1 that will never be fixed
typeof function () {} // "function" A function is an object with a superpower:
// it is invocable with parentheses (): 'callable object' in the spec,
// but it remains an object: you can add, modify, delete properties

Falsy Values

JavaScript currently knows 8 values that will give false if converted to Boolean:

null
undefined
Number.NaN
0
- 0
0n
''
false

All other values will be true if converted to Boolean.

Therefore:

Boolean({}) // true: Empty object is not part of falsy values
Boolean([]) // true: Empty array is not part of falsy values
Boolean(typeof whatever) // will necessarily be true,
// since typeof whatever returns a non-empty string

+ Addition or Concatenation Operator

+ Can be an operator of concatenation or addition depending on the operands: if one of them is a string (string of characters) or is an object that will be converted to string during its transformation to primitive, then it will be a concatenation, otherwise, it will be an addition.

Concatenation (from the Latin catena meaning chain) is the action of putting together two elements (links) of strings to form a larger one:

Example of concatenation:

const concat = 'Hello ' + 'World!'
console.log(concat) // "Hello World!"

Comparison Operators

• > and < for greater than and less than;
• >= and <= for greater than or equal to and less than or equal to;
• == (equality) and === (strict equality)

Example:

const now = new Date() // Create a date object with the current date (and time)
// and store it in the variable now
const time = now.getHours() // Get the current hour from the date
// and store it in the variable time
const isMorning = now.getTime() < 12 // Is it before 12 PM?
// If yes, isMorning will be true
// If no, isMorning will be false

Note: There is one and only one value in JS that is not equal to itself: NaN

Number.NaN == Number.NaN // false

NaN means Not a Number but is of type... number. It is the value JavaScript assigns to an expression whose result it cannot calculate numerically:

Example:

const str = 'A string'
const num = 7

const impossible = str / num

console.log(impossible) // NaN

Logical Operators

There are 4 logical operators in JavaScript: || (OR), && (AND), ! (NOT), and since ES2020 ?? (Nullish coalescing operator).

Note: Using ||, &&, and ?? does not necessarily return a boolean!!!

The ! Operator

The logical NOT operator ! is a unary operator that returns the logical opposite of the value provided by its operand. true becomes false and vice versa. If used with a non-boolean value, it returns false if the operand is evaluated to a falsy value, true otherwise.

Other Logical Operators

The other operators are binary operators.

The || Operator

The || operator will return the value of the left operand if it is truthy, otherwise, it will return the value of the right operand.

const nan = Number.NaN
const zero = 0
const wun = 1

const nanOrZero = nan || zero
nanOrZero // 0

const zeroOrNan = zero || nan
zeroOrNan // NaN

const wunOrZero = wun || zero
wunOrZero // 1

const zeroOrWun = zero || wun
zeroOrWun // 1

You can chain || operators, and in this case, the first truthy value (from the left) will be returned, or the last value:

const nan = Number.NaN
const zero = 0
const falseBool = false
const wun = 1

const result = nan || wun || zero || falseBool
result // 1

const result2 = wun || nan || zero || falseBool
result2 // 1

const result3 = falseBool || nan || zero
result3 // 0

The && Operator

The && operator will return the left operand if it is falsy, otherwise, it will return the right operand.

const nan = Number.NaN
const zero = 0
const wun = 1

const nanOrZero = nan && zero
nanOrZero // NaN

const zeroOrNan = zero && nan
zeroOrNan // 0

const wunOrZero = wun && zero
wunOrZero // 0

const zeroOrWun = zero && wun
zeroOrWun // 0

You can chain && operators, and in this case, the first falsy value (from the left) will be returned, or the last value:

const nan = Number.NaN
const zero = 0
const trueBool = true
const wun = 1
const obj = { hodor: 'Hodor' }

const result = nan && wun && zero && trueBool
result // NaN

const result2 = wun && nan && zero && trueBool
result2 // NaN

const result3 = wun && trueBool && obj
result3 // { hodor: 'Hodor' } (obj)

const result4 = trueBool && wun && nan
result4 // NaN

The New Nullish Coalescing Operator ??

The ?? operator will return the left operand if it is not nullish, otherwise, it will return the right operand:

const myNull = null
const myUnd = undefined
const zero = 0
const falseBool = false

const value = myNull ?? 'default value 1'
const value2 = myUnd ?? 'default value 2'
const zeroOrWhat = zero ?? 'default value 3'
const falseOrWhat = falseBool ?? 'default value 4'

value // 'default value 1'
value2 // 'default value 2'
zeroOrWhat // 0
falseOrWhat // false

Note: This operator cannot be combined without parentheses with the previous two:

let myNull = null
let wun = 1

const value = (myNull ?? wun) || 'default value 1'  // 1
const value2 = myNull ?? (wun && 'default value 2') // 'default value 2'
const value3 = myNull ?? wun && 'default value 3'   // Error: Nullish coalescing operator(??) requires parens when mixing with logical operators.

The Conditional Operator

The conditional operator is the only ternary operator in JavaScript and is a "shortcut" for an if statement: it has three operands: the condition, the value or expression if the condition is met, and the value or expression if the condition is not met.

// Code snippet o4
const numberSignAsString = anyNumber < 0 // condition
  ? 'negative' // value if the condition is met
  : 'positive' // value if the condition is not met

It can be written on a single line:

// Code snippet o4
const numberSignAsString = anyNumber < 0 ? 'negative' : 'positive'

And it is equivalent to:

// Code snippet o5
let numberSignAsString
if (anyNumber < 0) { // condition
  numberSignAsString = 'negative' // if the condition is met
}
else {
  numberSignAsString = 'positive' // if the condition is not met
}