web-dev-qa-db-fra.com

typeof! == "undefined" vs.! = null

Je vois souvent du code JavaScript qui recherche les paramètres indéfinis, etc. de cette façon:

if (typeof input !== "undefined") {
    // do stuff
}

Cela semble un peu inutile, car cela implique à la fois une recherche de type et une comparaison de chaîne, sans parler de sa verbosité. Cela est nécessaire car "indéfini" peut être renommé, cependant. Ma question est la suivante: en quoi ce code est-il meilleur que cette approche:

if (null != input) {
    // do stuff
}

Autant que je sache, vous ne pouvez pas redéfinir null, cela ne va donc pas casser inopinément. Et, en raison de la contrainte de type de l'opérateur! =, Ceci recherche à la fois les caractères indéfini et nul ... ce qui correspond souvent exactement à ce que vous souhaitez (par exemple, des paramètres de fonction facultatifs). Pourtant, cette forme ne semble pas très répandue, et même JSLint vous hurle de colère pour avoir utilisé l’opérateur evil! =. Pourquoi est-ce considéré comme un mauvais style?

javascriptcoding-style
446
Derek Thurn

typeof est plus sûr car cela permet à l'identifiant de n'avoir jamais été déclaré auparavant:

if(typeof neverDeclared === "undefined") // no errors

if(neverDeclared === null) // throws ReferenceError: neverDeclared is not defined
651
seanmonstar

