Modern JavaScript for the win

Practical Modern Javascript by Nicolas Bevacqua

I needed a book to get up to speed with ECMAScript 6, a book that would assume some knowledge of JavaScript and would take me through the new features. This book meets those requirements exactly. As we work though the sections, it takes its time to describe what problems the new features are trying to fix, and puts it all together in a really informative 300 page book.

The introduction discusses the various themes behind the added features, and then tells you how to configure Babel so that you can see how some of the new features can be transpiled down into code that will run on a large number of browsers. There’s an online REP for Babel here. ES6 has a large amount of new syntactic sugar, and it is great to be able to play around and see how such additions are converted into the old language – it really aids the understanding.

It was impressive to me how much JavaScript has moved forwards as a language. I remember going to a talk by Mark Miller many years ago where he discussed using revocable proxies to enable mashups, and it is impressive to see how the proxy mechanism can be used for this kind of thing, as well as many other types of meta-programming. I also remember reading articles that described the various patterns to define object-oriented class like entities, and it’s great to see that one standard pattern has now been put into the language.

Promises, generators and iterators (which should really be ordered the other way to describe how the features build on one another) bring really useful higher level programming to the language, and the inclusion of proper maps and sets give us a proper language at last. There’s also a new module system to make programming in the large much easier, and also a number of  new built-ins as well as additional methods on existing types.

What features do I think are really useful?

The extensions to the property syntax – method definitions, shorthands and computed property names

  var x = "hello"
  var y = { x, [x]:29, test(x) {return x+2}}

Argument destructuring and the spread operator.

  var f = x => x + 1
  var x = [1,2,3,4]
  var y = [...x, ...x]
  var [p, ...q] = x

Arrow functions and let and const together with temporal dead zone

  const x = 20
  let y = 40
  let f = a => a * x + y

The class statement which expands to one of the old class patterns where you define a constructor function and set the relevant prototype.

class MyPoint {
    constructor(x,y) {
        this.x = x
        this.y = y
    }
    sum() {
      return this.x + this.y
    }
}
class NextPoint extends MyPoint {
    constructor(x,y,z) {
        super(x,y) 
        this.z = z
    }
}

var p = new NextPoint(1,2,3)

ES6 adds a new extensibility mechanism, the Symbol, which allows you to add items to an object that won’t be found by the standard for..in, Object.keys and Object.getOwnPropertyNames. This gives a way to add methods to make an object iterable, for example, without old code finding that it is being returned new keys in its iterations of an object’s properties.

There are some new utility methods on Object, such as assign which allows you to take a default object and modify the properties,

Object.assign({}, defaults, options);

Also “is” which is a modified form of the === operator where

Object.is(NaN, NaN); // is true
Object.is(+0, -0); // is false

and Object.setPrototypeOf for setting the prototype (if you don’t want to set it when using Object.create).

There is also the concept of decorators which allow you to add additional functionality to classes and statically defined properties. This post offers a few examples.

The most interesting part of the book was the chapter on Promises, which also covers  iterators and the implementation of async. The book works through the design of promises, starting with a description of callback hell and describing how promises help with this issue.

    var reject, resolve
    var p = new Promise((a,b) => { resolve = a; reject = b })
    p.then(() => console.log("ok1"));
    p.catch(() => console.log("fail")).then(() => console.log("ok2"));
    reject(new Error("testing"))

It builds up nicely, with the author spending time talking about Promise.all and Promise.race, before moving on to the Iterable protocol.

const mySequence = {
    [Symbol.iterator]() {
        let i = 0
        return { next() { i++; var value = i; var done = i > 5; return {value,done} } } } }

for (var x of mySequence) { console.log(x); }

The book that talks about generators,

function* test() {
  yield 1;
  yield 2;
}

for (var x of test()) { console.log(x); }

and then async/await

var resolve;

var p = new Promise(r => resolve=r)

async function play() {
  console.log("start")
  await p
  console.log("end")
}

play()  // prints "start"

resolve(20)  // prints "end"

The author spends time describing the transformation that happens when translating the async function into a generator, and how the steps of the generator are forced.

Chapter 5 looks at the new Map/WeakMap/Set/WeakSet datatypes and this is followed by a chapter on the new proxies, which allow controlled access to objects. This part of the language allows you to provide objects to foreign libraries, without having to give that foreign library full control of the object. There is a lot of discussion about the various traps that can be set up and handled, and how you can use the Reflect object to carry on with the default action after intercepting the call.

Chapter 7 of the book discusses a whole load of built-in improvements in ES6, including much better handling of Unicode characters that aren’t on the BMP, and this is followed by a great chapter on the new module system.

In the last, short chapter of the book, the author discusses the language changes, and which parts of the language he considers to be important.

All considered this is a very good book, showing the numerous changes to the language and discussing the reasons behind the changes.

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s