The future of bundling JavaScript modules

This blog post examines how the bundling of modules is affected by two future developments: HTTP/2 and native modules.


Tree-shaking with webpack 2 and Babel 6

Rich Harris’ module bundler Rollup popularized an important feature in the JavaScript world: tree-shaking, excluding unused exports from bundles. Rollup depends on the static structure of ES6 modules (imports and exports can’t be changed at runtime) to detect which exports are unused.

Tree-shaking for webpack is currently in beta. This blog post explains how it works. The project we are going to examine is on GitHub: tree-shaking-demo

Installing past or future versions of npm packages

npm lets you install versions of packages other than the current one, via:

    npm install «package-name»@«tag»
    npm install «package-name»@«version»


Why is (0,obj.prop)() not a method call?

This blog post explores references, a mechanism used by the ECMAScript language specification to explain the difference between the following two expressions:

    (0, obj.prop)()


Babel and CommonJS modules

This blog post examines how Babel ensures that code it transpiles interoperates properly with normal CommonJS modules. Consult chapter “Modules” in “Exploring ES6” for more information on ES6 modules.


Babel 6: loose mode

Babel’s loose mode transpiles ES6 code to ES5 code that is less faithful to ES6 semantics. This blog post explains how that works and what the pros and cons are (spoiler: normally not recommended).


Babel 6: configuring ES6 standard library and helpers

This blog post is outdated. Please read Chap. “Babel: configuring standard library and helpers” in “Setting up ES6”.

This blog post explains how to configure how Babel 6 accesses its own helper functions and the ES6 standard library.


Configuring Babel 6

Update: This series of blog post has been turned into the book “Setting up ES6” (which is free to read online).

Babel 6 is much more configurable than Babel 5, but also more difficult to configure. This blog post gives tips.



ES proposal: string padding

The ECMAScript proposal “String padding” by Jordan Harband & Rick Waldron is part of ECMAScript 2017. This blog post explains it.


ES proposal: Object.entries() and Object.values()

The following ECMAScript proposal is at stage 4: “Object.values/Object.entries” by Jordan Harband. This blog post explains it.


The TC39 process for ECMAScript features

This blog post explains the so-called TC39 process, which governs how ECMAScript features are designed, starting with ECMAScript 2016 (ES7).


Synchronous and asynchronous sequential execution of functions

This blog post examines three ways of executing function sequentially:

  • Synchronously
  • Asynchronously, via Promises
  • Asynchronously, via the library co


Reader survey 2015

Dear readers!

If you would, please fill out my reader survey. It won’t take long and will help improve this blog. I will publish a summary of the results, once the survey is closed.

Last day of survey: Monday, November 9, 2015

Thank you!



The traversal order of object properties in ES6

The ECMAScript 6 specification defines in which order the properties of an object should be traversed. This blog post explains the details.


Influences on ECMAScript 6

This is a list of a few ECMAScript 6 features and what their influences were:


ECMAScript proposal: function-callable classes

This blog post describes the proposed ECMAScript feature “call constructor” (stage 1).


Why is there a “temporal dead zone” in ES6?

In ECMAScript 6, accessing a let or const variable before its declaration (within its scope) causes a ReferenceError. The time span when that happens, between the creation of a variable’s binding and its declaration, is called the temporal dead zone.

For more information, consult Sect. “The temporal dead zone” in “Exploring ES6”. Here, I’d like to answer two questions:

  • Why is there a temporal dead zone?
  • Why does typeof cause a ReferenceError for a variable in the TDZ?


Running a simple web server from a shell

The classic command for running a simple web server from a shell is:

    python -m SimpleHTTPServer [«port»]

As a result, files are served at http://localhost:«port», with 8000 being the default if you omit the port.


Modular HTML pages

Static generation: minimizing how much is re-generated

When statically generating HTML content, you face an interesting challenge: If the page frame (the “chrome” of a page) contains information that changes frequently, you need to re-generate all pages every time it does. One example of such information is a top 10 list of the pages that were most popular during the last 30 days.


A list of ES6 feature lists

Complementary and indispensable: “ECMAScript 6 compatibility table” by kangax.


