Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adding ES6 to Your Developer Toolbox

Adding ES6 to Your Developer Toolbox

Web developers constantly look for the latest and greatest ways to hone their craft, but changes come fast. From jQuery to Angular to Ember to React, CoffeeScript to TypeScript, it seems there is always something new. But ES6 is something different. With ES6 we are seeing the evolution of core JavaScript. It includes syntactic improvements and great new features never before seen in client-side code. Linters and transpilers for ES6 are readily available and easy to use. There is no need to wait; learn how to leverage the power of “the new JavaScript” in your applications today!

Jeff Strauss

June 06, 2017
Tweet

More Decks by Jeff Strauss

Other Decks in Technology

Transcript

  1. #devES6 A D D I N G E S 6

    T O Y O U R T O O L B O X @ j e f f r e y s t r a u ss
  2. var greeting = "Hello, " + user.first + " "

    + user.last + "!"; var url = "www.mysite.com" + "/foo/" + fooId + "/bar/" + barId; ES5:
  3. var greeting = "Hello, " + user.first + " "

    + user.last + "!"; var url = "www.mysite.com" + "/foo/" + fooId + "/bar/" + barId; ES5: var greeting = `Hello, ${user.first} ${user.last}!`; var url = `www.mysite.com/foo/${fooId}/bar/${barId}`; ES6:
  4. var poem = "so much depends\n" + "upon\n\n" + "a

    red wheel\n" + "barrow\n\n" + "glazed with rain\n" + "water\n\n" + "beside the white\n" + "chickens"; ES5:
  5. var poem = `so much depends upon a red wheel

    barrow glazed with rain water beside the white ES6:
  6. var drawRect = function(width, height, color) { width = width

    || 1; height = height || 1; color = color || 'orange'; /* draw stuff */ return width * height; }; ES5:
  7. var drawRect = function(width, height, color) { width = width

    || 1; height = height || 1; color = color || 'orange'; /* draw stuff */ return width * height; }; drawRect(); // draws orange; returns 1 ES5:
  8. var drawRect = function(width, height, color) { width = width

    || 1; height = height || 1; color = color || 'orange'; /* draw stuff */ return width * height; }; drawRect(); // draws orange; returns 1 drawRect(0, 4, 'blue'); // draws blue, but returns 4 ES5:
  9. var drawRect = function(width=1, height=1, color='orange') { /* draw stuff

    */ return width * height; }; drawRect(0, 4, 'blue'); // returns 0 ES6:
  10. var myStringArray = new Array("blue"); // ["blue"] var myBoolArray =

    new Array(false); // [false] var myIntArray = new Array(2); // [undefined x 2] ES5:
  11. var myIntArray = new Array(2); // [undefined x 2] ES5:

    var fixedIntArray = Array.of(2); // [2] ES6:
  12. function getArgsArray() { return Array.prototype.slice.apply(arguments); }; getArgsArray('foo', true, 42); //

    ['foo', true, 42] ES5: function getArgsArray() { return Array.from(arguments); }; getArgsArray('foo', true, 42); // ['foo', true, 42] ES6:
  13. var body = ['head', 'shoulders', 'knees', 'toes']; for (var i

    = 0; i < body.length; i++) { tap(body[i]); } ES5:
  14. var body = ['head', 'shoulders', 'knees', 'toes']; for (var i

    = 0; i < body.length; i++) { tap(body[i]); } ES5: var body = ['head', 'shoulders', 'knees', 'toes']; for (var part of body) { tap(part); } ES6:
  15. var alphabet = 'az'; var iter = alphabet[Symbol.iterator](); iter.next(); //

    { done: false, value: 'a' } iter.next(); // { done: false, value: 'z' } ES6: E
  16. var alphabet = 'az'; var iter = alphabet[Symbol.iterator](); iter.next(); //

    { done: false, value: 'a' } iter.next(); // { done: false, value: 'z' } iter.next(); // { done: true, value: undefined } ES6: E
  17. var x, y, z, coords; coords = [29, 22, 37];

    x = coords[0]; y = coords[1]; z = coords[2]; ES5:
  18. var x, y, z, coords; coords = [29, 22, 37];

    x = coords[0]; y = coords[1]; z = coords[2]; ES5: var coords = [29, 22, 37]; var [x, y, z] = coords; ES6:
  19. var x, y, z, coords; coords = [29, 22, 37];

    x = coords[0]; y = coords[1]; z = coords[2]; ES5: var coords = [29, 22, 37]; var [x, y, z] = coords; var [foo, , bar] = coords; ES6:
  20. var user, email, display; user = { name: 'Jeff', email:

    '[email protected]' }; email = user.email; display = user.name; ES5:
  21. var user, email, display; user = { name: 'Jeff', email:

    '[email protected]' }; email = user.email; display = user.name; ES5: var user = { name: 'Jeff', email: '[email protected]' }; var {email} = user; ES6:
  22. var user, email, display; user = { name: 'Jeff', email:

    '[email protected]' }; email = user.email; display = user.name; ES5: var user = { name: 'Jeff', email: '[email protected]' }; var {email} = user; var {name: display} = user; ES6:
  23. var point = [10, 2]; var [x, y, z =

    0] = point; console.log(z); // 0, not undefined var user = { name: 'Jeff', email: '[email protected]' }; var {name, phone = '867-5309'} = user; console.log(phone); // '867-5309', not undefined ES6:
  24. var drawRect = function(width=1, height=1, color='orange') { /* draw stuff

    */ return {area: width * height, hex: getHex(color)}; }; ES6:
  25. var drawRect = function(width=1, height=1, color='orange') { /* draw stuff

    */ return {area: width * height, hex: getHex(color)}; }; var {area, hex: rgb} = drawRect(4, 6, 'blue'); console.log(area); // 24 console.log(rgb); // '#0000FF' ES6:
  26. var drawRect = function(width=1, height=1, color='orange') { /* draw stuff

    */ return {area: width * height, hex: getHex(color)}; }; ES6:
  27. var drawRect = function({w=1, h=1, color='orange'} = {}) { /*

    draw stuff */ return {area: w * h, hex: getHex(color)}; }; ES6:
  28. var drawRect = function({w=1, h=1, color='orange'} = {}) { /*

    draw stuff */ return {area: w * h, hex: getHex(color)}; }; var rect = drawRect({color: 'blue'}) console.log(rect); // {area: 1, hex: '#0000FF'} ES6:
  29. var foo = function(bar) { if (bar) { var message

    = 'Hello!'; // declared here alert(message); } return message; // still in scope here }; ES5:
  30. var foo = function(bar) { if (bar) { (function() {

    var message = 'Hello!'; // declared here alert(message); })(); } return message; // ReferenceError: message is not defined }; ES5:
  31. // assume links has an array of DOM elements for

    (var i = 0; i < links.length; i++) { links[i].onclick = function() { console.log(i); }; } // whoops! all links log the max index! ES5:
  32. // assume links has an array of DOM elements for

    (var i = 0; i < links.length; i++) { links[i].onclick = (function(x) { return function() { console.log(x); // preserved context }; })(i); } // clicking links gives the correct result ES5:
  33. function foo() { x = 10; y = 20; var

    x, y; var area = x * y; return area; }; ES5:
  34. function foo() { x = 10; y = 20; var

    x, y; var area; area = x * y; return area; }; ES5:
  35. function foo() { var x, y; var area; x =

    10; y = 20; area = x * y; return area; }; ES5:
  36. function foo() { var x, y; // yikes! area may

    be in the global scope! x = 10; y = 20; area = x * y; return area; }; ES5:
  37. let

  38. function(bar) { if (bar) { var message = 'Hello!'; //

    declared here alert(message); } return message; // still in scope here }; ES5:
  39. function(bar) { if (bar) { let message = 'Hello!'; //

    declared here alert(message); } return message; // ReferenceError: message is not defined }; ES6:
  40. // assume links has an array of DOM elements for

    (var i = 0; i < links.length; i++) { links[i].onclick = function() { console.log(i); }; }; // whoops! all links log the max index! ES5:
  41. // assume links has an array of DOM elements for

    (let i = 0; i < links.length; i++) { links[i].onclick = function() { console.log(i); }; }; // all better, with no IIFE or extra closure! ES6:
  42. function foo() { x = 10; // ReferenceError: x is

    not defined y = 20; let x, y; let area = x * y; return area; }; ES6:
  43. function logSum(x, y) { var sum = x + y;

    console.log(sum); } ES5:
  44. function logSum(x, y) { var sum = x + y;

    console.log(sum); } ES5: let logSum = (a, b) => { let sum = a + b; console.log(sum); }; ES6:
  45. function sum(x, y) { return x + y; } ES5:

    let sum = (x, y) => x + y; ES6:
  46. let speak = () => 'Hello!'; let wrappedMethod = (arg)

    => innerMethod(arg); let announce = (name) => `Announcing ${name}!`; let getUser = () => ( { id: 42, name: 'Jeff' } ); ES6:
  47. let speak = () => 'Hello!'; let wrappedMethod = (arg)

    => innerMethod(arg); let announce = name => `Announcing ${name}!`; let getUser = () => ( { id: 42, name: 'Jeff' } ); ES6:
  48. let speak = () => 'Hello!'; let wrappedMethod = (arg)

    => innerMethod(arg); let announce = (name) => `Announcing ${name}!`; let getUser = () => ( { id: 42, name: 'Jeff' } ); ES6:
  49. var person = { name: 'Jeff', greet: function() { console.log('Now

    greeting ' + this.name); setTimeout(function() { console.log('Hello, ' + this.name + '!'); }, 3000); } }; ES5:
  50. var person = { name: 'Jeff', greet: function() { console.log('Now

    greeting ' + this.name); setTimeout(function() { console.log('Hello, ' + this.name + '!'); }, 3000); } }; person.greet(); // Now greeting Jeff ES5:
  51. var person = { name: 'Jeff', greet: function() { console.log('Now

    greeting ' + this.name); setTimeout(function() { console.log('Hello, ' + this.name + '!'); }, 3000); } }; person.greet(); // Now greeting Jeff ES5:
  52. var person = { name: 'Jeff', greet: function() { console.log('Now

    greeting ' + this.name); var that = this; setTimeout(function() { console.log('Hello, ' + that.name + '!'); }, 3000); } }; ES5:
  53. var person = { name: 'Jeff', greet: function() { console.log('Now

    greeting ' + this.name); setTimeout(function() { console.log('Hello, ' + this.name + '!'); }.bind(this), 3000); } }; ES5:
  54. let person = { name: 'Jeff', greet: function() { console.log(`Greeting

    ${this.name}`); setTimeout(() => { console.log(`Hello, ${this.name}!`); }, 3000); } }; ES6:
  55. $ npm install --save-dev babel-cli $ npm install --save-dev babel-preset-es2015

    $ echo '{ "presets": ["es2015"] }' > .babelrc $ babel mySource.js -o myTranspiled.js
  56. $ npm install --save-dev babel-cli $ npm install --save-dev babel-preset-es2015

    $ echo '{ "presets": ["es2015"] }' > .babelrc $ babel mySource.js -o myTranspiled.js
  57. W H E R E T O G O F

    R O M H E R E not all-or-nothing