13 Operators

13.1 Making sense of operators

JavaScript’s operators may seem quirky. With the following two rules, they are easier to understand:

• Operators coerce their operands to appropriate types
• Most operators only work with primitive values

13.1.1 Operators coerce their operands to appropriate types

If an operator gets operands that don’t have the proper types, it rarely throws an exception. Instead, it coerces (automatically converts) the operands so that it can work with them. Let’s look at two examples.

First, the multiplication operator can only work with numbers. Therefore, it converts strings to numbers before computing its result.

> '7' * '3'
21

Second, the square brackets operator ([ ]) for accessing the properties of an object can only handle strings and symbols. All other values are coerced to string:

const obj = {};
obj['true'] = 123;

// Coerce true to the string 'true'
assert.equal(obj[true], 123);

13.1.2 Most operators only work with primitive values

As mentioned before, most operators only work with primitive values. If an operand is an object, it is usually coerced to a primitive value – for example:

> [1,2,3] + [4,5,6]
'1,2,34,5,6'

Why? The plus operator first coerces its operands to primitive values:

> String([1,2,3])
'1,2,3'
> String([4,5,6])
'4,5,6'

Next, it concatenates the two strings:

> '1,2,3' + '4,5,6'
'1,2,34,5,6'

13.2 The plus operator (+)

The plus operator works as follows in JavaScript:

• First, it converts both operands to primitive values. Then it switches to one of two modes:
  • String mode: If one of the two primitive values is a string, then it converts the other one to a string, concatenates both strings, and returns the result.
  • Number mode: Otherwise, It converts both operands to numbers, adds them, and returns the result.

String mode lets us use + to assemble strings:

> 'There are ' + 3 + ' items'
'There are 3 items'

Number mode means that if neither operand is a string (or an object that becomes a string) then everything is coerced to numbers:

> 4 + true
5

Number(true) is 1.

13.3 Assignment operators

13.3.1 The plain assignment operator

The plain assignment operator is used to change storage locations:

x = value; // assign to a previously declared variable
obj.propKey = value; // assign to a property
arr[index] = value; // assign to an Array element

Initializers in variable declarations can also be viewed as a form of assignment:

const x = value;
let y = value;

13.3.2 Compound assignment operators

JavaScript supports the following assignment operators:

• Arithmetic assignment operators: += -= *= /= %= [ES1]
  • += can also be used for string concatenation
  • Introduced later: **= [ES2016]
• Bitwise assignment operators: &= ^= |= [ES1]
• Bitwise shift assignment operators: <<= >>= >>>= [ES1]
• Logical assignment operators: ||= &&= ??= [ES2021]

13.3.2.1 Logical assignment operators [ES2021]

Logical assignment operators work differently from other compound assignment operators:

Why is a ||= b equivalent to the following expression?

a || (a = b)

Why not to this expression?

a = a || b

The former expression has the benefit of short-circuiting: The assignment is only evaluated if a evaluates to false. Therefore, the assignment is only performed if it’s necessary. In contrast, the latter expression always performs an assignment.

For more on ??=, see §14.4.5 “The nullish coalescing assignment operator (??=) [ES2021]”.

13.3.2.2 The remaining compound assignment operators

For operators op other than || && ??, the following two ways of assigning are equivalent:

myvar op= value
myvar = myvar op value

If, for example, op is +, then we get the operator += that works as follows.

let str = '';
str += '<b>';
str += 'Hello!';
str += '</b>';

assert.equal(str, '<b>Hello!</b>');

13.4 Equality: == vs. ===

JavaScript has two kinds of equality operators: loose equality (==) and strict equality (===). The recommendation is to always use the latter.

13.4.1 Loose equality (== and !=)

Loose equality is one of JavaScript’s quirks. It often coerces operands. Some of those coercions make sense:

> '123' == 123
true
> false == 0
true

Others less so:

> '' == 0
true

