awesome-badger

Inside JavaScript: Understanding Type Coercion

Previous Current Next
Type Coercion: The Unusual Bits Type Coercion: The Very Silly Bits  

Type Coercion: The Very Silly Bits…

Ok, now it’s time to switch your brain into lateral thinking mode because we’re going to take this situation to its illogical conclusion…

Coercing an Empty Object

Q:   What do you get if you coerce an empty object {} to a string?
A:   The accurate, but generally unhelpful answer of "{object Object}"

So, if we coerce (or overload) the + operator to perform string concatenation instead of arithmetic addition, what will we get?

1 + {}       // "1{object Object}"

Ok, that kinda makes sense…

But what about:

!{}          // false of course...

Well, given that JavaScript arbitrarily coerces an empty object to true, I suppose it makes sense because the logical NOT of true is false

Coercing an Empty Array

Q:   What do you get if you coerce an empty array [] to a string?
A:   Empty string "" of course

So, this makes perfect sense…

1 + []       // "1"

But as with empty object {}, empty array [] is also arbitrarily coerced to true; so, this also makes perfect sense:

![]        // false

Q:   What do you get if you try to coerce an array [] to a number?
A:   Well, that depends on what the first element of the array contains…

+[]        // 0. The array is empty, so element zero is undefined and undefined coerces to 0
+[""]      // 0. Element zero is the empty string which coerces to false, and false coerces to 0
+["2"]     // 2. Element zero contains a numeric string, so this converts successfully
+["Hi"]    // NaN. Element zero is a string with no valid numeric representation
+[1,"2"]   // NaN - because it just does alright!!

WAT

With apologies to Gary Bernhardt

Of course, an empty array referenced by an empty array inside an empty array is clearly undefined:

[][[]]         // undefined

Finally! Something that makes sense…

And Now let’s Coerce Things Back to Boolean, or Number or String

So, we could derive the Boolean values in a backwards kind of way:

![]        // false
!![]       // true
!+[]       // true

Hey, why not use Boolean truthiness to coerce these values back to numbers?

 ![] + !![]                // 1 because this is really (false + true)
!![] + !![]                // 2 because this is really (true + true)
!![] + !![] + !![]         // 3 because this is really (true + true + true)
!![] + !![] + !![] + !![]  // 4 because this is really (true + true + true + true)

But then since empty array coerces to the empty string, we can convert these numbers into strings by overloading the + operator!

 ![] + !![] + []               // "1"
!![] + !![] + []               // "2"
!![] + !![] + !![] + []        // "3"
!![] + !![] + !![] + !![] + [] // "4"

![] + []                       // "false"
!+[] + []                      // "true"

[][[]]+[]                      // "undefined"

Come on, keep up!

This bizarre behaviour is the basis for the Hieroglyphy app, possibly the strangest app in all of GitHub land.

This app takes any block of browser-based JavaScript and transforms it into equally valid, executable JavaScript but composed of only the characters ()[]{}+!.

Very silly!

Previous Current Next
Type Coercion: The Unusual Bits Type Coercion: The Very Silly Bits