Comment vérifier une variable non définie ou nulle en JavaScript?

Nous utilisons fréquemment le modèle de code suivant dans notre code JavaScript

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

Existe-t-il une manière moins verbeuse de vérifier qui a le même effet?

Selon certains forums et la littérature, simplement ce qui suit devrait avoir le même effet.

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

Malheureusement, Firebug évalue une telle déclaration comme une erreur lors de l'exécution lorsqu'elle some_variablen'est pas définie, tandis que la première est très bien pour cela. Est-ce seulement un comportement (indésirable) de Firebug ou y a-t-il vraiment une différence entre ces deux façons?

Vous devez différencier les cas:

1. Les variables peuvent être undefinedou non déclarées . Vous obtiendrez une erreur si vous accédez à une variable non déclarée dans un autre contexte que typeof.

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

Une variable déclarée mais non initialisée est undefined.

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

2. Propriétés non définies , comme someExistingObj.someUndefProperty. Une propriété non définie ne génère pas d'erreur et renvoie simplement undefined, qui, lorsqu'elle est convertie en booléen, est évaluée false. Donc, si vous ne vous souciez pas 0et false, l'utilisation if(obj.undefProp)est ok. Il existe un idiome commun basé sur ce fait:

   value = obj.prop || defaultValue

   ce qui signifie "si objpossède la propriété prop, affectez-la à value, sinon affectez la valeur par défaut defautValue".

   Certaines personnes considèrent ce comportement déroutant, arguant qu'il conduit à des erreurs difficiles à trouver et recommandant d'utiliser l' inopérateur à la place

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

Je pense que le moyen le plus efficace de tester la "valeur est nullou undefined" est

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

Ces deux lignes sont donc équivalentes:

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

Note 1

Comme mentionné dans la question, la variante courte nécessite d' some_variableavoir été déclarée, sinon une ReferenceError sera levée. Cependant, dans de nombreux cas d'utilisation, vous pouvez supposer que cela est sûr:

vérifiez les arguments facultatifs:

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

vérifier les propriétés d'un objet existant

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

D'autre part, typeofpeut traiter des variables globales non déclarées (renvoie simplement undefined). Pourtant, ces cas devraient être réduits au minimum pour de bonnes raisons, comme l'a expliqué Alsciende.

Note 2

Cette variante - encore plus courte - n'est pas équivalente:

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

donc

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

Note 3

En général, il est recommandé d'utiliser à la ===place de ==. La solution proposée fait exception à cette règle. Le vérificateur de syntaxe JSHint fournit même l' eqnulloption pour cette raison.

À partir du guide de style jQuery :

Des contrôles d'égalité stricts (===) doivent être utilisés en faveur de ==. La seule exception est lors de la vérification de non défini et null par le biais de null.

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

La vérification de null avec une égalité normale renvoie également true pour undefined.

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

Dans les normes JavaScript plus récentes comme ES5 et ES6, vous pouvez simplement dire

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

tous renvoient false, ce qui est similaire à la vérification par Python des variables vides. Donc, si vous voulez écrire une logique conditionnelle autour d'une variable, dites simplement

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

ici "null" ou "chaîne vide" ou "non défini" seront gérés efficacement.

Si vous essayez de référencer une variable non déclarée, une erreur sera levée dans toutes les implémentations JavaScript.

Les propriétés des objets ne sont pas soumises aux mêmes conditions. Si une propriété d'objet n'a pas été définie, une erreur ne sera pas générée si vous essayez d'y accéder. Donc, dans cette situation, vous pouvez raccourcir:

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

à

if (myObj.some_property != null)

Dans cet esprit, et du fait que les variables globales sont accessibles en tant que propriétés de l'objet global ( windowdans le cas d'un navigateur), vous pouvez utiliser ce qui suit pour les variables globales:

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

Dans les étendues locales, il est toujours utile de s'assurer que les variables sont déclarées en haut de votre bloc de code, cela économisera sur les utilisations récurrentes de typeof.

Tout d'abord, vous devez être très clair sur ce que vous testez. JavaScript a toutes sortes de conversions implicites pour vous déclencher, et deux types différents de comparateur d'égalité: ==et ===.

Une fonction test(val)qui teste nullou undefineddevrait avoir les caractéristiques suivantes:

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

Voyons quelles idées ici passent réellement notre test.

Ces travaux:

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

Ceux-ci ne fonctionnent pas:

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

J'ai créé une entrée jsperf pour comparer l'exactitude et les performances de ces approches. Les résultats ne sont pas concluants pour le moment car il n'y a pas eu suffisamment d'exécutions sur différents navigateurs / plates-formes. Veuillez prendre une minute pour exécuter le test sur votre ordinateur!

À l'heure actuelle, il semble que le val == nulltest simple donne les meilleures performances. C'est aussi à peu près le plus court. Le test peut être annulé val != nullsi vous voulez le complément.

