wtfjs

Que porra é JavaScript?

Uma lista de exemplos engraçados e complicados de JavaScript

JavaScript é uma ótima linguagem. Possui uma sintaxe simples, um grande ecossistema e, o mais importante, uma grande comunidade.

Ao mesmo tempo, todos sabemos que JavaScript é uma linguagem bastante engraçada com partes complicadas. Alguns deles podem rapidamente transformar nosso trabalho diário em um inferno, e alguns deles podem nos fazer rir alto.

A ideia original do WTFJS pertence a Brian Leroux. Esta lista é altamente inspirada em sua palestra “WTFJS” no dotJS 2012:

Manuscrito Empacotado de Nó

Você pode instalar este manual usando npm . Basta executar:

 $ npm install -g wtfjs

Você deve conseguir executar wtfjs na linha de comando agora. Isso abrirá o manual no $PAGER selecionado. Caso contrário, você pode continuar lendo aqui.

A fonte está disponível aqui: https://github.com/denysdovhan/wtfjs

Traduções

Atualmente, existem estas traduções de wtfjs :

• 中文
• O que é isso?
• Francês
• Português do Brasil
• Polaco
• Italiano
• Russo (em Habr.com)
• 한국어

Ajude a traduzir para o seu idioma

Nota: As traduções são mantidas por seus tradutores. Eles podem não conter todos os exemplos e os exemplos existentes podem estar desatualizados.

Índice

• ?? Motivação
• ✍? Notação
• ? Exemplos
  • [] é igual ![]
  • true não é igual ![] , mas também não é igual []
  • verdadeiro é falso
  • banana
  • NaN não é um NaN
  • Object.is() e === casos estranhos
  • É um fracasso
  • [] é verdade, mas não é true
  • null é falso, mas não false
  • document.all é um objeto, mas é indefinido
  • O valor mínimo é maior que zero
  • função não é uma função
  • Adicionando matrizes
  • Vírgulas finais na matriz
  • A igualdade de array é um monstro
  • undefined e Number
  • parseInt é um cara mau
  • Matemática com true e false
  • Comentários HTML são válidos em JavaScript
  • NaN é não um número
  • [] e null são objetos
  • Números aumentando magicamente
  • Precisão de 0.1 + 0.2
  • Remendando números
  • Comparação de três números
  • Matemática engraçada
  • Adição de RegExps
  • Strings não são instâncias de String
  • Chamando funções com crases
  • Ligue, ligue, ligue
  • Uma propriedade constructor
  • Objeto como chave da propriedade do objeto
  • Acessando protótipos com __proto__
  • `${{Object}}`
  • Desestruturando com valores padrão
  • Pontos e propagação
  • Etiquetas
  • Rótulos aninhados
  • try..catch insidiosa..catch
  • Isso é herança múltipla?
  • Um gerador que se rende
  • Uma aula de aula
  • Objetos não coercíveis
  • Funções de seta complicadas
  • Funções de seta não podem ser um construtor
  • arguments e funções de seta
  • Retorno complicado
  • Encadeando atribuições no objeto
  • Acessando propriedades de objetos com arrays
  • Number.toFixed() exibe números diferentes
  • Math.max() menor que Math.min()
  • Comparando null com 0
  • Mesma redeclaração de variável
  • Comportamento padrão Array.prototype.sort()
  • resolve() não retornará instância Promise
  • {}{} é indefinido
  • ligação arguments
  • Um alert do inferno
  • Um tempo limite infinito
  • Um objeto setTimeout
  • Ponto duplo
  • Novidade Extra
  • Por que você deve usar ponto e vírgula
  • Dividir uma string por um espaço
  • Uma string stringificada
  • Comparação não estrita de um número com true
• Outros recursos
• ? Apoio
• ? Licença

?? Motivação

Só por diversão

- “Só por diversão: a história de um revolucionário acidental” , Linus Torvalds

O objetivo principal desta lista é coletar alguns exemplos malucos e explicar como eles funcionam, se possível. Só porque é divertido aprender algo que não sabíamos antes.

