typeof !== "undefiniert" vs. != null

Question

Ich sehe oft JavaScript-Code, der auf diese Weise auf undefinierte Parameter usw. prüft:

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

Dies scheint etwas verschwenderisch zu sein, da es sowohl eine Typsuche als auch einen String-Vergleich beinhaltet, ganz zu schweigen von der Ausführlichkeit. Es ist notwendig, weil undefined könnte jedoch umbenannt werden.

Meine Frage ist:
Was ist an diesem Code besser als an diesem Ansatz?

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

Soweit ich weiß, kann man nicht umdefinieren null damit es nicht unerwartet zu einem Bruch kommt. Und wegen des Typ-Zwangs der != Operator, der sowohl auf undefined y null ... was oft genau das ist, was Sie wollen (z.B. für optionale Funktionsparameter).

Dennoch scheint diese Form nicht weit verbreitet zu sein, und sie führt sogar dazu, dass JSLint Sie anschreit, weil Sie das böse != Betreiber.

Warum wird dies als schlechter Stil angesehen?

Answer 1

Sie können auch den Operator void verwenden, um einen undefinierten Wert zu erhalten:

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

(Und ja, wie in einer anderen Antwort erwähnt, wird dies einen Fehler auslösen, wenn die Variable nicht deklariert wurde, aber dieser Fall kann oft entweder durch Code-Inspektion oder durch Code-Refactoring ausgeschlossen werden, z.B. durch window.input !== void 0 zum Testen globaler Variablen oder zum Hinzufügen von var input .)

Answer 2

Ich bin tatsächlich darauf gestoßen, dass (typeof input !== 'undefined') in diesem Szenario, in dem es verwendet wird, um Standardfunktionsparameter bereitzustellen:

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 bietet neue Möglichkeiten zur Einführung von Standardfunktionsparametern auf diese Weise:

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

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

Dies ist weniger ausführlich und sauberer als die erste Option.

Answer 3

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!

Answer 4

(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

Answer 5

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