web-dev-qa-db-fra.com

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 méthode de vérification moins verbeuse ayant le même effet?

Selon certains forums et publications disant 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 au moment de l'exécution lorsque some_variable n'est pas défini, alors que le premier convient parfaitement. S'agit-il uniquement d'un comportement (indésirable) de Firebug ou existe-t-il vraiment une différence entre ces deux méthodes?

javascriptnullundefined
424
Tomas Vana

Vous devez différencier deux cas:

  1. Undefined variables, comme foo. Vous obtiendrez une erreur si vous accédez à une variable non définie dans un contexte autre que typeof. 

    if(typeof someUndefVar == whatever) // works

if(someUndefVar) // throws error

    Donc, pour les variables, la vérification typeof est indispensable. De l’autre côté, cela n’est que rarement nécessaire - vous savez généralement savoir si vos variables sont définies ou non.

  2. Undefined properties, comme someExistingObj.someUndefProperty. Une propriété non définie ne génère pas d'erreur et renvoie simplement undefined, qui, une fois convertie en un booléen, est évaluée à false. Donc, si vous ne vous souciez pas de 0 et false, utiliser if(obj.undefProp) est correct. Il y a un langage commun basé sur ce fait:

    value = obj.prop || defaultValue

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

    Certaines personnes considèrent que ce comportement est déroutant, arguant qu'il entraîne des erreurs difficiles à trouver et recommande d'utiliser plutôt l'opérateur in

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

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

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

Donc, ces deux lignes sont é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 que some_variable ait été déclaré, sinon une erreur ReferenceError sera émise. Cependant, dans de nombreux cas d'utilisation, vous pouvez supposer que cela est sans danger:

vérifier les arguments optionnels:

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

rechercher des propriétés sur un objet existant

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

D'autre part, typeof peut 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'explique Alsciende.

Note 2

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

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

alors

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 === au lieu de ==..__ La solution proposée est une exception à cette règle. Le vérificateur de syntaxe JSHint fournit même l'option eqnull pour cette raison.

À partir du guide de style jQuery :

Des contrôles d'égalité stricts (===) doivent être utilisés en faveur de ==. Le seul exception est lors de la vérification de indéfini et null au moyen de null.

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

Dans les nouvelles normes JavaScript telles que 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 "indéfini" seront gérés efficacement.

26
Naren Yellavula

Si vous essayez de référencer une variable non déclarée, une erreur sera généré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 avec le fait que les variables globales sont accessibles en tant que propriétés de l'objet global (window dans le cas d'un navigateur), vous pouvez utiliser les éléments suivants pour les variables globales:

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

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

18
Andy E

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

Une fonction, test(val), qui teste null ou undefined devrait 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 sont les idées ici qui passent réellement notre test.

Ceux-ci fonctionnent:

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 la performance de ces approches. Les résultats ne sont pas concluants pour le moment car il n'y a pas eu suffisamment de sorties sur différents navigateurs/plates-formes. S'il vous plaît, prenez une minute pour exécuter le test sur votre ordinateur!

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

14
Drew Noakes

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
}
5
DDave

J'ai fait cela en utilisant cette méthode

enregistre l'identifiant dans une variable 

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

puis utiliser si condition

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

Puisqu'il n'y a pas une seule réponse 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 la variable variable pourrait ne pas être déclarée. Si vous omettez la typeof(variable) != "undefined", vous obtiendrez ReferenceError. Mais, vous pouvez simplifier l'expression en fonction du contexte :

Si la variable est global , vous pouvez simplifier pour:

if (window.variable != null)

S'il s'agit de local , vous pouvez probablement éviter les situations où cette variable est non déclarée et simplifier également:

if (variable != null)

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

if (obj.property != null)
4
TMS

Comme mentionné dans l'une des réponses, vous pouvez avoir de la chance si vous parlez d'une variable ayant 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 tirer parti de ce fait, disons que vous accédez à une variable appelée bleh, utilisez simplement l'opérateur double inversé (!!) 

!!window['bleh'];

Cela renverrait un faux tant que bleh n'a pas été déclaré ET qu'une valeur lui a été attribuée.

3
Farax

Ouvrez les outils Developer dans votre navigateur et essayez le code indiqué dans l'image ci-dessous.

 Img1  Img2

2
Akash Preet

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

 enter image description here

Vous pouvez voir que tous sont en train de convertir en false, ce qui signifie que tous les trois supposent un «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");
}

Aussi, je tiens à 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 de vérifier cela lorsque vous écrivez le code.

2
Code-EZ

quel que soit yyy n'est pas défini ou est 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

2
Terry Lin

c'est le seul cas dans lequel == devrait être utilisé:

if (val == null) console.log('val is null or undefined')
1
Yukulélé

Les deux valeurs peuvent être facilement distinguées à l'aide de 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.");
    }   
}
0
Sohail Arif

voici une autre manière en utilisant la méthode Array includes () :

[undefined, null].includes(value)
0
Jason

Tester la nullité (if (value == null)) ou la non-nullité (if (value != null)) est moins détaillé que de tester le statut de définition d'une variable.

De plus, tester if (value) (ou if( obj.property)) pour vérifier l'existence de votre variable (ou propriété d'objet) échoue s'il est défini avec une valeur booléenne false. Caveat emptor :)

0
lucsorel

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

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

0
gpap