6

Pegando o seguinte código:

var x = {
    i: 1,
    toString: function() { return this.i++; }
}
console.log(x == 1 && x == 2 && x == 3); // true

É um truque engenhoso (de utilidade duvidosa) usado em algumas entrevistas para a pessoa mostrar que conhece a linguagem. Mas por que ele funciona?

2

2 Respostas 2

7

Segundo a especificação da linguagem, o operador == usa o algoritmo descrito na operação IsLooselyEqual. O caso da pergunta cai no passo 12:

IsLooselyEqual ( x, y )
...
12. If x is an Object and y is either a String, a Number, a BigInt, or a Symbol, return ! IsLooselyEqual(? ToPrimitive(x), y).

Ou seja, o objeto x é passado para a operação ToPrimitive. O algorimo primeiro procura pelo método toPrimitive, mas no código da pergunta este método não existe, então ele cai no último passo:

ToPrimitive ( input [ , preferredType ] )
...
c. If preferredType is not present, let preferredType be number.
d. Return ? OrdinaryToPrimitive(input, preferredType).

Como o passo 12 de IsLooselyEqual não informou o preferredType, então ele foi setado para number, e em seguida foi chamada a operação OrdinaryToPrimitive, que é descrita como:

OrdinaryToPrimitive ( O, hint )
The abstract operation OrdinaryToPrimitive takes arguments O (an Object) and hint (string or number) and returns either a normal completion containing an ECMAScript language value or a throw completion. It performs the following steps when called:

  1. If hint is string, then
    • Let methodNames be « "toString", "valueOf" ».
  2. Else,
    • Let methodNames be « "valueOf", "toString" ».
  3. For each element name of methodNames, do
    • Let method be ? Get(O, name).
    • If IsCallable(method) is true, then
      • Let result be ? Call(method, O).
      • If result is not an Object, return result.
  4. Throw a TypeError exception.

No caso, o hint é number, então primeiro ele verifica se o objeto possui o método valueOf: se possuir, chama-o e o retorna o resultado, caso contrário, procura pelo método toString.


Ou seja, no caso do objeto criado na pergunta, ao fazer x == 1, primeiro ele chama a operação ToPrimitive(x), cujo resultado é o retorno de toString().

Depois é feita a comparação IsLooselyEqual(? ToPrimitive(x), y), que vai comparar uma string (retorno de toString()) com um número. E aí caímos neste passo da operação:

6. If x is a String and y is a Number, return ! IsLooselyEqual(! ToNumber(x), y).

Ou seja, o retorno de toString será convertido para número e comparado com y.


O que acontece é que cada vez que toString é chamado, ele incrementa o valor de i. Por isso que a cada vez que a comparação é feita, o resultado é um número diferente.

E de acordo com o já descrito acima, o mesmo funcionaria se o objeto tivesse somente o método valueOf ou toPrimitive. Ou, mesmo que tivesse mais de um desses métodos, a prioridade é primeiro procurar por toPrimitive, depois valueOf e por último toString.

Por exemplo, neste caso o método valueOf está definido, então é ele que será usado:

var x = {
    i: 1,
    valueOf: function () {
        console.log('chamando valueOf');
        return this.i++;
    },
    toString: function () {
        console.log('chamando toString');
        return 'abc';
    }
};

console.log('teste 1');
console.log(x == 1 && x == 2 && x == 3); // true
console.log('teste 2');
console.log(x == 'abc'); // false

A saída deste código é:

teste 1
chamando valueOf
chamando valueOf
chamando valueOf
true
teste 2
chamando valueOf
false

Ou seja, toString nunca é chamado, porque a especificação da linguagem define que valueOf é verificado primeiro (se existir, chama e nem olha para toString).


Da mesma forma, o método toPrimitive tem prioridade sobre valueOf (ele só é um pouco mais chato de definir porque temos que usar o respectivo Symbol):

var x = {
    i: 1,
    [Symbol.toPrimitive]: function() {
        console.log('chamando toPrimitive');
        return this.i++;
    },
    valueOf: function () {
        console.log('chamando valueOf');
        return 42;
    },
    toString: function () {
        console.log('chamando toString');
        return 'abc';
    }
};

console.log('teste 1');
console.log(x == 1 && x == 2 && x == 3); // true
console.log('teste 2');
console.log(x == 'abc'); // false
console.log(x == 42); // false

Agora podemos ver que somente o método toPrimitive é chamado:

teste 1
chamando toPrimitive
chamando toPrimitive
chamando toPrimitive
true
teste 2
chamando toPrimitive
false
chamando toPrimitive
false

Resumindo

