Verificação de JavaScript nula vs. indefinida e diferença entre == e ===

579
  1. Como verifico uma variável se é nullou undefinede qual é a diferença entre the nulle undefined?

  2. Qual é a diferença entre ==e ===(é difícil pesquisar no Google por "===")?

MUG4N
fonte
10
2. A diferença entre ==e ===é bem descrita aqui .
Uzbekjon
1. Use === Em vez de == JavaScript utiliza dois tipos diferentes de operadores de igualdade: === | ! == e == | ! = É uma boa prática usar sempre o conjunto anterior ao comparar. "Se dois operandos são do mesmo tipo e valor, então === produz true e! == produz false." - JavaScript: as boas partes No entanto, ao trabalhar com == e! =, Você terá problemas ao trabalhar com tipos diferentes. Nesses casos, eles tentarão coagir os valores, sem êxito. code.tutsplus.com/tutorials/...
jasonleonhard
4
Você pode pesquisar no Google para: "operador de igualdade estrita" - que busca resultados muito relevantes
DanielD
Só para acrescentar a muitas respostas aqui que você pode usar lodash.com/docs#isNil função para verificar se a variável é nulo ou indefinido
Kfir Erez

Respostas:

936

Como verifico uma variável se é nullou undefined...

É a variável null:

if (a === null)
// or
if (a == null) // but see note below

... mas observe que o último também será verdadeiro se afor undefined.

É undefined:

if (typeof a === "undefined")
// or
if (a === undefined)
// or
if (a == undefined) // but see note below

... mas, novamente, observe que o último é vago; também será verdade se afor null.

Agora, apesar do acima exposto, a maneira usual de verificar esses itens é usar o fato de serem falsos :

if (!a) {
    // `a` is falsey, which includes `undefined` and `null`
    // (and `""`, and `0`, and `NaN`, and [of course] `false`)
}

Isso é definido pelo ToBoolean na especificação.

... e qual é a diferença entre the nulle undefined?

Ambos são valores geralmente usados ​​para indicar a ausência de algo. undefinedé o mais genérico, usado como o valor padrão das variáveis ​​até que elas recebam algum outro valor, como o valor dos argumentos da função que não foram fornecidos quando a função foi chamada e como o valor que você obtém ao perguntar a um objeto para uma propriedade que não possui. Mas também pode ser usado explicitamente em todas essas situações. (Há uma diferença entre um objeto não ter uma propriedade e ter a propriedade com o valor undefined; há uma diferença entre chamar uma função com o valor undefinedpara um argumento e deixar esse argumento totalmente desativado.)

nullé um pouco mais específico que undefined: é uma referência de objeto em branco. É claro que o JavaScript é tipicamente digitado, mas nem todas as coisas com as quais ele interage são digitadas. Se uma API como o DOM nos navegadores precisar de uma referência de objeto em branco, usaremos isso null, não undefined. E da mesma forma, a getElementByIdoperação do DOM retorna uma referência de objeto - válida (se encontrou o elemento DOM) ou null(se não encontrou).

Curiosamente (ou não), eles são seus próprios tipos. Ou seja, nullé o único valor no tipo Nulo e undefinedé o único valor no tipo Indefinido.

Qual é a diferença entre "==" e "==="

A única diferença entre eles é que ==fará coerção de tipo para tentar obter os valores correspondentes e ===não corresponderá. Então, por exemplo, "1" == 1é verdade, porque "1"obriga a 1. Mas "1" === 1é falso , porque os tipos não correspondem. ( "1" !== 1é verdadeiro.) O primeiro passo (real) de ===é "Os tipos dos operandos são os mesmos?" e se a resposta for "não", o resultado será false. Se os tipos são os mesmos, ele faz exatamente o que ==faz.

A coerção de tipos usa regras bastante complexas e pode ter resultados surpreendentes (por exemplo, "" == 0é verdade).

Mais nas especificações:

TJ Crowder
fonte
122
Para destilar a resposta de TJ, === significa que valor E tipo são os mesmos.
Slappy
13
@Slappy: :-) @ MUG4N: Sim, está certo. if (a) { ... }significaria "se afor verdade", em que "verdade" é um valor diferente de zero, não nulo, indefinido, não falso, falso e não vazio. :-)
TJ Crowder
4
Hum ... o votante negativo gostaria de compartilhar algum feedback útil sobre por que você acha que isso "não foi útil" (para citar a dica do botão voto negativo)?
TJ Crowder
2
@ Jeljko: Acho que Crockford pode estar enganado neste ponto. É verdade que nullnão é um objeto , é uma referência a um objeto que significa "nenhum objeto". Isso é importante, porque é o que é usado com interfaces fornecidas pelo host quando elas fornecem referências a objetos, mas não têm uma para fornecer (por exemplo, node.nextSiblingquando nodeé o último elemento em seu pai ou getElementByIdquando não há elemento com esse ID). A tecnologia que o host usa para isso pode não ser tão flexível quanto o JavaScript é sobre tipos de variáveis ​​/ propriedades; portanto, era necessário ter uma nullobj ref (ao contrário de undefined).
TJ Crowder
2
Eu tenho que concordar que Crockford está enganado. typeof nullretornar "objeto" faz sentido. O único outro valor que faria sentido seria "nulo", pois definitivamente deveria retornar algo diferente de typeof undefined. null representa uma referência de objeto nulo, o que, no mínimo, significa que a variável que o contém destina-se a algum tipo de 'objeto'. Se foi um erro, foi um bom erro. De qualquer forma, em relação à resposta, é bom saber a dica sobre undefined! == undefineddurante scripts entre janelas, especialmente para fins de depuração.
Triynko
93

