Implicit conversion

The -, * and / operators work only with numbers, while + can also join strings. That is why + works with a string and a number differently from -, * and /:

console.log("4" + 2); // 42
console.log("4" - 2); // 2
console.log("4" * "2"); // 8
console.log(typeof ("4" + 2)); // string

Let's walk through the program line by line:

1. "4" + 2 prints 42: the two was glued onto the string.
2. "4" - 2 prints 2: the minus turned the string into a number and subtracted.
3. "4" * "2" prints 8: multiplication turned both strings into numbers.
4. typeof ("4" + 2) prints string: the result of the addition is a string.

This program has neither Number nor String, yet the types still change. A change of type that JavaScript makes on its own is called implicit conversion. The == operator from the lesson on comparison does it too when the sides have different types: that cashier also changed the currency before comparing.

Implicit conversion is like an exchange office that changes your money without asking. You asked for nothing, yet the value already has another type. That is why such places in code often go unnoticed until a wrong result shows up.

Plus and strings

If at least one side of + is a string, the other side becomes a string too, and the strings are joined. Joining strings is called concatenation.

The expression is evaluated left to right, so the order matters:

• in 1 + 2 + "3", first 1 + 2 gives the number 3, and the result is "33";
• "1" + 2 + 3 joins strings from the first step and gives "123".

Compound assignment += joins as well when the variable holds a string. This is how a string is built piece by piece, starting from an empty one: "" + 1 is the string "1".

let out = "";
out += 1;
out += 2;
console.log(out, typeof out); // 12 string
console.log(1 + 2 + "3", "1" + 2 + 3); // 33 123

Step by step:

1. out starts as an empty string.
2. out += 1 gives the string "1", and out += 2 glues a two onto it: "12".
3. The program prints 12 string.
4. The last line prints 33 123: the order of steps decides when the joining starts.

Interviewers ask this all the time: what do you get when you add a number to a string, and what when you subtract it?

The rest of arithmetic

The -, *, /, % and ** operators always turn both sides into numbers, the way Number does. A minus in front of a single string gives a number too: -"5" is -5. If a string does not look like a number, the result is NaN. From there NaN spreads: -, *, / and + with a number give NaN again.

Number.isNaN(x) helps check the result: it returns true only if x is NaN. A comparison with === will not help here, since NaN is not equal even to itself.

Choosing between two values

The conditional operator condition ? a : b helps choose one of two values by the result of a check such as Number.isNaN. It reads well as a question: "is the condition true? then a, otherwise b".

How it works:

• the condition can be any value: it is checked as truthy or falsy, by the same rules as for && and ||;
• if the condition is truthy, the operator returns a, and otherwise b;
• it is the only JavaScript operator that takes three values.

console.log("10" / "4", "a" * 2); // 2.5 NaN
const total = "a" * 2 + 1;
console.log(total, Number.isNaN(total)); // NaN true
const safe = Number.isNaN(total) ? 0 : total;
console.log(safe); // 0

Line by line:

1. "10" / "4" gives 2.5, and "a" * 2 gives NaN: the string "a" does not look like a number.
2. total gets NaN, because NaN + 1 is NaN again.
3. Number.isNaN(total) prints true.
4. The condition of the conditional operator is truthy, so it returns 0, and the program prints 0.

Common mistake

One is added to a number taken from a string, expecting the next number:

const input = "5";
const next = input + 1; // ✗
console.log(next); // 51

The left side of + is a string, so the one was glued onto it, giving "51". Subtraction in the same program would work correctly: input - 1 gives 4, because - always turns a string into a number. Turn the string into a number first: Number(input) + 1 gives 6.

Key points

• If one side of + is a string, + joins strings; the expression is evaluated left to right.
• -, *, /, % and ** always turn both sides into numbers, and a failure gives NaN, which spreads further.
• Number.isNaN(x) checks that x is NaN.
• condition ? a : b returns a when the condition is truthy and b when it is falsy.