In this blog post, we examine the ECMAScript proposal “JSON modules” (by Sven Sauleau, Daniel Ehrenberg, Myles Borins, and Dan Clark). It lets us import JSON data as if it were an ECMAScript module. Why would we want to import JSON like a module?  # Various bundlers (such as webpack) have allowed us to import JSON data as if it were an ECMAScript module for a long time. JSON modules turn this into

Many programming languages have one “non-value” called null. It indicates that a variable does not currently point to an object – for example, when it hasn’t been initialized yet. In contrast, JavaScript has two such non-values: undefined and null. In this blog post, we examine how they differ and how to best use or avoid them. undefined vs. null  # Both values are very similar and often used inte

Writing JavaScript tools in other languages – a new trend? Recently, we have seen an uptick of JavaScript tools being written in languages other than JavaScript. This blog post lists a few examples and explains the appeal of not using JavaScript. Examples  # I asked on Twitter and these are a few of the examples that people mentioned: Build tools and compilers: esbuild – Go: JavaScript bundler and

A recent blog post explored how TypeScript enums work. In this blog post, we take a look at alternatives to enums. Unions of singleton values  # An alternative to creating an enum that maps keys to values, is to create a union of singleton types (one per value). Read on to see how that works. Unions of string literal types  # Let’s start with an enum and convert it to a union of string literal typ

In this blog post, we examine a pattern for implementing enums in JavaScript that is based on classes. We’ll also take a look at Enumify, a library that helps with the enum pattern. Implementing enums: first attempts  # An enum is a type that consists of a set of values. For example, TypeScript has built-in enums and with them, we can define our own boolean type: enum MyBoolean { false, true, } Or

The import() operator lets us dynamically load ECMAScript modules. But they can also be used to evaluate JavaScript code (as Andrea Giammarchi recently pointed out to me), as an alternative to eval(). This blog post explains how that works. eval() does not support export and import  # A significant limitation of eval() is that it doesn’t support module syntax such as export and import. If we use i

Occasionally, you want Web Workers to communicate with each other. Doing so is not obvious as most Web Worker examples are about communicating between the main thread and a Web Worker. There, one uses postMessage() to send messages directly to the Worker. Alas, that doesn’t work for communicating between two Workers, because you can’t pass references to Workers around. MessageChannel  # The soluti

[2018-02-08] Warning: outdated content. Read the book “Exploring ReasonML”, instead (free online). This blog post gives a brief high-level explanation of Facebook’s new programming language, ReasonML. Blog posts in this series  # Background: What is ReasonML [this blog post] Getting started with ReasonML What is planned for ReasonML? Core language: Basic values and types let bindings and scopes Pa

Update 2017-11-18a: I worded a few things more carefully, to make it clear that I don’t hate functional programming (I’m a fan). Update 2017-11-18b: I added subsections to Sect. “Currying is in conflict with some of JavaScript’s foundations”. In this blog post I explain why, in my opinion, currying is in conflict with some of JavaScript’s foundations. Recommended reading if you are not sure what c

This post is part of a series of three: Current approaches: “Setting up multi-platform npm packages” Motivating a new approach: “Transpiling dependencies with Babel” Implementing the new approach: “Delivering untranspiled source code via npm” Figuring out the best strategy for transpiling with Babel is tricky. This blog post proposes a new strategy, made possible by Babel’s preset-env. The vision 

Warning: This blog post is outdated. Instead, read section “Loading modules dynamically via import()” in “JavaScript for impatient programmers”. The ECMAScript proposal “import()” by Domenic Denicola is at stage 4 and part of ECMAScript 2020. It enables dynamic loading of ECMAScript modules and is explained in this blog post. ECMAScript modules are static  # ECMAScript modules are completely stati

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. Starting point for this series of posts on Babel: “Configuring Babel 6” ES6 modules vs. CommonJS modules  # ECMAScript 6 modules  # Default export (single export): // lib.js export default function (

The ECMAScript proposal “String padding” by Jordan Harband & Rick Waldron is part of ECMAScript 2017. This blog post explains it. Padding strings  # Use cases for padding strings include: Displaying tabular data in a monospaced font. Adding a count or an ID to a file name or a URL: 'file 001.txt' Aligning console output: 'Test 001: ✓' Printing hexadecimal or binary numbers that have a fixed number

This blog post describes the proposed ECMAScript feature “call constructor” (stage 1). Classes can’t be function-called in ES6  # In ECMAScript 6, classes can’t be function-called: class Point { constructor(x, y) { this.x = x; this.y = y; } } let p1 = new Point(1, 2); // OK let p2 = Point(3, 4); // TypeError For ES6, there was no categorical objection to classes being function-called. The error wa

There is a subtle difference between an object with methods and an object with callbacks. An object whose properties are methods  # The this of a method is the receiver of the method call (e.g. obj if the method call is obj.m(···)). For example, you can use the WHATWG streams API as follows: let surroundingObject = { surroundingMethod() { let obj = { data: 'abc', start(controller) { ··· console.lo

The element type Uint8C is special: it is not supported by DataView and only exists to enable Uint8ClampedArray. This Typed Array is used by the canvas element (where it replaces CanvasPixelArray). The only difference between Uint8C and Uint8 is how overflow and underflow are handled (as explained in the next section). It is recommended to avoid the former – quoting Brendan Eich: Just to be super-

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. Refresher: Web Components

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: So Charlie

RegExp.prototype.exec(str)  # If /g is not set, matching always starts at the beginning, but skips ahead until a match is found. REGEX.lastIndex is not changed. const REGEX = /a/; REGEX.lastIndex = 7; // ignored const match = REGEX.exec('xaxa'); console.log(match.index); // 1 console.log(REGEX.lastIndex); // 7 (unchanged) If /g is set, matching starts at REGEX.lastIndex and skips ahead until a mat