c'est le seul cas dans lequel ==il faut utiliser:

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

Puisqu'il n'y a pas de réponse unique complète et correcte, je vais essayer de résumer:

En général, l'expression:

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

ne peut pas être simplifié, car le variablepourrait être non déclaré, donc l'omission typeof(variable) != "undefined"entraînerait ReferenceError. Mais, vous pouvez simplifier l'expression en fonction du contexte :

Si le variableest global , vous pouvez simplifier pour:

if (window.variable != null)

Si elle est locale , vous pouvez probablement éviter les situations où cette variable n'est pas déclarée, et simplifier également pour:

if (variable != null)

S'il s'agit d' une propriété d'objet , vous n'avez pas à vous soucier de ReferenceError:

if (obj.property != null)

Vous pouvez simplement vérifier si la variable a une valeur ou non. Sens,

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

}

Si vous ne savez pas si une variable existe (c'est-à-dire si elle a été déclarée), vous devriez vérifier avec l'opérateur typeof. par exemple

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

Je l'ai fait en utilisant cette méthode

enregistrer l'identifiant dans une variable

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

puis utiliser si condition

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

Ceci est un exemple d'une occasion très rare où il est recommandé d'utiliser à la ==place de ===. L'expression somevar == nullrenvoie true pour undefinedet null, mais false pour tout le reste (une erreur si la variable n'est pas déclarée).

L'utilisation de la !=touche inversera le résultat, comme prévu.

Les éditeurs modernes ne vous avertiront pas pour l'utilisation ==ou l' !=opérateur null, car c'est presque toujours le comportement souhaité.

Comparaisons les plus courantes:

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

Essayez-le vous-même:

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

Comme mentionné dans l'une des réponses, vous pouvez avoir de la chance si vous parlez d'une variable qui a une portée globale. Comme vous le savez peut-être, les variables que vous définissez globalement ont tendance à être ajoutées à l'objet Windows. Vous pouvez profiter de ce fait, alors disons que vous accédez à une variable appelée bleh, utilisez simplement l'opérateur double inversé (!!)

!!window['bleh'];

Cela retournerait un faux alors que bleh n'a pas été déclaré ET assigné une valeur.

voici une autre façon d'utiliser la méthode Array includes () :

[undefined, null].includes(value)

quel que soit aaa est indéfini ou nul, il retournera vrai

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

Oui

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

non

Ouvrez les outils de développement dans votre navigateur et essayez simplement le code affiché dans l'image ci-dessous.

Afin de comprendre, analysons quelle sera la valeur renvoyée par le moteur Javascript lors de la conversion non définie, null et '' (une chaîne vide également). Vous pouvez directement vérifier la même chose sur votre console développeur.

Vous pouvez voir que tous se convertissent en faux, ce qui signifie que tous ces trois supposent le «manque d'existence» par javascript. Vous n'avez donc pas besoin de vérifier explicitement les trois dans votre code comme ci-dessous.

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

Je voudrais également souligner une dernière chose.

Quel sera le résultat de Boolean (0)?

Bien sûr, faux. Cela créera un bogue dans votre code lorsque 0 est une valeur valide dans votre résultat attendu. Assurez-vous donc de vérifier cela lorsque vous écrivez le code.

Semblable à ce que vous avez, vous pourriez faire quelque chose comme

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

Le test de nullité ( if (value == null)) ou de non-nullité ( if (value != null)) est moins détaillé que le test de l'état de définition d'une variable.

De plus, le test if (value)(ou if( obj.property)) pour garantir l'existence de votre variable (ou propriété d'objet) échoue s'il est défini avec une falsevaleur booléenne . Caveat emptor :)

Les deux valeurs peuvent être facilement distinguées en utilisant l'opérateur de comparaison strict:

Exemple de travail à:

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

Exemple de code:

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 le but de l'instruction if est de rechercher des valeurs nullou undefinedavant d'attribuer une valeur à une variable, vous pouvez utiliser l' opérateur de coalescence nul , enfin disponible sur JavaScript, bien que la prise en charge du navigateur soit limitée. Selon les données de caniuse , seulement 48,34% des navigateurs sont pris en charge (en avril 2020).

const a = some_variable ?? '';

Cela garantira que la variable sera affectée à une chaîne vide (ou toute autre valeur par défaut) si some_variableest nullou undefined.

Cet opérateur est le plus adapté à votre cas d'utilisation, car il ne renvoie pas la valeur par défaut pour les autres types de valeur de falsification tels que 0et ''.

Vous devez définir une fonction de ce formulaire:

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

Dans ES5 ou ES6, si vous avez besoin de le vérifier plusieurs fois, vous pouvez le faire:

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

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

Avec Ramda, vous pouvez simplement faire R.isNil(yourValue) Lodash et d'autres bibliothèques d'aide ont la même fonction.