6 new ES6 features

6 New features in ES6
Kyle Dorman

Overview
1. Block Scope
2. Template Literals
3. Arrow Functions
4. Maps
5. Classes
6. Exporting/Importing Modules

Block Scope
function varTest() {
var x = 31;
if (true) {
var x = 71; // same var!
console.log(x); // 71
}
}
function letTest() {
let x = 31;
if (true) {
let x = 71; //different var!
}
}

Template Literals
function sayName (person) {
let tpl = `My name is ${person.name}.`;
console.log(tpl);
}
let john = {name: 'John Smith'};
sayName(john);
// My name is John Smith.

Arrow Functions
let x = [0,1,2];
x.map(x => console.log(x * x)); //arrow function
function Car() {
this.speed = 0;
setInterval(() => {
this.speed += 5; //this is from Car
console.log('now going: ' + this.speed);
}, 1000);
}

Maps
let x = new Map([[1, 'is a number key']]);
let today = new Date()
//anything can be a key
x.set(today.toString(), 111)
x.set(today, 222);
x.delete(today.toString());
x.size; // 2
x.has(today); // true
x.has(today.toString()); // false

Classes
class Car {
constructor(make) { //constructors!
this.make = make;
this.speed = 25;
}
printCurrentSpeed(){
console.log(this.make + ' is going ' + this.speed + '
mph.');
}
}

Classes - inheritance
class RaceCar extends Car { //inheritance
constructor(make, topSpeed) {
super(make); //call the parent constructor with super
this.topSpeed = topSpeed;
}
goFast(){
this.currentSpeed = this.topSpeed;
}
}
var stang = new RaceCar('Mustang', 150);

Design Decisions
● Default exports are favored
● Static module structure
● Support for both synchronous and
asynchronous loading
● Support for cyclic dependencies between
modules

Benefits of static module structure
1. faster lookup
2. variable checking
3. ready for macros
4. ready for types

Exporting Named Functions
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) +
square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
// OR
//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

Exporting Default Modules
//------ myFunc.js ------
export default function () { ...
};
//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
// or as a class:
//------ MyClass.js ------
export default class { ... };
//------ main2.js ------
import MyClass from 'MyClass';
let inst = new MyClass();

Other Export Options
const MY_CONST = ...;
function myFunc() {
...
}
export { MY_CONST, myFunc };
// OR
export { MY_CONST as THE_CONST, myFunc as theFunc };

Other Import Options
// Renaming: import named1 as myNamed1
import { named1 as myNamed1, named2 } from 'src/mylib';
// Importing the module as an object
// (with one property per named export)
import * as mylib from 'src/mylib';
// Only load the module, don't import anything
import 'src/mylib';

Importing Modules
System.import('some_module')
.then(some_module => {
// Use some_module
})
.catch(error => {
...
});

More System functions
System.module(source, options?);
// evaluates the JavaScript code in source to a module (which is
delivered asynchronously via a promise).
System.set(name, module);
//is for registering a module (e.g. one you have created via
System.module()).
System.define(name, source, options?);
//both evaluates the module code in source and registers the
result.

The future
● No more UMD
● New browser APIs become modules instead
of global variables or properties of navigator.
● No more objects-as-namespaces: i.e. Math,
JSON which serve as namespaces for
functions in ECMAScript 5

Not covered
● Generators
● Promises
● Sets
● Spread Operators
● Rest Parameters
● Default Parameters
● Destructed Assignment

Sources
● Blog: http://www.wintellect.com/devcenter/nstieglitz/5-
great-features-in-es6-harmony
● Modules in depth: http://www.2ality.com/2014/09/es6-
modules-final.html
● ES6 code: http://www.es6fiddle.net/
● ES6 -> ES5: http://babeljs.io/repl/

6 new ES6 features

More Related Content

What's hot (16)

Similar to 6 new ES6 features (20)

6 new ES6 features