Posts

Showing posts from November, 2015

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. Follow-up blog posts: [2015-12-11] Babel 6: configuring ES6 standard library and helpers [2015-12-12] Babel 6: loose mode [2015-12-13] Babel and CommonJS modules Installing Babel 6 The following are a few important npm packages. All Babel packages reside in a single repository on GitHub . Browsing their source code and their package.json files is instructive. babel-core : the core compilation machinery and plugin infrastructure for Babel. You will rarely need to install this package, because other packages such as babel-cli have it as a dependency, meaning that it will be automatically installed when they are installed. babel-cli : a command line interface to Babel . It includes the following commands: babel-doctor detects common problems with your Babel inst

ES proposal: Trailing commas in function parameter lists and calls

The following ECMAScript proposal is at stage 3 : “ Trailing commas in function parameter lists and calls ” by Jeff Morrison. This blog post explains it. Trailing commas in object literals and Array literals Trailing commas are ignored in object literals: let obj = { first: 'Jane', last: 'Doe', }; And they are also ignored in Array literals: let arr = [ 'red', 'green', 'blue', ]; console.log(arr.length); // 3 Why is that useful? There are two benefits. First, rearranging items is simpler, because you don’t have to add and remove commas if the last item changes its position. Second, it helps version control systems with tracking what actually changed. For example, going from: [ 'foo' ] to: [ 'foo', 'bar' ] leads to both the line with 'foo' and the line with 'bar' being marked as changed, even though the only

ES proposal: string padding

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 of digits: '0x00FF' String.prototype.padStart(maxLength, fillString=' ') This method (possibly repeatedly) prefixes the receiver with fillString , until its length is maxLength : > 'x'.padStart(5, 'ab') 'ababx' If necessary, a fragment of fillString is used so that the result’s length is exactly maxLength : > 'x'.padStart(4, 'ab') 'abax' If the receiver is as long as, or longer than, maxLength , it is returned unchanged: > 'abcd'.padStart(2, '#') 'abcd'

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. Object.entries() This method has the following signature: Object.entries(value : any) : Array<[string,any]> If a JavaScript data structure has keys and values then an entry is a key-value pair, encoded as a 2-element Array. Object.entries(x) coerces x to an Object and returns the entries of its enumerable own string-keyed properties, in an Array: > Object.entries({ one: 1, two: 2 }) [ [ 'one', 1 ], [ 'two', 2 ] ] Properties, whose keys are symbols, are ignored: > Object.entries({ [Symbol()]: 123, foo: 'abc' }); [ [ 'foo', 'abc' ] ] Object.entries() finally gives us a way to iterate over the properties of an object ( read here why objects aren’t iterable by default ): let obj = { one: 1, two: 2 }; for (let [k,v] of Object.entries(obj)) { console.log(`${JSON.stringify(k

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). Related blog posts: The final feature set of ECMAScript 2016 (ES7) Feature watch: ECMAScript 2017 Who designs ECMAScript? Answer: TC39 (Technical Committee 39). TC39 is the committee that evolves JavaScript. Its members are companies (among others, all major browser vendors). TC39 meets regularly , its meetings are attended by delegates that members send and by invited experts. Minutes of the meetings are available online and give you a good idea of how TC39 works. Occasionally (even in this blog post), you’ll see the term TC39 member referring to a human. Then it means: a delegate sent by a TC39 member company. It is interesting to note that TC39 operates by consensus: Decisions require that a large majority agrees and nobody disagrees strongly enough to veto. For many members, agreements lead to real obligations (they’ll have to implement fe

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 Synchronously Synchronous sequential execution is built into JavaScript and looks like this: function func() { foo(); bar(); baz(); } Asynchronously, via Promises To execute Promise-based functions sequentially, you need to chain function calls via then() , which is the Promise equivalent of the semicolon: /** * Returns a Promise that resolves to `undefined`. */ function func() { return foo() .then(() => bar()) .then(() => baz()); } If you are OK with executing the functions in an arbitrary order (the single-threaded version of “in parallel”), you can use Promise.all() : /** * Returns a Promise that resolves to * [undefined, undefined, undefined]. */ function func() { return Promise.all([foo(), bar(), baz()]); } Asynchrono