Ao comparar um objeto com um número, primeiro o objeto é convertido para número:

  • se o objeto possui o método toPrimitive, este é chamado e o seu retorno é usado na comparação
  • caso toPrimitive não exista, verifica se o objeto possui o método valueOf, e este é chamado e o seu retorno é usado na comparação
  • caso valueOf não exista, verifica se o objeto possui o método toString, e este é chamado e o seu retorno é usado na comparação
  • se nenhum dos métodos existir, o resultado da comparação será false
5

Sabe quando as pessoas falam que JavaScript é uma linguagem ruim?

Bem, muitas vezes a pessoa não entende bem do que está falando e repete algo que ouviu.

JavaScript tem defeitos como todas as linguagens, mas um defeito poucas linguagens possuem e dão essa fama para JS. É a tipagem fraca. Não a tipagem dinâmica (veja as diferenças).

Pegamos algo mais completo:

var x = {
    i: 1,
    toString: function() { return this.i++; }
}
console.log(typeof(x));
console.log(typeof(1));
console.log(x == 1 && x == 2 && x == 3);

Em tipagem forte não é possível comparar um object com um number, os tipos não batem e é uma operação inválida. Na tipagem fraca a linguagem deve fazer o melhor esforço para resolver isso.

E não tem nada, neste código, que permite um objeto genérico ser transformado para um número e fazer a comparação funcionar. O oposto também é verdadeiro já que um número não pode ter a forma de um objeto específico. Isso é possível se a linguagem tiver uma maneira de criar um operador implícito de cast que faça a conversão para tornar o processo compatível. Bem, vamos deixar essa parte para depois.

De acordo com a tipagem dinâmica ele vai aonde dá, então transforma não só o objeto em uma string, que é uma forma universal, mas também faz o mesmo com o outro objeto que é do tipo número. Na verdade, ele faz isto:

var x = {
    i: 1,
    toString: function() { return this.i++; }
}
console.log(x.toString() == "1");

Obviamente deve saber que a linguagem tem a forma que não permite isto:

var x = {
    i: 1,
    toString: function() { return this.i++; }
}
console.log(x === 1 && x === 2 && x === 3);

O uso de == deveria ser quase proibido.

Mas o problema ainda não é bem esse.

O truque é um abuso do toString() que cria efeito colateral em algo que deveria ser puro. Nenhum problema fazer isso em outro método, mas nesse.

Também funciona:

var x = {
    i: 1,
    valueOf: function() { return this.i++; },
    toString: function() { return this.i++; }
}
console.log(x == 1 && x == 2 && x == 3);
console.log(typeof(x.valueOf()));

Coloquei no GitHub para referência futura.

Note que tendo uma maneira de pegar um valor ele prefere. Lembrando que se escrito corretamente ele deve retornar um primitivo, e só faz sentido um valor que se espera, como o dado numérico que ele guarda.

Este método é uma forma limitada de cast implícito que o JS permite. O toString() não deixa de ser também, mas este dá algo mais próximo do desejado.

Fazendo assim ainda é um truque abusivo, mas não tem o problema da tipagem dinâmica, portando o foco do problema é o efeito colateral inadequado.

Por isso que eu sempre falo que é uma bobagem uma linguagem não colocar algo porque poderá ser abusado. è possível abusar virtualmente com tudo. Por exemplo Java não quer ter sobrecarga de operadores, mas um simples toString() já pode causar o mesmo problema. C# tem essa sobrecarga e ninguém faz a multiplicação executar uma divisão, e se fizer tá errado, como no exemplo aqui. Eu já te disse alguma vez que funcionar é diferente de estar certo?

Eu não sou contra este tipo de teste em entrevistas, mas ele precisa ser olhado com cuidado. Obviamente que ele não serve para contratar Júnior.

Mas se mandarem você justificar isto: aᅠ==1 && a== 2 &&ᅠa==3 dá verdadeiro também, sem nada de criar um objeto próprio, as variáveis são numéricas do jeito padrão da linguagem. Tem certo contexto, claro. Aí o truque é outro, os mais atentos ou que entendem de lexing vão matar fácil, outros precisarão de ferramenta auxiliar (já dei muita dica).

Se vai comentar dizendo o que acontece, tenta esconder a apresentação direta para não dar spoiler para quem lê de forma desavisada.

Tem mais truque parecido que dá para fazer, e ficar menos óbvio ainda, a olho nu ou usando outros corner cases da linguagem para gerar esse resultado.

2
  • Sobre o aᅠ==1 && a== 2 &&ᅠa==3, desculpe estragar a surpresa, mas deixei uma resposta aqui explicando esse e outros casos
    – hkotsubo
    Commented 24/02/2023 às 12:53
  • 1
    Aqui não estraga, a pessoa tem que ir lá ver :)
    – Maniero
    Commented 24/02/2023 às 13:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .