¿Cómo verifico los valores nulos en JavaScript?

576

¿Cómo puedo verificar los valores nulos en JavaScript? Escribí el código a continuación pero no funcionó.

if (pass == null || cpass == null || email == null || cemail == null || user == null) {      

    alert("fill all columns");
    return false;  

}   

¿Y cómo puedo encontrar errores en mis programas de JavaScript?

Mahdi_Nine
fuente
¿Estás seguro de que los valores que estás probando son realmente nulos y no solo una cadena vacía?
Jan-Peter Vos
72
las pruebas nullen js deben hacerse con el operador estricto===
davin
3
@davin: es cierto, pero no es el problema aquí, ya que si fuera la declaración aún funcionaría.
Mark Kahn
3
@cwolves, si pensara que era el problema, habría respondido ese comentario. Mira mi redacción, estoy claramente haciendo una declaración general sobre el lenguaje en referencia a la práctica del OP, y no propongo que esto resuelva su problema.
davin
2
@TRiG los cambios propuestos alteran fundamentalmente la naturaleza de la pregunta hasta el punto en que las respuestas (no solo las mías) pierden contexto y no tienen sentido. La edición debería ser solo un comentario.
ic3b3rg

Respuestas:

744

Javascript es muy flexible con respecto a la comprobación de valores "nulos". Supongo que en realidad estás buscando cadenas vacías, en cuyo caso este código más simple funcionará:

if(!pass || !cpass || !email || !cemail || !user){

Que comprobará para cadenas vacías ( ""), null, undefined, falsey los números 0yNaN

Tenga en cuenta que si está verificando específicamente los números, es un error común omitir 0con este método, y num !== 0se prefiere ( num !== -1o ~num(código hacky que también verifica -1)) las funciones que devuelven -1, por ejemplo indexOf)

Mark Kahn
fuente
44
Sería muy útil saber qué partes de esta prueba para qué valores. A veces estás buscando uno en particular.
inorganik
2
Una declaración tardía, pero sí, puede realizar una prueba contra cada uno @inorganik, vea mi respuesta a continuación
WebWanderer
28
Lectores, tengan cuidado al usar este tipo de prueba en datos numéricos. No use !o !!para probar nullo para undefineddatos típicamente numéricos a menos que también quiera tirar valores de 0.
NickS
44
La respuesta misma dice esto: "... y los números 0...". Creo que esta respuesta es perfectamente apropiada para la pregunta, dado el contexto (lo que infiero es "nombre de usuario, contraseña, correo electrónico"), no están buscando 0valores. Sin embargo, dada la popularidad de esta pregunta y respuesta, estoy de acuerdo en que vale la pena mencionarla en la respuesta misma.
Mark Kahn
44
@Hendeca - pone los ojos en blanco Ve a leer el código en la pregunta real. Está claramente preguntando por los nombres de usuario y contraseñas. No estoy adivinando nada, solo estaba siendo educado. Te molesta el hecho de que respondí lo que necesitaban y no lo que pidieron, lo cual es absurdo. Esto es SO, la mayoría de las veces las personas no saben lo que deberían pedir. En el contexto de la pregunta original, esta respuesta es correcta. Ahora deja de agregar ruido.
Mark Kahn el
420

Para verificar nulo ESPECÍFICAMENTE , usaría esto:

if (variable === null)

Esta prueba sólo pasar por nully no pasará por "", undefined, false, 0, o NaN.

Además, he proporcionado verificaciones absolutas para cada valor "falso" (uno que devolvería verdadero para !variable).

Tenga en cuenta que, para algunas de las comprobaciones absolutas, deberá implementar el uso de absolutely equals: ===y typeof.

He creado un JSFiddle aquí para mostrar todas las pruebas individuales funcionando

Aquí está el resultado de cada verificación:

Null Test:

if (variable === null)

- variable = ""; (false) typeof variable = string

- variable = null; (true) typeof variable = object

- variable = undefined; (false) typeof variable = undefined

- variable = false; (false) typeof variable = boolean

- variable = 0; (false) typeof variable = number

- variable = NaN; (false) typeof variable = number



Empty String Test:

if (variable === '')

- variable = ''; (true) typeof variable = string

- variable = null; (false) typeof variable = object

- variable = undefined; (false) typeof variable = undefined

- variable = false; (false) typeof variable = boolean

- variable = 0; (false) typeof variable = number

- variable = NaN; (false) typeof variable = number




Undefined Test:

if (typeof variable == "undefined")

-- or --