A diferença é sutil.

No JavaScript, uma undefinedvariável é uma variável que nunca foi declarada ou nunca atribuiu um valor. Digamos que você declara, var a;por exemplo, então aserá undefined, porque nunca foi atribuído nenhum valor.

Mas se você atribuir, a = null;então aserá null. Em JavaScript, nullé um objeto (tente typeof nullem um console JavaScript, se você não acredita em mim), o que significa que nulo é um valor (na verdade, mesmo undefinedé um valor).

Exemplo:

var a;
typeof a;     # => "undefined"

a = null;
typeof null;  # => "object"

Isso pode ser útil em argumentos de função. Você pode querer ter um valor padrão, mas considere nulo aceitável. Nesse caso, você pode fazer:

function doSomething(first, second, optional) {
    if (typeof optional === "undefined") {
        optional = "three";
    }
    // do something
}

Se você omitir o optionalparâmetro doSomething(1, 2) thenopcional será a "three"string, mas se você passar doSomething(1, 2, null), será opcional null.

Quanto aos comparadores iguais ==e estritamente iguais ===, o primeiro é do tipo fraco, enquanto o estritamente igual também verifica o tipo de valores. Isso significa que 0 == "0"retornará verdadeiro; while 0 === "0"retornará false, porque um número não é uma string.

Você pode usar esses operadores para verificar entre undefinedum null. Por exemplo:

null === null            # => true
undefined === undefined  # => true
undefined === null       # => false
undefined == null        # => true

O último caso é interessante, porque permite verificar se uma variável é indefinida ou nula e mais nada:

function test(val) {
    return val == null;
}
test(null);       # => true
test(undefined);  # => true
Julien Portalier
fonte
1
Kyle Simpson afirma typeof nula retornando "objeto" é um erro: github.com/getify/You-Dont-Know-JS/blob/master/...
bzrk
15

A especificação é o lugar para obter respostas completas para essas perguntas. Aqui está um resumo:

  1. Para uma variável x, você pode:

    • verifique se é nullpor comparação direta usando ===. Exemplo:x === null
    • verifique se é undefinedum dos dois métodos básicos: comparação direta com undefinedou typeof. Por várias razões , eu prefiro typeof x === "undefined".
    • verifique se é uma delas nulle undefineduse ==e confie nas regras de coerção do tipo ligeiramente arcano que significa que x == nullfaz exatamente o que você deseja.

  2. A diferença básica entre ==e ===é que, se os operandos são de tipos diferentes, ===sempre retornam falseenquanto ==convertem um ou ambos os operandos no mesmo tipo usando regras que levam a algum comportamento pouco intuitivo. Se os operandos forem do mesmo tipo (por exemplo, ambos são strings, como na typeofcomparação acima), ==e ===se comportarão exatamente da mesma maneira.

Mais leitura:

Tim Down
fonte
9

Como verifico uma variável se ela é nula ou indefinida

basta verificar se uma variável tem um valor válido como este:

if(variable)

retornará true se a variável não contiver:

  • nulo
  • Indefinido
  • 0 0
  • falso
  • "" (uma sequência vazia)
  • NaN
Sumit Joshi
fonte
8

Indefinido

Isso significa que a variável ainda não foi inicializada.

Exemplo:

var x;
if(x){ //you can check like this
   //code.
}

é igual a (==)

Ele apenas verifica se o valor é igual a não o tipo de dados.

Exemplo:

var x = true;
var y = new Boolean(true);
x == y ; //returns true

Porque verifica apenas o valor.

Iguais estritos (===)

Verifica se o valor e o tipo de dados devem ser iguais.

Exemplo:

var x = true;
var y = new Boolean(true);
x===y; //returns false.

Porque verifica o tipo de dados x é um tipo primitivo e y é um objeto booleano.

kannanrbk
fonte
4

O anúncio 1. nullnão é um identificador para uma propriedade do objeto global, como undefined pode ser

Anúncio 2. Os ===valores e tipos de verificação. Eles ==não exigem os mesmos tipos e fizeram uma conversão implícita antes da comparação (usando .valueOf()e .toString()). Aqui você tem todos ( src ):

E se

insira a descrição da imagem aqui

== (sua negação ! = )

insira a descrição da imagem aqui

=== (sua negação ! == )

insira a descrição da imagem aqui

Kamil Kiełczewski
fonte
1
vale ressaltar que document.all == nulledocument.all !== null
um usuário
1

Se sua verificação (lógica) é negativa (!) E você deseja capturar JS nulle undefined (como diferentes navegadores fornecerão resultados diferentes), você usaria a comparação menos restritiva: por exemplo:

var ItemID = Item.get_id();
if (ItemID != null)
{
 //do stuff
}

Isso irá capturar ambos nulleundefined

DaniDev
fonte
0

Tente com lógica diferente . Você pode usar o código abaixo para verificar todas as quatro (4) condições para validação, como não nulo, não em branco, não indefinido e não zero, use apenas este código (! (! (Variável))) em javascript e jquery.

function myFunction() {
var data;  //The Values can be like as null, blank, undefined, zero you can test

if(!(!(data)))
{
   //If data has valid value
    alert("data "+data);
} 
else 
{
    //If data has null, blank, undefined, zero etc.
    alert("data is "+data);
}

}

Ravikant
fonte