Picture this: You’re debugging some JavaScript code at 2 AM, your coffee has gone cold, and you stumble upon something that makes you question everything you thought you knew about programming. You type [] + [] into your browser console, expecting… well, honestly, you’re not sure what to expect. But when you see an empty string pop up, followed by [] + {} returning "[object Object]", you start wondering if JavaScript is just trolling you at this point.

Welcome to the wonderfully weird world of JavaScript type coercion! Let’s unpack this madness together and hopefully restore some of your faith in the universe (or at least help you debug more effectively).

The Great Type Coercion Mystery

JavaScript has this “helpful” feature where it tries to convert values from one type to another automatically. It’s like having an overly enthusiastic friend who keeps finishing your sentences – sometimes it’s exactly what you wanted, and sometimes it’s… well, let’s just say it’s not.

When you use the + operator in JavaScript, it can do two things:

  1. Addition (when both operands are numbers)
  2. String concatenation (when at least one operand is a string)

But what happens when neither operand is a number or string? That’s where the magic (read: chaos) begins.

Breaking Down [] + []

Let’s trace through what happens when JavaScript encounters [] + []:

console.log([] + []); // ""

Here’s the step-by-step breakdown:

  1. JavaScript sees the + operator and thinks: “Hmm, I need to figure out what to do with these arrays.”

  2. It tries to convert both arrays to primitive values using the ToPrimitive operation. For arrays, this means calling the toString() method.

  3. An empty array’s toString() method returns an empty string:

    console.log([].toString()); // ""

  4. So we end up with: "" + "" which equals ""

Wait, that actually makes sense! JavaScript converted both empty arrays to empty strings, then concatenated them. Mystery solved… or is it?

The Plot Thickens: [] + {}

Now let’s look at the second case:

console.log([] + {}); // "[object Object]"

This one’s a bit more involved:

  1. JavaScript converts the empty array to a primitive: [].toString() returns ""

  2. JavaScript converts the empty object to a primitive: {}.toString() returns "[object Object]"

    console.log({}.toString()); // "[object Object]"

  3. So we get: "" + "[object Object]" which equals "[object Object]"

Wait, There’s More Weirdness!

Just when you think you’ve got it figured out, JavaScript throws you another curveball. Try this in your console:

console.log({} + []); // 0 (in most browsers)

“Wait, what?!” you might exclaim, and you’d be right to be confused. This happens because JavaScript interpreters sometimes treat {} at the beginning of a statement as an empty block statement, not an object literal. So it effectively becomes +[], which coerces the empty array to a number (0).

To avoid this confusion, wrap your objects in parentheses:

console.log(({}) + []); // "[object Object]"

The Rules Behind the Madness

Here’s a simplified version of JavaScript’s type coercion rules for the + operator:

  1. If either operand is a string, convert both to strings and concatenate
  2. If both operands are numbers, add them mathematically
  3. For other types, convert to primitives first:
    • Arrays: toString() method (empty array = empty string)
    • Objects: toString() method (empty object = “[object Object]”)
    • Booleans: true becomes “true”, false becomes “false”
    • Numbers: stay as numbers unless string conversion is needed

Pro Tips for Surviving Type Coercion

  1. Be explicit with your conversions:

    // Instead of relying on coercion
let result = someArray + someObject;

// Be explicit
let result = String(someArray) + String(someObject);

  2. Use strict equality (===) instead of loose equality (==):

    // This might surprise you
console.log([] == ""); // true
console.log([] == 0);  // true

// This is more predictable
console.log([] === ""); // false
console.log([] === 0);  // false

  3. When in doubt, check the types:

    console.log(typeof []);     // "object"
console.log(typeof {});     // "object"
console.log(typeof "");     // "string"

The Bottom Line

JavaScript’s type coercion can seem like dark magic, but it follows specific rules. Understanding these rules helps you write more predictable code and debug those head-scratching moments when [] + [] somehow equals an empty string.

The key takeaway? JavaScript is trying to be helpful by converting types automatically, but sometimes that “helpfulness” can lead to unexpected results. When working with mixed types, be explicit about your conversions, and you’ll save yourself (and your future self) a lot of debugging headaches.

Remember: every weird JavaScript behavior has a logical explanation – even if that logic sometimes feels like it came from an alternate dimension where math works differently. Happy coding, and may your type coercions be ever in your favor! 🚀