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

Question

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?

Mraz

Replace whatever with window.whatever or declare whatever. – Severally

why hasn't anyone pointed out that double pipes are actually "Or Else". What this statement means is: evaluate the first condition, if the first condition is not false return the value or-else evaluate the second condition and return its value. Like any condition it is dangerous because the valid value of 0 is evaluated as false so better hope that a or b will never be zero or the second condition will be evaluated. – Gimel

Answer 1

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"

Gelatinize

Yup, elemContent.innerHTML += undefined || 'ok' will work. – Pasol

@Gelatinize that one line of code could cause a LOT of confusion – Pasol

Omg @Gelatinize are you trying to make OP pull his hair out? :) never call a variable undefined unless you want all other programmers ever to read your code to curse at you! :) And @Kokodoko, your example is a very complicated way of writing elemContent.innerHTML += 'ok' :) – Intromission

Hey @StijndeWitt and everybody! First, it was mostly for fun, and no, I do don't write that kind of crazy stuff :-D But it was a reminder of one (out of many) wtf of this language... that I really like despite -or maybe because of?- them. – Gelatinize

@StijndeWitt My example was to prove that undefined is falsy, that was the question of the OP :) – Pasol

@Gelatinize Yeah I saw your code so I got you understand it yourself but the humor/wtf may go unnoticed for beginners :) – Intromission

Answer 2

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.

Hellen

Answer 3

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'...)");
  }
}

Anaerobic

Answer 4

To confirm that undefined is falsy:

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

Delmydeloach

Answer 5

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

Portia