Repository files navigation

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 toBrian Leroux. This list is highly inspired by his talk“WTFJS” at dotJS 2012:

You can install this handbook usingnpm. Just run:

$ npm install -g wtfjs

You should be able to runwtfjs 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

Currently, there are these translations ofwtfjs:

• 中文
• हिंदी
• 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.

• 💪🏻 Motivation
• ✍🏻 Notation
• 👀 Examples
  • [] is equal![]
  • true is not equal![], but not equal[] too
  • true is false
  • baNaNa
  • NaN is not aNaN
  • Object.is() and=== weird cases
  • It's a fail
  • [] is truthy, but nottrue
  • null is falsy, but notfalse
  • 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 andNumber
  • parseInt is a bad guy
  • Math withtrue andfalse
  • HTML comments are valid in JavaScript
  • NaN isnot a number
  • [] andnull are objects
  • Magically increasing numbers
  • Precision of0.1 + 0.2
  • Patching numbers
  • Comparison of three numbers
  • Funny math
  • Addition of RegExps
  • Strings aren't instances ofString
  • Calling functions with backticks
  • Call call call
  • Aconstructor property
  • Object as a key of object's property
  • Accessing prototypes with__proto__
  • `${{Object}}`
  • Destructuring with default values
  • Dots and spreading
  • Labels
  • Nested labels
  • Insidioustry..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 thanMath.min()
  • Comparingnull to0
  • Same variable redeclaration
  • Default behavior Array.prototype.sort()
  • resolve() won't return Promise instance
  • {}{} is undefined
  • arguments binding
  • Analert from hell
  • An infinite timeout
  • AsetTimeout 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 totrue
• 📚 Other resources
• 🤝 Supporting
• 🎓 License

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.

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

1+1;// -> 2

// > means the result ofconsole.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 constantconstfoo=function(){};

Array is equal not array:

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

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

Here is how this expression simplifies:

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

See also[] is truthy, but nottrue.

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

Array is not equaltrue, but not Array is not equaltrue too;Array is equalfalse, not Array is equalfalse too:

true==[];// -> falsetrue==![];// -> falsefalse==[];// -> truefalse==![];// -> true

true==[];// -> falsetrue==![];// -> false// According to the specificationtrue==[];// -> falsetoNumber(true);// -> 1toNumber([]);// -> 01==0;// -> falsetrue==![];// -> false![];// -> falsetrue==false;// -> false

false==[];// -> truefalse==![];// -> true// According to the specificationfalse==[];// -> truetoNumber(false);// -> 0toNumber([]);// -> 00==0;// -> truefalse==![];// -> true![];// -> falsefalse==false;// -> true

• 7.2.15 Abstract Equality Comparison

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

Consider this step-by-step:

// true is 'truthy' and represented by value 1 (number), 'true' in string form is NaN.true=="true";// -> falsefalse=="false";// -> false// 'false' is not the empty string, so it's a truthy value!!"false";// -> true!!"true";// -> true

• 7.2.15 Abstract Equality Comparison

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

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

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

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===NaN;// -> false

The specification strictly defines the logic behind this behavior:

1. IfType(x) is different fromType(y), returnfalse.
2. IfType(x) is Number, then
   1. Ifx isNaN, returnfalse.
   2. Ify isNaN, returnfalse.
   3. … … …

—7.2.14 Strict Equality Comparison

Following the definition ofNaN 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() 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);// -> trueNaN===NaN;// -> falseObject.is(-0,0);// -> false-0===0;// -> trueObject.is(NaN,0/0);// -> trueNaN===0/0;// -> false

In JavaScript lingo,NaN andNaN 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 and0 are strictly equal, but they're not the same value.

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

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

You would not believe, but …

(![]+[])[+[]]+(![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]];// -> 'fail'

By breaking that mass of symbols into pieces, we notice that the following pattern occurs often:

![]+[];// -> 'false'![];// -> false

So we try adding[] tofalse. But due to a number of internal function calls (binary + Operator ->ToPrimitive ->[[DefaultValue]]) we end up converting the right operand to a string:

![]+[].toString();// 'false'

Thinking of a string as an array we can access its first character via[0]:

"false"[0];// -> 'f'

The rest is obvious, but thei is tricky. Thei infail is grabbed by generating the string'falseundefined' and grabbing the element on index['10'].

