JavaScript is a "dynamically typed" language, meaning that it exists data types, but variables are not bound to any of them. Because of that, when we perform operations such as comparison or arithmetic operations where the types are not the same we will meet some weird things. Let's figure them out 🔎.

Basic data types

In this example, we can see how JS converts data type when we perform arithmetic operations. All the process performs in 2 operands, which is:

• Note by example: A + B is an expression; A, B are operands, + is the operator.

• In JS, the adding operation behaves in two ways, concatenate strings and sum two numbers.

  • So if 2 operands are not a number, JS tries to convert all to the string and concatenate them. Otherwise, JS sum two numbers. "2" + 3 ⇒ "2" + "3" ⇒ "23".

  • Others operators work differently, JS try to convert all operands to number (type Number) then implements the expression. "2" - 3 ⇒ 2 - 3 === -1; "2" * "3" ⇒ 2 * 3 === 6.

⚠️ Note:

• true and false also convert to number 1 and 0.

• JS converts a string to a number, JS will ignore the beginning and ending white spaces in the string, +" -9 " convert to -9. (+" -9 " is unary plus in JS, it same as Number(" -9 "))

What about the non-primitive data type like Array, Object?

The operation in Array and Object has little difference, JS will try to convert them to the primitive type using toString method and valueOf method. Then take the result and execute the statement.

In the example above, [] + 1 first convert the [] to the primitive type using toString, then take the result + 1, [].toString() is "" so "" + 1 is equal to "1" 😅.

If you don't believe me, you can override toString method to figure it out, play around with it to make you more understanding.

Array.prototype.toString = () => 2222
[] + 1 // => 2223
+[] // Same as Number([]) => 2222

What happened here? JS converts the Object and Array in the arithmetic statement and comparison statement, JS uses toString to convert to primitive and execute the statement.

⚠️ Note: When you testing with Object using object literal {}, you should put your Object in the parentheses ({}). Otherwise, JS might execute it as a block of code, like if(true) {}, not an Object as you expected.

null and undefined

null and undefined are special cases, where null's value is 0 and undefined's value is NaN. You can check by +null or +undefined. So after convert to numbers, all the process behavior is the same above.

• 1 + null convert null to 0, then 1 + 0 the result is 1.

• 1 + undefined convert undefined to NaN, then execute the expression 1 + NaN the result is NaN.

The operation converts null and undefined happen first then all the other operations happen after that.

Exercises