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

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?

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

2. 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

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;

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

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

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.

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.

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.

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

if (val == null) console.log('val is null or undefined')

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)

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
}

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
}

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 },
]);

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.

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

[undefined, null].includes(value)

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

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

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.

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.

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

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

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 :)

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.");
    }   
}

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 ''.

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

validate = function(some_variable){
    return(typeof(some_variable) != 'undefined' && some_variable != null)
}

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
}

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