Video: Learn the Top 10 ECMAScript 2015 Features

Posted on in ES2015

Last year, I spoke at SenchaCon in Las Vegas, about ES2015. I've found the recording online. JavaScript dev, in case you are interested:

Sencha & ECMAScript 2015

Posted on in ES2015 JavaScript

With just a few more days to go, before the release of Ext JS 6.2, (BTW, Can’t wait! Material Design theme, pinch to zoom, D3 integration, calendar component and much more…) Sencha is already busy with working on the next major version of Ext JS.

We will give you a preview on our long term roadmap on:

es2015

One of the things that’s gonna be huge, is ES2015 support for Ext JS. Our goal is not to rewrite the whole framework according the new ECMAScript standard. no. ..but we want you to be able to write ES2015 code together with your Sencha framework API calls. So you can leverage the advantages of cleaner JavaScript code in your own Sencha classes and controllers.
With that comes new tooling that includes a transpiler, to make sure your code runs in all the supported browsers, and probably will also support for TypeScript, Grunt/Gulp etc. It’s all at an early stage yet, but if you have questions, (and you’re in Europe the week of the 20th of September), you will have the chance to meet the Sencha product manager and engineers at the roadshows.

I will be there as well, presenting an ECMAScript 2015 masterclass. I will cover the top 10 new features of ECMAScript 2015, and teach you what’s new through code examples.

(Are you from the USA? - I will give the presentation at SenchaCon in Las Vegas, November this year.)

Think about:
Block Code Constructs, Arrow functions, Default Parameters, Promises (see also my earlier post: https://www.leeboonstra.com/asynchronous-javascript-promises/), Classes, Modules... etc.

But there’s much more. And unfortunately not everything fits in my Top 10 / in an 45min talk. I like to share with you some more ES2015 code snippets, which are as cool, but didn’t make it in my final presentation. Have a look, this article contains info about:

  • Spread Operators
  • Maps & Sets
  • For Of Loops
  • Generators

Rest parameters & Spread Operator

Let’s say I have a function but I don’t know how many arguments I am gonna pass into it. Maybe 1, maybe 2, or maybe 15. (Not sure if you would want that tho... but you get the idea).

The spread operator looks like this: ...n. 3 dots and a variable which holds an array. That array contains all the parameters that you passed in. The rest parameters.
Let’s have a look how we did this before ES2015 and what’s new:

You can see the ES2015 is much nicer to write. It’s better performing, and it returns a true Array, where the old fashioned JavaScript arguments just contains an object that somehow fakes to be an Array.

You can use the spread operator in combination with Arrays for example:

These new data structures are supported in most of the modern desktop browsers. http://kangax.github.io/compat-table/es6/

New Data Structures

Map & WeakMap

The following four data structures are new in ECMAScript 2015: Map, WeakMap, Set and WeakSet. Let me explain how these work.

Maps are a store for key / value pairs. The Key and value could be a primitives or object references.

ES5 JavaScript was missing a data structure for mapping values. What people use to do; was abusing objects to save values, and that can lead you into nasty inheritance pitfalls. (See: http://speakingjs.com/es5/ch17.html#_pitfalls_using_an_object_as_a_map)

Maps give you a whole bunch of extra functionalities. You can get and set values in a map. You can delete a value in a map. You can loop through entries or values in maps, and you can clear them:

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map

A WeakMap is a map that doesn’t prevent its keys from being garbage-collected, so you don’t have to worry about memory leaks.

It has almost the same functionalities as a Map, however you can’t iterate over the keys, values or entries and you also can not clear it.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap

Keys of WeakMaps are of the type Object only. Primitive data types as keys are not allowed (So a String, Number, Boolean, null, undefined or a ES2015 Symbols can not be used as a Weakmap key.). A Map can use primitive values for keys.

w = new Map; 
w.set('a', 'b'); //Map { a: "b" }

w = new WeakMap; 
w.set('a', 'b'); //TypeError: "a" is not a non-null object

Sets and WeakSets

Sets are collections for unique values. The values could be also a primitives or object references.

An ES2015 Set has similar functionalities as a Map. But a value in the Set may only occur once; it is unique in the Set's collection and can not contain duplicates:

var myset = new Set(["A", "A", "B"]);
console.log(myset.size); //2 !!!

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

Like a WeakMap, WeakSet is a Set that doesn’t prevent its values from being garbage-collected. It has simpler API than WeakMap, because has only three methods:
add(), delete() and has().

These new data structures are supported in most of the modern desktop and mobile browsers. http://kangax.github.io/compat-table/es6/

If you want to use it in production, you will need to make use of a transpiler like Babel, who can provide you a polyfill. (https://babeljs.io)

For-of loop

The for...of statement creates a loop iterating over iterable objects (including Array, Map, Set,String, arguments object etc..):

It is the most concise, direct syntax yet for looping through array elements and it avoids all the pitfalls of for–in loops, (which you would typically use for looping over object properties).Unlike forEach(), it works with break, continue, and return.

As you can see it is pretty similar to for-in loop, which can be used to iterate through object properties.

These new data structures are supported in most of the modern desktop browsers. http://kangax.github.io/compat-table/es6/

Generators

Generators are simply subtypes of Iterators. They are a special kind of function that can be suspended and resumed, which is different compared to iterators.

Generators use function* and yield operators:

Note the yield statements. It returns a generator instance and moves to the next yield when next() is called.

The snippet for the Dice Generator has a while loop that won’t end. It can roll numbers between 1 and 6.

These new data structures are supported in most of the modern desktop browsers. http://kangax.github.io/compat-table/es6/

If you want to use it in production, you will need to make use of a transpiler like Babel, who can provide you a polyfill. (https://babeljs.io)


Want to learn more about ECMAScript 2015? Join me at the roadshows: https://www.sencha.com/company/roadshow
Beside ECMAScript 2015 and TypeScript fun, there will be much to talk about: How to Test your JavaScript code, Build Data analysing apps with Ext JS 6.2, new upcoming Sencha Tools, customer cases and much more...