Why [] + [] Is an Empty String

The curse

Try these two lines in Node or in your browser console.

console.log(JSON.stringify([] + [])); // prints: ""
console.log([] + {}); // prints: [object Object]

The first line gives an empty string. JSON.stringify is only there so you can see the quotes, because an empty string would print as a blank line. The second line gives the text [object Object]. There are no numbers anywhere, and there is no error either.

What + does, step by step

When JavaScript runs a + b, it follows the same steps every time.

• First, each side is turned into a primitive value, which means a plain number, string or boolean. Numbers and strings stay as they are. Arrays and objects get converted.
• An array becomes text by joining its items with commas. An empty array has no items, so it becomes "".
• A plain object becomes the text "[object Object]".
• Then, if either side is now a string, both sides are turned into strings and glued together.
• Only if neither side is a string does + do real addition.

So [] + [] becomes "" + "", which is "". And [] + {} becomes "" + "[object Object]".

console.log([1, 2] + [3]); // prints: 1,23
console.log([] + 5); // prints: 5
console.log(true + 1); // prints: 2

[1, 2] becomes "1,2" and [3] becomes "3", so gluing gives "1,23". The second line looks like the number 5, but it is the string "5". In the last line neither side is text, so true becomes 1 and you get real math.

Same curse, with numbers

The same rule bites when numbers arrive as text, which happens all the time. Values from form fields, URLs and many files are strings, even when they look like numbers.

console.log("3" + 1); // prints: 31
console.log("3" - 1); // prints: 2
console.log("3" * "2"); // prints: 6

With +, one side is a string, so JavaScript glues and you get "31". The minus sign only knows math, so it turns both sides into numbers and gives 2. The same goes for *, / and %. That is why mixing strings and numbers feels so random. Plus is the only math operator that prefers text.

How to break the curse

Turn text into a number before you add.

const apples = "3";
console.log(Number(apples) + 1); // prints: 4
console.log(Number("hello")); // prints: NaN

Number() converts a whole string into a number. If the text is not a number, you get NaN, JavaScript's broken-number value, so check what came back when the input might be messy.

A good habit is to convert once, right where the value enters your program, for example as soon as you read a form field. After that you only work with real numbers, and the plus sign always adds.

Rule of thumb