Explaining JavaScript Addition Operators

Introduction

JavaScript is an amazing language. I love its flexibility: just do things the way you like: change variable types, dynamically add methods or properties to objects, use operators for different variable types, etc.

However, dynamism comes at a price, and developers need to know how to handle type conversions for different operators: plus (+), equal (== and ====), unequal (! = and ! ==), etc. Many operators have their own way of handling type conversions.

Addition Operators

The most commonly used operator: +, which is used to concatenate strings or to sum numbers.

String concatenation

var result = "Hello, " + "World!";
// string + string = string (concatenated)
// "Hello, World!"

Number Arithmetic Summation

var result = 10 + 5;
// number + number = number (add up)
// 15

JavaScript allows the use of objects, arrays, null or undefined as operands. The following interview unveils the general rules of conversion.

Conversion rules

Use the following equation to see how JavaScript performs type conversions in the operation operator.

If at least one operand is an object, it will be converted to the original value (string, number or boolean).
After the conversion, if at least one of the operands is of type string, the second operand is converted to a string and a concatenation is performed.
In other cases, both operands are converted to numbers and an arithmetic addition operation is performed.

If both operands are of primitive type, the operator checks if at least one of them is of string type and performs a concatenation operation if it is. In all other cases, they are converted to numbers and summed.

Conversion of object types to primitive types

Conversion of object type to original type

If the object type is Date, the object’s toString() will be called.
In other cases (if valueOf() returns the original type), valueOf() is called for the object.
In other cases (if valueOf() does not exist or does not return the original type), the toString() method is called, and this is the conversion used in most cases.

When converting an array to a primitive type, JavaScript uses its join(‘,’) method, for example [1,5,6] is “1,5,6”. The original type of a normal JavaScript object {} is “[object Object]”.

Learning Examples

The following examples help us understand simple and complex conversion scenarios.

Example 1: Numbers and Strings

var result = 1 + "5"; // "15"

Analysis

1 + “5” (the second operand is a string, based on the rule 2 number 1 becomes “1”)
“1”+”5″ (string concatenation)
“15”

The second operand is a string, and the first operand is converted from a number to a string and then concatenated.

Example 2: Numbers and Arrays

var result = [1, 3, 5] + 1; //"1,3,51"

Analysis

[1, 3, 5] + 1 (Use rule 1 to convert the array [1, 3, 5] to the original value: “1,3,5”)
“1,3,5” + 1 (Use rule 1 to convert the number 1 to the string “1”)
“1,3,5” + “1” (string concatenation)
“1,3,51”

The first operand is an array, so it is converted to the original string value. In the next step the numeric operand is converted to a string and then the concatenation of the two strings is completed.

Example 3: Numeric and Boolean types

var result = 10 + true; //11

Analysis

10 + true (convert the boolean value true to the number 1 based on rule 3)
10 + 1 (converts two numbers to a value)
11

Because neither operand is a string, the boolean is converted to a number and then the summation of arithmetic is performed.

Example 4: Numbers and objects

var result = 15 + {}; // "15[object Object]"

Analysis

“15 + {}” (the second operand is an object, apply rule 1 to convert the object to the original type string “[object Object]”)
15 + “[object Object]” (use rule 2 to convert the number 15 to the string “15”)
“15” + “[object Object]” (string concatenation)
“15[object Object]”

The second object operand is converted to a string value, because the valueOf() method returns the object itself, which is not the original value, the toString() method is then called and returns the string, the second operand is now a string, so the number is also converted to a string, and finally the concatenation of the two strings is performed.

Example 5: Numbers and null

var result = 8 + null; // 8

Analysis

8 + null (because neither operand is a string, null is converted to the number 0 based on rule 3)
8 + 0 (add up the numbers)
8

Since the operand is not an object nor a string, null is converted to a number and then the sum of the numbers is calculated.

Example 6: String and null

var result = "queen" + null; // "queennull"

Analysis

“queen” + null (because the first operand is a string, null is converted to the string “null” based on rule 2)
“queen” + “null” (string concatenation)
“queennull”

Because the first operand is a string, null is converted to a string, and then string concatenation is performed.