Skip to main content

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.

Comments

Post a Comment

Popular posts from this blog

JSON/MySQL Schemas

As noted previously, there is a lot of overlap between the RDBMS world and the JSON world. Identifiers JSON is defined to allow identifiers of any kind of Unicode string, encoded in UTF-8 (or UTF-16, etc.). They begin and end with double quotation marks (U+0022), so included quotation marks and '\' must be escaped as \" or \\. Control characters (ASCII 0-x1F) must be escaped as well. In practice, JSON identifiers conform to ECMAScript standards . There are some 68  reserved keywords (function, import, for, if, else, and so on) that should not be used as identifiers. Unexpected reserved words include abstract, await, debugger, delete, finally, instanceof, super, synchronized, transient, volatile, and yield. The spec makes a distinction between identifiers and IdentifierNames (specifically, array keys), but why risk it? ECMAScript allows '$' and '_' anywhere in an identifier. Length or camelCasing are not part of the spec. As for length, there seems t...
Post a Comment
Read more

Why table join doesn't work

Everything in the traditional relational database world is based on tables. If I have a table of Classes and a table of Students, I can have an association table that tells me who's in which class. classId className instructor 1 Psych 101 Dr. Jung studentId firstName lastName 1 Molly Ringwald 2 Anthony Hall 3 Joan Cusack Clearly, these two tables tell me nothing about which classes Molly is taking, nor which students have signed up for Psych 101. An "association" table provides that information: classId studentId Association-specific notes 1 1 1 2 late add 1 3 In the relational world, a LEFT JOIN gives us the student list for a given class: className instructor firstName lastName Assn notes Psych 101 Dr. Jung Molly Ringwald Psych 101 Dr. Jung Anthony Hall late add Psych 101 Dr. Jung Joan Cusack This approach is "pure" from a Chris Date perspective, but when we're talking about JSON data in response to a RESTful HTTP r...
Post a Comment
Read more

Relational Updates

The pattern I've been focused on for some time is the classic 'students in classes' or 'passengers on flights' problem. The database has a table of students and a table of classes and an association table which joins them. That's basic stuff. The problem is how do you update a student to edit her list of classes, or update a class to edit its list of students? The relational integrity is not a problem--if you delete a class from the student, that student no longer appears in the class' list of students. The problem is your simple form gets very complicated. Instead of a form that displays the columns of a single row in a table, now we have three tables involved. Of course it's solvable, but we want it to be intuitive for the end user. Old time software punted the problem--you could edit the association table, or a class, or a student, but you couldn't add classes to a student. What we want is a list of classes on the student record. Each class ...
Post a Comment
Read more