More examples:

+![]// -> 0+!![]// -> 1!![]// -> true![]// -> false[][[]]// -> undefined+!![]/+![]// -> Infinity[]+{}// -> "[object Object]"+{}// -> NaN

• Brainfuck beware: JavaScript is after you!
• Writing a sentence without using the Alphabet — generate any phrase using JavaScript

An array is a truthy value, however, it's not equal totrue.

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

Here are links to the corresponding sections in the ECMA-262 specification:

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

Despite the fact thatnull is a falsy value, it's not equal tofalse.

!!null;// -> falsenull==false;// -> false

At the same time, other falsy values, like0 or'' are equal tofalse.

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

The explanation is the same as for previous example. Here's the corresponding link:

• 7.2.15 Abstract Equality Comparison

⚠️ This is part of the Browser API and won't work in a Node.js environment⚠️

Despite the fact thatdocument.all is an array-like object and it gives access to the DOM nodes in the page, it responds to thetypeof function asundefined.

document.allinstanceofObject;// -> truetypeofdocument.all;// -> 'undefined'

At the same time,document.all is not equal toundefined.

document.all===undefined;// -> falsedocument.all===null;// -> false

But at the same time:

document.all==null;// -> true

document.all used to be a way to access DOM elements, in particular with old versions of IE. While it has never been a standard it was broadly used in the old age JS code. When the standard progressed with new APIs (such asdocument.getElementById) this API call became obsolete and the standard committee had to decide what to do with it. Because of its broad use they decided to keep the API but introduce a willful violation of the JavaScript specification.The reason why it responds tofalse when using theStrict Equality Comparison withundefined whiletrue when using theAbstract Equality Comparison is due to the willful violation of the specification that explicitly allows that.

—“Obsolete features - document.all” at WhatWG - HTML spec—“Chapter 4 - ToBoolean - Falsy values” at YDKJS - Types & Grammar

Number.MIN_VALUE is the smallest number, which is greater than zero:

Number.MIN_VALUE>0;// -> true

Number.MIN_VALUE is5e-324, i.e. the smallest positive number that can be represented within float precision, i.e. that's as close as you can get to zero. It defines the best resolution that floats can give you.

Now the overall smallest value isNumber.NEGATIVE_INFINITY although it's not really numeric in a strict sense.

—“Why is0 less thanNumber.MIN_VALUE in JavaScript?” at StackOverflow

• 20.1.2.9 Number.MIN_VALUE

⚠️ A bug present in V8 v5.5 or lower (Node.js <=7)⚠️

All of you know about the annoyingundefined is not a function, but what about this?

// Declare a class which extends nullclassFooextendsnull{}// -> [Function: Foo]newFoo()instanceofnull;// > TypeError: function is not a function// >     at … … …

This is not a part of the specification. It's just a bug that has now been fixed, so there shouldn't be a problem with it in the future.

It's continuation of story with previous bug in modern environment (tested with Chrome 71 and Node.js v11.8.0).

classFooextendsnull{}newFoo()instanceofnull;// > TypeError: Super constructor null of Foo is not a constructor

This is not a bug because:

Object.getPrototypeOf(Foo.prototype);// -> null

If the class has no constructor the call from prototype chain. But in the parent has no constructor. Just in case, I’ll clarify thatnull is an object:

typeofnull==="object";

Therefore, you can inherit from it (although in the world of the OOP for such terms would have beaten me). So you can't call the null constructor. If you change this code:

classFooextendsnull{constructor(){console.log("something");}}

You see the error:

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

And if you addsuper:

classFooextendsnull{constructor(){console.log(111);super();}}

JS throws an error:

TypeError: Super constructor null of Foo is not a constructor

• An explanation of this issue by@geekjob

What if you try to add two arrays?

[1,2,3]+[4,5,6];// -> '1,2,34,5,6'

The concatenation happens. Step-by-step, it looks like this:

[1,2,3]+[4,5,6][// call toString()(1,2,3)].toString()+[4,5,6].toString();// concatenation"1,2,3"+"4,5,6";// ->("1,2,34,5,6");

You've created an array with 4 empty elements. Despite all, you'll get an array with three elements, because of trailing commas:

leta=[,,,];a.length;// -> 3a.toString();// -> ',,'

Trailing commas (sometimes called "final commas") can be useful when adding new elements, parameters, or properties to JavaScript code. If you want to add a new property, you can simply add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome.

—Trailing commas at MDN

Array equality is a monster in JS, as you can see below:

[]==''// -> true[]==0// -> true['']==''// -> true[0]==0// -> true[0]==''// -> false['']==0// -> true[null]==''// true[null]==0// true[undefined]==''// true[undefined]==0// true[[]]==0// true[[]]==''// true[[[[[[]]]]]]==''// true[[[[[[]]]]]]==0// true[[[[[[null]]]]]]==0// true[[[[[[null]]]]]]==''// true[[[[[[undefined]]]]]]==0// true[[[[[[undefined]]]]]]==''// true

You should watch very carefully for the above examples! The behaviour is described in section7.2.15 Abstract Equality Comparison of the specification.

If we don't pass any arguments into theNumber constructor, we'll get0. The valueundefined is assigned to formal arguments when there are no actual arguments, so you might expect thatNumber without arguments takesundefined as a value of its parameter. However, when we passundefined, we will getNaN.

Number();// -> 0Number(undefined);// -> NaN

According to the specification:

1. If no arguments were passed to this function's invocation, letn be+0.
2. Else, letn be ?ToNumber(value).
3. In case ofundefined,ToNumber(undefined) should returnNaN.

Here's the corresponding section:

• 20.1.1 The Number Constructor
• 7.1.3 ToNumber(argument)

parseInt is famous by its quirks:

parseInt("f*ck");// -> NaNparseInt("f*ck",16);// -> 15

💡 Explanation: This happens becauseparseInt will continue parsing character-by-character until it hits a character it doesn't know. Thef in'f*ck' is the hexadecimal digit15.

ParsingInfinity to integer is something…

//parseInt("Infinity",10);// -> NaN// ...parseInt("Infinity",18);// -> NaN...parseInt("Infinity",19);// -> 18// ...parseInt("Infinity",23);// -> 18...parseInt("Infinity",24);// -> 151176378// ...parseInt("Infinity",29);// -> 385849803parseInt("Infinity",30);// -> 13693557269// ...parseInt("Infinity",34);// -> 28872273981parseInt("Infinity",35);// -> 1201203301724parseInt("Infinity",36);// -> 1461559270678...parseInt("Infinity",37);// -> NaN

Be careful with parsingnull too:

parseInt(null,24);// -> 23

💡 Explanation:

It's convertingnull to the string"null" and trying to convert it. For radixes 0 through 23, there are no numerals it can convert, so it returns NaN. At 24,"n", the 14th letter, is added to the numeral system. At 31,"u", the 21st letter, is added and the entire string can be decoded. At 37 on there is no longer any valid numeral set that can be generated andNaN is returned.

—“parseInt(null, 24) === 23… wait, what?” at StackOverflow

Don't forget about octals:

parseInt("06");// 6parseInt("08");// 8 if support ECMAScript 5parseInt("08");// 0 if not support ECMAScript 5

💡 Explanation: If the input string begins with "0", radix is eight (octal) or 10 (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet. For this reason always specify a radix when usingparseInt.

parseInt always convert input to string:

parseInt({toString:()=>2,valueOf:()=>1});// -> 2Number({toString:()=>2,valueOf:()=>1});// -> 1

Be careful while parsing floating point values

parseInt(0.000001);// -> 0parseInt(0.0000001);// -> 1parseInt(1/1999999);// -> 5

💡 Explanation:ParseInt takes a string argument and returns an integer of the specified radix.ParseInt also strips anything after and including the first non-digit in the string parameter.0.000001 is converted to a string"0.000001" and theparseInt returns0. When0.0000001 is converted to a string it is treated as"1e-7" and henceparseInt returns1.1/1999999 is interpreted as5.00000250000125e-7 andparseInt returns5.

Let's do some math:

true+true;// -> 2(true+true)*(true+true)-true;// -> 3

Hmmm… 🤔

We can coerce values to numbers with theNumber constructor. It's quite obvious thattrue will be coerced to1:

Number(true);// -> 1

The unary plus operator attempts to convert its value into a number. It can convert string representations of integers and floats, as well as the non-string valuestrue,false, andnull. If it cannot parse a particular value, it will evaluate toNaN. That means we can coercetrue to1 easier:

+true;// -> 1

When you're performing addition or multiplication, theToNumber method is invoked. According to the specification, this method returns:

Ifargument istrue, return1. Ifargument isfalse, return+0.

That's why we can add boolean values as regular numbers and get correct results.

Corresponding sections:

• 12.5.6 Unary+ Operator
• 12.8.3 The Addition Operator (+)
• 7.1.3 ToNumber(argument)

You will be impressed, but<!-- (which is known as HTML comment) is a valid comment in JavaScript.

// valid comment<!-- valid comment too

Impressed? HTML-like comments were intended to allow browsers that didn't understand the<script> tag to degrade gracefully. These browsers, e.g. Netscape 1.x are no longer popular. So there is really no point in putting HTML comments in your script tags anymore.

Since Node.js is based on the V8 engine, HTML-like comments are supported by the Node.js runtime too. Moreover, they're a part of the specification:

• B.1.3 HTML-like Comments

Type ofNaN is a'number':

typeofNaN;// -> 'number'

Explanations of howtypeof andinstanceof operators work:

• 12.5.5 Thetypeof Operator
• 12.10.4 Runtime Semantics: InstanceofOperator(O,C)

typeof[];// -> 'object'typeofnull;// -> 'object'// howevernullinstanceofObject;// false

The behavior oftypeof operator is defined in this section of the specification:

• 13.5.3 Thetypeof Operator

According to the specification, thetypeof operator returns a string according toTable 37:typeof Operator Results. Fornull, ordinary, standard exotic and non-standard exotic objects, which do not implement[[Call]], it returns the string"object".

However, you can check the type of an object by using thetoString method.

Object.prototype.toString.call([]);// -> '[object Array]'Object.prototype.toString.call(newDate());// -> '[object Date]'Object.prototype.toString.call(null);// -> '[object Null]'

999999999999999;// -> 9999999999999999999999999999999;// -> 1000000000000000010000000000000000;// -> 1000000000000000010000000000000000+1;// -> 1000000000000000010000000000000000+1.1;// -> 10000000000000002

This is caused by IEEE 754-2008 standard for Binary Floating-Point Arithmetic. At this scale, it rounds to the nearest even number. Read more:

• 6.1.6 The Number Type
• IEEE 754 on Wikipedia

A well-known joke. An addition of0.1 and0.2 is deadly precise:

0.1+0.2;// -> 0.300000000000000040.1+0.2===0.3;// -> false

The answer for the”Is floating point math broken?” question on StackOverflow:

The constants0.2 and0.3 in your program will also be approximations to their true values. It happens that the closestdouble to0.2 is larger than the rational number0.2 but that the closestdouble to0.3 is smaller than the rational number0.3. The sum of0.1 and0.2 winds up being larger than the rational number0.3 and hence disagreeing with the constant in your code.

This problem is so known that there is even a website called0.30000000000000004.com. It occurs in every language that uses floating-point math, not just JavaScript.

You can add your own methods to wrapper objects likeNumber orString.

Number.prototype.isOne=function(){returnNumber(this)===1;};(1.0).isOne();// -> true(1).isOne();// -> true(2.0).isOne();// -> false(7).isOne();// -> false

Obviously, you can extend theNumber object like any other object in JavaScript. However, it's not recommended if the behavior of the defined method is not a part of the specification. Here is the list ofNumber's properties:

• 20.1 Number Objects

1<2<3;// -> true3>2>1;// -> false

Why does this work that way? Well, the problem is in the first part of an expression. Here's how it works:

1<2<3;// 1 < 2 -> truetrue<3;// true -> 11<3;// -> true3>2>1;// 3 > 2 -> truetrue>1;// true -> 11>1;// -> false

We can fix this withGreater than or equal operator (>=):

3>2>=1;// true

Read more about Relational operators in the specification:

• 12.10 Relational Operators

Often the results of arithmetic operations in JavaScript might be quite unexpected. Consider these examples:

3-1// -> 23+1// -> 4'3'-1// -> 2'3'+1// -> '31'''+''// -> ''[]+[]// -> ''{}+[]// -> 0[]+{}// -> '[object Object]'{}+{}// -> '[object Object][object Object]''222'--'111'// -> 333[4]*[4]// -> 16[]*[]// -> 0[4,4]*[4,4]// NaN

What's happening in the first four examples? Here's a small table to understand addition in #"Number + Number -> additionBoolean + Number -> additionBoolean + Boolean -> additionNumber + String -> concatenationString + Boolean -> concatenationString + String -> concatenation">

Number  + Number  -> additionBoolean + Number  -> additionBoolean + Boolean -> additionNumber  + String  -> concatenationString  + Boolean -> concatenationString  + String  -> concatenation

{// a code block here}+[];// -> 0

({}+[]);// -> [object Object]

Addition of RegExps

// Patch a toString methodRegExp.prototype.toString=function(){returnthis.source;}/7/-/5/;// -> 2

💡 Explanation:

Strings aren't instances ofString

"str";// -> 'str'typeof"str";// -> 'string'"str"instanceofString;// -> false

💡 Explanation:

typeofString("str");// -> 'string'String("str");// -> 'str'String("str")=="str";// -> true

newString("str")=="str";// -> truetypeofnewString("str");// -> 'object'

newString("str");// -> [String: 'str']

Calling functions with backticks

functionf(...args){returnargs;}

f(1,2,3);// -> [ 1, 2, 3 ]

f`true is${true}, false is${false}, array is${[1,2,3]}`;// -> [ [ 'true is ', ', false is ', ', array is ', '' ],// ->   true,// ->   false,// ->   [ 1, 2, 3 ] ]

💡 Explanation:

functiontemplate(strings, ...keys){// do something with strings and keys…}

Call call call

console.log.call.call.call.call.call.apply(a=>a,[1,2]);

💡 Explanation:

Aconstructor property

constc="constructor";c[c][c]('console.log("WTF?")')();// > WTF?

💡 Explanation:

// Declare a new constant which is a string 'constructor'constc="constructor";// c is a stringc;// -> 'constructor'// Getting a constructor of stringc[c];// -> [Function: String]// Getting a constructor of constructorc[c][c];// -> [Function: Function]// Call the Function constructor and pass// the body of new function as an argumentc[c][c]('console.log("WTF?")');// -> [Function: anonymous]// And then call this anonymous function// The result is console-logging a string 'WTF?'c[c][c]('console.log("WTF?")')();// > WTF?

Object as a key of object's property

{[{}]:{}}// -> { '[object Object]': {}}

💡 Explanation:

({[{}]:{[{}]:{}}}[{}][{}]);// -> {}// structure:// {//   '[object Object]': {//     '[object Object]': {}//   }// }

Accessing prototypes with__proto__

(1).__proto__.__proto__.__proto__;// -> null

💡 Explanation:

(1).__proto__;// -> [Number: 0](1).__proto__.__proto__;// -> {}(1).__proto__.__proto__.__proto__;// -> null

`${{Object}}`

`${{ Object}}`;

// -> '[object Object]'

💡 Explanation:

{  Object:Object;}

Destructuring with default values

letx,{x:y=1}={ x};y;

// -> 1

💡 Explanation:

letx,{x:y=1}={ x};y;//  ↑       ↑           ↑    ↑//  1       3           2    4

Dots and spreading

[...[..."..."]].length;// -> 3

💡 Explanation:

[...'...']// -> [ '.', '.', '.' ][...[...'...']]// -> [ '.', '.', '.' ][...[...'...']].length// -> 3

[...'...']// -> [ '.', '.', '.' ][...[...'...']]// -> [ '.', '.', '.' ][...[...[...'...']]]// -> [ '.', '.', '.' ][...[...[...[...'...']]]]// -> [ '.', '.', '.' ]// and so on …

Labels

foo:{console.log("first");break foo;console.log("second");}// > first// -> undefined

💡 Explanation:

Nested labels

a: b: c: d: e: f: g:1,2,3,4,5;// -> 5

💡 Explanation:

Insidioustry..catch

(()=>{try{return2;}finally{return3;}})();

💡 Explanation:

Is this multiple inheritance?

newclassFextends(String,Array){}();// -> F []

💡 Explanation:

A generator which yields itself

(function*f(){yieldf;})().next();// -> { value: [GeneratorFunction: f], done: false }

(function*f(){yieldf;})().next().value().next()(// -> { value: [GeneratorFunction: f], done: false }// and againfunction*f(){yieldf;})().next().value().next().value().next()(// -> { value: [GeneratorFunction: f], done: false }// and againfunction*f(){yieldf;})().next().value().next().value().next().value().next();// -> { value: [GeneratorFunction: f], done: false }// and so on// …

💡 Explanation:

A class of class

typeofnewclass{class(){}}();// -> 'object'

💡 Explanation:

constfoo={class:function(){}};

class{class(){}}

Non-coercible objects

functionnonCoercible(val){if(val==null){throwTypeError("nonCoercible should not be called with null or undefined");}constres=Object(val);res[Symbol.toPrimitive]=()=>{throwTypeError("Trying to coerce non-coercible object");};returnres;}

// objectsconstfoo=nonCoercible({foo:"foo"});foo*10;// -> TypeError: Trying to coerce non-coercible objectfoo+"evil";// -> TypeError: Trying to coerce non-coercible object// stringsconstbar=nonCoercible("bar");bar+"1";// -> TypeError: Trying to coerce non-coercible objectbar.toString()+1;// -> bar1bar==="bar";// -> falsebar.toString()==="bar";// -> truebar=="bar";// -> TypeError: Trying to coerce non-coercible object// numbersconstbaz=nonCoercible(1);baz==1;// -> TypeError: Trying to coerce non-coercible objectbaz===1;// -> falsebaz.valueOf()===1;// -> true

💡 Explanation:

Tricky arrow functions

letf=()=>10;f();// -> 10

letf=()=>{};f();// -> undefined

💡 Explanation:

letf=()=>({});f();// -> {}

Arrow functions can not be a constructor

letf=function(){this.a=1;};newf();// -> f { 'a': 1 }

letf=()=>{this.a=1;};newf();// -> TypeError: f is not a constructor

💡 Explanation:

arguments and arrow functions

letf=function(){returnarguments;};f("a");// -> { '0': 'a' }

letf=()=>arguments;f("a");// -> Uncaught ReferenceError: arguments is not defined

💡 Explanation:

letf=(...args)=>args;f("a");

Tricky return

(function(){return{    b:10;}})();// -> undefined

💡 Explanation:

(function(){return{b:10};})();// -> { b: 10 }

Chaining assignments on object

varfoo={n:1};varbar=foo;foo.x=foo={n:2};foo.x;// -> undefinedfoo;// -> {n: 2}bar;// -> {n: 1, x: {n: 2}}

💡 Explanation:

varfoo={n:1};varbar=foo;foo={n:2};// -> {n: 2}bar.x=foo;// -> {n: 1, x: {n: 2}}// bar.x point to the address of the new foo object// it's not equivalent to: bar.x = {n: 2}

Accessing object properties with arrays

varobj={property:1};vararray=["property"];obj[array];// -> 1// this also works with nested arraysvarnestedArray=[[[[[[[[[["property"]]]]]]]]]];obj[nestedArray];// -> 1

varmap={};varx=1;vary=2;varz=3;map[[x,y,z]]=true;map[[x+10,y,z]]=true;map["1,2,3"];// -> truemap["11,2,3"];// -> true

💡 Explanation:

["property"].toString();// -> 'property'

Number.toFixed() display different numbers

(0.7875).toFixed(3);// Firefox: -> 0.787// Chrome: -> 0.787// IE11: -> 0.788(0.7876).toFixed(3);// Firefox: -> 0.788// Chrome: -> 0.788// IE11: -> 0.788

💡 Explanation:

// Confirm the odd result of rounding a 5 down(0.7875).toFixed(3);// -> 0.787// It looks like it's just a 5 when you expand to the// limits of 64-bit (double-precision) float accuracy(0.7875).toFixed(14);// -> 0.78750000000000// But what if you go beyond the limit?(0.7875).toFixed(20);// -> 0.78749999999999997780

Math.max() less thanMath.min()

Math.min()>Math.max();// -> trueMath.min()<Math.max();// -> false

💡 Explanation:

Math.min();// -> InfinityMath.max();// -> -InfinityInfinity>-Infinity;// -> true

Comparingnull to0

null==0;// -> falsenull>0;// -> falsenull>=0;// -> true

💡 Explanation:

// This is not what happens(null==0+null)==+0;0==0;true;

null>0+null=+00>0false

null>=0;!(null<0);!(+null<+0);!(0<0);!false;true;

Same variable redeclaration

a;a;// This is also valida,a;

vara,a,a;vara;vara;

💡 Explanation:

Default behavior Array.prototype.sort()

[10,1,3].sort();// -> [ 1, 10, 3 ]

💡 Explanation:

Hint

[10,1,3].sort((a,b)=>a-b);// -> [ 1, 3, 10 ]

resolve() won't return Promise instance

consttheObject={a:7};constthePromise=newPromise((resolve,reject)=>{resolve(theObject);});// Promise instance objectthePromise.then(value=>{console.log(value===theObject);// > trueconsole.log(value);// > { a: 7 }});

consttheObject=newPromise((resolve,reject)=>{resolve(7);});// Promise instance objectconstthePromise=newPromise((resolve,reject)=>{resolve(theObject);});// Promise instance objectthePromise.then(value=>{console.log(value===theObject);// > falseconsole.log(value);// > 7});

💡 Explanation:

{}{} is undefined

{}{};// -> undefined{}{}{};// -> undefined{}{}{}{};// -> undefined{foo:'bar'}{};// -> 'bar'{}{foo:'bar'};// -> 'bar'{}{foo:'bar'}{};// -> 'bar'{a:'b'}{c:' d'}{};// -> 'd'{a:'b',c:'d'}{};// > SyntaxError: Unexpected token ':'({}{});// > SyntaxError: Unexpected token '{'

💡 Explanation:

if(true){  foo:"bar";}// -> 'bar'

arguments binding

functiona(x){arguments[0]="hello";console.log(x);}a();// > undefineda(1);// > "hello"

💡 Explanation:

Analert from hell

[666]["\155\141\160"]["\143\157\156\163\164\162\165\143\164\157\162"]("\141\154\145\162\164(666)")(666);// alert(666)

💡 Explanation:

An infinite timeout

setTimeout(()=>console.log("called"),Infinity);// -> <timeoutId>// > 'called'

💡 Explanation:

(node:1731) TimeoutOverflowWarning: Infinity does not fit into a 32-bit signed integer.Timeout duration was set to 1.(Use `node --trace-warnings ...` to show where the warning was created)

AsetTimeout object

setTimeout(123,100);// -> <timeoutId>// > 'called'

setTimeout('{a: 1}',100);// -> <timeoutId>// > 'called'

setTimeout({a:1},100);// -> <timeoutId>// > 'Uncaught SyntaxError: Unexpected identifier               setTimeout (async) (anonymous) @ VM__:1'

setTimeout(123,100);// -> <timeoutId>// > console.error("[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'report-sample' 'self' ")

💡 Explanation:

Double dot

27.toString()// > Uncaught SyntaxError: Invalid or unexpected token

27..toString();// -> '27'

💡 Explanation:

(27).toString();// -> '27'// or27..toString();// -> '27'

Extra Newness

classFooextendsFunction{constructor(val){super();this.prototype.val=val;}}newnewFoo(":D")().val;// -> ':D'

💡 Explanation:

newnewFoo(":D")().val(newnewFooInstance()).val;veryNewFooInstance.val;// -> ':D'

classFooextendsFunction{constructor(val){super(`      this.val = arguments[0];    `);this.prototype.val=val;}}varfoo=newnewFoo(":D")("D:");foo.val;// -> 'D:'deletefoo.val;// remove the instance prop 'val', deferring back to the prototype's 'val'.foo.val;// -> ':D'

Why you should use semicolons

classSomeClass{["array"]=[]["string"]="str"}newSomeClass().array;// -> 'str'

💡 Explanation:

classSomeClass{["array"]=([]["string"]="str");}

Split a string by a space

"".split("");// -> []// but…"".split(" ");// -> [""]

💡 Explanation:

A stringified string

JSON.stringify("production")==="production";// -> false

💡 Explanation:

JSON.stringify("production");// -> '"production"'

'"production"'==="production";// -> false

Non-strict comparison of a number totrue

1==true;// -> true// but…Boolean(1.1);// -> true1.1==true;// -> false

💡 Explanation:

1==true;1==Number(true);1==1;// -> true// but…1.1==true;1.1==Number(true);1.1==1;// -> false

📚 Other resources

🤝 Supporting

🎓 License