Como verificar se há uma variável indefinida ou nula no JavaScript?

500

Estamos frequentemente usando o seguinte padrão de código em nosso código JavaScript

if (typeof(some_variable) != 'undefined' && some_variable != null)
{
    // Do something with some_variable
}

Existe uma maneira menos detalhada de verificar que tem o mesmo efeito?

De acordo com alguns fóruns e literatura dizendo simplesmente o seguinte deve ter o mesmo efeito.

if (some_variable)
{
    // Do something with some_variable
}

Infelizmente, o Firebug avalia uma declaração como erro no tempo de execução quando some_variableé indefinido, enquanto a primeira é adequada. Esse é apenas um comportamento (indesejado) do Firebug ou há realmente alguma diferença entre essas duas maneiras?

Tomas Vana
fonte
46
if(some_variable) { ... }não será executado se some_variableé falseou 0ou ...
kennytm
bom ponto;) Mas digamos que eu sei que não pode ser falsa ou 0 e eu só quero verificar se eu posso usá-lo em alguma lógica (como uma string, array, etc.)
Tomas Vana
Relacionados: stackoverflow.com/questions/27509/...
Jørn Schou-Rode
2
... ou uma string vazia.
David Given

Respostas:

333

Você precisa diferenciar os casos:

  1. As variáveis ​​podem ser undefinedou não declaradas . Você receberá um erro se acessar uma variável não declarada em qualquer contexto que não seja typeof.
if(typeof someUndeclaredVar == whatever) // works
if(someUndeclaredVar) // throws error

Uma variável que foi declarada mas não inicializada é undefined.

let foo;
if (foo) //evaluates to false because foo === undefined
  1. Propriedades indefinidas , como someExistingObj.someUndefProperty. Uma propriedade indefinida não gera um erro e simplesmente retorna undefined, que, quando convertida em um booleano, é avaliada como false. Então, se você não se importa 0e false, usar if(obj.undefProp)está ok. Há um idioma comum baseado neste fato:

    value = obj.prop || defaultValue

    o que significa "se objtiver a propriedade prop, atribua-a value, caso contrário, atribua o valor padrão defautValue".

    Algumas pessoas consideram esse comportamento confuso, argumentando que ele leva a erros difíceis de encontrar e recomendam o uso do inoperador.

    value = ('prop' in obj) ? obj.prop : defaultValue
user187291
fonte
1
Então você poderia falar sobre hasOwnProperty e protótipos. 'indexOf' em []! == [] .hasOwnProperty ('indexOf')
Alsciende
1
Sim, pensei em acrescentar isso, mas decidi sacrificar a integridade por brevidade. ;)
user187291
52
você não resolve o problema de 0 e falso
TMS
12
Você quer dizer variáveis não declaradas . Uma variável pode ser declarada, mas ainda tem um valor de undefined.
Tgr
1
E também observe que typeofretorna uma string. Então, não var myVar; typeof(myVar)==undefinedretorna . falsetrue
RISM
417

Eu acho que a maneira mais eficiente de testar "valor é nullou undefined" é

if ( some_variable == null ){
  // some_variable is either null or undefined
}

Portanto, essas duas linhas são equivalentes:

if ( typeof(some_variable) !== "undefined" && some_variable !== null ) {}
if ( some_variable != null ) {}

Nota 1

Como mencionado na pergunta, a variante curta requer que some_variabletenha sido declarada; caso contrário, um ReferenceError será lançado. No entanto, em muitos casos de uso, você pode assumir que isso é seguro:

verifique se há argumentos opcionais:

