JavaScript — Just another introduction to ES6

Gerard Sans
Feb 22, 2015 · 5 min read

Some commented ES6 examples to get you started

From ES6 the awesome parts

JavaScript is gathering a lot of attention since news of Microsoft, IBM and the Linux Foundation announced their support to Node.js just few days ago. It is overdue to bring 2015 modern language features to JavaScript and ES6 is trying to do just that.

Some frameworks like Angular 2.0 are early adopters of ES6

In this post I am going to introduce you to some of these features used in ES6 Fiddle. I recommend you to play with them and get a feeling of what’s to come. These are the features that are being covered:

  • Arrow functions and let keyword; Block scopes
  • Classes and inheritance; Default parameters
  • Destructured assignment
  • Generators; Iterators; Maps
  • Promises; Rest parameters; Sets
  • Spread operator; Template Literals

Let’s get started! You can follow this post with ES6 Fiddle side by side.

Follow me on Twitter for latest updates @gerardsans.

Arrow functions and let keyword

Using arrow functions
Using anonymous functions

The code above should be self explanatory. Only note, let is the new keyword applying to a block scope opposed to var that applies to the global scope or a local function. Let’s see the difference with our next example.

Block scope

Using block scope

In this case the i variable only exists within the for loop, the block scope. In this example, the x variable lives within the global object, but if it was inside a function it would be within the outer function.

Classes and inheritance

We can see the use of new keywords: class, constructor, extends, super and get. Code is pretty straightforward. From the example we are only missing private/static methods and setters.

Unfortunately there are no keywords for private methods or properties so we have to resort to regular closures or IIFEs.

Besides some small differences the code would translate to:

ES6 is certainly less verbose than current ES5 implementation.

Default parameters

Before it was looking something similar to this

Destructured assignment

This example could be slightly changed to a more common scenario where the object key is different from the target.

Generators

This code creates a generator called range that returns start value as long as is strictly lower that end. After returning the start value to the iterator it increments start with the step value. The generator can only be used within an iterator and as we have seen it creates a block scope.

Iterators for..of

You can use for..of with built-in iterables: String, Array, TypedArray, Map and Set.

Notice how different is from for..in, that loops through object properties.

Maps

Maps can use any value as key besides strings but objects can’t.

Some common methods:

map.size       returns its size
map.entries() returns entries in insertion order [k,v]
map.keys() returns just values in insertion order [k]
map.values() returns just values in insertion order [v]

In order to manipulate its content

map.has(key)  // boolean
map.set(key, value)
map.get(key) // value
map.delete(key)

Map implements the in-built iterable so it can be used with for..of.

You should be able to follow the code below now.

Promises

Rest parameters

Sets

set.size       returns its size
set.entries() returns entries in insertion order [v]
set.keys() returns just values in insertion order [v]
set.values() returns just values in insertion order [v]

In order to manipulate its content

set.has(value)  // boolean
set.add(value)
set.delete(value)

See the code below

Spread operator

Template literals

Hope you enjoyed these ES6 fiddle commented examples! Thanks for reading! Have any questions? Ping me on Twitter @gerardsans.

Resources

Sons of JavaScript

all about JavaScript — get in touch to submit new articles…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store