ES6 right now
By @johnkpaul
Who?
John K. Paul
Penton Media
I ♥ JavaScript
@johnkpaul
john@johnkpaul.com
johnkpaul.com
Ecma International
ECMAScript
- 3 - 1999
- 5 - 2009
- 6 - 2014?
- but who cares?
var hasB = "abc".indexOf('b') > -1;
alert(hasB);
var p = new Promise(
function(resolve, reject){
setTimeout(resolve, 1000);
}
);
p.then(function(){
alert('after 1 second');
});
var obj = {key: 'val'};
var obj2 = {key2: 'val2'};
var merged = Object.assign(obj, obj2);
alert(merged.key);
alert(merged.key2);
let set = new Set();
set.add('a');
set.add('b');
set.add('c');
set.add('b');
alert(set.size);
set.forEach(alert);
var obj = {'key': 'val'};
var map = new Map();
map.set('key', 'val');
alert('key' in obj);
alert(map.has('key'));
<script>
- Promise()
- Map()
- Number.isNaN()
- Object.is()
- String.prototype.contains()
- String.prototype.codePointAt()
- Array.from()
- Set()
- so much more
block scoped variables
var arr = [1,2,3];
var o = [];
for(var i = 0; i<arr.length;i++) {
var val = arr[i];
o.push(function(){ alert(val); });
}
o.forEach(function(func){ func(); });
array comprehensions
correction - have been moved to ES7
var arr = [1, 2, 3, 4];
var doubled = [for (x of arr) 2*x];
doubled.forEach(alert);
lamda / fat arrow
'use strict';
var double = (x) => x * 2;
alert(double(10));
/*
var alertLoc;
var obj = {
loc: 'Chicago',
init: function(){
alertLoc = () =>
alert("We're in " + this.loc);
}
};
obj.init();
alertLoc();
*/
destructuring assignment
var arr = [1, 2, 3];
func(arr);
function func([fst, snd, thd]){
alert(fst);
alert(thd);
}
/* REST PARAMETERS vvv
function destructure(...args){
var [options, callback] = args;
alert(options.v);
alert(typeof callback);
}
var o = {v: true}
destructure(o, () => $.noop);
*/
template strings
var first = "John K."
var last = "Paul";
var t = `I'm ${first} ${last}!`;
alert(t);
function* inf(){
var i = 0;
while(true){
yield ++i;
}
}
for(var x of inf()){
alert(x);
if(x > 3) { break; }
}
class Greeter {
constructor(message) {
this.message = message;
}
greet() {
alert(this.message)
}
}
var greeter = new Greeter('Hey');
greeter.greet();
default exports
// a.js
var name = "jqcon";
export default name;
// b.js
import name from "a";
alert(name);
named exports
// a.js
var name = "jqcon";
var location = "Chicago";
export name;
export location;
// b.js
import {location, name} from "a";
alert(name + " is in " + location);
named exports, import namespace
// a.js
var name = "jqcon";
var location = "Chicago";
export name;
export location;
// b.js
import * as a from "a";
alert(a.name + " is in " + a.location);
node --harmony
grunt-traceur
by Aaron Frost
// Gruntfile.js
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-traceur');
grunt.initConfig({
traceur: {
options: {
experimental: true,
includeRuntime: true,
modules: 'register'
},
custom: {
files: [{
expand: true,
src: ['es6.js'],
dest: 'dist'
}]
},
},
});
};
gulp-traceur
by Sindre Sorhus
// gulpfile.js
var gulp = require('gulp');
var traceur = require('gulp-traceur');
var concat = require('gulp-concat');
var traceurOptions = {
experimental: true,
modules: false
};
gulp.task('default', function () {
gulp.src([traceur.RUNTIME_PATH])
.pipe(gulp.dest('dist'));
return gulp.src(['es6.js'])
.pipe(traceur(traceurOptions))
.pipe(gulp.dest('dist'));
});
broccoli-traceur
by Sindre Sorhus
// Brocfile.js
var pickFiles = require('broccoli-static-compiler');
var tree = pickFiles('app', {
srcDir: '/',
destDir: 'dist'
});
var traceurOptions = {
experimental: true,
modules: false
};
var traceur = require('broccoli-traceur');
tree = traceur(tree, traceurOptions);
module.exports = tree;
es6ify
by Thorsten Lorenz
browserify transform
var es6ify = require('es6ify');
var browserify = require('browserify');
browserify()
.add(es6ify.runtime)
.transform(es6ify)
.require(require.resolve('./es6.js'), { entry: true })
.bundle()
.pipe(fs.createWriteStream('es5.js'));
The intractable
- Weak Maps
- Proxies
- Tail call optimization
ES6
What you should do
- Add es6-shim
- Play around in the traceur repl
- Read up on ES6 features
- Read Ariya Hidayat
- Read Axel Rauschmayer
- Read Addy Osmani
- Add a branch with an ES6 transpiler