function(foo){
    if( foo == null ) {...}

verifique se há propriedades em um objeto existente

if(my_obj.foo == null) {...}

Por outro lado, typeofpode lidar com variáveis ​​globais não declaradas (simplesmente retorna undefined). No entanto, esses casos devem ser reduzidos ao mínimo por boas razões, como explicou Alsciende.

Nota 2

Esta variante - ainda mais curta - não é equivalente:

if ( !some_variable ) {
  // some_variable is either null, undefined, 0, NaN, false, or an empty string
}

tão

if ( some_variable ) {
  // we don't get here if some_variable is null, undefined, 0, NaN, false, or ""
}

Nota 3

Em geral, é recomendável usar em ===vez de ==. A solução proposta é uma exceção a esta regra. O verificador de sintaxe JSHint ainda fornece a eqnullopção por esse motivo.

No guia de estilo do jQuery :

Verificações rigorosas de igualdade (===) devem ser usadas em favor de ==. A única exceção é ao verificar indefinido e nulo por meio de nulo.

// Check for both undefined and null values, for some important reason. 
undefOrNull == null;
mar10
fonte
1
Diferença muito importante (que já foi mencionada na pergunta btw). É por isso que todo mundo usa typeof. Desculpe, mas não entendo onde sua resposta é útil, você apenas declara o que foi dito na pergunta e, nas primeiras linhas, afirma que está errado.
TMS
33
Desculpe, mas tenho que discordar ;-) Usar == nullé o mais eficiente para testar 'nulo ou indefinido' (que é o tópico das perguntas). Isso não é incomum (usado 43 vezes no jQuery 1.9.1), pois muitas vezes você sabe que a variável foi declarada - ou você testa uma propriedade de um objeto existente como if( o.foo == null).
Mar10
1
@ mar10 (aUndefinedVar == null) fornece um erro "aUndefinedVar não está definido" não é verdadeiro.
Rannnn
7
Obrigado por esta opção sucinta. Em 99% do meu código, não há necessidade de distinguir entre nulo e indefinido; portanto, a brevidade dessa verificação resulta em código menos confuso.
31520 Ian
1
Para impedir um ReferenceError ao verificar uma variável global, use window.someProperty == null. Para variáveis ​​locais, você pode facilmente garantir que elas sejam declaradas: em vez de escrever if (...) {var local = ""}writevar local; if (...) { local = ""; }
Aloso 18/17
66

A verificação de nulo com igualdade normal também retornará true para indefinido.

if (window.variable == null) alert('variable is null or undefined');

JS Igualdade

Semra
fonte
4
NaN não é igual a Nan?
Sharjeel Ahmed 11/03/16
2
@ NaN monoteísta não é igual a NaN (consulte a página NaN da MDN ). Javascript usa IEEE-754 para seu ponto flutuante, que especifica esse comportamento. Há algumas reflexões sobre isso, consulte stackoverflow.com/a/23666623/2563765
Steven
1
@SharjeelAhmed É corrigido matematicamente. NaNa partir da equação diferença pode nunca deverá ser igual
Thaina
28

Nos padrões JavaScript mais recentes, como ES5 e ES6, você pode apenas dizer

> Boolean(0) //false
> Boolean(null)  //false
> Boolean(undefined) //false

todos retornam false, que é semelhante à verificação de variáveis ​​vazias do Python. Portanto, se você quiser escrever lógica condicional em torno de uma variável, basta dizer

if (Boolean(myvar)){
   // Do something
}

aqui "null" ou "string vazia" ou "undefined" serão tratados com eficiência.

Naren Yellavula
fonte
2
suportado como ie5, por que isso não é mais conhecido !?
Himmators
12
O OP só queria testar diferente de nulle undefinedoutros valores falsos devem retornar true!
Andre Figueiredo
1
Não agrega valor em uma condição. A condição avalia exatamente o mesmo e ainda retorna false para 0, NaN. Isso ocorre quando você deseja capturar a veracidade de um objeto sem manter uma referência ao objeto, para que você possa armazená-lo em vez de um objeto potencialmente grande. Para sua informação, isso também é equivalente !!value, ao qual o primeiro !nega a veracidade e o segundo nega novamente.
Erich2k8
> FYI isso também é equivalente a !! value, que é o primeiro! nega a veracidade. Que FYI também é equivalente ao if (var)que será lançado para booleano, então basicamente completamente inútil ...
Cyril CHAPON
2
Enquanto literalmente usando a palavra-chave indefinida , Boolean(undefined)funciona, tentar que com uma variável indefinida não funcione, e esse é o objetivo de verificar se há nulo ou indefinido. Isto: if (Boolean(undeclareVarName)) { console.log('yes'); } else { console.log('no'); }lança um ReferenceError dizendo "ReferenceError: undeclareVarName não está definido"
Stephen P
22

Se você tentar fazer referência a uma variável não declarada, será gerado um erro em todas as implementações de JavaScript.

As propriedades dos objetos não estão sujeitas às mesmas condições. Se uma propriedade de objeto não tiver sido definida, um erro não será gerado se você tentar acessá-la. Portanto, nessa situação, você pode reduzir:

 if (typeof(myObj.some_property) != "undefined" && myObj.some_property != null)

para

if (myObj.some_property != null)

Com isso em mente, e o fato de que variáveis ​​globais são acessíveis como propriedades do objeto global ( windowno caso de um navegador), você pode usar o seguinte para variáveis ​​globais:

if (window.some_variable != null) {
    // Do something with some_variable
}