Using the Google Analytics Core Reporting API from Node.js

This blog post explains how to use the Analytics Core Reporting API by Google from Node.js.

Let’s use that API to create a Node.js script analytics.js that downloads the top 10 most visited pages of your website.


Intercepting method calls via ES6 Proxies

This blog post explains how to use ES6 Proxies to intercept method calls to an object.

Read chapter “Meta programming with proxies” in “Exploring ES6” for more information on Proxies.


Enumerability in ECMAScript 6

Enumerability is an attribute of object properties. This blog post explains how it works in ECMAScript 6.

Let’s first explore what attributes are.


Concatenating Typed Arrays

Typed Arrays don’t have a method concat(), like Arrays do. The work-around is to use the method

    typedArray.set(arrayOrTypedArray, offset=0)


ES6: methods versus callbacks

There is a subtle difference between an object with methods and an object with callbacks.


Customizing ES6 via well-known symbols

In ECMAScript 6, the object Symbol has several properties that contain so-called well-known symbols (Symbol.iterator, Symbol.hasInstance, etc.). These let you customize how ES6 treats objects. This blog post explains the details.


__proto__ in ECMAScript 6

The property __proto__ (pronounced “dunder proto”) has existed for a while in most JavaScript engines. This blog post explains how it worked prior to ECMAScript 6 and what changes with ECMAScript 6.


ECMAScript 6: holes in Arrays

This blog post describes how ECMAScript 6 handles holes in Arrays.


The names of functions in ES6

Update 2015-12-26: Sections for two caveats: “the name of a function is always assigned during creation” and “minification

The name property of a function contains its name:

    > function foo() {}
    > foo.name

This property is useful for debugging (its value shows up in stack traces) and some metaprogramming tasks (picking a function by name etc.).

Prior to ECMAScript 6 (ES6), this property was already supported by most engines. With ES6, it becomes part of the language standard and is frequently filled in automatically.


Typed Arrays in ECMAScript 6

Typed Arrays are an ECMAScript 6 API for handling binary data. This blog post explains how they work.


What happened to Web Components?

Three years ago, there was a lot of excitement surrounding Web Components: everybody talked about them, the frameworks Ember and Angular planned to integrate them or even be based on them, etc.

By now, that excitement seems to have died down. This blog post examines what happened to Web Components. Spoiler: they are alive and well and slowly being adopted across browsers.


Logging variables via an ES6 tagged template

This blog post shows how you can use a tagged template to log variables more efficiently.

In order to understand it, you should be familiar with ECMAScript 6 template literals and tagged templates. For an introduction, consult chapter “Template literals and tagged templates” of “Exploring ES6”.


Is “Isomorphic JavaScript” a good term?

A recent trend in the web development world is to use JavaScript on the server to assemble pages there, with the same code that is used to manage them in the client. That lets you initially see content faster, especially on mobile devices and helps with search engines.

How are we supposed to call code that runs on either server or client? Michael Jackson doesn’t like a recent proposal:


Converting ES6 Maps to and from JSON

When you have key-value data whose keys you don’t know in advance, it’s generally better to store it in an ES6 Map than in an object. But how do you convert Maps to and from JSON? This blog post tells you.


Getting started with ECMAScript 6

This blog post helps you to get started with ECMAScript 6 (ES6):

  • It explains how you can interactively try out ES6.
  • It lists ES6 features that are easy to adopt, along with how those features are coded in ES5.


New regular expression features in ECMAScript 6

This blog post explains new regular expression features in ECMAScript 6. It helps if you are familiar with ES5 regular expression features and Unicode. Consult the following two chapters of “Speaking JavaScript” if you aren’t:


What do ES6 modules export?

CommonJS modules export values, while ES6 modules export immutable bindings. This blog post explains what that means.

You should be loosely familiar with ES6 modules. If you aren’t, you can consult the chapter on modules in “Exploring ES6”.


What are your favorite JavaScript ES6 features?

I’ve created a survey to find out what ES6 (a.k.a. ECMAScript 2015) features people like most:


Tail call optimization in ECMAScript 6