Objects are coerced to primitives if (and only if!) the other operand is primitive:

> [1, 2, 3] == '1,2,3'
true
> ['1', '2', '3'] == '1,2,3'
true

If both operands are objects, they are only equal if they are the same object:

> [1, 2, 3] == ['1', '2', '3']
false
> [1, 2, 3] == [1, 2, 3]
false

> const arr = [1, 2, 3];
> arr == arr
true

Lastly, == considers undefined and null to be equal:

> undefined == null
true

13.4.2 Strict equality (=== and !==)

Strict equality never coerces. Two values are only equal if they have the same type. Let’s revisit our previous interaction with the == operator and see what the === operator does:

> false === 0
false
> '123' === 123
false

An object is only equal to another value if that value is the same object:

> [1, 2, 3] === '1,2,3'
false
> ['1', '2', '3'] === '1,2,3'
false

> [1, 2, 3] === ['1', '2', '3']
false
> [1, 2, 3] === [1, 2, 3]
false

> const arr = [1, 2, 3];
> arr === arr
true

The === operator does not consider undefined and null to be equal:

> undefined === null
false

13.4.3 Recommendation: always use strict equality

I recommend to always use ===. It makes your code easier to understand and spares you from having to think about the quirks of ==.

Let’s look at two use cases for == and what I recommend to do instead.

13.4.3.1 Use case for ==: comparing with a number or a string

== lets you check if a value x is a number or that number as a string – with a single comparison:

if (x == 123) {
  // x is either 123 or '123'
}

I prefer either of the following two alternatives:

if (x === 123 || x === '123') ···
if (Number(x) === 123) ···

You can also convert x to a number when you first encounter it.

13.4.3.2 Use case for ==: comparing with undefined or null

Another use case for == is to check if a value x is either undefined or null:

if (x == null) {
  // x is either null or undefined
}

The problem with this code is that you can’t be sure if someone meant to write it that way or if they made a typo and meant === null.

I prefer either of the following two alternatives:

if (x === undefined || x === null) ···
if (!x) ···

A downside of the second alternative is that it accepts values other than undefined and null, but it is a well-established pattern in JavaScript (to be explained in detail in §15.3 “Truthiness-based existence checks”).

The following three conditions are also roughly equivalent:

if (x != null) ···
if (x !== undefined && x !== null) ···
if (x) ···

13.4.4 Even stricter than ===: Object.is()

Method Object.is() compares two values:

> Object.is(123, 123)
true
> Object.is(123, '123')
false

It is even stricter than ===. For example, it considers NaN, the error value for computations involving numbers, to be equal to itself:

> Object.is(NaN, NaN)
true
> NaN === NaN
false

That is occasionally useful. For example, you can use it to implement an improved version of the Array method .indexOf():

const myIndexOf = (arr, elem) => {
  return arr.findIndex(x => Object.is(x, elem));
};

myIndexOf() finds NaN in an Array, while .indexOf() doesn’t:

> myIndexOf([0,NaN,2], NaN)
1
> [0,NaN,2].indexOf(NaN)
-1

The result -1 means that .indexOf() couldn’t find its argument in the Array.

13.5 Ordering operators

JavaScript’s ordering operators (tbl. 3) work for both numbers and strings:

> 5 >= 2
true
> 'bar' < 'foo'
true

<= and >= are based on strict equality.

13.6 Various other operators

The following operators are covered elsewhere in this book:

• Operators for booleans, numbers, strings, objects
• The nullish coalescing operator (??) for default values

The next two subsections discuss two operators that are rarely used.

13.6.1 Comma operator

The comma operator has two operands, evaluates both of them and returns the second one:

> 'a', 'b'
'b'

For more information on this operator, see Speaking JavaScript.

13.6.2 void operator

The void operator evaluates its operand and returns undefined:

> void (3 + 2)
undefined

For more information on this operator, see Speaking JavaScript.