Si la variable est déclarée (avec le mot clé var, en tant qu'argument de fonction ou en tant que variable globale), je pense que la meilleure façon de le faire est la suivante:

if (my_variable === undefined)

jQuery le fait, donc c'est assez bien pour moi :-)

Sinon, vous devrez utiliser typeof pour éviter une ReferenceError.

Si vous vous attendez à ce que les éléments non définis soient redéfinis, vous pouvez envelopper votre code comme suit:

(function(undefined){
    // undefined is now what it's supposed to be
})();
47
Joey Adams

bonne façon:

if(typeof neverDeclared == "undefined") //no errors

Mais le meilleur moyen est de vérifier via:

if(typeof neverDeclared === typeof undefined) //also no errors and no strings
25
JOKe

Vous ne devriez pas vraiment vous inquiéter de la modification du nom d'undefined. Si quelqu'un renomme undefined, vous aurez bien plus de problèmes que quelques-uns si les contrôles échouent. Si vous voulez vraiment protéger votre code, enveloppez-le dans une expression de fonction IFFE (immédiatement appelée) comme ceci:

(function($, Backbone, _, undefined) {
    //undefined is undefined here.
})(jQuery, Backbone, _);

Si vous travaillez avec des variables globales (ce qui est déjà faux) dans un environnement de navigateur, vérifiez si indéfini n'est pas défini:

if(window.neverDefined === undefined) {
    //Code works
}

Comme les variables globales font partie de l’objet window, vous pouvez simplement vérifier les éléments non définis au lieu d’être convertis en chaîne et de comparer des chaînes. 

En plus de cela, pourquoi vos variables ne sont-elles pas définies? J'ai vu beaucoup de code dans lequel ils vérifient l'existence de variables et effectuent des actions en fonction de cela. Je n'ai pas vu une seule fois où cette approche avait été correcte. 

12
Peeter

Si vous êtes vraiment inquiet au sujet d'une redéfinition des indéfinis, vous pouvez vous protéger contre cela avec une méthode d'assistance comme celle-ci:

function is_undefined(value) {
   var undefined_check; // instantiate a new variable which gets initialized to the real undefined value
   return value === undefined_check;
}

Cela fonctionne car lorsque quelqu'un écrit undefined = "foo", il ne laisse que la référence nameundefined à une nouvelle valeur, mais il ne modifie pas la valeur réelle de undefined.

5
Ivo Wetzel

Vous pouvez également utiliser l'opérateur void pour obtenir une valeur indéfinie:

if (input !== void 0) {
    // do stuff    
}

(Et oui, comme indiqué dans une autre réponse, cela générera une erreur si la variable n'a pas été déclarée, mais ce cas peut souvent être exclu soit par inspection de code, soit par refactoring de code, par exemple en utilisant window.input !== void 0 pour tester des variables globales ou en ajoutant var input .)

4
Claude

function greet(name, greeting) {
  name = (typeof name !== 'undefined') ?  name : 'Student';
  greeting = (typeof greeting !== 'undefined') ?  greeting : 'Welcome';

  console.log(greeting,name);
}

greet(); // Welcome Student!
greet('James'); // Welcome James!
greet('Richard', 'Howdy'); // Howdy Richard!

//ES6 provides new ways of introducing default function parameters this way:

function greet2(name = 'Student', greeting = 'Welcome') {
//  return '${greeting} ${name}!';
console.log(greeting,name);
}

greet2(); // Welcome Student!
greet2('James'); // Welcome James!
greet2('Richard', 'Howdy'); // Howdy Richard!

1
Avinash Maurya

J'ai en fait rencontré si (typeof input !== 'undefined') dans ce scénario où il est utilisé pour fournir les paramètres de fonction par défaut: 

function greet(name, greeting) {
  name = (typeof name !== 'undefined') ?  name : 'Student';
  greeting = (typeof greeting !== 'undefined') ?  greeting : 'Welcome';

  return `${greeting} ${name}!`;
}

greet(); // Welcome Student!
greet('James'); // Welcome James!
greet('Richard', 'Howdy'); // Howdy Richard!

ES6 fournit de nouveaux moyens d'introduire les paramètres de fonction par défaut de cette façon:

function greet(name = 'Student', greeting = 'Welcome') {
  return `${greeting} ${name}!`;
}

greet(); // Welcome Student!
greet('James'); // Welcome James!
greet('Richard', 'Howdy'); // Howdy Richard!

C'est moins bavard et plus propre que la première option.

1
JSpecs

var bar = null;
console.log(typeof bar === "object"); //true yes 
//because null a datatype of object

var barf = "dff";
console.log(typeof barf.constructor);//function


console.log(Array.isArray(bar));//falsss


console.log((bar !== null) && (bar.constructor === Object)); //false

console.log((bar !== null) && (typeof bar === "object"));  // logs false
//because bar!==null, bar is a object


console.log((bar !== null) && ((typeof bar === "object") || (typeof bar === "function"))); //false

console.log(typeof bar === typeof object); //false
console.log(typeof bar2 === typeof undefined); //true
console.log(typeof bar3 === typeof undefinedff); //true
console.log(typeof bar2 == typeof undefined); //true

console.log((bar !== null) && (typeof bar === "object") && (toString.call(bar) !== "[object Array]")); //false

0
Avinash Maurya

(function(){

  var a= b = 3;
  var ed = 103;
  
})();



//console.log(ed); //ed is not defined

console.log("a defined? " + (typeof a !== 'undefined')); //no define
console.log("b defined? " + (typeof b !== 'undefined')); //yes define
console.log(typeof(b)); //number
console.log(typeof(4+7));   //number
console.log(b); //3
console.log(typeof("4"+"7")); //string
var e= "ggg";
console.log(typeof(e)); //string
 var ty=typeof(b);
console.log(ty); //number
console.log(typeof false); //boolean
console.log(typeof 1); //number
console.log(typeof 0); //number
console.log(typeof true); //boolean


console.log(typeof Math.tan);  //function
console.log(typeof function(){}); //function 

if(typeof neverDeclared == "undefined") //no errors
if(typeof neverDeclared === "undefined") //no errors

//if(neverDeclared == null) //showing error 


console.log(typeof {a:1}); //object
console.log(typeof null); //object
console.log(typeof JSON); //object
console.log(typeof Math); //object
console.log(typeof /a-z/); //object
console.log(typeof new Date()); //object

console.log(typeof afbc); //undefined
//console.log(typeof new);//error

document.write("<br> * oprator as math ");
var r=14*"4";
document.write(r);

document.write("<br> + oprator as string ");
var r=14+"44";
document.write(r);

document.write("<br> Minus Operator work as mathematic ");
var r=64-"44";
document.write(r);


document.write("<br>");
console.log(typeof(4*"7")); //returns number
console.log(typeof(4+"7")); //returns string




 
Interview Question in JavaScript

0
Avinash Maurya