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?

Replace `whatever` with `window.whatever` or declare `whatever`. — Wiktor Zychla, Sep 26 '17 at 10:37
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. — Frank Cedeno, Sep 26 '17 at 20:32

laruiss · Accepted Answer · 2017-09-26T10:38:03.167

37

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"

edited Sep 26 '17 at 10:38

answered Sep 26 '17 at 10:35

laruiss

3,477
1
14
27

1

Yup, `elemContent.innerHTML += undefined || 'ok'` will work. – Kokodoko Sep 26 '17 at 10:36
7

@laruiss that one line of code could cause a LOT of confusion – Kokodoko Sep 26 '17 at 10:48
1

Omg @laruiss 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'` :) – Stijn de Witt Sep 26 '17 at 22:05
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. – laruiss Sep 27 '17 at 08:49
@StijndeWitt My example was to prove that `undefined` is falsy, that was the question of the OP :) – Kokodoko Sep 27 '17 at 12:20
@laruiss Yeah I saw your code so I got you understand it yourself but the humor/wtf may go unnoticed for beginners :) – Stijn de Witt Sep 28 '17 at 07:12

score 12 · Answer 2 · answered Sep 26 '17 at 10:36

12

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.

answered Sep 26 '17 at 10:36

user94559

54,841
6
85
93

Commercial Suicide · Answer 3 · 2018-09-14T12:53:12.417

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

score 2 · Answer 4 · edited Sep 26 '17 at 15:39

2

To confirm that undefined is falsy:

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

edited Sep 26 '17 at 15:39

Commercial Suicide

13,616
13
48
72

answered Sep 26 '17 at 10:42

Faly

12,529
1
16
34

score 0 · Answer 5 · answered Oct 25 '17 at 19:06

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

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

5 Answers5