The document summarizes lesser known features of ECMAScript 6 including block scoped variables using let and const, template literals, computed property names, shorthand functions, rest and spread parameters, for-of loops, destructuring arrays and objects, and mixing these features together in examples. It provides code samples to demonstrate each new feature and links to further reading on ECMAScript 6 proposals and specifications.

1. The Lesser Known
Features of ECMAScript 6
Bryan Hughes, Ph.D.
@nebrius
Frontend Developer at Rdio

2. ECMAScript 6 is Coming
Here’s what I’m not talking about:
• Classes
• Modules
• Promises
• Generators

3. Block Scoped Variables
let your variables be more local:
if (true) {
let foo = 1;
const bar = 2;
console.log(foo, bar);
bar = 3; // Throws an exception
}
console.log(foo);
Prints:
1 2
Error: bar is read-only
Error: foo is undefined

4. Template Literals
Built-in string templating:
let foo = 'Bar';
console.log(`Hello "${foo}"`);
Prints:
Hello "Bar"

5. Computed Property Names
Dynamic property names in object literals:
let myProp = 'foo';
let myObj = {
[myProp]: 'bar'
}
console.log(myObj.foo);!
Prints:
bar

6. Shorthand Functions
Dynamic property names in object literals:
let myObj = {
foo() { console.log('bar'); }
}
myObj.foo();!
Prints:
bar

7. ...rest Parameters
No More arguments:
myFunc(1, 2, 3, 4, 5);
function myFunc(a, b, ...rest) {
console.log(a, b);
console.log(Array.isArray(rest));
console.log(rest);
}
Prints:
1, 2
true
[3, 4, 5]

8. ...spread Parameters
The opposite of …rest:
let myArray = [2, 3, 4];
myFunc(1, ...myArray);
function myFunc(a, b, c, d) {
console.log(a, b, c, d);
}
Prints:
1, 2, 3, 4

9. for...of Statements
Better* iteration over arrays:
let myArray = ['a', 'b', 'c'];
for (let myElement of myArray) {
console.log(myElement);
}
*not always better
Prints:
a
b
c

10. Destructuring Arrays
Something analogous to Python’s Tuples:
let myArray = [1, 2];
let [a, b] = myArray;
console.log(a, b);
Prints:
1 2

11. Destructuring Objects
Destructuring gets even better:
let myObj = {
one: 1,
two: 2
};
let { one: a, two: b } = myObj;
console.log(a, b);
Prints:
1 2

12. Mixing it Up
let a = 'first', b = 'last';
print({
[a](c) { return `${c ? "A" : "a"}lice`; },
[b](c) { return `${c ? "J" : "j"}ones`; }
}, {
[a](c) { return `${c ? "B" : "b"}ob`; },
[b](c) { return `${c ? "S" : "s"}mith`; }
});
function print(...people) {
for (let { first: a, last: b } of people) {
console.log(b(true) + ', ' + a(false));
}
}
Prints:
Jones, alice
Smith, bob

13. Mixing it Up, Oldschool
var a = 'first', b = 'last';
var myFirstObj = {};
myFirstObj[a] = function(c) { return (c ? 'A' : 'a') + ‘Alice'; };
myFirstObj[b] = function(c) { return (c ? 'J' : 'j') + ‘Jones'; };
var mySecondObj = {};
mySecondObj[a] = function(c) { return (c ? 'B' : 'b') + ‘Bob'; };
mySecondObj[b] = function(c) { return (c ? 'S' : 's') + ‘Smith'; };
print(myFirstObj, mySecondObj);
function print() {
var args = Array.prototype.slice.apply(arguments);
args.forEach(function(arg) {
var a = arg.first;
var b = arg.last;
console.log(b(true) + ', ' + a(false));
});
}

14. Slides:
slidesha.re/1nFBm5D
Code:
bit.ly/1nFBGl1
Bryan Hughes
@nebrius

15. Further Reading
• Human Readable Wiki: http://
wiki.ecmascript.org/doku.php?
id=harmony:proposals
• Formal Spec: http://wiki.ecmascript.org/
doku.php?id=harmony:specification_drafts
• Traceur Compiler: https://github.com/google/
traceur-compiler/wiki/GettingStarted