JavaScript...You Changed, Man

Fooling around with Bootstrap, which uses jQuery, I realized that enough has changed with the underlying JavaScript that I needed a refresher course. I came across Tokenizer by Don McCurdy, and it uses constructs that I didn't recognize.

My copy of JavaScript, the Definitive Guide, by David Flanagan, covers JS 1.5. 17 years later, we're up to ECMAScript 2018--there have been a lot of changes since I worked with Brendan Eich at Netscape. I wanted to come to an understanding of ES6 (2015) at least, and I came across JavaScript: Moving to ES2015 by Ved Antani, Simon Timms, and Narayan Prusty (Packt, 2017) as a free e-book from the Seattle Public Library.

The Tokenizer code is less than 300 lines, and much of it is comprehensible, but I ran into this:

a = a || func('arg');

This is the hip, trendy way of writing:

if (!a) a = func('arg');

Because JS doesn't evaluate the second expression if the first is true. I suppose you could also write

a = (a) ? a : func('arg');

I was more shaky with promises, and chained thens. But first, I had to decipher arrow functions. If you have an anonymous function like this:

var selected = allJobs.filter( function (job) {
return job.isSelected();
});

You can now simplify it as:

var selected = allJobs.filter( job => job.isSelected() );

It saves typing the words 'function' and 'return'. It is quite generally identifer => expression so it can be adapted to more than method calls. It reads better, I suppose. You're transforming 'job' into something else, which is exactly how it appears.

I wrote some php to query a database and return JSON, so I cribbed JavaScript code to ingest it the "modern way." I got this:

const myRequest = new Request('querydb.php?arg=' + arg);

fetch(myRequest)
    .then(response => response.json())
    .then(data => {
        ...statements like a function body...
    });

I assumed that either the Request constructor or the fetch function was blocking--that is, I assumed that execution would pause while it fetched the JSON data and then continue. JS is single-threaded, after all. No. Instead the then is executed whenever the fetch is done. The second then executes when the first then is done.

fetch(...).then(response => ...).then(data => ...)

means call the result of the fetch function 'response', apparently, and pass it as the argument to the lambda function that will return the result of the fetch function's .json() method. Because we can, we call the result of the json() method 'data'.

Not to belabor the point, but

response => response.json()

means "convert response into response's json" and hold it in mid-air until we give a name to it in the next then(). If you thought it meant "let response refer to response's json()," you'd be wrong. It makes sense (response should be immutable for this statement), but this mid-air stuff can go too far.