web-dev-qa-db-fra.com

Vérification JavaScript si la variable existe (est définie / initialisée)

Quelle méthode pour vérifier si une variable a été initialisée est meilleure/correcte? (En supposant que la variable puisse contenir n'importe quoi (chaîne, int, objet, fonction, etc.))

if (elem) { // or !elem

ou

if (typeof(elem) !== 'undefined') {

ou

if (elem != null) {
javascriptvariablesif-statementinitializationundefined
1565
Samuel Liew

L'opérateur typeof vérifiera si la variable est vraiment non définie.

if (typeof variable === 'undefined') {
    // variable is undefined
}

Contrairement aux autres opérateurs, l'opérateur typeof ne génère pas d'exception ReferenceError lorsqu'il est utilisé avec une variable non déclarée.

Cependant, notez que typeof null retournera "object". Nous devons faire attention à éviter l'erreur d'initialisation d'une variable sur null. Pour être sûr, voici ce que nous pourrions utiliser à la place:

if (typeof variable === 'undefined' || variable === null) {
    // variable is undefined or null
}

Pour plus d'informations sur l'utilisation de la comparaison stricte === au lieu de la simple égalité ==, voir:
Quel opérateur égal (== vs ===) devrait être utilisé dans les comparaisons JavaScript?

791
Samuel Liew

Vous voulez l'opérateur typeof . Plus précisément:

if (typeof variable !== 'undefined') {
    // the variable is defined
}
2827
Jim Puls

En JavaScript, une variable peut être définie, mais conserve la valeur undefined, de sorte que la réponse la plus commune n'est pas techniquement correcte et effectue plutôt les opérations suivantes:

if (typeof v === "undefined") {
   // no variable "v" is defined in the current scope
   // *or* some variable v exists and has been assigned the value undefined
} else {
   // some variable (global or local) "v" is defined in the current scope
   // *and* it contains a value other than undefined
}

Cela peut suffire à vos fins. Le test suivant a une sémantique plus simple, ce qui facilite la description précise du comportement de votre code et sa compréhension par vous-même (si vous vous souciez de ce genre de choses):

if ("v" in window) {
   // global variable v is defined
} else {
   // global variable v is not defined
}

Ceci, bien sûr, suppose que vous utilisez un navigateur (où window est le nom de l’objet global). Mais si vous bricolez avec de tels globaux, vous êtes probablement dans un navigateur. Subjectivement, utiliser 'name' in window est stylistiquement cohérent avec l'utilisation de window.name pour faire référence à des éléments globaux. Accéder aux éléments globaux en tant que propriétés de window plutôt qu'en tant que variables vous permet de minimiser le nombre de variables non déclarées que vous référencez dans votre code (au profit du linting), et vous évite que votre variable globale ne soit masquée par une variable locale. En outre, si les globaux font que votre peau se traîne, vous pourriez vous sentir plus à l'aise de les toucher uniquement avec ce bâton relativement long.

200
Brian Kelley

Dans de nombreux cas, en utilisant:

if (elem) { // or !elem

fera le travail pour vous! ... ceci vérifiera les cas suivants:

  1. undefined : si la valeur n'est pas définie et que c'est undefined
  2. null : s'il est nul, par exemple, si un élément DOM n'existe pas ...
  3. chaîne vide : ''
  4. 0 : numéro zéro
  5. NaN : pas un nombre
  6. false

Donc, cela couvrira tous les cas, mais il y a toujours des cas étranges que nous voudrions couvrir, par exemple, une chaîne avec des espaces, comme celle-ci ' ', elle sera définie en javascript car elle contient des espaces string ... par exemple, dans ce cas, vous ajoutez une vérification supplémentaire en utilisant trim (), comme:

if(elem) {

if(typeof elem === 'string' && elem.trim()) {
///

De plus, ces vérifications ne concernent que les valeurs , car les objets et les tableaux fonctionnent différemment en Javascript, les tableaux vides [] et les objets vides {} sont toujours vrai .

Je crée l'image ci-dessous pour montrer un bref résumé de la réponse:

undefined, null, etc

184
Alireza

Dans la majorité des cas, vous utiliseriez:

elem != null

Contrairement à un simple if (elem), il autorise 0, false, NaN et '', mais rejette null ou undefined, en faisant C’est un bon test général pour la présence d’un argument ou de la propriété d’un objet.

Les autres contrôles ne sont pas incorrects non plus, ils ont juste des utilisations différentes:

  • if (elem): peut être utilisé s'il est garanti que elem est un objet ou si false, 0, etc., sont considérés comme des valeurs "par défaut" (donc équivalentes à undefined ou null).

  • typeof elem == 'undefined' peut être utilisé dans les cas où un null spécifié a une signification distincte pour une variable ou une propriété non initialisée.

    • C’est la seule vérification que ne jettera pas d’erreur si elem n’est pas déclarée (c’est-à-dire qu’aucune déclaration var ne constitue pas une propriété de window, ou pas un argument de fonction). Ceci est, à mon avis, plutôt dangereux car cela laisse passer des fautes de frappe inaperçues. Pour éviter cela, voir la méthode ci-dessous.

Une comparaison stricte avec undefined:

if (elem === undefined) ...

Cependant, étant donné que la variable globale undefined peut être remplacée par une autre valeur, il est préférable de déclarer la variable undefined dans la portée actuelle avant de l'utiliser:

var undefined; // really undefined
if (elem === undefined) ...

Ou:

(function (undefined) {
    if (elem === undefined) ...
})();

Un autre avantage de cette méthode est que les minificateurs JS peuvent réduire la variable undefined à un seul caractère, ce qui vous fait économiser quelques octets à chaque fois.

116
David Tang

Comment vérifier si une variable existe

C'est une jolie solution à l'épreuve des balles pour tester si une variable existe et a été initialisée:

var setOrNot = typeof variable !== typeof undefined;

Il est le plus souvent utilisé en combinaison avec un opérateur ternaire pour définir une valeur par défaut au cas où une certaine variable n'aurait pas été initialisée:

var dark = typeof darkColor !== typeof undefined ? darkColor : "black";

Problèmes d'encapsulation

Malheureusement, vous ne pouvez pas simplement encapsuler votre chèque dans une fonction.

Vous pourriez penser à faire quelque chose comme ça:

function isset(variable) {
    return typeof variable !== typeof undefined;
}

Cependant, cela produira une erreur de référence si vous appelez, par exemple. isset(foo) et la variable foo n'a pas été définie, car vous ne pouvez pas transmettre une variable non existante à une fonction:

Uncaught ReferenceError: foo n'est pas défini

Tester si les paramètres de la fonction sont indéfinis

Bien que notre fonction isset ne puisse pas être utilisée pour vérifier si une variable existe ou non (pour les raisons expliquées ci-dessus), elle nous permet de tester si les paramètres d'une fonction sont indéfinis:

var a = '5';

var test = function(x, y) {
    console.log(isset(x));
    console.log(isset(y));
};

test(a);

// OUTPUT :
// ------------
// TRUE
// FALSE

Bien qu'aucune valeur pour y ne soit transmise à la fonction test, notre fonction isset fonctionne parfaitement dans ce contexte, car y est connu dans la fonction test comme une valeur undefined.

66
John Slegers

Vérifiez si window . hasOwnProperty (" varname ")

Une alternative à la pléthore de réponses typeof;

Global variables déclarées avec une instruction var varname = value; dans l'étendue globale

peut être consulté en tant que propriétés de l’objet window.

En tant que telle, la méthode hasOwnProperty(), qui

renvoie un booléen indiquant si l'objet a la propriété spécifiée comme sa propre propriété (par opposition à son héritage)

peut être utilisé pour déterminer si

var of "varname" a été déclaré globalement i.e. est une propriété de window.

// Globally established, therefore, properties of window
var foo = "whatever", // string
    bar = false,      // bool
    baz;              // undefined
//  window.qux does not exist

console.log( [
    window.hasOwnProperty( "foo" ), // true
    window.hasOwnProperty( "bar" ), // true
    window.hasOwnProperty( "baz" ), // true
    window.hasOwnProperty( "qux" )  // false
] );

Le point positif de hasOwnProperty() est qu’en l’appelant, nous n’utilisons pas de variable qui pourrait encore ne pas être déclarée - ce qui bien sûr est la moitié du problème.

Bien que ce ne soit pas toujours la solution parfaite ou idéale, dans certaines circonstances, il ne s'agit que du travail!

Remarques

Ce qui précède est vrai lorsque vous utilisez var pour définir une variable , par opposition à let lequel:

déclare une variable locale de portée de bloc, en l'initialisant éventuellement à une valeur.

est différent du mot clé var, qui définit une variable globalement ou localement sur une fonction entière, quelle que soit la portée du bloc.

Au niveau supérieur des programmes et des fonctions, let, contrairement à var, ne crée pas de propriété sur l'objet global.

Pour être complet: const les constantes ne sont, par définition, pas variables (bien que leur contenu puisse l'être) ; plus pertinent:

Les constantes globales ne deviennent pas des propriétés de l'objet window, contrairement aux variables var. Un initialiseur pour une constante est requis; c'est-à-dire que vous devez spécifier sa valeur dans la même déclaration dans laquelle elle est déclarée.

La valeur d'une constante ne peut pas changer par réaffectation et elle ne peut pas être redéclarée.

La déclaration const crée une référence en lecture seule à une valeur. Cela ne signifie pas que la valeur qu'il détient est immuable, mais simplement que l'identificateur de variable ne peut pas être réaffecté.

Étant donné que les variables let et les constantes const ne sont jamais les propriétés d'un objet ayant hérité de la méthode hasOwnProperty(), il ne peut pas être utilisé pour en vérifier l'existence.

Concernant la disponibilité et l'utilisation de hasOwnProperty():

Chaque objet issu de Object hérite de la méthode hasOwnProperty(). [...] contrairement à l'opérateur in , cette méthode ne vérifie pas la chaîne de prototypes de l'objet.

54
Fred Gandt

Il existe un autre moyen simple de vérifier cela lorsque vous effectuez des tâches simples et des contrôles associés. Utilisez simplement opérateur conditionnel (ternaire). 

var values = typeof variable !== 'undefined' ? variable : '';

Cela vous sera également utile lorsque vous tenterez de déclarer la variable globale avec une affectation d'instance de la variable de référence.

Si vous voulez vérifier la variable ne devrait pas être undefined ou null. Ensuite, effectuez une vérification ci-dessous.

Lorsque la variable est déclarée et que vous souhaitez vérifier la valeur, il s'agit même de Simple: et vous obtiendrez undefined et null vérifie ensemble. 

var values = variable ? variable : '';
42
RajeshKdev

Cela dépend si vous voulez que la variable ait été définie ou si vous voulez qu'elle ait une valeur significative.

Vérifier si le type est indéfini vérifiera si la variable a déjà été définie.

=== null ou !== null vérifie uniquement si la valeur de la variable est exactement null.

== null ou != null vérifiera si la valeur est undefined ou null.

if(value) vérifie si la variable est undefined, null, 0 ou une chaîne vide.

29
Alan Geleynse

indéfini, booléen, chaîne, nombre, fonction

 if (typeof foo! == 'indéfini') {
 
}

Objet, tableau

if( foo instanceof Array ) { 

}
28
Yuan Zhaohao

La réponse la plus élevée est correcte, utilisez typeof.

Cependant, ce que je voulais souligner, c’est que javascript undefined est mutable (pour une raison impie). Donc, faire simplement une vérification de varName !== undefined a le potentiel de ne pas toujours revenir comme prévu, car d'autres bibliothèques auraient pu être modifiées de manière indéfinie. Quelques réponses (celles de @ skalee, par exemple) semblent préférer ne pas utiliser typeof, ce qui peut poser problème.

La "vieille" façon de gérer cela consistait à déclarer non défini en tant que var pour compenser tout éventuel muting/dépassement de undefined. Cependant, le meilleur moyen consiste toujours à utiliser typeof car il ignorera toute substitution de undefined par un autre code. Surtout si vous écrivez du code pour une utilisation dans la nature où qui sait quoi d'autre pourrait être exécuté sur la page ...

12
shadowstorm
if (typeof console != "undefined") {    
   ...
}

Ou mieux

if ((typeof console == "object") && (typeof console.profile == "function")) {    
   console.profile(f.constructor);    
}

Fonctionne dans tous les navigateurs

11
boslior

Le moyen court de tester une variable non déclarée (non indéfinie) est

if (typeof variable === "undefined") {
  ...
}

Je l'ai trouvé utile pour détecter un script exécuté en dehors d'un navigateur (ne pas avoir déclaré la variable window).

10
user2878850

Pour contribuer au débat, si je sais que la variable doit être une chaîne ou un objet, je préfère toujours if (!variable), afin de vérifier si elle est falsifiée. Cela peut amener à un code plus propre de telle sorte que, par exemple:

if (typeof data !== "undefined" && typeof data.url === "undefined") {
    var message = 'Error receiving response';
    if (typeof data.error !== "undefined") {
        message = data.error;
    } else if (typeof data.message !== "undefined") {
        message = data.message;
    }
    alert(message); 
}

..peut être réduit à:

if (data && !data.url) {
  var message = data.error || data.message || 'Error receiving response';
  alert(message)
}
9
de3

Il est difficile de faire la distinction entre indéfini et nul. Null est une valeur que vous pouvez affecter à une variable lorsque vous souhaitez indiquer que la variable n'a pas de valeur particulière. ndefined est une valeur spéciale qui sera la valeur par défaut des variables non attribuées.


var _undefined;
var _null = null;

alert(_undefined); 
alert(_null); 
alert(_undefined == _null);
alert(_undefined === _null);
8
Jith

Null est une valeur en JavaScript et typeof null renvoie "object"

Par conséquent, la réponse acceptée ne fonctionnera pas si vous transmettez des valeurs nulles. Si vous transmettez des valeurs NULL, vous devez ajouter une vérification supplémentaire pour les valeurs NULL:

if ((typeof variable !== "undefined") && (variable !== null))  
{
   // the variable is defined and not null
}
8
Razan Paul

Ces réponses (hormis la solution de Fred Gandt) sont toutes incorrectes ou incomplètes.

Supposons que j’ai besoin de mon variableName; pour porter une valeur de undefined, et qu’elle a donc été déclarée de la manière suivante: var variableName;, ce qui signifie qu’elle est déjà initialisée; - Comment puis-je vérifier si c'est déjà déclaré?

Ou même mieux - comment puis-je vérifier immédiatement si "Book1.chapter22. paragraph37" existe avec un seul appel sans créer une erreur de référence?

Nous le faisons en utilisant le plus puissant opérateur JasvaScript, l'opérateur in:

"[variable||property]" in [context||root] 
>> true||false

En période de AJAX popularité maximale j'ai écrit une méthode (nommée plus tard) isNS () qui est capable de déterminer si l'espace de noms existe, y compris des tests approfondis pour les noms de propriétés tels que "Book1.chapter22. paragraph37" et beaucoup plus.

Mais depuis qu'il a été publié précédemment et en raison de sa grande importance, il mérite d'être publié dans un fil séparé. Je ne le posterai pas ici, mais fournirai des mots clés (javascript + isNS) qui vous aideront à localiser le code source, accompagné de toutes les explications nécessaires.

7
Bekim Bacaj

La vérification la plus robuste est-elle définie avec typeof 

if (typeof elem === 'undefined')

Si vous recherchez simplement une variable définie pour attribuer une valeur par défaut, vous pouvez souvent procéder comme suit:

elem = elem || defaultElem;

Il est souvent bon de l'utiliser, voir: moyen idiomatique de définir la valeur par défaut en javascript

Il y a aussi cette ligne qui utilise le mot-clé typeof :

elem = (typeof elem === 'undefined') ? defaultElem : elem;
7
Zv_oDD

vous pouvez utiliser l'opérateur typeof.

Par exemple,

var dataSet;

alert("Variable dataSet is : " + typeof dataSet);

L'extrait de code ci-dessus renverra la sortie comme

dataSet variable est: undefined.

7
Ravindra Miyani

Dans la situation particulière décrite dans la question,

typeof window.console === "undefined"

est identique à

window.console === undefined

Je préfère ce dernier car c'est plus court.

Veuillez noter que nous recherchons console uniquement dans la portée globale (qui est un objet window dans tous les navigateurs). Dans cette situation particulière, c'est souhaitable. Nous ne voulons pas que console soit définie ailleurs.

@BrianKelley dans sa grande réponse explique les détails techniques. J'ai seulement ajouté une conclusion manquante et l'ai digérée en quelque chose de plus facile à lire.

6
skalee

J'utilise deux manières différentes en fonction de l'objet.

if( !variable ){
  // variable is either
  // 1. '';
  // 2. 0;
  // 3. undefined;
  // 4. null;
  // 5. false;
}

Parfois, je ne veux pas évaluer une chaîne vide en tant que falsey, alors j'utilise ce cas

function invalid( item ){
  return (item === undefined || item === null);
}

if( invalid( variable )){
  // only here if null or undefined;
}

Si vous avez besoin du contraire, alors dans un premier temps! Variable devient !! variable et dans la fonction non valide ===, devenez! = Et le nom de la fonction devient notInvalid.

5
SoEzPz

Si vous voulez que le bloc défini fasse quelque chose, utilisez ceci

if (typeof variable !== 'undefined') {
    // the variable is defined
}

Si vous voulez qu'un bloc non défini fasse quelque chose, ou affecte ou définisse la variable, utilisez cette commande.

if (typeof variable === 'undefined') {
    // the variable is undefined
}
5
Vinayak Shedgeri

Ma préférence est typeof(elem) != 'undefined' && elem != null.

Quel que soit votre choix, envisagez de placer la vérification dans une fonction comme celle-ci.

function existy (x) {
    return typeof (x) != 'undefined' && x != null;
}

Si vous ne savez pas que la variable est déclarée, continuez avec typeof (x) != 'undefined' && x != null;

Si vous savez que la variable est déclarée mais n’existe peut-être pas, vous pouvez utiliser

existy(elem) && doSomething(elem);

La variable que vous vérifiez peut parfois être une propriété imbriquée. Vous pouvez utiliser prop || {} pour parcourir la ligne vérifiant l’existence de la propriété en question:

var exists = ((((existy(myObj).prop1||{}).prop2||{}).prop3||{})[1]||{}).prop4;

Après chaque propriété, utilisez (... '|| {}'). NextProp pour qu'une propriété manquante ne génère pas d'erreur.

Ou vous pouvez utiliser existy comme existy(o) && existy(o.p) && existy(o.p.q) && doSomething(o.p.q)

4
curtwphillips

Ça dépend de la situation. Si vous recherchez quelque chose qui peut ou non avoir été défini globalement en dehors de votre code (comme jQuery peut-être), vous voulez:

if (typeof(jQuery) != "undefined")

(Pas besoin d'égalité stricte là-bas, typeof renvoie toujours une chaîne.) Mais si vous avez des arguments pour une fonction qui peuvent avoir été passés ou non, ils seront toujours définis, mais ils seront nuls s'ils sont omis.

function sayHello(name) {
    if (name) return "Hello, " + name;
    else return "Hello unknown person";
}
sayHello(); // => "Hello unknown person"
4
jpsimons

Un peu plus fonctionnel et facile à utiliser:

function exist(obj)
{
    return (typeof obj !== 'undefined');
}

La fonction retournera true s'il existe, sinon false si n'existe pas.

3
tfont

sachez que lorsque vous vérifiez! == ou! = Contre "undefined" cela ne fonctionnera pas

Testé sur Firfox Quantom 60.0.1

utilisez plutôt le test comme celui-ci pour éviter les conflits

if(!(typeof varibl['fl'] === 'undefined')) {

            console.log(varibl['fl']);
            console.log("Variable is Defined");
        }else{

            console.log(varibl['fl']);
            console.log("Variable is Un-Defined");
        }
3
Aylian Craspa

Qu'en est-il d'un simple:

if(!!variable){
  //the variable is defined
}
2
JasoonS

Pour vérifier si une variable a été déclarée/définie, j'ai fait ce sale tour.

Je n'ai pas trouvé de moyen d'extraire le code d'une fonction, même avec eval.

"use strict";

// var someVar;

var declared;
try {
  someVar;
  declared = true;
} catch(e) {
  declared = false;
}

if (declared) {
  console.log("someVar is declared; now has the value: " + someVar);
} else {
  console.log("someVar is not declared");
}
2
Ferran Maylinch

Je suis surpris que cela n'ait pas encore été mentionné ...

voici quelques variantes supplémentaires utilisant this['var_name']

l’utilisation de cette méthode présente l’avantage de pouvoir être utilisée avant la définition d’une variable.

if (this['elem']) {...}; // less safe than the res but works as long as you're note expecting a falsy value
if (this['elem'] !== undefined) {...}; // check if it's been declared
if (this['elem'] !== undefined && elem !== null) {...}; // check if it's not null, you can use just elem for the second part

// these will work even if you have an improper variable definition declared here
elem = null; // <-- no var here!! BAD!
2
Daniel