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

12. Operators



12.1. Making sense of operators

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

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

12.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'

12.2. The plus operator (+)

The plus operator works as follows in JavaScript:

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.

12.3. Assignment operators

12.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;

12.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>');

12.3.3. A list of all compound assignment operators

12.4. Equality: == vs. ===

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

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

  Other names for ==

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

  Another name for ===

Triple equals is another name for ===.

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

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

12.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, where we look at truthiness and falsiness).

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

12.5. Ordering operators

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

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

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

<= and >= are based on strict equality.

  The ordering operators don’t work well for human languages

The ordering operators don’t work well for comparing text in a human language, e.g. when capitalization or accents are involved. The details are explained in the chapter on strings.

12.6. Various other operators

  Quiz

See quiz app.