## File: README.md [](https://stand-with-ukraine.pp.ua/) # 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](https://twitter.com/brianleroux). This list is highly inspired by his talk [**“WTFJS”** at dotJS 2012](https://www.youtube.com/watch?v=et8xNAc2ic8): [](https://www.youtube.com/watch?v=et8xNAc2ic8) # Node Packaged Manuscript You can install this handbook using `npm`. Just run: ``` $ npm install 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: # Translations Currently, there are these translations of **wtfjs**: - [中文](./README-zh-cn.md) - [हिंदी](./README-hi.md) - [Français](./README-fr-fr.md) - [Português do Brasil](./README-pt-br.md) - [Polski](./README-pl-pl.md) - [Italiano](./README-it-it.md) - [한국어](./README-kr.md) [**Help translating to your language**][tr-request] [tr-request]: https://github.com/denysdovhan/wtfjs/blob/master/CONTRIBUTING.md#translations **Note:** Translations are maintained by their translators. They may not contain every example, and existing examples may be outdated. # Table of Contents - [💪🏻 Motivation](#-motivation) - [✍🏻 Notation](#-notation) - [👀 Examples](#-examples) - [`[]` is equal ` - [`true` is not equal ` - [true is false](#true-is-false) - [baNaNa](#banana) - [`NaN` is not a `NaN`](#nan-is-not-a-nan) - [`Object.is()` and `===` weird cases](#objectis-and--weird-cases) - [It's a fail](#its-a-fail) - [`[]` is truthy, but not `true`](#-is-truthy-but-not-true) - [`null` is falsy, but not `false`](#null-is-falsy-but-not-false) - [`document.all` is an object, but it is undefined](#documentall-is-an-object-but-it-is-undefined) - [Minimal value is greater than zero](#minimal-value-is-greater-than-zero) - [function is not a function](#function-is-not-a-function) - [Adding arrays](#adding-arrays) - [Trailing commas in array](#trailing-commas-in-array) - [Array equality is a monster](#array-equality-is-a-monster) - [`undefined` and `Number`](#undefined-and-number) - [`parseInt` is a bad guy](#parseint-is-a-bad-guy) - [Math with `true` and `false`](#math-with-true-and-false) - [HTML comments are valid in JavaScript](#html-comments-are-valid-in-javascript) - [`NaN` is ~~not~~ a number](#nan-is-not-a-number) - [`[]` and `null` are objects](#-and-null-are-objects) - [Magically increasing numbers](#magically-increasing-numbers) - [Precision of `0.1 + 0.2`](#precision-of-01--02) - [Patching numbers](#patching-numbers) - [Comparison of three numbers](#comparison-of-three-numbers) - [Funny math](#funny-math) - [Addition of RegExps](#addition-of-regexps) - [Strings aren't instances of `String`](#strings-arent-instances-of-string) - [Calling functions with backticks](#calling-functions-with-backticks) - [Call call call](#call-call-call) - [A `constructor` property](#a-constructor-property) - [Object as a key of object's property](#object-as-a-key-of-objects-property) - [Accessing prototypes with `__proto__`](#accessing-prototypes-with-__proto__) - [`` `${{Object}}` ``](#-object-) - [Destructuring with default values](#destructuring-with-default-values) - [Dots and spreading](#dots-and-spreading) - [Labels](#labels) - [Nested labels](#nested-labels) - [Insidious `try..catch`](#insidious-trycatch) - [Is this multiple inheritance?](#is-this-multiple-inheritance) - [A generator which yields itself](#a-generator-which-yields-itself) - [A class of class](#a-class-of-class) - [Non-coercible objects](#non-coercible-objects) - [Tricky arrow functions](#tricky-arrow-functions) - [Arrow functions can not be a constructor](#arrow-functions-can-not-be-a-constructor) - [`arguments` and arrow functions](#arguments-and-arrow-functions) - [Tricky return](#tricky-return) - [Chaining assignments on object](#chaining-assignments-on-object) - [Accessing object properties with arrays](#accessing-object-properties-with-arrays) - [`Number.toFixed()` display different numbers](#numbertofixed-display-different-numbers) - [`Math.max()` less than `Math.min()`](#mathmax-less-than-mathmin) - [Comparing `null` to `0`](#comparing-null-to-0) - [Same variable redeclaration](#same-variable-redeclaration) - [Default behavior Array.prototype.sort()](#default-behavior-arrayprototypesort) - [resolve() won't return Promise instance](#resolve-wont-return-promise-instance) - [`{}{}` is undefined](#-is-undefined) - [`arguments` binding](#arguments-binding) - [An `alert` from hell](#an-alert-from-hell) - [An infinite timeout](#an-infinite-timeout) - [A `setTimeout` object](#a-settimeout-object) - [Double dot](#double-dot) - [Extra Newness](#extra-newness) - [Why you should use semicolons](#why-you-should-use-semicolons) - [Split a string by a space](#split-a-string-by-a-space) - [A stringified string](#a-stringified-string) - [Non-strict comparison of a number to `true`](#non-strict-comparison-of-a-number-to-true) - [📚 Other resources](#-other-resources) - [🤝 Supporting](#-supporting) - [🎓 License](#-license) # 💪🏻 Motivation > Just for fun > > — _[**“Just for Fun: The Story of an Accidental Revolutionary”**](https://en.wikipedia.org/wiki/Just_for_Fun), 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](#-supporting). # ✍🏻 Notation **`// ->`** is used to show the result of an expression. For example: ```js 1 + 1; // -> 2 ``` **`// >`** means the result of `console.log` or another output. For example: ```js console.log("hello, world!"); // > hello, world! ``` **`//`** is just a comment used for explanations. Example: ```js // Assigning a function to foo constant const foo = function() {}; ``` # 👀 Examples ## `[]` is equal `![]` Array is equal not array: ```js [] == ![]; // -> 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: ```js +[] == +![]; 0 == +false; 0 == 0; true; ``` See also [`[]` is truthy, but not `true`](#-is-truthy-but-not-true). - [**12.5.9** Logical NOT Operator (`!`)](https://www.ecma-international.org/ecma-262/#sec-logical-not-operator) - [**7.2.15** Abstract Equality Comparison](https://262.ecma-international.org/11.0/index.html#sec-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: ```js true == []; // -> false true == ![]; // -> false false == []; // -> true false == ![]; // -> true ``` ### 💡 Explanation: ```js true == []; // -> false true == ![]; // -> false // According to the specification true == []; // -> false toNumber(true); // -> 1 toNumber([]); // -> 0 1 == 0; // -> false true == ![]; // -> false ![]; // -> false true == false; // -> false ``` ```js 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](https://262.ecma-international.org/11.0/index.html#sec-abstract-equality-comparison) ## true is false ```js !!"false" == !!"true"; // -> true !!"false" === !!"true"; // -> true ``` ### 💡 Explanation: Consider this step-by-step: ```js // 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](https://262.ecma-international.org/11.0/index.html#sec-abstract-equality-comparison) ## baNaNa ```js "b" + "a" + +"a" + "a"; // -> 'baNaNa' ``` This is an old-school joke in JavaScript, but remastered. Here's the original one: ```js "foo" + +"bar"; // -> 'fooNaN' ``` ### 💡 Explanation: The expression is evaluated as `'foo' + (+'bar')`, which converts `'bar'` to not a number. - [**12.8.3** The Addition Operator (`+`)](https://www.ecma-international.org/ecma-262/#sec-addition-operator-plus) - [12.5.6 Unary + Operator](https://www.ecma-international.org/ecma-262/#sec-unary-plus-operator) ## `NaN` is not a `NaN` ```js 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](https://www.ecma-international.org/ecma-262/#sec-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?”](https://stackoverflow.com/questions/1565164/1573715#1573715) 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: ```javascript 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](https://tc39.es/ecma262/#sec-object.is) - [Equality comparisons and sameness](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness) on MDN ## It's a fail You would not believe, but … ```js (![] + [])[+[]] + (![] + [])[+!+[]] + ([![]] + [][[]])[+!+[] + [+[]]] + (![] + [])[!+[] + !+[]]; // -> 'fail' ``` ### 💡 Explanation: By breaking that mass of symbols into pieces, we notice that the following pattern occurs often: ```js ![] + []; // -> 'false' ![]; // -> false ``` So we try adding `[]` to `false`. But due to a number of internal function calls (`binary + Operator` -> `ToPrimitive` -> `[[DefaultValue]]`) we end up converting the right operand to a string: ```js ![] + [].toString(); // 'false' ``` Thinking of a string as an array we can access its first character via `[0]`: ```js "false"[0]; // -> 'f' ``` The rest is obvious, but the `i` is tricky. The `i` in `fail` is grabbed by generating the string `'falseundefined'` and grabbing the element on index `['10']`. More examples: ```js +![] // -> 0 +!![] // -> 1 !![] // -> true ![] // -> false [][[]] // -> undefined +!![] / +![] // -> Infinity [] + {} // -> "[object Object]" +{} // -> NaN ``` - [Brainfuck beware: JavaScript is after you!](http://patriciopalladino.com/blog/2012/08/09/non-alphanumeric-javascript.html) - [Writing a sentence without using the Alphabet](https://bluewings.github.io/en/writing-a-sentence-without-using-the-alphabet/#weird-javascript-generator) — generate any phrase using JavaScript ## `[]` is truthy, but not `true` An array is a truthy value, however, it's not equal to `true`. ```js !![] // -> true [] == true // -> false ``` ### 💡 Explanation: Here are links to the corresponding sections in the ECMA-262 specification: - [**12.5.9** Logical NOT Operator (`!`)](https://www.ecma-international.org/ecma-262/#sec-logical-not-operator) - [**7.2.15** Abstract Equality Comparison](https://262.ecma-international.org/11.0/index.html#sec-abstract-equality-comparison) ## `null` is falsy, but not `false` Despite the fact that `null` is a falsy value, it's not equal to `false`. ```js !!null; // -> false null == false; // -> false ``` At the same time, other falsy values, like `0` or `''` are equal to `false`. ```js 0 == false; // -> true "" == false; // -> true ``` ### 💡 Explanation: The explanation is the same as for previous example. Here's the corresponding link: - [**7.2.15** Abstract Equality Comparison](https://262.ecma-international.org/11.0/index.html#sec-abstract-equality-comparison) ## `document.all` is an object, but it is undefined > ⚠️ This is part of the Browser API and won't work in a Node.js environment ⚠️ Despite the fact that `document.all` is an array-like object and it gives access to the DOM nodes in the page, it responds to the `typeof` function as `undefined`. ```js document.all instanceof Object; // -> true typeof document.all; // -> 'undefined' ``` At the same time, `document.all` is not equal to `undefined`. ```js document.all === undefined; // -> false document.all === null; // -> false ``` But at the same time: ```js document.all == null; // -> true ``` ### 💡 Explanation: > `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 as `document.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 to `false` when using the [Strict Equality Comparison](https://www.ecma-international.org/ecma-262/#sec-strict-equality-comparison) with `undefined` while `true` when using the [Abstract Equality Comparison](https://262.ecma-international.org/11.0/index.html#sec-abstract-equality-comparison) is due to the willful violation of the specification that explicitly allows that. > > — [“Obsolete features - document.all”](https://html.spec.whatwg.org/multipage/obsolete.html#dom-document-all) at WhatWG - HTML spec > — [“Chapter 4 - ToBoolean - Falsy values”](https://github.com/getify/You-Dont-Know-JS/blob/0d79079b61dad953bbfde817a5893a49f7e889fb/types%20%26%20grammar/ch4.md#falsy-objects) at YDKJS - Types & Grammar ## Minimal value is greater than zero `Number.MIN_VALUE` is the smallest number, which is greater than zero: ```js Number.MIN_VALUE > 0; // -> true ``` ### 💡 Explanation: > `Number.MIN_VALUE` is `5e-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 is `Number.NEGATIVE_INFINITY` although it's not really numeric in a strict sense. > > — [“Why is `0` less than `Number.MIN_VALUE` in JavaScript?”](https://stackoverflow.com/questions/26614728/why-is-0-less-than-number-min-value-in-javascript) at StackOverflow - [**20.1.2.9** Number.MIN_VALUE](https://www.ecma-international.org/ecma-262/#sec-number.min_value) ## function is not a function > ⚠️ A bug present in V8 v5.5 or lower (Node.js <=7) ⚠️ All of you know about the annoying _undefined is not a function_, but what about this? ```js // Declare a class which extends null class Foo extends null {} // -> [Function: Foo] new Foo() instanceof null; // > TypeError: function is not a function // > at … … … ``` ### 💡 Explanation: 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. ### Super constructor null of Foo is not a constructor It's continuation of story with previous bug in modern environment (tested with Chrome 71 and Node.js v11.8.0). ```js class Foo extends null {} new Foo() instanceof null; // > TypeError: Super constructor null of Foo is not a constructor ``` ### 💡 Explanation: This is not a bug because: ```js 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 that `null` is an object: ```js typeof null === "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: ```js class Foo extends null { 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 add `super`: ```js class Foo extends null { constructor() { console.log(111); super(); } } ``` JS throws an error: ``` TypeError: Super constructor null of Foo is not a constructor ``` - [An explanation of this issue](https://github.com/denysdovhan/wtfjs/pull/102#discussion_r259143582) by [@geekjob](https://github.com/geekjob) ## Adding arrays What if you try to add two arrays? ```js [1, 2, 3] + [4, 5, 6]; // -> '1,2,34,5,6' ``` ### 💡 Explanation: The concatenation happens. Step-by-step, it looks like this: ```js [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"); ``` ## Trailing commas in array You've created an array with 4 empty elements. Despite all, you'll get an array with three elements, because of trailing commas: ```js let a = [, , ,]; a.length; // -> 3 a.toString(); // -> ',,' ``` ### 💡 Explanation: > **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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas) at MDN ## Array equality is a monster Array equality is a monster in JS, as you can see below: ```js [] == '' // -> 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 ``` ### 💡 Explanation: You should watch very carefully for the above examples! The behaviour is described in section [**7.2.15** Abstract Equality Comparison](https://262.ecma-international.org/11.0/index.html#sec-abstract-equality-comparison) of the specification. ## `undefined` and `Number` If we don't pass any arguments into the `Number` constructor, we'll get `0`. The value `undefined` is assigned to formal arguments when there are no actual arguments, so you might expect that `Number` without arguments takes `undefined` as a value of its parameter. However, when we pass `undefined`, we will get `NaN`. ```js Number(); // -> 0 Number(undefined); // -> NaN ``` ### 💡 Explanation: According to the specification: 1. If no arguments were passed to this function's invocation, let `n` be `+0`. 2. Else, let `n` be ? `ToNumber(value)`. 3. In case of `undefined`, `ToNumber(undefined)` should return `NaN`. Here's the corresponding section: - [**20.1.1** The Number Constructor](https://www.ecma-international.org/ecma-262/#sec-number-constructor) - [**7.1.3** ToNumber(`argument`)](https://www.ecma-international.org/ecma-262/#sec-tonumber) ## `parseInt` is a bad guy `parseInt` is famous by its quirks: ```js parseInt("f*ck"); // -> NaN parseInt("f*ck", 16); // -> 15 ``` **💡 Explanation:** This happens because `parseInt` will continue parsing character-by-character until it hits a character it doesn't know. The `f` in `'f*ck'` is the hexadecimal digit `15`. Parsing `Infinity` to integer is something… ```js // parseInt("Infinity", 10); // -> NaN // ... parseInt("Infinity", 18); // -> NaN... parseInt("Infinity", 19); // -> 18 // ... parseInt("Infinity", 23); // -> 18... parseInt("Infinity", 24); // -> 151176378 // ... parseInt("Infinity", 29); // -> 385849803 parseInt("Infinity", 30); // -> 13693557269 // ... parseInt("Infinity", 34); // -> 28872273981 parseInt("Infinity", 35); // -> 1201203301724 parseInt("Infinity", 36); // -> 1461559270678... parseInt("Infinity", 37); // -> NaN ``` Be careful with parsing `null` too: ```js parseInt(null, 24); // -> 23 ``` **💡 Explanation:** > It's converting `null` 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 and `NaN` is returned. > > — [“parseInt(null, 24) === 23… wait, what?”](https://stackoverflow.com/questions/6459758/parseintnull-24-23-wait-what) at StackOverflow Don't forget about octals: ```js parseInt("06"); // 6 parseInt("08"); // 8 if support ECMAScript 5 parseInt("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 using `parseInt`. `parseInt` always convert input to string: ```js parseInt({ toString: () => 2, valueOf: () => 1 }); // -> 2 Number({ toString: () => 2, valueOf: () => 1 }); // -> 1 ``` Be careful while parsing floating point values ```js parseInt(0.000001); // -> 0 parseInt(0.0000001); // -> 1 parseInt(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 the `parseInt` returns `0`. When `0.0000001` is converted to a string it is treated as `"1e-7"` and hence `parseInt` returns `1`. `1/1999999` is interpreted as `5.00000250000125e-7` and `parseInt` returns `5`. ## Math with `true` and `false` Let's do some math: ```js true + true; // -> 2 (true + true) * (true + true) - true; // -> 3 ``` Hmmm… 🤔 ### 💡 Explanation: We can coerce values to numbers with the `Number` constructor. It's quite obvious that `true` will be coerced to `1`: ```js 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 values `true`, `false`, and `null`. If it cannot parse a particular value, it will evaluate to `NaN`. That means we can coerce `true` to `1` easier: ```js +true; // -> 1 ``` When you're performing addition or multiplication, the `ToNumber` method is invoked. According to the specification, this method returns: > If `argument` is **true**, return **1**. If `argument` is **false**, return **+0**. That's why we can add boolean values as regular numbers and get correct results. Corresponding sections: - [**12.5.6** Unary `+` Operator](https://www.ecma-international.org/ecma-262/#sec-unary-plus-operator) - [**12.8.3** The Addition Operator (`+`)](https://www.ecma-international.org/ecma-262/#sec-addition-operator-plus) - [**7.1.3** ToNumber(`argument`)](https://www.ecma-international.org/ecma-262/#sec-tonumber) ## HTML comments are valid in JavaScript You will be impressed, but ` ```js (function() { return { b: 10; } })(); // -> undefined ``` ### 💡 Explanation: `return` and the returned expression must be in the same line: ```js (function() { return { b: 10 }; })(); // -> { b: 10 } ``` This is because of a concept called Automatic Semicolon Insertion, which automagically inserts semicolons after most newlines. In the first example, there is a semicolon inserted between the `return` statement and the object literal, so the function returns `undefined` and the object literal is never evaluated. - [**11.9.1** Rules of Automatic Semicolon Insertion](https://www.ecma-international.org/ecma-262/#sec-rules-of-automatic-semicolon-insertion) - [**13.10** The `return` Statement](https://www.ecma-international.org/ecma-262/#sec-return-statement) ## Chaining assignments on object ```js var foo = { n: 1 }; var bar = foo; foo.x = foo = { n: 2 }; foo.x; // -> undefined foo; // -> {n: 2} bar; // -> {n: 1, x: {n: 2}} ``` From right to left, `{n: 2}` is assigned to foo, and the result of this assignment `{n: 2}` is assigned to foo.x, that's why bar is `{n: 1, x: {n: 2}}` as bar is a reference to foo. But why foo.x is undefined while bar.x is not ? ### 💡 Explanation: Foo and bar references the same object `{n: 1}`, and lvalues are resolved before assignations. `foo = {n: 2}` is creating a new object, and so foo is updated to reference that new object. The trick here is foo in `foo.x = ...` as a lvalue was resolved beforehand and still reference the old `foo = {n: 1}` object and update it by adding the x value. After that chain assignments, bar still reference the old foo object, but foo reference the new `{n: 2}` object, where x is not existing. It's equivalent to: ```js var foo = { n: 1 }; var bar = 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 ```js var obj = { property: 1 }; var array = ["property"]; obj[array]; // -> 1 // this also works with nested arrays var nestedArray = [[[[[[[[[["property"]]]]]]]]]]; obj[nestedArray]; // -> 1 ``` What about pseudo-multidimensional arrays? ```js var map = {}; var x = 1; var y = 2; var z = 3; map[[x, y, z]] = true; map[[x + 10, y, z]] = true; map["1,2,3"]; // -> true map["11,2,3"]; // -> true ``` ### 💡 Explanation: The brackets `[]` operator converts the passed expression using `toString`. Converting a one-element array to a string is akin to converting the contained element to the string: ```js ["property"].toString(); // -> 'property' ``` ## `Number.toFixed()` display different numbers `Number.toFixed()` can behave a bit strange in different browsers. Check out this example: ```js (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: While your first instinct may be that IE11 is correct and Firefox/Chrome are wrong, the reality is that Firefox/Chrome are more directly obeying standards for numbers (IEEE-754 Floating Point), while IE11 is minutely disobeying them in (what is probably) an effort to give clearer results. You can see why this occurs with a few quick tests: ```js // 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 ``` Floating point numbers are not stored as a list of decimal digits internally, but through a more complicated methodology that produces tiny inaccuracies that are usually rounded away by toString and similar calls, but are actually present internally. In this case, that "5" on the end was actually an extremely tiny fraction below a true 5. Rounding it at any reasonable length will render it as a 5... but it is actually not a 5 internally. IE11, however, will report the value input with only zeros appended to the end even in the toFixed(20) case, as it seems to be forcibly rounding the value to reduce the troubles from hardware limits. See for reference `NOTE 2` on the ECMA-262 definition for `toFixed`. - [**20.1.3.3** Number.prototype.toFixed (`fractionDigits`)](https://www.ecma-international.org/ecma-262//#sec-number.prototype.tofixed) ## `Math.max()` less than `Math.min()` I find this example hilarious: ```js Math.min() > Math.max(); // -> true Math.min() < Math.max(); // -> false ``` ### 💡 Explanation: This is a simple one. Let's consider each part of this expression separately: ```js Math.min(); // -> Infinity Math.max(); // -> -Infinity Infinity > -Infinity; // -> true ``` Why so? Well, `Math.max()` is not the same thing as `Number.MAX_VALUE`. It does not return the largest possible number. `Math.max` takes arguments, tries to convert the to numbers, compares each one and then returns the largest remaining. If no arguments are given, the result is −∞. If any value is `NaN`, the result is `NaN`. The opposite is happening for `Math.min`. `Math.min` returns ∞, if no arguments are given. - [**15.8.2.11** Math.max](https://262.ecma-international.org/5.1/#sec-15.8.2.11) - [**15.8.2.11** Math.min](https://262.ecma-international.org/5.1/#sec-15.8.2.12) - [Why is `Math.max()` less than `Math.min()`?](https://charlieharvey.org.uk/page/why_math_max_is_less_than_math_min) by Charlie Harvey ## Comparing `null` to `0` The following expressions seem to introduce a contradiction: ```js null == 0; // -> false null > 0; // -> false null >= 0; // -> true ``` How can `null` be neither equal to nor greater than `0`, if `null >= 0` is actually `true`? (This also works with less than in the same way.) ### 💡 Explanation: The way these three expressions are evaluated are all different and are responsible for producing this unexpected behavior. First, the abstract equality comparison `null == 0`. Normally, if this operator can't compare the values on either side properly, it converts both to numbers and compares the numbers. Then, you might expect the following behavior: ```js // This is not what happens (null == 0 + null) == +0; 0 == 0; true; ``` However, according to a close reading of the spec, the number conversion doesn't actually happen on a side that is `null` or `undefined`. Therefore, if you have `null` on one side of the equal sign, the other side must be `null` or `undefined` for the expression to return `true`. Since this is not the case, `false` is returned. Next, the relational comparison `null > 0`. The algorithm here, unlike that of the abstract equality operator, _will_ convert `null` to a number. Therefore, we get this behavior: ```js null > 0 +null = +0 0 > 0 false ``` Finally, the relational comparison `null >= 0`. You could argue that this expression should be the result of `null > 0 || null == 0`; if this were the case, then the above results would mean that this would also be `false`. However, the `>=` operator in fact works in a very different way, which is basically to take the opposite of the `<` operator. Because our example with the greater than operator above also holds for the less than operator, that means this expression is actually evaluated like so: ```js null >= 0; !(null < 0); !(+null < +0); !(0 < 0); !false; true; ``` - [**7.2.12** Abstract Relational Comparison](https://www.ecma-international.org/ecma-262/#sec-abstract-relational-comparison) - [**7.2.15** Abstract Equality Comparison](https://262.ecma-international.org/11.0/index.html#sec-abstract-equality-comparison) - [An in-depth explanation](https://blog.campvanilla.com/javascript-the-curious-case-of-null-0-7b131644e274) ## Same variable redeclaration JS allows to redeclare variables: ```js a; a; // This is also valid a, a; ``` Works also in strict mode: ```js var a, a, a; var a; var a; ``` ### 💡 Explanation: All definitions are merged into one definition. - [**13.3.2** Variable Statement](https://www.ecma-international.org/ecma-262/#sec-variable-statement) ## Default behavior Array.prototype.sort() Imagine that you need to sort an array of numbers. ```js [10, 1, 3].sort(); // -> [ 1, 10, 3 ] ``` ### 💡 Explanation: The default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values. - [**22.1.3.25** Array.prototype.sort ( comparefn )](https://www.ecma-international.org/ecma-262/#sec-array.prototype.sort) ### Hint Pass `compareFn` if you try to sort anything but string. ```js [10, 1, 3].sort((a, b) => a - b); // -> [ 1, 3, 10 ] ``` ## resolve() won't return Promise instance ```js const theObject = { a: 7 }; const thePromise = new Promise((resolve, reject) => { resolve(theObject); }); // Promise instance object thePromise.then(value => { console.log(value === theObject); // > true console.log(value); // > { a: 7 } }); ``` The `value` which is resolved from `thePromise` is exactly `theObject`. How about input another `Promise` into the `resolve` function? ```js const theObject = new Promise((resolve, reject) => { resolve(7); }); // Promise instance object const thePromise = new Promise((resolve, reject) => { resolve(theObject); }); // Promise instance object thePromise.then(value => { console.log(value === theObject); // > false console.log(value); // > 7 }); ``` ### 💡 Explanation: > This function flattens nested layers of promise-like objects (e.g. a promise that resolves to a promise that resolves to something) into a single layer. - [Promise.resolve() on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve) The specification is [ECMAScript 25.6.1.3.2 Promise Resolve Functions](https://tc39.es/ecma262/#sec-promise-resolve-functions). But it is not quite human-friendly. ## `{}{}` is undefined Write them in the console. They will return the value defined in the last object. ```js {}{}; // -> 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: When inspecting each `{}`, they returns undefined. If you inspect `{foo: 'bar'}{}`, you will find `{foo: 'bar'}` is `'bar'`. There are two meanings for `{}`: an object or a block. For example, the `{}` in `() => {}` means block. So we need to use `() => ({})` to return an object. Let's use `{foo: 'bar'}` as a block. Write this snippet in your console: ```js if (true) { foo: "bar"; } // -> 'bar' ``` Surprisingly, it behaviors the same! You can guess here that `{foo: 'bar'}{}` is a block. ## `arguments` binding Consider this function: ```js function a(x) { arguments[0] = "hello"; console.log(x); } a(); // > undefined a(1); // > "hello" ``` ### 💡 Explanation: `arguments` is an Array-like object that contains the values of the arguments passed to that function. When no arguments are passed, then there's no `x` to override. - [The arguments object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments) on MDN ## An `alert` from hell This on is literally from hell: ```js [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: This one is based on octal escape sequences and multiple strings. Any character with a character code lower than 256 (i.e. any character in the extended ASCII range) can be escaped using its octal-encoded character code, prefixed with `\`. An example above is basically an `alert` encoded by octal escape sequences. - [Martin Kleppe tweet about it](https://twitter.com/aemkei/status/897172907222237185) - [JavaScript character escape sequences](https://mathiasbynens.be/notes/javascript-escapes#octal) - [Multi-Line JavaScript Strings](https://davidwalsh.name/multiline-javascript-strings) ## An infinite timeout Guess what would happen if we set an infinite timeout? ```js setTimeout(() => console.log("called"), Infinity); // -> // > 'called' ``` It will executed immediately instead of infinity delay. ### 💡 Explanation: Usually, runtime stores the delay as a 32-bit signed integer internally. This causes an integer overflow, resulting in the timeout being executed immediately. For example, in Node.js we will get this warning: ``` (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) ``` - [WindowOrWorkerGlobalScope.setTimeout()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) on MDN - [Node.js Documentation on Timers](https://nodejs.org/api/timers.html#timers_settimeout_callback_delay_args) - [Timers](https://www.w3.org/TR/2011/WD-html5-20110525/timers.html) on W3C ## A `setTimeout` object Guess what would happen if we set a callback that's not a function to `setTimeout`? ```js setTimeout(123, 100); // -> // > 'called' ``` This is fine. ```js setTimeout('{a: 1}', 100); // -> // > 'called' ``` This is also fine. ```js setTimeout({a: 1}, 100); // -> // > 'Uncaught SyntaxError: Unexpected identifier setTimeout (async) (anonymous) @ VM__:1' ``` This throws an **SyntaxError**. Note that this can easily happen if your function returns an object and you call it here instead of passing it! What if the content - policy is set to `self`? ```js setTimeout(123, 100); // -> // > 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' ") ``` The console refuses to run it at all! ### 💡 Explanation: `WindowOrWorkerGlobalScope.setTimeout()` can be called with `code` as first argument, which will be passed on to `eval`, which is bad. Eval will coerce her input to String, and evaluate what is produced, so Objects becomes `'[object Object]'` which has hmmm ... an `'Unexpected identifier'`! - [eval()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) on MDN (don't use this) - [WindowOrWorkerGlobalScope.setTimeout()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) on MDN - [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) - [Timers](https://www.w3.org/TR/2011/WD-html5-20110525/timers.html) on W3C ## Double dot Let's try to coerce a number to a string: ```js 27.toString() // > Uncaught SyntaxError: Invalid or unexpected token ``` Maybe we should try with two dots? ```js 27..toString(); // -> '27' ``` But why doesn't first example work? ### 💡 Explanation: It's just a language grammar limitation. The `.` character presents an ambiguity. It can be understood to be the member operator, or a decimal, depending on its placement. The specification's interpretation of the `.` character in that particular position is that it will be a decimal. This is defined by the numeric literal syntax of ECMAScript. You must always use parenthesis or an addition dot to make such expression valid. ```js (27).toString(); // -> '27' // or 27..toString(); // -> '27' ``` - [Usage of toString in JavaScript](https://stackoverflow.com/questions/6853865/usage-of-tostring-in-javascript/6853910#6853910) on StackOverflow - [Why does 10..toString() work, but 10.toString() does not?](https://stackoverflow.com/questions/13149282/why-does-10-tostring-work-but-10-tostring-does-not/13149301#13149301) ## Extra Newness I present this as an oddity for your amusement. ```js class Foo extends Function { constructor(val) { super(); this.prototype.val = val; } } new new Foo(":D")().val; // -> ':D' ``` ### 💡 Explanation: Constructors in JavaScript are just functions with some special treatment. By extending Function using the class syntax you create a class that, when instantiated, is now a function, which you can then additionally instantiate. While not exhaustively tested, I believe the last statement can be analyzed thus: ```js new new Foo(":D")().val(new newFooInstance()).val; veryNewFooInstance.val; // -> ':D' ``` As a tiny addendum, doing `new Function('return "bar";')` of course creates a function with the body `return "bar";`. Since `super()` in the constructor of our `Foo` class is calling `Function`'s constructor, it should come as no surprise now to see that we can additionally manipulate things in there. ```js class Foo extends Function { constructor(val) { super(` this.val = arguments[0]; `); this.prototype.val = val; } } var foo = new new Foo(":D")("D:"); foo.val; // -> 'D:' delete foo.val; // remove the instance prop 'val', deferring back to the prototype's 'val'. foo.val; // -> ':D' ``` - [Class Extends Function: Extra Newness](https://github.com/denysdovhan/wtfjs/issues/78) ## Why you should use semicolons Writing some standard JavaScript… and then BOOM! ```js class SomeClass { ["array"] = [] ["string"] = "str" } new SomeClass().array; // -> 'str' ``` What the …? ### 💡 Explanation: Once again, this is all thanks to the Automatic Semicolon Insertion. An example above is basically the same as: ```js class SomeClass { ["array"] = ([]["string"] = "str"); } ``` You basically assign a string `str` into an `array` property. - [An original tweet with an example](https://twitter.com/SeaRyanC/status/1148726605222535168) by Ryan Cavanaugh - [TC39 meeting when they debated about it](https://github.com/tc39/notes/blob/master/meetings/2017-09/sept-26.md) ## Split a string by a space Have you ever tried to split a string by a space? ```js "".split(""); // -> [] // but… "".split(" "); // -> [""] ``` ### 💡 Explanation: This is expected behaviour. Its responsibility is to divide the input string every time a separator occurs in that input string. When you pass in an empty string it'll never find a separator and thus return that string. Let's quote the specification: > The substrings are determined by searching from left to right for occurrences of `separator`; these occurrences are not part of any String in the returned array, but serve to divide up the String value. - [**22.1.3.21** String.prototype.split](https://tc39.es/ecma262/#sec-string.prototype.split) - [An original tweet with an example](https://twitter.com/SeaRyanC/status/1331656278104440833) by Ryan Cavanaugh - [A tweet with an explanation](https://twitter.com/kl13nt/status/1331742810932916227?s=20) by Nabil Tharwat ## A stringified string This caused a bug that I've been solving for a few days: ```js JSON.stringify("production") === "production"; // -> false ``` ### 💡 Explanation: Let's see what `JSON.stringify` is returning: ```js JSON.stringify("production"); // -> '"production"' ``` It is actually a stringified string, so it's true: ```js '"production"' === "production"; // -> false ``` - [ECMA-404 The JSON Data Interchange Standard.](https://www.json.org/json-en.html) ## Non-strict comparison of a number to `true` ```js 1 == true; // -> true // but… Boolean(1.1); // -> true 1.1 == true; // -> false ``` ### 💡 Explanation: According to the specification: > The comparison x == y, where x and y are values, produces true or false. Such a comparison is performed as follows: > > 4. If `Type(x)` is Number and `Type(y)` is String, return the result of the comparison `x == ! ToNumber(y)`. So this comparison is performed like this: ```js 1 == true; 1 == Number(true); 1 == 1; // -> true // but… 1.1 == true; 1.1 == Number(true); 1.1 == 1; // -> false ``` - [**7.2.15** Abstract Equality Comparison](https://262.ecma-international.org/11.0/index.html#sec-abstract-equality-comparison) # 📚 Other resources - [wtfjs.com](http://wtfjs.com/) — a collection of those very special irregularities, inconsistencies and just plain painfully unintuitive moments for the language of the web. - [Wat](https://www.destroyallsoftware.com/talks/wat) — A lightning talk by Gary Bernhardt from CodeMash 2012 - [What the... JavaScript?](https://www.youtube.com/watch?v=2pL28CcEijU) — Kyle Simpsons talk for Forward 2 attempts to “pull out the crazy” from JavaScript. He wants to help you produce cleaner, more elegant, more readable code, then inspire people to contribute to the open source community. - [Zeros in JavaScript](http://zero.milosz.ca/) — a comparison table of `==`, `===`, `+` and `*` in JavaScript. # 🤝 Supporting Hi! I work on this project in my spare time, in addition to my primary job. I hope you enjoy reading it. If you do, please, consider supporting me 🙏. Every single donation is important. Your donation is gonna make a clear statement: My work is valued. **🙏 Thank you for your support! 🙏** | Service | Link | Action | | ---------------- | :------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: | | **Patreon** | [Become a patron][patreon-url] | [](https://patreon.com/denysdovhan) | | **BuyMeACoffee** | [Buy me a cup of ☕️ or 🥤][bmc-url] | [](https://buymeacoffee.com/denysdovhan) | | **Bitcoin** | `1EJsKs6rPsqa7QLoVLpe3wgcdL9Q8WmDxE` | | | **Ethereum** | `0x6aF39C917359897ae6969Ad682C14110afe1a0a1` | | > **⚠️ Note:** I live in Ukraine and services like PayPal and Stripe don't work with Ukrainian bank accounts. This means there's no way for me to set up GitHub Sponsors, OpenCollective, or services relied on them. Sorry, those are the only ways you can support me for now. # 🎓 License [![CC 4.0][license-image]][license-url] © [Denys Dovhan](http://denysdovhan.com) [license-url]: http://www.wtfpl.net [license-image]: https://img.shields.io/badge/License-WTFPL%202.0-lightgrey.svg?style=flat-square [npm-url]: https://npmjs.org/package/wtfjs [npm-image]: https://img.shields.io/npm/v/wtfjs.svg?style=flat-square [patreon-url]: https://patreon.com/denysdovhan [patreon-image]: https://img.shields.io/badge/support-patreon-F96854.svg?style=flat-square [bmc-url]: https://patreon.com/denysdovhan [bmc-image]: https://img.shields.io/badge/support-buymeacoffee-222222.svg?style=flat-square --- ## File: README-fr-fr.md # What the f\*ck JavaScript? [![WTFPL 2.0][license-image]][license-url] [![NPM version][npm-image]][npm-url] > Une liste d'exemples JavaScript drôles et délicats Le JavaScript est un langage formidable! Il possède une syntaxe simple, un grand écosystème et, le plus important de tout, une immense communauté. En même temps, nous savons tous que le JavaScript est un langage assez amusant comprenant des aspects plus complexes que d'autres. Certains d'entre eux peuvent rapidement faire de notre travail quotidien un enfer, tout comme d'autres peuvent nous faire rire aux éclats. L'idée originale de WTFJS appartient à [Brian Leroux](https://twitter.com/brianleroux). Cette liste est fortement inspirée par son discours [**“WTFJS”** at dotJS 2012](https://www.youtube.com/watch?v=et8xNAc2ic8): [](https://www.youtube.com/watch?v=et8xNAc2ic8) # Le Manuscript sous forme de paquet Node Vous pouvez installer ce manuel en utilisant `npm`. Pour cela, il suffit d'exécuter : ``` $ npm install wtfjs ``` Vous devriez pouvoir ensuite utiliser `wtfjs` en ligne de commande. Cela ouvrira le manuel dans votre terminal. Sinon, vous pouvez continuer à lire ici tout simplement. La source du _package_ est disponible ici: # Traductions Actuellement, il existe des traductions de ** wtfjs ** pour les langues suivantes : - [中文版](./README-zh-cn.md) - [Français](./README-fr-fr.md) [**Demander une autre traduction**][tr-request] [tr-request]: https://github.com/denysdovhan/wtfjs/issues/new?title=Translation%20Request:%20%5BPlease%20enter%20language%20here%5D&body=I%20am%20able%20to%20translate%20this%20language%20%5Byes/no%5D # Table of Contents - [💪🏻 Motivation](#-motivation) - [✍🏻 Notation](#-notation) - [👀 Exemples](#-exemples) - [`[]` est égal à ` - [`true` n'est pas égal à ` - [true est faux](#true-est-faux) - [baNaNa](#banana) - [`NaN` n'est pas un `NaN`](#nan-nest-pas-un-nan) - [C'est un échec](#cest-un-%C3%A9chec) - [`[]` est truthy, mais pas `true`](#-est-truthy-mais-pas-true) - [`null` est falsy, mais pas `faux`](#null-est-falsy-mais-pas-faux) - [`document.all` est un objet, mais il est `undefined`](#documentall-est-un-objet-mais-il-est-undefined) - [La valeur minimale est supérieure à zéro](#la-valeur-minimale-est-sup%C3%A9rieure-%C3%A0-z%C3%A9ro) - [Fonction n'est pas une fonction](#fonction-nest-pas-une-fonction) - [Ajout de tableaux](#ajout-de-tableaux) - [Les virgules finales dans un tableau](#les-virgules-finales-dans-un-tableau) - [L'égalité des tableaux est un monstre](#l%C3%A9galit%C3%A9-des-tableaux-est-un-monstre) - [`undefined` et `Number`](#undefined-et-number) - [`parseInt` est un méchant](#parseint-est-un-m%C3%A9chant) - [Math avec `true` et `false`](#math-avec-true-et-false) - [Les commentaires HTML sont valides en JavaScript](#les-commentaires-html-sont-valides-en-javascript) - [`NaN` n'est ~~pas~~ un nombre](#nan-nest-pas-un-nombre) - [`[]` et `null` sont des objets](#-et-null-sont-des-objets) - [Nombres magiquement croissant](#nombres-magiquement-croissant) - [Précision de `0.1 + 0.2`](#pr%C3%A9cision-de-01--02) - [Patching de numéros](#patching-de-num%C3%A9ros) - [Comparaison de trois nombres](#comparaison-de-trois-nombres) - [Math drôle](#math-dr%C3%B4le) - [Addition de RegExps](#addition-de-regexps) - [Les chaînes ne sont pas des instances de `String`](#les-cha%C3%AEnes-ne-sont-pas-des-instances-de-string) - [Appeler des fonctions avec des caractères accent grave](#appeler-des-fonctions-avec-des-caract%C3%A8res-accent-grave) - [Call call call](#call-call-call) - [Une propriété `constructor`](#une-propri%C3%A9t%C3%A9-constructor) - [Object en tant que clé de la propriété d'un objet](#object-en-tant-que-cl%C3%A9-de-la-propri%C3%A9t%C3%A9-dun-objet) - [Accéder aux prototypes avec `__proto__`](#acc%C3%A9der-aux-prototypes-avec-__proto__) - [`` `${{Object}}` ``](#-object-) - [Déstructuration avec des valeurs par défaut](#d%C3%A9structuration-avec-des-valeurs-par-d%C3%A9faut) - [Points et propagation](#points-et-propagation) - [Étiquettes](#%C3%A9tiquettes) - [Étiquettes imbriquées](#%C3%A9tiquettes-imbriqu%C3%A9es) - [`Try...catch` insidieux](#trycatch-insidieux) - [Est-ce un héritage multiple ?](#est-ce-un-h%C3%A9ritage-multiple-) - [Un générateur qui se `yield` lui-même](#un-g%C3%A9n%C3%A9rateur-qui-se-yield-lui-m%C3%AAme) - [Une classe de classe](#une-classe-de-classe) - [Objets incoercibles](#objets-incoercibles) - [Fonctions fléchées complexes](#fonctions-fl%C3%A9ch%C3%A9es-complexes) - [Les fonctions fléchées ne peuvent pas être un constructeur](#les-fonctions-fl%C3%A9ch%C3%A9es-ne-peuvent-pas-%C3%AAtre-un-constructeur) - [`arguments` et fonctions fléchées](#arguments-et-fonctions-fl%C3%A9ch%C3%A9es) - [Retour difficile](#retour-difficile) - [Chaînage d'affectations sur un objet](#cha%C3%AEnage-daffectations-sur-un-objet) - [Accéder aux propriétés d'un objet avec des tableaux](#acc%C3%A9der-aux-propri%C3%A9t%C3%A9s-dun-objet-avec-des-tableaux) - [Opérateurs `null` et relationnels](#op%C3%A9rateurs-null-et-relationnels) - [`Number.toFixed()` affiche différents nombres](#numbertofixed-affiche-diff%C3%A9rents-nombres) - [`Math.max()` est moins que `Math.min()`](#mathmax-est-moins-que-mathmin) - [Comparer `null` à `0`](#comparer-null-%C3%A0-0) - [Même redéclaration d'une variable](#m%C3%AAme-red%C3%A9claration-dune-variable) - [Comportement par défaut d'`Array.prototype.sort()`](#comportement-par-d%C3%A9faut-darrayprototypesort) - [📚 Autres ressources](#-autres-ressources) - [🎓 Licence](#-licence) # 💪🏻 Motivation > Juste pour le fun > > — _[**“Just for Fun: The Story of an Accidental Revolutionary”**](https://archive.org/details/justforfun00linu), Linus Torvalds_ L'objectif principal de cette liste est de rassembler quelques exemples loufoques et d'expliquer leur fonctionnement, quand c'est possible. 😉 Tout simplement parce qu'il est amusant d'apprendre quelque chose qu'on ne connaissait pas auparavant. Si vous êtes débutant, vous pouvez aussi utiliser ces notes pour approfondir vos connaissances en JavaScript. J'espère qu'elles vous inciteront à passer plus de temps à lire la spécification. Si vous êtes un développeur professionnel, vous pouvez considérer ces exemples comme une excellente référence pour toutes les bizarreries et comportements inattendus de notre langage bien-aimé, le JavaScript. Dans tous les cas, lisez ce qui suit. Vous y trouverez probablement quelque chose de nouveau ! # ✍🏻 Notation **`// ->`** est utilisé pour afficher le résultat d'une expression. Par exemple : ```js 1 + 1; // -> 2 ``` **`// >`** définit le résultat de `console.log` ou tout autre sortie. Par exemple : ```js console.log("hello, world!"); // > hello, world! ``` **`//`** indique un commentaire utilisé pour donner des explications. Par exemple : ```js // Assigner une fonction la constant foo const foo = function() {}; ``` # 👀 Exemples ## `[]` est égal à `![]` Tableau est égal à pas tableau ```js [] == ![]; // -> true ``` ### 💡 Explication : L'opérateur de comparaison d'égalité faible convertit les deux côtés en nombres pour les comparer. Pour différentes raisons, les deux côtés deviennent le nombre `0`. Les tableaux sont truthy, donc à droite, on trouve l'opposé d'une valeur truthy, soit `false`, qui est ensuite forcé à `0`. A gauche, puisqu'un tableau vide est forcé à `0` automatiquement, sans devoir être précédemment transformé en booléen, on trouve aussi `0`, malgré le fait qu'un tableau soit truthy. Voici comment cette expression se simplifie: ```js +[] == +![]; 0 == +false; 0 == 0; true; ``` Voir aussi [`[]` est truthy, mais pas `true`](#-est-truthy-mais-pas-true). - [**12.5.9** Logical NOT Operator (`!`)](https://www.ecma-international.org/ecma-262/#sec-logical-not-operator) - [**7.2.13** Abstract Equality Comparison](https://www.ecma-international.org/ecma-262/#sec-abstract-equality-comparison) ## `true` n'est pas égal à `![]`, mais pas égal à `[]` aussi Un tableau n'est pas égal à `true`, tout comme pas tableau. Un tableau est égal à `false`, pas tableau est égal à `false` aussi : ```js true == []; // -> false true == ![]; // -> false false == []; // -> true false == ![]; // -> true ``` ### 💡 Explication : ```js true == []; // -> false true == ![]; // -> false // Selon la spécification true == []; // -> false toNumber(true); // -> 1 toNumber([]); // -> 0 1 == 0; // -> false true == ![]; // -> false ![]; // -> false true == false; // -> false ``` ```js false == []; // -> true false == ![]; // -> true // Selon la spécification false == []; // -> true toNumber(false); // -> 0 toNumber([]); // -> 0 0 == 0; // -> true false == ![]; // -> false ![]; // -> false false == false; // -> true ``` - [**7.2.13** Abstract Equality Comparison](https://www.ecma-international.org/ecma-262/#sec-abstract-equality-comparison) ## true est faux ```js !!"false" == !!"true"; // -> true !!"false" === !!"true"; // -> true ``` ### 💡 Explication : Considérez ceci étape par étape : ```js // `true` est 'truthy' et est représenté par la valeur 1 (nombre), 'true' sous forme de chaîne est NaN. true == "true"; // -> false false == "false"; // -> false // 'false' n'est pas une chaîne vide, donc c'est une valeur `truthy` !!"false"; // -> true !!"true"; // -> true ``` - [**7.2.13** Abstract Equality Comparison](https://www.ecma-international.org/ecma-262/#sec-abstract-equality-comparison) ## baNaNa ```js "b" + "a" + +"a" + "a"; // -> 'baNaNa' ``` Ceci est une blague "old school" en JavaScript, mais remasterisée. Voici l'originale : ```js "foo" + +"bar"; // -> 'fooNaN' ``` ### 💡 Explication : L'expression est évaluée comme `'foo' + (+'bar')`, ce qui convertit `'bar'` à `NaN`. - [**12.8.3** The Addition Operator (`+`)](https://www.ecma-international.org/ecma-262/#sec-addition-operator-plus) - [12.5.6 Unary + Operator](https://www.ecma-international.org/ecma-262/#sec-unary-plus-operator) ## `NaN` n'est pas un `NaN` ```js NaN === NaN; // -> false ``` ### 💡 Explication : La spécification définit strictement la logique derrière ce comportement : > 1. Si `Type(x)` est différent de `Type(y)`, retourne **false**. > 2. Si `Type(x)` est `Number`, alors > 1. Si `x` est **NaN**, retourne **false**. > 2. Si `y` est **NaN**, retourne **false**. > 3. … … … > > — [**7.2.14** Strict Equality Comparison](https://www.ecma-international.org/ecma-262/#sec-strict-equality-comparison) Sur la base de la définition de `NaN` de l'IEEE : > Quatre relations mutuellement exclusives sont possibles : inférieur à, égal, supérieur à, et non ordonné. Le dernier cas survient quand au moins un opérande est `NaN`. Tous les `NaN` doivent se comparer de manière non ordonnée avec tout, y compris avec lui-même. > > — [“What is the rationale for all comparisons returning false for IEEE754 NaN values?”](https://stackoverflow.com/questions/1565164/1573715#1573715) sur StackOverflow. ## C'est un échec Vous ne le croiriez pas, mais … ```js (![] + [])[+[]] + (![] + [])[+!+[]] + ([![]] + [][[]])[+!+[] + [+[]]] + (![] + [])[!+[] + !+[]]; // -> 'fail' ``` ### 💡 Explication : En brisant cette masse de symboles en morceaux, nous remarquons que le schéma suivant se produit souvent : ```js ![] + []; // -> 'false' ![]; // -> false ``` Donc, nous essayons d'ajouter `[]` à `false`, mais en raison d'un certain nombre d'appels de fonctions internes (`binary + Operator` -> `ToPrimitive` -> `[[DefaultValue]]`), nous finissons par convertir l'opérande de droite en chaîne : ```js ![] + [].toString(); // 'false' ``` En considérant une chaîne comme un tableau, nous pouvons accéder à son premier caractère via `[0]` : ```js "false"[0]; // -> 'f' ``` Le reste est évident, sauf pour le `i`. Le `i` dans `fail` est saisi en générant la chaîne `"falseundefined"` et en saisissant l'éléments sur l'index `[10]`. ## `[]` est truthy, mais pas `true` Un tableau est une valeur `truthy`, mais n'est pas égal à `true`. ```js !![] // -> true [] == true // -> false ``` ### 💡 Explication : Voici des liens vers les sections correspondantes de la spécification ECMA-262 : - [**12.5.9** Logical NOT Operator (`!`)](https://www.ecma-international.org/ecma-262/#sec-logical-not-operator) - [**7.2.13** Abstract Equality Comparison](https://www.ecma-international.org/ecma-262/#sec-abstract-equality-comparison) ## `null` est falsy, mais pas `faux` Malgré le fait que `null` soit une valeur `falsy`, elle n'est pas égale à `false`. ```js 0 == false; // -> true "" == false; // -> true ``` ### 💡 Explication : L'explication est la même que pour l'exemple précédent. Voici le lien correspondant : - [**7.2.13** Abstract Equality Comparison](https://www.ecma-international.org/ecma-262/#sec-abstract-equality-comparison) ## `document.all` est un objet, mais il est `undefined` > ⚠️ Ceci fait partie de la Browser API et ne fonctionnera pas dans un environnement Node.js ⚠️ Malgré le fait que `document.all` soit un objet de type tableau et qu'il donne accès aux nœuds DOM de la page, il répond à la fonction `typeof` comme étant `undefined`. ```js document.all instanceof Object; // -> true typeof document.all; // -> 'undefined' ``` En même temps, `document.all` n'est pas égal à `undefined`. ```js document.all === undefined; // -> false document.all === null; // -> false ``` Mais, parallèlement : ```js document.all == null; // -> true ``` ### 💡 Explication : > `document.all` était anciennement un moyen d'accéder aux éléments DOM, principalement avec les anciennes versions d'IE. Bien que cela n'ait jamais été une norme, `document.all` était largement utilisé dans "l'ancien code JS". Quand la norme a progressé avec la venue de nouvelles API (par exemple, `document.getElementById`), l'API `document.all` est devenue obsolète et le comité de normes a dû décider ce qu'ils allaient en faire. En raison de sa large utilisation, ils ont décidé de la conserver, mais d'introduire une violation volontaire de la spécification JavaScript. > La raison pour laquelle `document.all` retourne `false` lors de l'utilisation de l'opérateur d'égalité stricte ([Strict Equality Comparison](https://www.ecma-international.org/ecma-262/#sec-strict-equality-comparison)) avec `undefined` et `true` lors de l'utilisation de l'opérateur d'égalité abstraite ([Abstract Equality Comparison](https://www.ecma-international.org/ecma-262/#sec-abstract-equality-comparison)) est due à la violation volontaire de la spécification qui le permet explicitement. > > — [“Obsolete features - document.all”](https://html.spec.whatwg.org/multipage/obsolete.html#dom-document-all) sur WhatWG - HTML spec. > — [“Chapter 4 - ToBoolean - Falsy values”](https://github.com/getify/You-Dont-Know-JS/blob/0d79079b61dad953bbfde817a5893a49f7e889fb/types%20%26%20grammar/ch4.md#falsy-objects) sur YDKJS - Types & Grammar. ## La valeur minimale est supérieure à zéro `Number.MIN_VALUE` est le plus petit nombre, qui est supérieur à zéro : ```js Number.MIN_VALUE > 0; // -> true ``` ### 💡 Explication : > `Number.MIN_VALUE` est `5e-324`, c'est-à-dire le plus petit nombre positif pouvant être représenté dans la précision flottante et donc, c'est aussi le plus près que possible de zéro. Il définit la meilleure résolution que vous pouvez atteindre avec des valeurs flottantes. > > Maintenant, la plus petite valeur globale est `Number.NEGATIVE_INFINITY`, bien que cette dernière ne soit pas vraiment numérique au sens strict. > > — [“Why is `0` less than `Number.MIN_VALUE` in JavaScript?”](https://stackoverflow.com/questions/26614728/why-is-0-less-than-number-min-value-in-javascript) at StackOverflow - [**20.1.2.9** Number.MIN_VALUE](https://www.ecma-international.org/ecma-262/#sec-number.min_value) ## Fonction n'est pas une fonction > ⚠️ Une erreur présente dans la v5.5 (V8) ou inférieure de Node.js (Node.js <=7) ⚠️ Vous êtes tous au courant de l'irritant _undefined is not a function_, mais qu'en est-il de ceci : ```js // Déclare une classe qui _extends_ `null` class Foo extends null {} // -> [Function: Foo] new Foo() instanceof null; // > TypeError: function is not a function // > at … … … ``` ### 💡 Explication : Ceci ne fait pas partie de la spécification. C'est seulement une erreur qui a depuis été corrigé, il ne devrait donc plus y avoir de problème à l'avenir. ## Ajout de tableaux Et si vous essayiez d'additionner deux tableaux ? ```js [1, 2, 3] + [4, 5, 6]; // -> '1,2,34,5,6' ``` ### 💡 Explication : C'est la concaténation ! Etape par étape, ça ressemble à ceci : ```js [1, 2, 3] + [4, 5, 6][ // appelle toString() (1, 2, 3) ].toString() + [4, 5, 6].toString(); // concaténation "1,2,3" + "4,5,6"; // -> ("1,2,34,5,6"); ``` ## Les virgules finales dans un tableau Vous avez créé un tableau avec 4 éléments vides. Malgré tout, vous obtiendrez un tableau avec seulement trois éléments, à cause des virgules finales. ```js let a = [, , ,]; a.length; // -> 3 a.toString(); // -> ',,' ``` ### 💡 Explication : > Les **virgules finales** (_trailing commas_ en anglais) peuvent être utiles lors de l'ajout de nouveaux éléments, de paramètres ou de propriétés à du code JavaScript. Si vous voulez ajouter une nouvelle propriété, vous pouvez tout simplement ajouter une nouvelle ligne sans modifier la ligne précédente si cette ligne utilise déjà une virgule finale. Cela rend plus clair les différences dans un système de contrôle de version et l'édition de code pourrait être moins difficile. > > — [Virgules finales (trailing commas)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Virgules_finales) sur MDN. ## L'égalité des tableaux est un monstre En JavaScript, l'égalité des tableaux est un monstre, comme vous pouvez le voir ci-dessous : ```js [] == '' // -> 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 ``` ### 💡 Explication : Vous devriez regarder très attentivement les exemples ci-dessus ! Ce comportement est décrit dans la section [**7.2.13** Abstract Equality Comparison](https://www.ecma-international.org/ecma-262/#sec-abstract-equality-comparison) de la spécification. ## `undefined` et `Number` Si nous ne transmettons aucun argument dans le constructeur `Number`, nous obtiendrons `0`. La valeur `undefined` est attribuée aux arguments formels en l'absence d'arguments, alors vous pouvez vous attendre à ce que `Number` sans argument utilise `undefined` comme valeur de paramètre. Toutefois, quand nous lui passons `undefined` directement, nous obtiendrons `NaN` en retour. ```js Number(); // -> 0 Number(undefined); // -> NaN ``` ### 💡 Explication : Selon la spécification : 1. Si aucun argument n'a été passé lors de l'appel de la fonction, `n` est `+0`. 2. Sinon, `n` est ? `ToNumber(value)`. 3. Dans le cas d'`undefined`, `ToNumber(undefined)` doit retourner `NaN`. Voici les sections correspondantes : - [**20.1.1** The Number Constructor](https://www.ecma-international.org/ecma-262/#sec-number-constructor) - [**7.1.3** ToNumber(`argument`)](https://www.ecma-international.org/ecma-262/#sec-tonumber) ## `parseInt` est un méchant `parseInt` est célèbre pour ses bizarreries: ```js parseInt("f*ck"); // -> NaN parseInt("f*ck", 16); // -> 15 ``` **💡 Explication :** Ce résultat est dû au fait que `parseInt` continue d'analyser caractère par caractère la chaîne jusqu'à ce qu'il rencontre un caractère qu'il ne connaît pas. Le `f` dans `'f*ck'` correspond au chiffre hexadécimal `15`. Analyser `Infinity` comme entier est quelque chose… ```js // parseInt("Infinity", 10); // -> NaN // ... parseInt("Infinity", 18); // -> NaN... parseInt("Infinity", 19); // -> 18 // ... parseInt("Infinity", 23); // -> 18... parseInt("Infinity", 24); // -> 151176378 // ... parseInt("Infinity", 29); // -> 385849803 parseInt("Infinity", 30); // -> 13693557269 // ... parseInt("Infinity", 34); // -> 28872273981 parseInt("Infinity", 35); // -> 1201203301724 parseInt("Infinity", 36); // -> 1461559270678... parseInt("Infinity", 37); // -> NaN ``` Soyez prudent avec l'analyse de `null` aussi : ```js parseInt(null, 24); // -> 23 ``` **💡 Explication :** > `parsetInt` convertit `null` sous forme de chaîne `"null"` et essait de la convertir. Pour les bases comprises entre 0 et 23, `parseInt` ne peut convertir aucun chiffre, donc `parseInt` renvoie `NaN`. Sur 24, `"n"`, la 14ème lettre, est ajoutée au système de numération. Sur 31, `"u"`, la 21ème lettre, est ajoutée et la chaîne entière peut être décodée. Sur 37, il n'y a plus de jeu de valeur numérique valide pouvant être générée, donc, `NaN` est renvoyé. > > — [“parseInt(null, 24) === 23… wait, what?”](https://stackoverflow.com/questions/6459758/parseintnull-24-23-wait-what) sur StackOverflow. N'oubliez pas les octaux: ```js parseInt("06"); // 6 parseInt("08"); // 8 si support ECMAScript 5 parseInt("08"); // 0 si pas support ECMAScript 5 ``` **💡 Explication :** Si la chaîne d'entrée commence par 0, la base est égale à 8 (octal) ou à 10 (décimal). La base choisie dépend de l'implémentation. ECMAScript 5 indique que la valeur 10 (décimal) est utilisée, mais tous les navigateurs ne le prennent pas encore en charge. Pour cette raison, spécifiez toujours une base lorsque vous utilisez `parseInt`. `parseInt` convertit toujours une entrée en chaîne : ```js parseInt({ toString: () => 2, valueOf: () => 1 }); // -> 2 Number({ toString: () => 2, valueOf: () => 1 }); // -> 1 ``` Soyez prudent lors d'analyse de valeurs en virgule flottante : ```js parseInt(0.000001); // -> 0 parseInt(0.0000001); // -> 1 parseInt(1 / 1999999); // -> 5 ``` **💡 Explication :** `parseInt` prend une chaîne de caractère comme argument et retourne un entier sur la base spécifiée. `parseInt` supprime aussi tout ce que suit, incluant le premier non-chiffre de la chaîne transmise en paramètre. `0.000001` est converti en chaîne `"0.000001"`, et `parseInt` retourne `0`. Quand `0.0000001` est converti en chaîne, il est traité comme `"1e-7"` et retourne donc `1`. `1/1999999` est interprété comme étant `5.00000250000125e-7` et retourne `5`. ## Math avec `true` et `false` Faisons des maths : ```js true + true( // -> 2 true + true ) * (true + true) - true; // -> 3 ``` Hmmm… 🤔 ### 💡 Explication : Avec le constructeur `Number`, nous pouvons forcer les valeurs aux nombres. Il est assez évident que `true` sera forcé à `1`. ```js Number(true); // -> 1 ``` L'opérateur unaire `+` tente de convertir sa valeur en nombre. Il peut convertir des représentations d'entiers et de nombres flottants sous forme de chaîne, de même que les valeurs `true`, `false` et `null`. S'il ne peut pas analyser une valeur particulière, il sera évalué à `NaN`. Cela signifie que nous pouvons contraindre `true` à `1` plus facilement : ```js +true; // -> 1 ``` Lorsque vous effectuez une addition ou une multiplication, la méthode `ToNumber` est appelée. Selon la spécification, cette méthode retourne : > Si `argument` est **true**, retourne **1**. Si `argument` est **false**, retourne **+0**. C'est pourquoi nous pouvons ajouter des valeurs booléennes en tant que nombres réguliers et obtenir des résultats corrects. Les sections correspondantes : - [**12.5.6** Unary `+` Operator](https://www.ecma-international.org/ecma-262/#sec-unary-plus-operator) - [**12.8.3** The Addition Operator (`+`)](https://www.ecma-international.org/ecma-262/#sec-addition-operator-plus) - [**7.1.3** ToNumber(`argument`)](https://www.ecma-international.org/ecma-262/#sec-tonumber) ## Les commentaires HTML sont valides en JavaScript Vous serez impressionné, mais `