Double pipes in JavaScript (||) throw error instead of evaluate as falsy

Edward_Tanguay_4639 0
Viewed 3014

I read that the double pipes in JavaScript check to see if a variable is falsy, and that undefined is a falsy value in JavaScript, e.g.

It means that if the value is falsey (e.g. 0, "", null, undefined (see also All falsey values in JavaScript)), it will be treated as false; otherwise it's treated as true.

So I tried this out and find that undefined indeed does not get evaluated as falsy but instead throws an error: 

let elemContent = document.getElementById('content');

let a = null;
let b = 2;

elemContent.innerHTML += a || 'ok'; // "ok"
elemContent.innerHTML += b || 'ok'; // "2"
elemContent.innerHTML += whatever || 'ok'; // "ERROR: whatever is not defined"

http://jsfiddle.net/ueqo6yko

Is undefined a falsy value in JavaScript or not, or how does one understand this contradiction?

boolean-operations undefined javascript
5 Answers

Because in your code, whatever is not only undefined but furthermore not declared

To avoid this error, you could do the following:

let elemContent = document.getElementById('content');

let a = null;
let b = 2;

elemContent.innerHTML += a || 'ok'; // "ok"
elemContent.innerHTML += b || 'ok'; // "2"
elemContent.innerHTML += (typeof whatever !== 'undefined' && whatever) || 'ok3'; // "ok3"
user_18006090

undefined is indeed falsy, but it's an error in JavaScript to use a variable before it's been declared.

Add a let whatever = undefined somewhere to see the behavior you expect.

user_945590

undefined and error with not defined are different. undefined is a value for declared variable, when error with not defined means, that your variable is not declared.

An example with undefined:

let elemContent = document.getElementById('content');

let a = null;
let b = 2;
let whatever;

console.log(whatever)

elemContent.innerHTML += a || 'ok'; // "ok"
elemContent.innerHTML += b || 'ok'; // "2"
elemContent.innerHTML += whatever || 'ok'; // "whatever is undefined"
<div id="content"></div>

An example with not defined error:

let elemContent = document.getElementById('content');

let a = null;
let b = 2;

elemContent.innerHTML += a || 'ok'; // "ok"
elemContent.innerHTML += b || 'ok'; // "2"
elemContent.innerHTML += whatever || 'ok'; // "ERROR: whatever is not defined"
<div id="content"></div>

And here is an example, how you can check, does variable declared and does it have a value (not undefined):

let test = "test";

if (typeof test !== undefined) {
  console.log("'test' is declared");
  if(test) {
    console.log("'test' has a value (not 'null', 'false', 'undefined'...)");
  }
}

user_60536540

To confirm that undefined is falsy:

var whatever = undefined;
console.log(whatever || "undefined is really falsy");

user_74462730 
let elemContent = document.getElementById('content');

let a = null;
let b = 2;
let c;


elemContent.innerHTML += a || 'ok'; // "ok"
elemContent.innerHTML += b || 'ok'; // "2"
elemContent.innerHTML += c || 'ko'; // "ko"
elemContent.innerHTML += whatever || 'ok'; // "ERROR: whatever is not defined"

c is undefined. whatever is undeclared

user_36509830
Related