Se você é iniciante, pode usar essas notas para se aprofundar no JavaScript. Espero que essas notas o motivem a passar mais tempo lendo as especificações.

Se você é um desenvolvedor profissional, pode considerar esses exemplos como uma ótima referência para todas as peculiaridades e arestas inesperadas do nosso amado JavaScript.

De qualquer forma, basta ler isto. Você provavelmente encontrará algo novo.

️ Nota: Se você gosta de ler este documento, considere apoiar o autor desta coleção.

✍? Notação

// -> é usado para mostrar o resultado de uma expressão. Por exemplo:

 1 + 1 ; // -> 2

// > significa o resultado de console.log ou outra saída. Por exemplo:

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

// é apenas um comentário usado para explicações. Exemplo:

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

? Exemplos

[] é igual ![]

Matriz é igual, não matriz:

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

Explicação:

O operador de igualdade abstrata converte ambos os lados em números para compará-los, e ambos os lados se tornam o número 0 por diferentes razões. As matrizes são verdadeiras, portanto, à direita, o oposto de um valor verdadeiro é false , que é então coagido para 0 . À esquerda, entretanto, um array vazio é forçado a um número sem se tornar um booleano primeiro, e os arrays vazios são forçados a 0 , apesar de serem verdadeiros.

Veja como esta expressão é simplificada:

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

Veja também [] é verdade, mas não é true .

• 12.5.9 Operador NOT lógico ( ! )
• 7.2.15 Comparação abstrata de igualdade

true não é igual ![] , mas também não é igual []

Array não é igual true , mas não Array também não é igual a true ; Array é igual false , e não Array é igual a false também:

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

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

Explicação:

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

// According to the specification

true == [ ] ; // -> false

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

1 == 0 ; // -> false

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

! [ ] ; // -> false

true == false ; // -> false 

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

// According to the specification

false == [ ] ; // -> true

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

0 == 0 ; // -> true

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

! [ ] ; // -> false

false == false ; // -> true

• 7.2.15 Comparação abstrata de igualdade

verdadeiro é falso

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

Explicação:

Considere este passo a passo:

 // 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 Comparação abstrata de igualdade

banana

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

Esta é uma piada da velha escola em JavaScript, mas remasterizada. Aqui está o original:

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

Explicação:

A expressão é avaliada como 'foo' + (+'bar') , que converte 'bar' em não um número.

• 12.8.3 O Operador de Adição ( + )
• 12.5.6 Unário + Operador

NaN não é um NaN

 NaN === NaN ; // -> false

Explicação:

A especificação define estritamente a lógica por trás desse comportamento:

1. Se Type(x) for diferente de Type(y) , retorne false .
2. Se Type(x) for Número, então
   1. Se x for NaN , retorne false .
   2. Se y for NaN , retorne false .
   3. … … …

— 7.2.14 Comparação estrita de igualdade

Seguindo a definição de NaN do IEEE:

Quatro relações mutuamente exclusivas são possíveis: menor que, igual, maior que e não ordenada. O último caso surge quando pelo menos um operando é NaN. Todo NaN deve comparar o não ordenado com tudo, inclusive ele mesmo.

— “Qual é a justificativa para todas as comparações retornarem falsas para valores IEEE754 NaN?” no StackOverflow

Object.is() e === casos estranhos

Object.is() determina se dois valores têm o mesmo valor ou não. Funciona de forma semelhante ao operador === , mas existem alguns casos estranhos:

 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

Explicação:

Na linguagem JavaScript, NaN e NaN têm o mesmo valor, mas não são estritamente iguais. NaN === NaN ser falso aparentemente se deve a razões históricas, então provavelmente seria melhor aceitá-lo como está.

Da mesma forma, -0 e 0 são estritamente iguais, mas não têm o mesmo valor.

Para obter mais detalhes sobre NaN === NaN , consulte o caso acima.