Em escopos locais, sempre é útil garantir que as variáveis ​​sejam declaradas na parte superior do seu bloco de código, isso economizará nos usos recorrentes de typeof.

Andy E
fonte
11
Você sentirá falta de NaN, 0 "" e falso porque eles não são nulos nem indefinidos, mas também falsos.
Andreas Köberle
@Andreas Köberle está certo. Até o operador de igualdade não estrito diz que nulo é diferente de NaN, 0 "" "e falso. Você teria que fazer if (myObj.some_property != null)para obter um comportamento equivalente.
The13hwolfe
15

Em primeiro lugar, você deve ser muito claro sobre o que você testa. O JavaScript tem todos os tipos de conversões implícitas para enganar você e dois tipos diferentes de comparador de igualdade: ==e ===.

Uma função test(val)que testa nullou undefineddeve ter as seguintes características:

 test(null)         => true
 test(undefined)    => true
 test(0)            => false
 test(1)            => false
 test(true)         => false
 test(false)        => false
 test('s')          => false
 test([])           => false

Vamos ver qual das idéias aqui realmente passou no nosso teste.

Estes trabalhos:

val == null
val === null || val === undefined
typeof(val) == 'undefined' || val == null
typeof(val) === 'undefined' || val === null

Estes não funcionam:

typeof(val) === 'undefined'
!!val

Criei uma entrada jsperf para comparar a correção e o desempenho dessas abordagens. Por enquanto, os resultados são inconclusivos, pois não houve execuções suficientes em diferentes navegadores / plataformas. Reserve um minuto para executar o teste no seu computador!

Atualmente, parece que o val == nullteste simples oferece o melhor desempenho. Também é praticamente o mais curto. O teste pode ser negado val != nullse você desejar o complemento.

Drew Noakes
fonte
12

este é o único caso em que ==deve ser usado:

if (val == null) console.log('val is null or undefined')
Yukulélé
fonte
3
essa resposta, por volta de 2019, tem escassez de votos, mas é o KISS para este caso de uso. Também val != nullpelo contrário, apenas um = e, já que por @Yukulele é o ÚNICO usado, ==você saberá o que faz quando o vê.
DKebler
7

Como não há uma resposta completa e correta, tentarei resumir:

Em geral, a expressão:

if (typeof(variable) != "undefined" && variable != null)

não pode ser simplificado, porque o variablepode ser não declarado, portanto, a omissão typeof(variable) != "undefined"resultaria em ReferenceError. Mas, você pode simplificar a expressão de acordo com o contexto :

Se variablefor global , você pode simplificar para:

if (window.variable != null)

Se for local , é possível evitar situações em que essa variável não é declarada e também simplificar:

if (variable != null)

Se for propriedade do objeto , você não precisa se preocupar com o ReferenceError:

if (obj.property != null)
TMS
fonte
Faz navigatorparte de window? Quando recebemos uma exceção navigator is not defined, podemos usar o window.navigator != nullteste?
JWW
5

Você pode apenas verificar se a variável tem um valor ou não. Significado,

if( myVariable ) {
//mayVariable is not :
//null
//undefined
//NaN
//empty string ("")
//0
//false

}

Se você não souber se existe uma variável (ou seja, se foi declarada), verifique com o operador typeof. por exemplo

if( typeof myVariable !== 'undefined' ) {
    // myVariable will get resolved and it is defined
}
DDave
fonte
4

Eu fiz isso usando esse método

salve o ID em alguma variável

var someVariable = document.getElementById("someId");

então use if condition

if(someVariable === ""){
 //logic
} else if(someVariable !== ""){
 //logic
}
Mab Kiani
fonte
4

Este é um exemplo de uma ocasião muito rara em que é recomendável usar em ==vez de ===. A expressão somevar == nullretornará true para undefinede null, mas false para todo o resto (um erro se a variável não for declarada).

Usar o !=botão irá inverter o resultado, como esperado.

Editores modernos não avisam sobre o uso ==ou !=operador null, pois esse é quase sempre o comportamento desejado.

Comparações mais comuns:

undeffinedVar == null     // true
obj.undefinedProp == null // true
null == null              // true
0 == null                 // false
'0' == null               // false
'' == null                // false

Tente você mesmo:

let undefinedVar;
console.table([
    { test : undefinedVar,     result: undefinedVar     == null },
    { test : {}.undefinedProp, result: {}.undefinedProp == null },
    { test : null,             result: null             == null },
    { test : false,            result: false            == null },
    { test : 0,                result: 0                == null },
    { test : '',               result: ''               == null },
    { test : '0',              result: '0'              == null },
]);
Sabo
fonte
3