ECMAScript 6 offers tail call optimization, where you can make some function calls without growing the call stack. This blog post explains how that works and what benefits it brings.


WebAssembly: a binary format for the web


WebAssembly (short: wasm) is a new binary format for the web, created by Google, Microsoft, Mozilla and others. It will be used for performance critical code and to compile languages other than JavaScript (especially C/C++) to the web platform. It can be seen as a next step for asm.js [3].


Announcing “Exploring ES6”

I’m glad to announce that the first version of my book “Exploring ES6” is finally finished! It was much more work than I anticipated – the PDF has over 460 pages! I’m really happy with how it turned out.

The complete contents of the book are available online, for free. The ebook version (PDF, EPUB, MOBI) costs about $30 (depending on the VAT in your country, you can pay more to support my work).

Exploring ES6 is a living book: you can buy it now and will receive free updates until it is completely done. That may take a while, possibly until 2016. Once the book is done, there will also be a print version. New material will often be published on 2ality, before it is added to the book.

For all further information on ”Exploring ES6”, please consult its website.


New number and Math features in ES6

This blog post describes the new number and Math features of ECMAScript 6.


Deploying ECMAScript 6

This blog post describes the options you have for deploying ECMAScript 6 in current JavaScript environments. It is selective w.r.t. the amount of tools it covers. If you want a comprehensive list of tools, I suggest you look at Addy Osmani’s “ECMAScript 6 Tools”.

Consult the blog post “Using ECMAScript 6 today” for an overview of ES6 features.


Using transpiled ES6 on Node.js

This blog post is outdated (it covers Babel 5). Please read Sect. “Node.js setup: Statically transpiled ES6 via Babel” in “Setting up ES6”.

This blog post explains how to use ES6 on Node.js by transpiling it to ES5 via Babel.

A previous blog post showed how to dynamically transpile ES6 at runtime (also via Babel). That is more convenient and should work for most projects, but occasionally you may want a simpler and faster setup for your runtime environment.


Writing client-side ES6 with webpack

This blog post is outdated (it covers Babel 5). Please read Sect. “Browser setup: ES6 via webpack and Babel” in “Setting up ES6”.

webpack is a client-side module builder and module loader. This blog post shows you how to write ECMAScript 6 code with it.

The code shown here is on GitHub, in the project webpack-es6-demo.


ES6 generators in depth

This blog post is outdated. Please read chapter “Generators” in “Exploring ES6”.

This blog post is part of a series on iteration in ES6:

  1. Iterables and iterators in ECMAScript 6
  2. ES6 generators in depth

Generators, a new feature of ECMAScript 6 [4], are functions that can be paused and resumed. This helps with many applications: iterators, asynchronous programming, etc. This blog post explains how generators work and gives an overview of their applications.

The following GitHub repository contains the example code: generator-examples


Using the ES6 transpiler Babel on Node.js

This blog post is outdated (it covers Babel 5). Please read Sect. “Node.js setup: Dynamically transpiled ES6 via Babel” in “Setting up ES6”.

This blog post explains how to use the ES6 transpiler Babel with Node.js. You can download the code shown in this post on GitHub. For further information on ECMAScript 6, consult the ebook “Exploring ES6”.

Warning: The approach explained in this post is convenient for experiments and development. But it uses on-the-fly transpilation, which may be too slow for your production code. Then you can transpile as a build step (as explained in the Babel documentation).


The destructuring algorithm in ECMAScript 6

This blog post is outdated. Please read Sect. “The destructuring algorithm” in “Exploring ES6”.

This blog post looks at destructuring from a different angle: as a recursive matching algorithm. At the end, I’ll use this new knowledge to explain one especially tricky case of destructuring.


No promises: asynchronous JavaScript with only generators

Two ECMAScript 6 [1] features enable an intriguing new style of asynchronous JavaScript code: promises [2] and generators [3]. This blog post explains this new style and presents a way of using it without promises.


Iterables and iterators in ECMAScript 6

This blog post is outdated. Please read chapter “Iterables and iterators” in “Exploring ES6”.