• Aqui estão as especificações do TC39 sobre Object.is
• Comparações de igualdade e mesmice no MDN

É um fracasso

Você não acreditaria, mas…

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

Explicação:

Ao quebrar essa massa de símbolos em pedaços, notamos que o seguinte padrão ocorre com frequência:

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

Então, tentamos adicionar [] a false . Mas devido a uma série de chamadas de função internas ( binary + Operator -> ToPrimitive -> [[DefaultValue]] ) acabamos convertendo o operando certo em uma string:

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

Pensando em uma string como um array podemos acessar seu primeiro caractere via [0] :

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

O resto é óbvio, mas o i é complicado. O i in fail é obtido gerando a string 'falseundefined' e capturando o elemento no índice ['10'] .

Mais exemplos:

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

• Brainfuck, cuidado: JavaScript está atrás de você!
• Escrever uma frase sem usar o alfabeto — gere qualquer frase usando JavaScript

[] é verdade, mas não é true

Uma matriz é um valor verdadeiro, porém não é igual a true .

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

Explicação:

Aqui estão links para as seções correspondentes na especificação ECMA-262:

• 12.5.9 Operador NOT lógico ( ! )
• 7.2.15 Comparação abstrata de igualdade

null é falso, mas não false

Apesar de null ser um valor falso, não é igual a false .

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

Ao mesmo tempo, outros valores falsos, como 0 ou '' são iguais a false .

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

Explicação:

A explicação é a mesma do exemplo anterior. Aqui está o link correspondente:

• 7.2.15 Comparação abstrata de igualdade

document.all é um objeto, mas é indefinido

️ Isso faz parte da API do navegador e não funciona em um ambiente Node.js. ️

Apesar de document.all ser um objeto semelhante a um array e dar acesso aos nós DOM da página, ele responde à função typeof como undefined .

 document . all instanceof Object ; // -> true
typeof document . all ; // -> 'undefined'

Ao mesmo tempo, document.all não é igual a undefined .

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

Mas ao mesmo tempo:

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

Explicação:

document.all costumava ser uma forma de acessar elementos DOM, especialmente em versões antigas do IE. Embora nunca tenha sido um padrão, foi amplamente utilizado no código JS antigo. Quando o padrão progrediu com novas APIs (como document.getElementById ), essa chamada de API tornou-se obsoleta e o comitê padrão teve que decidir o que fazer com ela. Devido ao seu amplo uso, eles decidiram manter a API, mas introduziram uma violação intencional da especificação JavaScript. A razão pela qual ele responde como false ao usar a Comparação Estrita de Igualdade com undefined enquanto true ao usar a Comparação Abstrata de Igualdade é devido à violação intencional da especificação que explicitamente permite isso.

— “Recursos obsoletos - document.all” em WhatWG - especificação HTML — “Capítulo 4 - ToBoolean - Valores falsos” em YDKJS - Tipos e gramática

O valor mínimo é maior que zero

Number.MIN_VALUE é o menor número, maior que zero:

 Number . MIN_VALUE > 0 ; // -> true

Explicação:

Number.MIN_VALUE é 5e-324 , ou seja, o menor número positivo que pode ser representado com precisão float, ou seja, é o mais próximo possível de zero. Ele define a melhor resolução que os flutuadores podem oferecer.

Agora, o menor valor geral é Number.NEGATIVE_INFINITY embora não seja realmente numérico em sentido estrito.

— “Por que 0 é menor que Number.MIN_VALUE em JavaScript?” no StackOverflow

• 20.1.2.9 Número.MIN_VALUE

função não é uma função

️ Um bug presente na V8 v5.5 ou inferior (Node.js <=7) ️

Todos vocês sabem sobre o irritante undefined is not a function , mas e quanto a isso?

 // Declare a class which extends null
class Foo extends null { }
// -> [Function: Foo]

new Foo ( ) instanceof null ;
// > TypeError: function is not a function
// >     at … … …

Explicação:

