The Lesser Known
Features of ECMAScript 6
Bryan Hughes, Ph.D.
@nebrius
Frontend Developer at Rdio
ECMAScript 6 is Coming
Here’s what I’m not talking about:
• Classes
• Modules
• Promises
• Generators
Block Scoped Variables
let your variables be more local:
if (true) {

let foo = 1;

const bar = 2;

console.log(foo, bar);...
Template Literals
Built-in string templating:
let foo = 'Bar';

console.log(`Hello "${foo}"`);
Prints:

Hello "Bar"
Computed Property Names
Dynamic property names in object literals:
let myProp = 'foo';

let myObj = {

[myProp]: 'bar'

}
...
Shorthand Functions
Dynamic property names in object literals:
let myObj = {

foo() { console.log('bar'); }

}

myObj.foo(...
...rest Parameters
No More arguments:
myFunc(1, 2, 3, 4, 5);

function myFunc(a, b, ...rest) {

console.log(a, b);

consol...
...spread Parameters
The opposite of …rest:
let myArray = [2, 3, 4];

myFunc(1, ...myArray);

function myFunc(a, b, c, d) ...
for...of Statements
Better* iteration over arrays:
let myArray = ['a', 'b', 'c'];

for (let myElement of myArray) {

conso...
Destructuring Arrays
Something analogous to Python’s Tuples:
let myArray = [1, 2];

let [a, b] = myArray;

console.log(a, ...
Destructuring Objects
Destructuring gets even better:
let myObj = {

one: 1,

two: 2

};

let { one: a, two: b } = myObj;
...
Mixing it Up
let a = 'first', b = 'last';

print({

[a](c) { return `${c ? "A" : "a"}lice`; },

[b](c) { return `${c ? "J"...
Mixing it Up, Oldschool
var a = 'first', b = 'last';

var myFirstObj = {};

myFirstObj[a] = function(c) { return (c ? 'A' ...
Slides:

slidesha.re/1nFBm5D 

Code:

bit.ly/1nFBGl1
Bryan Hughes
@nebrius
Further Reading
• Human Readable Wiki: http://
wiki.ecmascript.org/doku.php?
id=harmony:proposals
• Formal Spec: http://wi...
Upcoming SlideShare
Loading in …5
×

The Lesser Known Features of ECMAScript 6

689 views

Published on

ECMAScript 6 has a lot of awesome new features coming. Everyone knows about classes, modules, promises, and generators, but what about the rest? This talk will cover a few of the new features that you may not have heard about, including destructuring assignment, computed property names, the “for…of” statement, and the rest and spread operators.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
689
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Check them out at http://wiki.ecmascript.org/doku.php?id=harmony:proposals
  • Wiki: http://wiki.ecmascript.org/doku.php?id=harmony:object_literals#object_literal_computed_property_keys
  • Wiki: http://wiki.ecmascript.org/doku.php?id=harmony:object_literals#object_literal_property_shorthands
  • Wiki: http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters
  • Wiki: http://wiki.ecmascript.org/doku.php?id=harmony:spread
  • Wiki: http://wiki.ecmascript.org/doku.php?id=harmony:iterators
  • Wiki: http://wiki.ecmascript.org/doku.php?id=harmony:destructuring
  • Wiki: http://wiki.ecmascript.org/doku.php?id=harmony:destructuring
  • Read more at: http://wiki.ecmascript.org/doku.php?id=harmony:proposals
    http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

    To play with ECMAScript 6, try Traceur: https://github.com/google/traceur-compiler/wiki/GettingStarted

    All code snippets from this talk are available in a packaged Traceur web page at:
    https://gitlab.theoreticalideations.com/snippets/2
  • The Lesser Known Features of ECMAScript 6

    1. 1. The Lesser Known Features of ECMAScript 6 Bryan Hughes, Ph.D. @nebrius Frontend Developer at Rdio
    2. 2. ECMAScript 6 is Coming Here’s what I’m not talking about: • Classes • Modules • Promises • Generators
    3. 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. 4. Template Literals Built-in string templating: let foo = 'Bar';
 console.log(`Hello "${foo}"`); Prints:
 Hello "Bar"
    5. 5. Computed Property Names Dynamic property names in object literals: let myProp = 'foo';
 let myObj = {
 [myProp]: 'bar'
 }
 console.log(myObj.foo);! Prints:
 bar
    6. 6. Shorthand Functions Dynamic property names in object literals: let myObj = {
 foo() { console.log('bar'); }
 }
 myObj.foo();! Prints:
 bar
    7. 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. 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. 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. 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. 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. 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. 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. 14. Slides:
 slidesha.re/1nFBm5D 
 Code:
 bit.ly/1nFBGl1 Bryan Hughes @nebrius
    15. 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

    ×