ECMAScript 6

ECMAScript is a trademarked scripting language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. Well-known implementations of the language, such as JavaScriptJScript and ActionScript are widely used for client-side scripting on the Web.

Babel

New Features

Block Scope

for ( var i = 0; i < 11; i++ ) {
  console.log( i );
}
console.log( 'Blastoff!' );

console.log( i ); 
// What?! i still exists!  
//That can cause problems.
for ( let i = 0; i < 11; i++ ) {
  console.log( i );
}
console.log( 'Blastoff!' );

console.log( i ); 
// i doesn't exist.
const x = 4

x = 3
//error, x - read only

Arrow Functions

var square = function ( x ) {
  return x * x;
}
let square = x => x * x;
//It also has an implicit return!

Default Parameters

var message = function ( msg = "This is the default message." ) {
  console.log( msg );
}

message();
message( "This is a different message." );

Destructured Assignment

let [ one, two ] = [ 1, 2 ];
let { three, four } = { three: 3, four: 4 };
var one = 1;
var two = 2;

Unicode

// same as ES5.1
"𠮷".length == 2

// new RegExp behaviour, opt-in ‘u’
"𠮷".match(/./u)[0].length == 2

// for-of iterates code points
for(var c of "𠮷") {
  console.log(c);
}

Modules

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;


// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));
// lib/math.js
function sum(x, y) {
  return x + y;
}
var pi = 3.141593;

modules.export.sum = sum;
modules.export.pi = pi;

// app.js
var math = require("lib/math");
alert("2π = " + math.sum(math.pi, math.pi));

// otherApp.js
var math = require("lib/math");
var sum = math.sum;
var pi = math.pi;
alert("2π = " + sum(pi, pi));

ES6 and Rails

  1. gem "sprocket-es6"
  2. Replace .coffee files with .es6 files

Useful links:

ES6 Intro

By Tanya Butenko

ES6 Intro

Introduction to ECMAScript 6

  • 982