This blog post is part of a series on iteration in ES6:

  1. Iterables and iterators in ECMAScript 6
  2. ES6 generators in depth

ECMAScript 6 introduces a new interface for iteration, Iterable. This blog post explains how it works, which language constructs consume data via it (e.g., the new for-of loop) and which sources provide data via it (e.g., arrays).


A 90 minute overview of ECMAScript 6 (video)

On February 1, 2015, I held the 90 minute talk “Using ECMAScript 6 today” at the Rolling Scopes Conference in Minsk. A video recording of that talk is online:


Vote for your favorite “Exploring ES6” cover!

There are two candidates for the cover of my upcoming book, “Exploring ES6”. You can now vote for your favorite. I’ll announce a winner in a week.


Classes in ECMAScript 6 (final semantics)

Check out my book (free online): “Exploring ES6”. Updated version of this blog post: chapter “Classes”.

Recently, TC39 decided on the final semantics of classes in ECMAScript 6 [2]. This blog post explains how their final incarnation works. The most significant recent changes were related to how subclassing is handled.


First details of my upcoming book on ES6

I’m glad that I can finally announce the first details of my upcoming book:

  • Title: Exploring ES6 – Upgrade to the next version of JavaScript
  • Website: ExploringJS.com
    • Go there to get more information and to subscribe to be notified when the book comes out.

Thanks to everybody who helped me figure out the title!


Variables and scoping in ECMAScript 6

This blog post examines how variables and scoping are handled in ECMAScript 6 [1].


Google SoundScript: faster OOP for JavaScript

Update 2015-02-05: More information – “Experimental New Directions for JavaScript” by Andreas Rossberg (slides in English).

Google is currently working on SoundScript, a way to speed up object-oriented programming in JavaScript. The content of this blog post is completely based on a recent talk [1] by Dmitry Lomov. That is, everything I have written here is inferred from those slides and may or may not be correct.

Note: This blog post describes first ideas, avenues that Google is exploring for making JavaScript OOP faster. The final version of SoundScript may look and work completely different.


Try out Facebook’s Flow typechecker online

You can now try out Flow [1], Facebook’s typechecker for JavaScript, online, at tryflow.org.


New string features in ECMAScript 6

The blog post covers new features of strings in ECMAScript 6 (ES6).


New frontend framework “Aurelia”: Web Components, 6to5, jspm, MVVM

Aurelia is a new framework by Durandal creator Rob Eisenberg (which helps credibility-wise).

It uses an interesting combination of technologies/techniques:

  • Web Components: as an infrastructure for widgets (polyfilled where necessary)
  • 6to5: to compile ECMAScript 6 to ECMAScript 5
  • jspm: for package management
  • MVVM (as used by Knockout and the Knockout-inspired Durandal): as a UI pattern


Destructuring and parameter handling in ECMAScript 6

This blog post is outdated. Please read the following two chapters in “Exploring ES6”:

ECMAScript 6 (ES6) supports destructuring, a convenient way to extract values from data stored in (possibly nested) objects and arrays. This blog post describes how it works and gives examples of its usefulness. Additionally, parameter handling receives a significant upgrade in ES6: it becomes similar to and supports destructuring, which is why it is explained here, too.


HTML templating with ES6 template strings

Despite their name, template strings in ECMAScript 6 (ES6) are more like a different kind of function call than a mechanism for defining templates. This blog post explains how you can still use them for HTML templating. It is based on an idea by Claus Reinke.


ECMAScript 6 sets: union, intersection, difference

Check out my book (free online): “Exploring ES6”. Updated version of this blog post: section “Union, intersection, difference”.

A recent question by Dmitry Moskowski reminded me: ECMAScript 6 sets have no methods for computing the union (e.g. addAll), intersection (e.g. retainAll) or difference (e.g. removeAll). This blog post explains how to work around that limitation.


ECMAScript 6: maps and sets

Check out my book (free online): “Exploring ES6”. Updated version of this blog post: chapter “Maps and Sets”.

Among others, the following four data structures are new in ECMAScript 6: Map, WeakMap, Set and WeakSet. This blog post explains how they work.