JavaScript for impatient programmers (beta)
Please support this book: buy it or donate
(Ad, please don’t block.)

11. Operators

11.1. Two important rules for operators

11.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);

11.1.2. Most operators only work with primitive values

The main rule to keep in mind for JavaScript’s operators is:

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'

11.2. The plus operator (+)

The plus operator works as follows in JavaScript: It first converts both operands to primitive values. Then it switches to one of two modes:

String mode lets you 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.)

11.3. Assignment operators

11.3.1. The plain assignment operator

11.3.2. Compound assignment operators

Given an operator op, 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>');

11.3.3. All compound assignment operators

11.4. Equality: == versus ===

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

11.4.1. Lenient equality (== and !=)

Lenient 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

11.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

11.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.

11.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.

11.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) ···

The second alternative is even more sloppy than using ==, but it is a well-established pattern in JavaScript (to be explained in detail in the chapter on booleans, when we look at truthiness and falsiness).

11.5. Ordering operators

Table 2: JavaScript’s ordering operators.
Operator name
< less than
<= Less than or equal
> Greater than
>= Greater than or equal

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

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

Caveat: These operators don’t work well for comparing text in a human language (capitalization, accents, etc.). The details are explained in the chapter on strings.

11.6. Various other operators

  Quiz

See quiz app.