variável === indefinido vs. tipo de variável === “indefinido”

As Diretrizes de estilo do jQuery Core sugerem duas maneiras diferentes de verificar se uma variável está definida.

• Variáveis ​​globais: typeof variable === "undefined"
• Variáveis ​​locais: variable === undefined
• Propriedades: object.prop === undefined

Por que o jQuery usa uma abordagem para variáveis ​​globais e outra para locais e propriedades?

Para variáveis ​​não declaradas, typeof fooretornará a string literal "undefined", enquanto a verificação de identidade foo === undefinedacionaria o erro "foo não está definido" .

Para variáveis ​​locais (que você sabe que estão declaradas em algum lugar), esse erro não ocorreria, portanto, a verificação de identidade.

Eu continuaria usando em typeof foo === "undefined"todos os lugares. Isso nunca pode dar errado.

Eu imagino que a razão pela qual o jQuery recomenda os dois métodos diferentes é que eles definem sua própria undefinedvariável dentro da função em que o código jQuery reside, portanto, dentro dessa função, undefinedé seguro evitar adulterações externas. Eu também imaginaria que alguém em algum lugar comparou as duas abordagens diferentes e descobriu que foo === undefinedé mais rápido e, portanto, decidiu que é o caminho a seguir. [ATUALIZAÇÃO: como observado nos comentários, a comparação com undefinedtambém é um pouco mais curta, o que pode ser uma consideração.] No entanto, o ganho em situações práticas será totalmente insignificante: essa verificação nunca será algum tipo de gargalo e o que você perde é significativo: avaliar uma propriedade de um objeto host para comparação pode gerar um erro, enquanto umtypeof cheque nunca será.

Por exemplo, o seguinte é usado no IE para analisar XML:

var x = new ActiveXObject("Microsoft.XMLDOM");

Para verificar se ele possui um loadXMLmétodo com segurança:

typeof x.loadXML === "undefined"; // Returns false

Por outro lado:

x.loadXML === undefined; // Throws an error

ATUALIZAR

Outra vantagem da typeofverificação que eu esqueci de mencionar foi que ela também trabalha com variáveis ​​não declaradas, o que a foo === undefinedverificação não faz e, de fato, gera a ReferenceError. Obrigado a @LinusKleen por me lembrar. Por exemplo:

typeof someUndeclaredVariable; // "undefined"
someUndeclaredVariable === undefined; // throws a ReferenceError

Conclusão: sempre use o typeofcheque.

Ainda outro motivo para usar o tipo de variante: undefinedpode ser redefinido.

undefined = "foo";
var variable = "foo";
if (variable === undefined)
  console.log("eh, what?!");

O resultado de typeof variable não pode.

Atualização : observe que esse não é o caso no ES5, pois o global undefinedé uma propriedade não configurável e não gravável:

15.1.1 Propriedades do valor do objeto global
[...]
15.1.1.3 undefined
O valor de undefinedé indefinido (ver 8.1). Esta propriedade possui os atributos
{[[Gravável]]: false, [[Enumerable]]: false, [[Configurable]]: false}.

Mas ainda pode ser sombreado por uma variável local:

(function() {
  var undefined = "foo";
  var variable = "foo";
  if (variable === undefined)
    console.log("eh, what?!");  
})()

ou parâmetro:

(function(undefined) {
  var variable = "foo";
  if (variable === undefined)
    console.log("eh, what?!");  
})("foo")

Porque undefinednem sempre é declarado, mas o jQuery declara undefinedem sua função principal. Então, eles usam o undefinedvalor seguro internamente, mas, fora, usam o typeofestilo para serem seguros.

Quem está interessado no ganho de desempenho de variable === undefined, pode dar uma olhada aqui, mas parece ser apenas uma otimização de cromo.

• http://jsperf.com/type-of-undefined-vs-undefined/30
• http://jsperf.com/type-of-undefined-vs-undefined

Para variáveis ​​locais, a verificação com localVar === undefinedfuncionará porque eles devem ter sido definidos em algum lugar no escopo local ou não serão considerados locais.

Para variáveis ​​que não são locais e não estão definidas em nenhum lugar, a verificação someVar === undefinedlançará a exceção: Uncaught ReferenceError: j não está definido

Aqui está um código que esclarecerá o que estou dizendo acima. Por favor, preste atenção aos comentários embutidos para maior clareza .

function f (x) {
    if (x === undefined) console.log('x is undefined [x === undefined].');
    else console.log('x is not undefined [x === undefined.]');

    if (typeof(x) === 'undefined') console.log('x is undefined [typeof(x) === \'undefined\'].');
    else console.log('x is not undefined [typeof(x) === \'undefined\'].');

    // This will throw exception because what the hell is j? It is nowhere to be found.
    try
    {
        if (j === undefined) console.log('j is undefined [j === undefined].');
        else console.log('j is not undefined [j === undefined].');
    }
    catch(e){console.log('Error!!! Cannot use [j === undefined] because j is nowhere to be found in our source code.');}

    // However this will not throw exception
    if (typeof j === 'undefined') console.log('j is undefined (typeof(x) === \'undefined\'). We can use this check even though j is nowhere to be found in our source code and it will not throw.');
    else console.log('j is not undefined [typeof(x) === \'undefined\'].');
};

Se chamarmos o código acima, assim:

f();

A saída seria esta:

x is undefined [x === undefined].
x is undefined [typeof(x) === 'undefined'].
Error!!! Cannot use [j === undefined] because j is nowhere to be found in our source code.
j is undefined (typeof(x) === 'undefined'). We can use this check even though j is nowhere to be found in our source code and it will not throw.

Se chamarmos o código acima como este (com qualquer valor realmente):

f(null); 
f(1);

A saída será:

x is not undefined [x === undefined].
x is not undefined [typeof(x) === 'undefined'].
Error!!! Cannot use [j === undefined] because j is nowhere to be found in our source code.
j is undefined (typeof(x) === 'undefined'). We can use this check even though j is nowhere to be found in our source code and it will not throw.

Quando você faz a verificação como esta:, typeof x === 'undefined'você está essencialmente perguntando isto: Verifique se a variávelx existe (foi definida) em algum lugar no código-fonte. (mais ou menos). Se você conhece C # ou Java, esse tipo de verificação nunca é feito porque, se não existir, não será compilado.

<== Fiddle Me ==>

Resumo:

Quando no escopo global, na verdade, queremos retornar true se a variável não for declarada ou tiver o valor undefined:

var globalVar1;

// This variable is declared, but not defined and thus has the value undefined
console.log(globalVar1 === undefined);

// This variable is not declared and thus will throw a referenceError
console.log(globalVar2 === undefined);

Como no escopo global, não temos 100% de certeza se uma variável é declarada, isso pode nos dar um referenceError. Quando usamos o typeofoperador na variável desconhecida, não estamos obtendo esse problema quando a variável não é declarada:

var globalVar1;

console.log(typeof globalVar1 === 'undefined');
console.log(typeof globalVar2 === 'undefined');

Isso se deve ao fato de o typeofoperador retornar a string undefinedquando uma variável não é declarada ou atualmente mantém o valor undefinedexatamente o que queremos.

• Com variáveis ​​locais, não temos esse problema porque sabemos de antemão que essa variável existirá. Podemos simplesmente procurar na respectiva função se a variável estiver presente.
• Com propriedades de objetos, não temos esse problema, porque quando tentamos procurar uma propriedade de objeto que não existe, também obtemos o valor undefined

var obj = {};

console.log(obj.myProp === undefined);

typeof a === 'undefined'é mais rápido do que a === 'undefined'em cerca de 2 vezes no nó v6.9.1.