Operators and type coercion

A little puzzle: in JavaScript '5' + 3 gives '53', but '5' - 3 gives 2. Why do the numbers “stick together” with addition but get calculated properly with subtraction? In this lesson you will learn the operators and how JavaScript converts types on its own.

Arithmetic operators

Besides addition, subtraction, multiplication and division, JavaScript has two handy operators. % gives the remainder of a division: 7 % 3 = 1. ** raises to a power: 2 ** 3 = 8. The remainder is useful for checking whether a number is even: if n % 2 is zero, the number is even.

console.log(7 + 3);
console.log(7 - 3);
console.log(7 * 3);
console.log(7 / 2);
console.log(7 % 3);
console.log(2 ** 10);
console.log(2 + 3 * 4);
console.log((2 + 3) * 4);

10
4
21
3.5
1
1024
14
20

As in maths, multiplication and division are done before addition, and parentheses change the order. There are also short forms for updating a variable: x += 5 means x = x + 5, and x++ increases the value by 1.

let coins = 10;
coins += 5;
console.log(coins);
coins -= 3;
console.log(coins);
coins *= 2;
console.log(coins);
coins++;
console.log(coins);

15
12
24
25

Comparison: === and ==

Comparison operators (>, <, >=, <=) always return true or false. There are two ways to check equality. Strict equality === checks both the value and the type. Loose equality == converts the types before comparing, which can give surprising results.

console.log(5 > 3);
console.log(5 === 5);
console.log(5 === '5');
console.log(5 == '5');
console.log(0 == false);
console.log(5 !== '5');

true
true
false
true
true
true

Type coercion

Here is the answer to the puzzle: the + operator both adds numbers and joins strings. If one side is a string, JavaScript turns the other side into a string too and glues them together. -, * and / work only with numbers, so they convert strings into numbers. A value that cannot become a number gives NaN (Not a Number).

console.log('5' + 3);
console.log('5' - 3);
console.log('5' * '2');
console.log(true + 1);
console.log('hello' * 2);
console.log(typeof NaN);

53
2
10
2
NaN
number

Instead of guessing, it is safer to convert types yourself — this is called explicit conversion. Number() turns a value into a number, String() into a string and Boolean() into a boolean. parseInt() reads a whole number from the start of a string, for example 42 from '42px'.

const input = '25';
console.log(input + 5);
console.log(Number(input) + 5);
console.log(Number('abc'));
console.log(parseInt('42px'));
console.log(String(100) + 1);

255
30
NaN
42
1001

Logical operators and truthy/falsy

• && (AND) — true if both conditions are true.
• || (OR) — true if at least one condition is true.
• ! (NOT) — flips the value: !true becomes false.

Any value can be used as a condition. Six values are falsy (treated as false): false, 0, the empty string '', null, undefined and NaN. All other values are truthy — even the strings '0' and 'false', because they are not empty.

const age = 16;
const hasTicket = true;

console.log(age >= 14 && hasTicket);
console.log(age >= 18 && hasTicket);
console.log(age >= 18 || hasTicket);
console.log(!hasTicket);
console.log(Boolean(''), Boolean('0'), Boolean(0));

true
false
true
false
false true false

const price = '15';
const quantity = 3;
// 1) print price * quantity
// 2) print price + quantity
// 3) print the correct sum using Number()

45
153
18