¿Cómo verificar una variable indefinida o nula en JavaScript?

Con frecuencia utilizamos el siguiente patrón de código en nuestro código JavaScript

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

¿Hay alguna manera menos verbosa de verificar que tenga el mismo efecto?

Según algunos foros y publicaciones que dicen simplemente lo siguiente debería tener el mismo efecto.

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

Desafortunadamente, Firebug evalúa una declaración como error en tiempo de ejecución cuando some_variableno está definida, mientras que la primera está bien para eso. ¿Es esto solo un comportamiento (no deseado) de Firebug o hay realmente alguna diferencia entre esas dos formas?

Tienes que diferenciar entre casos:

1. Las variables pueden ser undefinedo no declaradas . Obtendrá un error si accede a una variable no declarada en cualquier contexto que no sea typeof.

if(typeof someUndeclaredVar == whatever) // works
if(someUndeclaredVar) // throws error

Una variable que ha sido declarada pero no inicializada es undefined.

let foo;
if (foo) //evaluates to false because foo === undefined

2. Propiedades indefinidas , como someExistingObj.someUndefProperty. Una propiedad indefinida no produce un error y simplemente devuelve undefined, que, cuando se convierte en un valor booleano, se evalúa como false. Entonces, si no te importa 0y false, usar if(obj.undefProp)está bien. Hay un idioma común basado en este hecho:

   value = obj.prop || defaultValue

   lo que significa "si objtiene la propiedad prop, asígnela value, de lo contrario asigne el valor predeterminado defautValue".

   Algunas personas consideran que este comportamiento es confuso, argumentan que conduce a errores difíciles de encontrar y recomiendan usar el inoperador.

   value = ('prop' in obj) ? obj.prop : defaultValue

Creo que la forma más eficiente de evaluar el "valor es nullo undefined" es

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

Entonces estas dos líneas son equivalentes:

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

Nota 1

Como se menciona en la pregunta, la variante corta requiere que some_variablese haya declarado; de lo contrario, se lanzará un ReferenceError. Sin embargo, en muchos casos de uso, puede suponer que esto es seguro:

verificar argumentos opcionales:

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

buscar propiedades en un objeto existente

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

Por otro lado typeofpuede tratar con variables globales no declaradas (simplemente retorna undefined). Sin embargo, estos casos deberían reducirse al mínimo por buenas razones, como explicó Alsciende.

Nota 2

Esta variante, incluso más corta, no es equivalente:

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

entonces

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

Nota 3

En general se recomienda usar en ===lugar de ==. La solución propuesta es una excepción a esta regla. El verificador de sintaxis JSHint incluso proporciona la eqnullopción por este motivo.

De la guía de estilo jQuery :

Se deben usar verificaciones estrictas de igualdad (===) a favor de ==. La única excepción es cuando se comprueba si hay valores indefinidos y nulos a modo de nulo.

// Check for both undefined and null values, for some important reason. 
undefOrNull == null;

Marcar nulo con igualdad normal también devolverá verdadero para indefinido.

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

En los nuevos estándares de JavaScript, como ES5 y ES6, solo puede decir

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

todos devuelven falso, que es similar a la comprobación de Python de variables vacías. Entonces, si quieres escribir lógica condicional alrededor de una variable, solo di

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

aquí "nulo" o "cadena vacía" o "indefinido" se manejarán de manera eficiente.

Si intenta hacer referencia a una variable no declarada, se generará un error en todas las implementaciones de JavaScript.

Las propiedades de los objetos no están sujetas a las mismas condiciones. Si no se ha definido una propiedad de objeto, no se generará un error si intenta acceder a ella. Entonces, en esta situación, podría acortar:

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

a

if (myObj.some_property != null)

Con esto en mente, y el hecho de que las variables globales son accesibles como propiedades del objeto global ( windowen el caso de un navegador), puede usar lo siguiente para las variables globales:

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

En ámbitos locales, siempre es útil asegurarse de que las variables se declaren en la parte superior de su bloque de código, esto ahorrará en los usos recurrentes de typeof.

En primer lugar, debes ser muy claro sobre lo que pruebas. JavaScript tiene todo tipo de conversiones implícitas para dispararte, y dos tipos diferentes de comparador de igualdad: ==y ===.

Una función test(val)que prueba nullo undefineddebe tener las siguientes 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

Veamos cuáles de las ideas aquí realmente pasan nuestra prueba.

Estos trabajan:

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

Estos no funcionan:

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

Creé un Creé entrada jsperf para comparar la corrección y el rendimiento. de estos enfoques. Los resultados no son concluyentes por el momento ya que no ha habido suficientes ejecuciones en diferentes navegadores / plataformas. ¡Tómese un minuto para ejecutar la prueba en su computadora!

