ECMAScript 6 Features for Better JavaScript Code
•
4 likes•843 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to ECMAScript 6 Features for Better JavaScript Code
Similar to ECMAScript 6 Features for Better JavaScript Code (20)
More from Bryan Hughes
More from Bryan Hughes (6)
Recently uploaded
Recently uploaded (20)
ECMAScript 6 Features for Better JavaScript Code
- 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)); }); }
- 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
Editor's Notes
- 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