Conforme mencionado em uma das respostas, você pode ter sorte se estiver falando de uma variável que tem um escopo global. Como você deve saber, as variáveis ​​que você define globalmente tendem a ser adicionadas ao objeto do Windows. Você pode aproveitar esse fato, digamos que esteja acessando uma variável chamada bleh, basta usar o operador invertido duplo (!!)

!!window['bleh'];

Isso retornaria um erro falso enquanto bleh não foi declarado E atribuiu um valor.

Farax
fonte
3

aqui está outra maneira de usar o método Array includes () :

[undefined, null].includes(value)
Jason
fonte
Isso não funciona! ReferenceError: o valor não está definido
Sébastien Temprado
1
Deve ser o valor que você deseja verificar.
A2441918
2

qualquer que seja o yyy indefinido ou nulo, ele retornará true

if (typeof yyy == 'undefined' || !yyy) {
    console.log('yes');
} else {
    console.log('no');
}

sim

if (!(typeof yyy == 'undefined' || !yyy)) {
    console.log('yes');
} else {
    console.log('no');
}

não

Terry Lin
fonte
2

Abra as ferramentas do desenvolvedor no seu navegador e tente o código mostrado na imagem abaixo.

Img1 Img2

Akash Preet
fonte
2

Para entender, vamos analisar qual será o valor retornado pelo mecanismo Javascript ao converter indefinido, nulo e '' (Uma sequência vazia também). Você pode verificar diretamente o mesmo no console do desenvolvedor.

insira a descrição da imagem aqui

Você pode ver que todos estão convertendo para false, significa Todos esses três estão assumindo 'falta de existência' por javascript. Portanto, você não precisa verificar explicitamente todos os três no seu código, como abaixo.

if (a === undefined || a === null || a==='') {
    console.log("Nothing");
} else {
    console.log("Something");
}

Também quero destacar mais uma coisa.

Qual será o resultado de Boolean (0)?

Claro que é falso. Isso criará um erro no seu código quando 0 for um valor válido no resultado esperado. Portanto, verifique isso ao escrever o código.

Code-EZ
fonte
2

Semelhante ao que você tem, você poderia fazer algo como

if (some_variable === undefined || some_variable === null) { do stuff }

gpap
fonte
0

Testar nulidade ( if (value == null)) ou não nulidade ( if (value != null)) é menos detalhado do que testar o status de definição de uma variável.

Além disso, o teste if (value)(ou if( obj.property)) para garantir a existência de sua variável (ou propriedade do objeto) falha se for definido com um falsevalor booleano . Advertência emptor :)

lucsorel
fonte
0

Ambos os valores podem ser facilmente distinguidos usando o operador de comparação estrita:

Exemplo de trabalho em:

http://www.thesstech.com/tryme?filename=nullandundefined

Código de amostra:

function compare(){
    var a = null; //variable assigned null value
    var b;  // undefined
    if (a === b){
        document.write("a and b have same datatype.");
    }
    else{
        document.write("a and b have different datatype.");
    }   
}
Sohail Arif
fonte
0

Se o objetivo da instrução if for verificar valores nullou undefinedantes de atribuir um valor a uma variável, você poderá fazer uso do Nullish Coalescing Operator , que estará finalmente disponível no JavaScript, embora o suporte ao navegador seja limitado. De acordo com os dados da caniuse , apenas 48,34% dos navegadores são suportados (a partir de abril de 2020).

const a = some_variable ?? '';

Isso garantirá que a variável seja atribuída a uma sequência vazia (ou qualquer outro valor padrão) se some_variablefor nullou undefined.

Esse operador é mais adequado para o seu caso de uso, pois não retorna o valor padrão para outros tipos de valor falso, como 0e ''.

fui
fonte
-1

Você deve definir uma função deste formulário:

validate = function(some_variable){
    return(typeof(some_variable) != 'undefined' && some_variable != null)
}
ljofre
fonte
Isso gerará o mesmo ReferenceError se a variável não for declarada.
Chad
-1

No ES5 ou ES6, se necessário, verifique-o várias vezes:

const excluded = [null, undefined, ''];

if (!exluded.includes(varToCheck) {
  // it will bee not null, not undefined and not void string
}

vladernn
fonte
-1

Com o Ramda, você pode simplesmente fazer com que a R.isNil(yourValue) Lodash e outras bibliotecas auxiliares tenham a mesma função.

Mark Jackson
fonte