En la actualidad, parece que la val == nullprueba simple ofrece el mejor rendimiento. También es prácticamente el más corto. Se puede negar la prueba val != nullsi desea el complemento.

Este es el único caso en el que se ==debe utilizar:

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

Como no existe una respuesta única completa y correcta, intentaré resumir:

En general, la expresión:

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

no se puede simplificar, porque variablepodría no estar declarado, por lo que omitirlo typeof(variable) != "undefined"daría como resultado ReferenceError. Pero, puede simplificar la expresión según el contexto :

Si el variablees global , puede simplificarlo para:

if (window.variable != null)

Si es local , probablemente pueda evitar situaciones en las que esta variable no esté declarada y también simplificar para:

if (variable != null)

Si es propiedad de un objeto , no tiene que preocuparse por ReferenceError:

if (obj.property != null)

Simplemente puede verificar si la variable tiene un valor o no. Sentido,

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

}

Si no sabe si existe una variable (es decir, si se declaró), debe consultar con el operador typeof. p.ej

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

He hecho esto usando este método

guardar la identificación en alguna variable

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

luego usar si condición

if(someVariable === ""){
 //logic
} else if(someVariable !== ""){
 //logic
}

Este es un ejemplo de una ocasión muy rara en la que se recomienda usar en ==lugar de ===. La expresión somevar == nulldevolverá verdadero para undefinedy null, pero falso para todo lo demás (un error si la variable no está declarada).

El uso de !=invertirá el resultado, como se esperaba.

Los editores modernos no advertirán sobre el uso ==u !=operador connull , ya que este es casi siempre el comportamiento deseado.

Comparaciones más comunes:

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

Inténtalo tú mismo:

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

Como se menciona en una de las respuestas, puede tener suerte si habla de una variable que tiene un alcance global. Como ya sabrá, las variables que define globalmente tienden a agregarse al objeto de Windows. Puedes aprovechar este hecho, así que digamos que estás accediendo a una variable llamada bleh, solo usa el operador doble invertido (!!)

!!window['bleh'];

Esto devolvería un valor falso mientras bleh no se haya declarado Y se le haya asignado un valor.

Aquí hay otra forma de usar el método Array incluye () :

[undefined, null].includes(value)

lo que sea yyy es indefinido o nulo, devolverá verdadero

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

si

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

No

Abra las herramientas de desarrollador en su navegador y solo pruebe el código que se muestra en la imagen a continuación.

Para entenderlo, analicemos cuál será el valor devuelto por el motor Javascript al convertir undefined, null y '' (una cadena vacía también). Puede verificar directamente lo mismo en su consola de desarrollador.

Puede ver que todos se están convirtiendo en falso, lo que significa que estos tres suponen 'falta de existencia' por javascript. Por lo tanto, no es necesario que compruebe explícitamente los tres en su código como se muestra a continuación.

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

También quiero señalar una cosa más.

¿Cuál será el resultado de Boolean (0)?

Por supuesto falso. Esto creará un error en su código cuando 0 es un valor válido en su resultado esperado. Así que asegúrese de verificar esto cuando escriba el código.

Similar a lo que tienes, podrías hacer algo como

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

Probar nulidad ( if (value == null)) o no nulidad ( if (value != null)) es menos detallado que probar el estado de definición de una variable.

Además, la prueba if (value)(o if( obj.property)) para garantizar la existencia de su variable (o propiedad del objeto) falla si se define con un falsevalor booleano . Advertencia emptor :)

Ambos valores se pueden distinguir fácilmente utilizando el operador de comparación estricto:

Ejemplo de trabajo en:

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

Código de muestra:

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

Si el propósito de la instrucción if es verificar nullo undefinedvalores antes de asignar un valor a una variable, puede hacer uso del Operador de fusión nula , finalmente está disponible en JavaScript, aunque el soporte del navegador es limitado. Según los datos de caniuse , solo el 48.34% de los navegadores son compatibles (a partir de abril de 2020).

const a = some_variable ?? '';

Esto garantizará que la variable se asigne a una cadena vacía (o cualquier otro valor predeterminado) si some_variablees nulloundefined .

Este operador es el más adecuado para su caso de uso, ya que no devuelve el valor predeterminado para otros tipos de valores falsos como 0y ''.

Debe definir una función de esta forma:

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

En ES5 o ES6, si necesita verificarlo varias veces, puede hacerlo:

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

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

Con Ramda, simplemente puede hacer que R.isNil(yourValue) Lodash y otras bibliotecas auxiliares tengan la misma función.