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

GraphQL is the many-to-many solution

Exactly! Regular readers of this blog (me) will appreciate my stumbling attempts to pre-define a REST interface that supports many-to-many interfaces. GET a class, for example, and the return includes an array of the students in that class. In this context, we don't want a full Student record, just the Student's name and Id, for example. With a REST interface, the server writer has to guess how to abbreviate the Student record. GraphQL fixes that. The front end requests just the data it wants. If we want a list of the students in a class and the assigned roommates for that student...we can do that! A lot of my prototype REST service is hardwired--not single tables, so much, but the many-to-many stuff certainly. There was a certain amount of work implementing the simple router ("/table/recordno"). GraphQL means throwing a lot of that away, but I can see immediately that GraphQL's approach is what I want. My schema tables (implementing INSERT and UPDATE) look ...
Post a Comment
Read more

Vue.js

I had the example from a YouTube Tutorial on Vue working, but I'm having a little trouble creating an empty project for my own development. Part of the issue is that Vue is compiled. What you're running is minified (or not) JavaScript that includes a ton of stuff along with your app. So you can write a little, compile it, look at it in a browser (using the WAMP server) and repeat those steps to death, or you can use their system development which automatically compiles and auto-runs when it notices a source code change. vue ui brings up an app (at /localhost:8000) that manages this process, in theory, but I've forgotten the mechanics of it. In the example, we had a tree: public `--src      `--App.vue      `--views      |    `--Home.vue      |    `--About.vue      `--components           `--Todos.vue           `--TodoItem.vue ...
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