JavaScript Array Concatenation

# Why [] + [] Doesn't Do What You Think It Does

If you've ever stared at a piece of JavaScript code and thought, "This makes zero sense," you aren't alone. JavaScript is famous (or infamous) for its quirky behavior, and one of the classic "gotcha" questions in technical interviews is:

console.log([] + []);

At first glance, a junior developer might think this is adding two arrays together. Maybe it returns a new empty array? Or perhaps an error?

The actual answer is an empty string: "".

Wait, what?

Why This Question Matters

This isn't just a trivia question to trip you up in an interview. It touches on one of the most fundamental—and confusing—parts of the language: Type Coercion.

JavaScript is dynamically typed. When you use an operator like + on two different types (or even two objects), JS doesn't just give up. Instead, it tries to be "helpful" by converting those values into something it knows how to handle. This process is called coercion.

Understanding how this works is the difference between writing code that works by accident and writing code you actually control.

Understanding the Code

To understand why [] + [] results in an empty string, we have to look at how the + operator works.

In JavaScript, the + operator has two primary jobs:
1. Addition (if both operands are numbers).
2. Concatenation (if one or both operands are strings).

When you try to "add" two arrays, JavaScript realizes that arrays are objects. It can't mathematically add two objects, so it attempts to convert them into primitives.

Here is the internal step-by-step:

1. The Conversion: When the + operator sees an object (like an array), it calls an internal method called ToPrimitive. For arrays, this usually means calling the .toString() method.
2. The Array to String Rule: The .toString() method for an array joins its elements with commas.
- An array with values [1, 2] becomes "1,2".
- An empty array [] becomes an empty string "".
3. The Final Operation: Now the expression is no longer [] + []. It has been coerced into "" + "".
4. The Result: Adding two empty strings together gives you one empty string.

Finding the Correct Answer

If you were looking at multiple-choice options:
- Option A: [] (Incorrect. The + operator doesn't merge arrays; you'd need .concat() or the spread operator [...] for that).
- Option B: undefined (Incorrect. Both operands exist; they just aren't numbers).
- Option C: "" (Correct. Due to the coercion logic explained above).
- Option D: TypeError (Incorrect. JS prefers weird results over crashing).

The logic is consistent: Array $\rightarrow$ String $\rightarrow$ Concatenation.

Common Mistakes Developers Make

The biggest mistake beginners make is assuming JavaScript behaves like Python or Ruby. In Python, [] + [] would actually result in an empty list because Python overloads the + operator for lists to perform concatenation.

In JavaScript, the + operator is strictly for numbers and strings.

Another common trap is thinking that [] is "falsy" in a way that affects math. While [] is indeed truthy in a boolean context (like an if statement), when it hits a mathematical operator, it follows the toString() path.

You can see this weirdness in other variations too:
- [] + {} results in "[object Object]"
- {} + [] results in 0 (in some consoles, because the {} is treated as an empty code block, and +[] coerces the array to 0).

It's a rabbit hole that proves you should never trust implicit coercion in a production app.

Real-World Usage

You will almost never write [] + [] in a real project. However, you *will* encounter the side effects of this behavior.

The most common "real world" bug happens when you try to log or display a value that you think is a number, but is actually an array or an object. If you accidentally concatenate an array to a string in a UI component, you'll end up with "User IDs: 1,2,3" instead of a clean list, because JS called .toString() behind your back.

This is why TypeScript is so popular. It prevents this entire category of bugs by throwing a compile-time error if you try to use the + operator on two arrays. It forces you to be explicit about your intentions.

Key Takeaways

- The + operator in JS triggers type coercion if the operands aren't numbers.
- Arrays are converted to strings via .toString() when used with +.
- An empty array converted to a string is just "".
- Avoid relying on implicit coercion. If you want to combine arrays, use [...array1, ...array2] or array1.concat(array2).
- When in doubt, use typeof or Array.isArray() to verify what you're actually working with before performing operations.