if (variable === undefined)

- variable = ''; (false) typeof variable = string

- variable = null; (false) typeof variable = object

- variable = undefined; (true) typeof variable = undefined

- variable = false; (false) typeof variable = boolean

- variable = 0; (false) typeof variable = number

- variable = NaN; (false) typeof variable = number



False Test:

if (variable === false)

- variable = ''; (false) typeof variable = string

- variable = null; (false) typeof variable = object

- variable = undefined; (false) typeof variable = undefined

- variable = false; (true) typeof variable = boolean

- variable = 0; (false) typeof variable = number

- variable = NaN; (false) typeof variable = number



Zero Test:

if (variable === 0)

- variable = ''; (false) typeof variable = string

- variable = null; (false) typeof variable = object

- variable = undefined; (false) typeof variable = undefined

- variable = false; (false) typeof variable = boolean

- variable = 0; (true) typeof variable = number

- variable = NaN; (false) typeof variable = number



NaN Test:

if (typeof variable == 'number' && !parseFloat(variable) && variable !== 0)

-- or --

if (isNaN(variable))

- variable = ''; (false) typeof variable = string

- variable = null; (false) typeof variable = object

- variable = undefined; (false) typeof variable = undefined

- variable = false; (false) typeof variable = boolean

- variable = 0; (false) typeof variable = number

- variable = NaN; (true) typeof variable = number

Como puede ver, es un poco más difícil de probar NaN;

