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?

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"