Author: Paurian

Recently on one of the social network feeds, there was a long thread of developers putting their input into the question: “What is your favorite JavaScript feature.”

Most people were putting in things like object destructuring, closures, map-filter-apply, reduce, spread operators, promises, arrow functions, first-class functions, eval, async and await. One person even answered with a code sample and another mentioned the use of closure with a block declaration as a model for scope. A block declaration is the use of the ({ … code … }) structure.

function pwrGen() {
    var i = 0;
 
    return {
        next: function() {
 
            var ret = Math.pow(i, 2);
            i++;

            return ret;
        }
    };
}

var gen = pwrGen();

console.log(gen.next(), gen.next(), gen.next()); // -> 0 1 4

Something that I’ve grown to appreciate is the Truthy and Falsey properties, which I think only one other person among hundreds gave mention to.

Here’s why: because JavaScript is a loosely typed language, it handles certain types of conversions in context of the statement they’re in. This provides a way to do a unary collates, quickly identify value, and quick boolean conversions.

Unary Collation

console.log(true && 'all prior conditions are true');

console.log(false || 'all prior conditions are false');

Is There Value?

if (!!thisVarHasValue) { ...

In this example, we can use the bang operator to quickly convert any variable into a boolean. However, there are some caveats.

Can you handle the Truthy?

As you may have noticed in the prior example, there are two bang operators. The first bang operator changes the variable to a boolean type. The second one reverses that. As a result, if the variable “thisVarHasValue” has a value, it results in a True response … with a few exceptions.

The values undefined, 0, and 0.00 and NaN all produce false values. Empty strings also produce a false value. However, empty arrays and strings of zero values produce a true value.

Quickening

Efficiency is on the mind of any good coder. I like to run small benchmarking programs to get numbers when I haven’t come across other posts that do it. Below is a short program that you can run on JSFiddle. It takes a million rows then iterates through them using a single-bang (falsey) and a triple bang (double-falsey) operator compared to a typical undefined-or-zero comparison.

var a = [];

var div = document.getElementById("answer");

div.innerHTML = !!a;

for (var x = 0; x < 1000000; x++) {

  a.push(x);

}



// [Call to doSomething] took 17399.999999965075 milliseconds.


var t0 = performance.now();


for (var x = 0; x < 1000000; x++) {

  if (!a[x]) {
    a.push(x);

  } else {
    a.push(x);

  }
}


var t1 = performance.now();

div.innerHTML = "Single-bang took " + (t1 - t0) + " milliseconds.";





var a = [];

t0 = performance.now();


for (var x = 0; x < 1000000; x++) {

    if (!!a[x]) {
      a.push(x);

    }
}
t1 = performance.now();

div.innerHTML = div.innerHTML + "<br/>Double-bang took " + (t1 - t0) + " milliseconds.";





var a = [];

t0 = performance.now();


for (var x = 0; x < 1000000; x++) {
    if (!!!a[x]) {
      a.push(x);
    }
}
t1 = performance.now();

div.innerHTML = div.innerHTML + "<br/>Triple-bang took " + (t1 - t0) + " milliseconds.";





var a = [];

t0 = performance.now();


for (var x = 0; x < 1000000; x++) {

    if (a[x] === undefined || a[x] === 0) {
        a.push(x);
    } else {
        a.push(x);
    }
}
t1 = performance.now();

div.innerHTML = div.innerHTML + "<br/>Condition checking took " + (t1 - t0) + " milliseconds.";

The result is somewhat consistent. The double-bang is the fastest, followed by the triple-bang, the single-bang, and finally, the typical condition check:

Single-bang took 3.2000000355765224 milliseconds.
Double-bang took 2.899999963119626 milliseconds.
Triple-bang took 3.000000026077032 milliseconds.
Condition checking took 3.2999999821186066 milliseconds.

But remember, this is across a million rows. a tenth of a millisecond doesn’t amount to much. This was an exercise to see if there was something substantial to use in optimizing code and to peek into the JavaScript engine’s behavior.

What I find interesting is how the triple-bang, which is the same value as the single-bang, is somehow just slightly faster. I’ll have to do a follow-up later as to why this is the case.