WebWanderer
fuente
99
¿Cuál es el propósito de la verificación de tipos si usa ===igualdad estricta? Gracias. También para la prueba de NaN puede usar isNaN(value)eso devolverá truesolo si la variable es igual a NaN.
Michael Malinovskij
16
¿Hay algún caso en el variable === nullque no sea del tipo "objeto"? Si no es así, ¿por qué no simplificar el cheque para variable === nulltirar el segundo conjunto? Gracias.
Hunan Rostomyan
77
@HunanRostomyan Buena pregunta, y sinceramente, no, no creo que la haya. Probablemente esté lo suficientemente seguro usando variable === nulllo que acabo de probar aquí en este JSFiddle . La razón por la que también usé `&& typeof variable === 'object' 'no fue solo para ilustrar el hecho interesante de que un nullvalor es typeof object, sino también para mantener el flujo de las otras verificaciones. Pero sí, en conclusión, puede usarlo de manera segura variable === null.
WebWanderer
1
jsfiddle.net/neoaptt/avt1cgem/1 Aquí está esta respuesta dividida en funciones. No es muy útil, pero lo hice de todos modos.
Neoaptt
1
Voy a hacer algo que casi nunca es una buena idea: cambiar el código en esta respuesta. Específicamente, elimine la prueba totalmente innecesaria para el tipo de objeto, al verificar nulo. Este es un fragmento de código fundamental : no es una buena idea tener incluso un solo principiante que aprende mal que necesitan hacer esa prueba detallada.
ToolmakerSteve
59

simplemente reemplace ==con ===en todos los lugares.

== es una comparación de igualdad suelta o abstracta

=== es una estricta comparación de igualdad

Consulte el artículo de MDN sobre las comparaciones de igualdad y la igualdad para obtener más detalles.

ic3b3rg
fuente
2
Esto solo funciona si consideras undefinedque no null. De lo contrario, dará lugar a una gran cantidad de comportamiento inesperado. En general, si está interesado en ambos null/ undefinedpero no en valores falsos, use ==(uno de los pocos casos en los que debería hacerlo).
Andrew Mao
2
@AndrewMao undefined no es null : stackoverflow.com/a/5076962/753237
ic3b3rg
2
Creo que eso es lo que @AndrewMao estaba diciendo, realmente. Su primera oración podría reescribirse "Esto solo funciona en situaciones donde indefinido y nulo no son equivalentes prácticos".
BobRodes
1
@BobRodes Gracias por aclarar mi mala escritura, lo aprecio :)
Andrew Mao
@ AndrewMao De nada. Y yo no llamaría tu escritura pobre, personalmente; Yo diría que es mucho mejor que el promedio. :)
BobRodes
30

Operador de igualdad estricto: -

Podemos verificar nulo por ===

if ( value === null ){

}

Solo usando if

if( value ) {

}

se evaluará como verdadero si el valor no es :

  • nulo
  • indefinido
  • Yaya
  • cuerda vacía ("")
  • falso
  • 0 0
Arshid KV
fuente
9

Mejora sobre la respuesta aceptada al verificar explícitamente nullpero con una sintaxis simplificada:

if ([pass, cpass, email, cemail, user].every(x=>x!==null)) {
    // your code here ...
}

// Test
let pass=1, cpass=1, email=1, cemail=1, user=1; // just to test

if ([pass, cpass, email, cemail, user].every(x=>x!==null)) {
    // your code here ...
    console.log ("Yayy! None of them are null");
} else {
    console.log ("Oops! At-lease one of them is null");
}

deekshith
fuente
6

En primer lugar, tiene una declaración return sin un cuerpo de función. Lo más probable es que arroje un error.

¡Una forma más limpia de hacer su verificación sería simplemente usar el! operador:

if (!pass || !cpass || !email || !cemail || !user) {

    alert("fill all columns");

}
Joey C.
fuente
12
Ese código probablemente esté en una función, simplemente no lo mostró;)
Mark Kahn
4

puedes usar try catch finalmente

 try {
     document.getElementById("mydiv").innerHTML = 'Success' //assuming "mydiv" is undefined
 } catch (e) {

     if (e.name.toString() == "TypeError") //evals to true in this case
     //do something

 } finally {}   

También puedes throwtus propios errores. Mira esto .

DrStrangeLove
fuente
1
Creo que esto califica como código 'paranoico'. si realmente escribiste algo como esto, sería con el entendimiento de que "mydiv" no podría no existir. no deberíamos llegar a este código a menos que estemos seguros de que ese es el caso, y tendríamos muchas vías, como los códigos de respuesta, para asegurarnos de tener confianza antes de intentar dicha línea.
calql8edkos
No use try and catch para el flujo de control. Esta no es una buena solución.
Andrew S
4

En JavaScript, ninguna cadena es igual a null.

Tal vez esperaba pass == nullque fuera cierto cuando se passtrata de una cadena vacía porque sabe que el operador de igualdad suelta ==realiza ciertos tipos de coerción de tipo.

Por ejemplo, esta expresión es verdadera:

'' == 0

Por el contrario, el operador de igualdad estricta ===dice que esto es falso:

'' === 0

Teniendo en cuenta eso ''y 0son más o menos iguales, podrías conjeturar razonablemente eso ''y nullson más o menos iguales. Sin embargo, no lo son.

Esta expresión es falsa:

'' == null

El resultado de comparar cualquier cadena con nulles falso. Por lo tanto, pass == nully todas sus otras pruebas son siempre falsas, y el usuario nunca recibe la alerta.

Para arreglar su código, compare cada valor con la cadena vacía:

pass === ''

Si está seguro de que passes una cadena, pass == ''también funcionará porque solo una cadena vacía es más o menos igual a la cadena vacía. Por otro lado, algunos expertos dicen que es una buena práctica usar siempre la igualdad estricta en JavaScript a menos que específicamente desee hacer la coerción de tipo que realiza el operador de igualdad suelta.

Si desea saber qué pares de valores son aproximadamente iguales, consulte la tabla "Comparaciones de igualdad" en el artículo de Mozilla sobre este tema .

Michael Laszlo
fuente
4

para verificar si está indefinido y nulo en javascript solo necesita escribir lo siguiente:

if (!var) {
        console.log("var IS null or undefined");
} else {
        console.log("var is NOT null or undefined");
}
Nejmeddine Jammeli
fuente
66
! var es verdadero con 0, "", NaN, y falso también.
Matt
3

Este es un comentario sobre la solución de WebWanderer con respecto a la verificación de NaN (todavía no tengo suficiente representante para dejar un comentario formal). La solución se lee como

if(!parseInt(variable) && variable != 0 && typeof variable === "number")

pero esto fallará para números racionales que se redondearían a 0, como variable = 0.1. Una mejor prueba sería:

if(isNaN(variable) && typeof variable === "number")
Gabriel
fuente
1
Gracias por señalar el error Gabriel, he puesto la solución en mi respuesta. Aparte de eso, pude arreglar la prueba cambiando parseInta parseFloat (que debería haber sido obvio para mí en primer lugar). Evité usar la isNanfunción porque siento que muchos desarrolladores ven funciones isNaNcomo una especie de "caja mágica" en la que entran los valores y salen los booleanos, y quería que la prueba fuera un poco más profunda. Pero sí, su prueba sugerida funcionará y está perfectamente bien para usar. Lo siento, no noté tu publicación hasta ahora.
WebWanderer
1
Genial, eso parece funcionar. Gracias por el comentario sobre por qué evitaste isNaNtambién, puedo apoyar esa lógica. También está el método Underscore.js, que parece aún más confuso / blackbox, pero vale la pena señalar de todos modos porque se aprovecha NaN !== NaN. Object.prototype.toString.call(variable) === '[object Number]' && variable !== +variable
Gabriel
2

En realidad, creo que puede necesitar usarlo if (value !== null || value !== undefined) porque si lo usa if (value)también puede filtrar 0 o valores falsos.

Considere estas dos funciones:

const firstTest = value => {
    if (value) {
        console.log('passed');
    } else {
        console.log('failed');
    }
}
const secondTest = value => {
    if (value !== null && value !== undefined) {
        console.log('passed');
    } else {
        console.log('failed');
    }
}

firstTest(0);            // result: failed
secondTest(0);           // result: passed

firstTest(false);        // result: failed
secondTest(false);       // result: passed

firstTest('');           // result: failed
secondTest('');          // result: passed

firstTest(null);         // result: failed
secondTest(null);        // result: failed

firstTest(undefined);    // result: failed
secondTest(undefined);   // result: failed

En mi situación, sólo necesitaba para comprobar si el valor es nulo e indefinido y que no quería para filtrar 0o falseo ''valores. así que usé la segunda prueba, pero es posible que también necesites filtrarlos, lo que puede hacer que uses la primera prueba.

Naeem Baghi
fuente
1

Encontré otra forma de probar si el valor es nulo:

if(variable >= 0 && typeof variable === "object")

nullactúa como numbery object, al mismo tiempo. Comparación null >= 0o null <= 0resultados en true. Comparando null === 0o null > 0o null < 0dará lugar a falsas. Pero como nulltambién es un objeto, podemos detectarlo como nulo.

Hice una función más compleja, la naturaleza de la bruja funcionará mejor que el tipo y se me puede decir qué tipos incluir o mantener agrupados

/* function natureof(variable, [included types])
included types are 
    null - null will result in "undefined" or if included, will result in "null"
    NaN - NaN will result in "undefined" or if included, will result in "NaN"
    -infinity - will separate negative -Inifity from "Infinity"
    number - will split number into "int" or "double"
    array - will separate "array" from "object"
    empty - empty "string" will result in "empty" or
    empty=undefined - empty "string" will result in "undefined"
*/
function natureof(v, ...types){
/*null*/            if(v === null) return types.includes('null') ? "null" : "undefined";
/*NaN*/             if(typeof v == "number") return (isNaN(v)) ? types.includes('NaN') ? "NaN" : "undefined" : 
/*-infinity*/       (v+1 === v) ? (types.includes('-infinity') && v === Number.NEGATIVE_INFINITY) ? "-infinity" : "infinity" : 
/*number*/          (types.includes('number')) ? (Number.isInteger(v)) ? "int" : "double" : "number";
/*array*/           if(typeof v == "object") return (types.includes('array') && Array.isArray(v)) ? "array" : "object";
/*empty*/           if(typeof v == "string") return (v == "") ? types.includes('empty') ? "empty" : 
/*empty=undefined*/ types.includes('empty=undefined') ? "undefined" : "string" : "string";
                    else return typeof v
}

// DEMO
let types = [null, "", "string", undefined, NaN, Infinity, -Infinity, false, "false", true, "true", 0, 1, -1, 0.1, "test", {var:1}, [1,2], {0: 1, 1: 2, length: 2}]

for(i in types){
console.log("natureof ", types[i], " = ", natureof(types[i], "null", "NaN", "-infinity", "number", "array", "empty=undefined")) 
}

Tarmo Saluste
fuente
1

Hice esta función muy simple que hace maravillas:

function safeOrZero(route) {
  try {
    Function(`return (${route})`)();
  } catch (error) {
    return 0;
  }
  return Function(`return (${route})`)();
}

La ruta es cualquier cadena de valores que pueda explotar. Lo uso para jQuery / cheerio y objetos y tal.

Ejemplos 1: un objeto simple como este const testObj = {items: [{ val: 'haya' }, { val: null }, { val: 'hum!' }];};.

Pero podría ser un objeto muy grande que ni siquiera hemos hecho. Entonces lo paso por:

let value1 = testobj.items[2].val;  // "hum!"
let value2 = testobj.items[3].val;  // Uncaught TypeError: Cannot read property 'val' of undefined

let svalue1 = safeOrZero(`testobj.items[2].val`)  // "hum!"
let svalue2 = safeOrZero(`testobj.items[3].val`)  // 0

Por supuesto, si lo prefiere, puede usar nullo 'No value'... lo que se adapte a sus necesidades.

Por lo general, una consulta DOM o un selector jQuery puede arrojar un error si no se encuentra. Pero usando algo como:

const bookLink = safeOrZero($('span.guidebook > a')[0].href);
if(bookLink){
  [...]
}
Carles Alcolea
fuente
1

Puede usar el módulo lodash para verificar que el valor sea nulo o indefinido

_.isNil(value)
Example 

 country= "Abc"
    _.isNil(country)
    //false

   state= null
    _.isNil(state)
    //true

city= undefined
    _.isNil(state)
    //true

   pin= true
    _.isNil(pin)
    // false   

Enlace de referencia: https://lodash.com/docs/#isNil

Ashita.gupta
fuente
0

Esto no funcionará en caso de que los valores booleanos provengan de DB para ex:

 value = false

 if(!value) {
   // it will change all false values to not available
   return "not available"
 }
Codiee
fuente
0

AFAIK en JAVASCRIPT cuando una variable se declara pero no tiene un valor asignado, su tipo es undefined. para que podamos verificar la variable incluso si se tratara de objectmantener alguna instancia en lugar de valor .

cree un método auxiliar para verificar la nulidad que devuelve truey úselo en su API.

función auxiliar para verificar si la variable está vacía:

function isEmpty(item){
    if(item){
        return false;
    }else{
        return true;
    }
}

llamada de API excepcional try-catch:

try {

    var pass, cpass, email, cemail, user; // only declared but contains nothing.

    // parametrs checking
    if(isEmpty(pass) || isEmpty(cpass) || isEmpty(email) || isEmpty(cemail) || isEmpty(user)){
        console.log("One or More of these parameter contains no vlaue. [pass] and-or [cpass] and-or [email] and-or [cemail] and-or [user]");
    }else{
        // do stuff
    }

} catch (e) {
    if (e instanceof ReferenceError) {
        console.log(e.message); // debugging purpose
        return true;
    } else {
        console.log(e.message); // debugging purpose
        return true;
    }
}

algunos casos de prueba:

var item = ""; // isEmpty? true
var item = " "; // isEmpty? false
var item; // isEmpty? true
var item = 0; // isEmpty? true
var item = 1; // isEmpty? false
var item = "AAAAA"; // isEmpty? false
var item = NaN; // isEmpty? true
var item = null; // isEmpty? true
var item = undefined; // isEmpty? true

console.log("isEmpty? "+isEmpty(item));
Kaleem Ullah
fuente
1
¿Qué? Esta respuesta no tiene nada que ver con esta publicación. ¿Publicaste esta respuesta en este hilo por accidente?
WebWanderer el
Esta isEmptyfunción se comporta exactamente igual !. No es necesario inventar una función. Solo hazlo if (!pass || !cpass || !email ...). (Que ya se muestra en la respuesta aceptada). Y según el comentario de WebWanderer, la parte central de esta publicación, "llamada de API excepcional try-catch", no parece ser relevante para esta pregunta. Explique su intención: ¿cuándo es útil? ¿Cómo se relaciona eso con la pregunta?
ToolmakerSteve
0

Comprobación de condiciones de error:

// Typical API response data
let data = {
  status: true,
  user: [],
  total: 0,
  activity: {sports: 1}
}

// A flag that checks whether all conditions were met or not
var passed = true;

// Boolean check
if (data['status'] === undefined || data['status'] == false){
  console.log("Undefined / no `status` data");
  passed = false;
}

// Array/dict check
if (data['user'] === undefined || !data['user'].length){
  console.log("Undefined / no `user` data");
  passed = false;
}

// Checking a key in a dictionary
if (data['activity'] === undefined || data['activity']['time'] === undefined){
   console.log("Undefined / no `time` data");
   passed = false;
}

// Other values check
if (data['total'] === undefined || !data['total']){
  console.log("Undefined / no `total` data");
  passed = false;
}

// Passed all tests?
if (passed){
  console.log("Passed all tests");
}
PD
fuente
-1

Prueba esto:

if (!variable && typeof variable === "object") {
    // variable is null
}
usuario5520516
fuente
nulo es lo único que es "falso" y typeof devuelve "objeto".
user5520516
2
¿Cómo es eso mejor que if (variable === null)? También alguien ya proporcionó esa respuesta el año pasado: stackoverflow.com/a/27550756/218196 .
Felix Kling