wtfjs

What the f*ck JavaScript?

[![WTFPL 2.0][license-image]][license-url] [![NPM version][npm-image]][npm-url] [![Patreon][patreon-image]][patreon-url] [![Buy Me A Coffee][bmc-image]][bmc-url]

A list of funny and tricky JavaScript examples

JavaScript is a great language. It has a simple syntax, large ecosystem and, what is most important, a great community.

At the same time, we all know that JavaScript is quite a funny language with tricky parts. Some of them can quickly turn our everyday job into hell, and some of them can make us laugh out loud.

The original idea for WTFJS belongs to Brian Leroux. This list is highly inspired by his talk “WTFJS” at dotJS 2012:

Node Packaged Manuscript

You can install this handbook using npm. Just run:

$ npm install -g wtfjs

You should be able to run wtfjs at the command line now. This will open the manual in your selected $PAGER. Otherwise, you may continue reading on here.

The source is available here: https://github.com/denysdovhan/wtfjs

Translations

Currently, there are these translations of wtfjs:

• 中文
• हिंदी
• Français
• Português do Brasil
• Polski
• Italiano
• 한국어

Help translating to your language

Note: Translations are maintained by their translators. They may not contain every example, and existing examples may be outdated.

Table of Contents

• 💪🏻 Motivation
• ✍🏻 Notation
• 👀 Examples
  • [] is equal ![]
  • true is not equal ![], but not equal [] too
  • true is false
  • baNaNa
  • NaN is not a NaN
  • Object.is() and === weird cases
  • It's a fail
  • [] is truthy, but not true
  • null is falsy, but not false
  • document.all is an object, but it is undefined
  • Minimal value is greater than zero
  • function is not a function
  • Adding arrays
  • Trailing commas in array
  • Array equality is a monster
  • undefined and Number
  • parseInt is a bad guy
  • Math with true and false
  • HTML comments are valid in JavaScript
  • NaN is not a number
  • [] and null are objects
  • Magically increasing numbers
  • Precision of 0.1 + 0.2
  • Patching numbers
  • Comparison of three numbers
  • Funny math
  • Addition of RegExps
  • Strings aren't instances of String
  • Calling functions with backticks
  • Call call call
  • A constructor property
  • Object as a key of object's property
  • Accessing prototypes with __proto__
  • `${{Object}}`
  • Destructuring with default values
  • Dots and spreading
  • Labels
  • Nested labels
  • Insidious try..catch
  • Is this multiple inheritance?
  • A generator which yields itself
  • A class of class
  • Non-coercible objects
  • Tricky arrow functions
  • Arrow functions can not be a constructor
  • arguments and arrow functions
  • Tricky return
  • Chaining assignments on object
  • Accessing object properties with arrays
  • Number.toFixed() display different numbers
  • Math.max() less than Math.min()
  • Comparing null to 0
  • Same variable redeclaration
  • Default behavior Array.prototype.sort()
  • resolve() won't return Promise instance
  • {}{} is undefined
  • arguments binding
  • An alert from hell
  • An infinite timeout
  • A setTimeout object
  • Double dot
  • Extra Newness
  • Why you should use semicolons
  • Split a string by a space
  • A stringified string
  • Non-strict comparison of a number to true
• 📚 Other resources
• 🤝 Supporting
• 🎓 License

💪🏻 Motivation

Just for fun

— “Just for Fun: The Story of an Accidental Revolutionary”, Linus Torvalds

The primary goal of this list is to collect some crazy examples and explain how they work, if possible. Just because it's fun to learn something that we didn't know before.

If you are a beginner, you can use these notes to get a deeper dive into JavaScript. I hope these notes will motivate you to spend more time reading the specification.

If you are a professional developer, you can consider these examples as a great reference for all of the quirks and unexpected edges of our beloved JavaScript.

In any case, just read this. You're probably going to find something new.

⚠️ Note: If you enjoy reading this document, please, consider supporting the author of this collection.

✍🏻 Notation

// -> is used to show the result of an expression. For example:

1 + 1; // -> 2

// > means the result of console.log or another output. For example:

