The Future Of JavaScript

And Why You Should Care

The Future Of JavaScript

And Why You Should Care

Adam Babik @dreame4

Topics

The current state of ECMAScript standard

Selected features of ES6

How and why start to write in ES6

The Present

JavaScript

Powered by ECMAScript 5
since December 3, 2009

The Current State

ES6 Features

Selected ES6 features

Iterators & Generators

Arrows & Destructuring

Rest & Spread

Iterator

                Range.prototype[Symbol.iterator] = function () {
                  return {
                    next () {
                      return { value: val, done: val >= end };
                    }
                  };
                };
            

Generator

                Range.prototype[Symbol.iterator] = function *() {
                  while (val <= end) {
                    yield val++;
                  }
                };
            

You can find much more about generators on David Walsh website.

Examples

Arrow functions

                let arr = [1, 2, 3, 4];
                let arrMul2 = arr.map(x => x * 2);
            

Destructuring

                var swapArr = ([x, y]) => [y, x];
                swapArr([1, 2]); // => [2, 1]
                var swapObj = ({ x, y }) => ({ y, x });
                swapObj({ x: 1, y: 2 }); // => { x: 2,y: 1 }
                // Works with parameters
                function len({ x, y }) {
                    return Math.sqrt(x*x + y*y);
                }
            

Rest & Spread

Rest + spread

                var max = (...items) => {
                    Array.isArray(items); // => true
                    return Math.max.call(null, ...items);
                    // like Math.max.apply(null, items);
                };
                max(14, 3, 13, 12, 9);
            

Examples
Arrows
Destructuring
Rest + Spread

And More

Proxies Classes Modules Symbols Native Promises let & const for..of unicode data sets template strings reflect tail calls

ES6 Now

ES5 Compliant Browsers

node.js

Living On The Edge

But Why?

Why Should I Use ES6 Now

Thank you!

Questions?

10Clouds is hiring!

10clouds.com/careers

Resources

  1. ES6 Spec Draft
  2. kangax's ES6 compatibility table
  3. ES6 Features Description (a little bit outdated)
  4. ES6 Generators

Fork Me!