Isso não faz parte da especificação. É apenas um bug que já foi corrigido, então não deverá haver problemas com ele no futuro.

Superconstrutor null de Foo não é um construtor

É a continuação da história com bug anterior em ambiente moderno (testado com Chrome 71 e Node.js v11.8.0).

 class Foo extends null { }
new Foo ( ) instanceof null ;
// > TypeError: Super constructor null of Foo is not a constructor

Explicação:

Isso não é um bug porque:

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

Se a classe não tiver construtor, a chamada da cadeia de protótipos. Mas no pai não tem construtor. Por precaução, vou esclarecer que null é um objeto:

 typeof null === "object" ;

Portanto, você pode herdar dele (embora no mundo OOP eu tivesse me derrotado para tais termos). Portanto, você não pode chamar o construtor nulo. Se você alterar este código:

 class Foo extends null {
  constructor ( ) {
    console . log ( "something" ) ;
  }
}

Você vê o erro:

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

E se você adicionar super :

 class Foo extends null {
  constructor ( ) {
    console . log ( 111 ) ;
    super ( ) ;
  }
}

JS gera um erro:

 TypeError: Super constructor null of Foo is not a constructor

• Uma explicação deste problema por @geekjob

Adicionando matrizes

E se você tentar adicionar dois arrays?

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

Explicação:

A concatenação acontece. Passo a passo, fica assim:

 [ 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" ) ; 

Vírgulas finais na matriz

Você criou um array com 4 elementos vazios. Apesar de tudo, você obterá um array com três elementos, por causa das vírgulas finais:

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

Explicação:

As vírgulas finais (às vezes chamadas de "vírgulas finais") podem ser úteis ao adicionar novos elementos, parâmetros ou propriedades ao código JavaScript. Se quiser adicionar uma nova propriedade, você pode simplesmente adicionar uma nova linha sem modificar a última linha anterior, se essa linha já usar uma vírgula final. Isso torna as diferenças de controle de versão mais limpas e a edição do código pode ser menos problemática.

- Vírgulas finais no MDN

A igualdade de array é um monstro

A igualdade de array é um monstro em JS, como você pode ver abaixo:

 [ ] == ''   // -> 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

Explicação:

Você deve observar com muito cuidado os exemplos acima! O comportamento é descrito na seção 7.2.15 Comparação abstrata de igualdade da especificação.

undefined e Number

Se não passarmos nenhum argumento para o construtor Number , obteremos 0 . O valor undefined é atribuído a argumentos formais quando não há argumentos reais, portanto, você pode esperar que Number sem argumentos receba undefined como valor de seu parâmetro. Porém, quando passarmos undefined , obteremos NaN .

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

Explicação:

De acordo com a especificação:

1. Se nenhum argumento foi passado para a invocação desta função, seja n +0 .
2. Senão, n ser? ToNumber(value) .
3. No caso de undefined , ToNumber(undefined) deve retornar NaN .

Aqui está a seção correspondente:

• 20.1.1 O Construtor de Números
• 7.1.3 ToNumber ( argument )

parseInt é um cara mau

parseInt é famoso por suas peculiaridades:

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

Explicação: Isso acontece porque parseInt continuará analisando caractere por caractere até atingir um caractere que não conhece. O f em 'f*ck' é o dígito hexadecimal 15 .

Analisar Infinity em número inteiro é algo…

 //
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

Tenha cuidado ao analisar null também:

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

Explicação:

Ele está convertendo null na string "null" e tentando convertê-lo. Para bases de 0 a 23, não há numerais que possam ser convertidos, então ele retorna NaN. Aos 24, "n" , a 14ª letra, é adicionada ao sistema numérico. Aos 31, "u" , a 21ª letra, é adicionada e toda a string pode ser decodificada. Aos 37 anos não há mais nenhum conjunto numérico válido que possa ser gerado e NaN é retornado.

- “parseInt(null, 24) === 23… espere, o quê?” no StackOverflow

Não se esqueça dos octais:

 parseInt ( "06"