console.log("hello, world!"); // > hello, world!

// is just a comment used for explanations. Example:

// Assigning a function to foo constant
const foo = function() {};

👀 Examples

[] is equal ![]

Array is equal not array:

[] == ![]; // -> true

💡 Explanation:

The abstract equality operator converts both sides to numbers to compare them, and both sides become the number 0 for different reasons. Arrays are truthy, so on the right, the opposite of a truthy value is false, which is then coerced to 0. On the left, however, an empty array is coerced to a number without becoming a boolean first, and empty arrays are coerced to 0, despite being truthy.

Here is how this expression simplifies:

+[] == +![];
0 == +false;
0 == 0;
true;

See also [] is truthy, but not true.

• 12.5.9 Logical NOT Operator (!)
• 7.2.15 Abstract Equality Comparison

true is not equal ![], but not equal [] too

Array is not equal true, but not Array is not equal true too; Array is equal false, not Array is equal false too:

true == []; // -> false
true == ![]; // -> false

false == []; // -> true
false == ![]; // -> true

💡 Explanation:

true == []; // -> false
true == ![]; // -> false

// According to the specification

true == []; // -> false

toNumber(true); // -> 1
toNumber([]); // -> 0

1 == 0; // -> false

true == ![]; // -> false

![]; // -> false

true == false; // -> false

false == []; // -> true
false == ![]; // -> true

// According to the specification

false == []; // -> true

toNumber(false); // -> 0
toNumber([]); // -> 0

0 == 0; // -> true

false == ![]; // -> true

![]; // -> false

false == false; // -> true

• 7.2.15 Abstract Equality Comparison

true is false

!!"false" == !!"true"; // -> true
!!"false" === !!"true"; // -> true

💡 Explanation:

Consider this step-by-step:

// true is 'truthy' and represented by value 1 (number), 'true' in string form is NaN.
true == "true"; // -> false
false == "false"; // -> false

// 'false' is not the empty string, so it's a truthy value
!!"false"; // -> true
!!"true"; // -> true

• 7.2.15 Abstract Equality Comparison

baNaNa

"b" + "a" + +"a" + "a"; // -> 'baNaNa'

This is an old-school joke in JavaScript, but remastered. Here's the original one:

"foo" + +"bar"; // -> 'fooNaN'

💡 Explanation:

The expression is evaluated as 'foo' + (+'bar'), which converts 'bar' to not a number.

• 12.8.3 The Addition Operator (+)
• 12.5.6 Unary + Operator

NaN is not a NaN

NaN === NaN; // -> false

💡 Explanation:

The specification strictly defines the logic behind this behavior:

1. If Type(x) is different from Type(y), return false.
2. If Type(x) is Number, then
   1. If x is NaN, return false.
   2. If y is NaN, return false.
   3. … … …

— 7.2.14 Strict Equality Comparison

Following the definition of NaN from the IEEE:

Four mutually exclusive relations are possible: less than, equal, greater than, and unordered. The last case arises when at least one operand is NaN. Every NaN shall compare unordered with everything, including itself.

— “What is the rationale for all comparisons returning false for IEEE754 NaN values?” at StackOverflow

Object.is() and === weird cases

Object.is() determines if two values have the same value or not. It works similar to the === operator but there are a few weird cases:

Object.is(NaN, NaN); // -> true
NaN === NaN; // -> false

Object.is(-0, 0); // -> false
-0 === 0; // -> true

Object.is(NaN, 0 / 0); // -> true
NaN === 0 / 0; // -> false

💡 Explanation:

In JavaScript lingo, NaN and NaN are the same value but they're not strictly equal. NaN === NaN being false is apparently due to historical reasons so it would probably be better to accept it as it is.

Similarly, -0 and 0 are strictly equal, but they're not the same value.

For more details about NaN === NaN, see the above case.

• Here are the TC39 specs about Object.is
• Equality comparisons and sameness on MDN

It's a fail

You would not believe, but …

(![] + [])[+[]] +
  (![] + [])[+!+[]] +
  ([![]] + [][[]])[+!+[] + [+[]]] +
  (![] + [])[!+[]