Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#devES6
A D D I N G E S 6 T O YO U R T O O L B OX
@ j e f f r e y s t r a u s s
”ES6? That's the new JavaScript!
~ mr. developer
”No!
~ me
ECMAScript
ECMAScript2015
not all-or-nothing
experiment
ES6 IS AN EVOLUTION
experiment
NOT ALL-OR-NOTHING
strings
template literals
var greeting =
"Hello, " + user.first + " " + user.last + "!";
var url =
"www.mysite.com" + "/foo/" + fooId + "/bar/" + ba...
`backticks`
${expression}
var greeting =
"Hello, " + user.first + " " + user.last + "!";
var url =
"www.mysite.com" + "/foo/" + fooId + "/bar/" + ba...
multi-line strings
var poem = "so much dependsn"
+ "uponnn"
+ "a red wheeln"
+ "barrownn"
+ "glazed with rainn"
+ "waternn"
+ "beside the whi...
var poem =
`so much depends
upon
a red wheel
barrow
glazed with rain
water
beside the white
chickens`;
ES6:
default
parameters
var drawRect = function(width, height, color) {
width = width || 1;
height = height || 1;
color = color || 'orange';
/* dr...
var drawRect = function(width, height, color) {
width = width || 1;
height = height || 1;
color = color || 'orange';
/* dr...
var drawRect = function(width=1, height=1, color='orange') {
/* draw stuff */
return width * height;
};
ES6:
var drawRect = function(width=1, height=1, color='orange') {
/* draw stuff */
return width * height;
};
drawRect(0, 4, 'bl...
collections
arrays
var myStringArray = new Array("blue");
// ["blue"]
var myBoolArray = new Array(false);
// [false]
var myIntArray = new Arr...
var myIntArray = new Array(2);
// [undefined x 2]
ES5:
var fixedIntArray = Array.of(2);
// [2]
ES6:
function getArgsArray() {
return Array.prototype.slice.apply(arguments);
};
getArgsArray('foo', true, 42);
// ['foo', true...
function getArgsArray() {
return Array.prototype.slice.apply(arguments);
};
getArgsArray('foo', true, 42);
// ['foo', true...
iterables
`for-of` loop
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 i = 0; i < body.length; i++) { tap(body[i]) };
ES5:
var body =...
var alphabet = 'abcdefg';
for (var letter of alphabet) {
sing(letter);
}
ES6:
E
...spread operator
var alphabet = 'abcdefg';
function sing() {
console.log(arguments);
}
sing(...alphabet);
// ["a", "b", "c", "d", "e", "f",...
destructuring
[ ] = fooArray;
{ } = fooObject;
var x, y, z, coords;
coords = [29, 22, 37];
x = coords[0];
y = coords[1];
z = coords[2];
ES5:
var x, y, z, coords;
coords = [29, 22, 37];
x = coords[0];
y = coords[1];
z = coords[2];
ES5:
var coords = [29, 22, 37];
v...
var x, y, z, coords;
coords = [29, 22, 37];
x = coords[0];
y = coords[1];
z = coords[2];
ES5:
var coords = [29, 22, 37];
v...
var user, email, display;
user = { name: 'Jeff', email: 'jeff@aranasoft.com' };
email = user.email;
display = user.name;
E...
var user, email, display;
user = { name: 'Jeff', email: 'jeff@aranasoft.com' };
email = user.email;
display = user.name;
E...
swapping variables
var temp = x;
x = y;
y = temp;
ES5:
[y, x] = [x, y];
ES6:
process return values
var drawRect = function(width=1, height=1, color='orange') {
/* draw stuff */
return {area: width * height, hex: getHex(co...
var drawRect = function(width=1, height=1, color='orange') {
/* draw stuff */
return {area: width * height, hex: getHex(co...
{ scope }
block-scoped vars
function-scoped
var foo = function(bar) {
if (bar) {
var message = 'Hello!'; // declared here
alert(message);
}
return message; // still i...
iife
IMMEDIATELY

INVOKED

FUNCTION

EXPRESSION
var foo = function(bar) {
if (bar) {
(function() {
var message = 'Hello!'; // declared here
alert(message);
})();
}
return...
closure
// assume links has an array of DOM elements
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
cons...
// assume links has an array of DOM elements
for (var i = 0; i < links.length; i++) {
links[i].onclick = (function(x) {
re...
hoisting & globals
function foo() {
x = 10;
y = 20;
var x, y;
var area = x * y;
return area;
};
ES5:
function foo() {
var x, y;
var area;
x = 10;
y = 20;
area = x * y;
return area;
};
ES5:
function foo() {
var x, y;
// yikes! area may be in the global scope!
x = 10;
y = 20;
area = x * y;
return area;
};
ES5:
let
function(bar) {
if (bar) {
var message = 'Hello!'; // declared here
alert(message);
}
return message; // still in scope he...
function(bar) {
if (bar) {
let message = 'Hello!'; // declared here
alert(message);
}
return message; // ReferenceError: m...
// assume links has an array of DOM elements
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
cons...
// assume links has an array of DOM elements
for (let i = 0; i < links.length; i++) {
links[i].onclick = function() {
cons...
temporal dead zone
function foo() {
x = 10; // ReferenceError: x is not defined
y = 20;
let x, y;
let area = x * y;
return area;
};
ES6:
arrow functions
syntax
(args) => { statements }
function logSum(x, y) {
var sum = x + y;
console.log(sum);
}
ES5:
function logSum(x, y) {
var sum = x + y;
console.log(sum);
}
ES5:
let logSum = (a, b) => {
let sum = a + b;
console.log(su...
(args) => expression;
function sum(x, y) {
return x + y;
}
ES5:
let sum = (x, y) => x + y;
ES6:
let speak = () => 'Hello!';
let wrappedMethod = (arg) => innerMethod(arg);
let announce = (name) => `Announcing ${name}!`;...
let speak = () => 'Hello!';
let wrappedMethod = (arg) => innerMethod(arg);
let announce = name => `Announcing ${name}!`;
l...
let speak = () => 'Hello!';
let wrappedMethod = (arg) => innerMethod(arg);
let announce = (name) => `Announcing ${name}!`;...
lexical `this`
var person = {
name: 'Jeff',
greet: function() {
console.log('Now greeting ' + this.name);
setTimeout(function() {
console...
var person = {
name: 'Jeff',
greet: function() {
console.log('Now greeting ' + this.name);
setTimeout(function() {
console...
var person = {
name: 'Jeff',
greet: function() {
console.log('Now greeting ' + this.name);
setTimeout(function() {
console...
that | self
{ }.bind(this)
var person = {
name: 'Jeff',
greet: function() {
console.log('Now greeting ' + this.name);
var that = this;
setTimeout(fun...
var person = {
name: 'Jeff',
greet: function() {
console.log('Now greeting ' + this.name);
setTimeout(function() {
console...
let person = {
name: 'Jeff',
greet: function() {
console.log(`Greeting ${this.name}`);
setTimeout(() => {
console.log(`Hel...
putting it to use
compatibility
http://kangax.github.io
/compat-table/es6
bit.ly/es6-compat
$ npm install --save-dev babel-cli
$ npm install --save-dev babel-preset-es2015
$ echo '{ "presets": ["es2015"] }' > .babe...
flexibility
flexibility
babeljs.io/repl
not all-or-nothing
N E X T S T E P S
es6 is an evolution
evolve
@ j e f f r e y S t r a u s s
# d e v E S 6
jeff@aranasoft.com
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
Upcoming SlideShare
Loading in …5
×

Adding ES6 to Your Developer Toolbox

455 views

Published on

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!

Published in: Software
  • Be the first to comment

Adding ES6 to Your Developer Toolbox

  1. 1. #devES6 A D D I N G E S 6 T O YO U R T O O L B OX @ j e f f r e y s t r a u s s
  2. 2. ”ES6? That's the new JavaScript! ~ mr. developer
  3. 3. ”No! ~ me
  4. 4. ECMAScript
  5. 5. ECMAScript2015
  6. 6. not all-or-nothing experiment ES6 IS AN EVOLUTION
  7. 7. experiment NOT ALL-OR-NOTHING
  8. 8. strings
  9. 9. template literals
  10. 10. var greeting = "Hello, " + user.first + " " + user.last + "!"; var url = "www.mysite.com" + "/foo/" + fooId + "/bar/" + barId; ES5:
  11. 11. `backticks`
  12. 12. ${expression}
  13. 13. 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:
  14. 14. multi-line strings
  15. 15. var poem = "so much dependsn" + "uponnn" + "a red wheeln" + "barrownn" + "glazed with rainn" + "waternn" + "beside the whiten" + "chickens"; ES5:
  16. 16. var poem = `so much depends upon a red wheel barrow glazed with rain water beside the white chickens`; ES6:
  17. 17. default parameters
  18. 18. var drawRect = function(width, height, color) { width = width || 1; height = height || 1; color = color || 'orange'; /* draw stuff */ return width * height; }; ES5:
  19. 19. 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:
  20. 20. var drawRect = function(width=1, height=1, color='orange') { /* draw stuff */ return width * height; }; ES6:
  21. 21. var drawRect = function(width=1, height=1, color='orange') { /* draw stuff */ return width * height; }; drawRect(0, 4, 'blue'); // returns 0 ES6:
  22. 22. collections
  23. 23. arrays
  24. 24. var myStringArray = new Array("blue"); // ["blue"] var myBoolArray = new Array(false); // [false] var myIntArray = new Array(2); // [undefined x 2] ES5:
  25. 25. var myIntArray = new Array(2); // [undefined x 2] ES5: var fixedIntArray = Array.of(2); // [2] ES6:
  26. 26. function getArgsArray() { return Array.prototype.slice.apply(arguments); }; getArgsArray('foo', true, 42); // ['foo', true, 42] ES5:
  27. 27. 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:
  28. 28. iterables
  29. 29. `for-of` loop
  30. 30. var body = ['head', 'shoulders', 'knees', 'toes']; for (var i = 0; i < body.length; i++) { tap(body[i]) }; ES5:
  31. 31. 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:
  32. 32. var alphabet = 'abcdefg'; for (var letter of alphabet) { sing(letter); } ES6: E
  33. 33. ...spread operator
  34. 34. var alphabet = 'abcdefg'; function sing() { console.log(arguments); } sing(...alphabet); // ["a", "b", "c", "d", "e", "f", "g"] ES6: E
  35. 35. destructuring
  36. 36. [ ] = fooArray;
  37. 37. { } = fooObject;
  38. 38. var x, y, z, coords; coords = [29, 22, 37]; x = coords[0]; y = coords[1]; z = coords[2]; ES5:
  39. 39. 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:
  40. 40. 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:
  41. 41. var user, email, display; user = { name: 'Jeff', email: 'jeff@aranasoft.com' }; email = user.email; display = user.name; ES5:
  42. 42. var user, email, display; user = { name: 'Jeff', email: 'jeff@aranasoft.com' }; email = user.email; display = user.name; ES5: var user = { name: 'Jeff', email: 'jeff@aranasoft.com' }; var {email} = user; var {name: display} = user; ES6:
  43. 43. swapping variables
  44. 44. var temp = x; x = y; y = temp; ES5: [y, x] = [x, y]; ES6:
  45. 45. process return values
  46. 46. var drawRect = function(width=1, height=1, color='orange') { /* draw stuff */ return {area: width * height, hex: getHex(color)}; }; ES6:
  47. 47. 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'); // area == 24, rgb == '#0000FF' ES6:
  48. 48. { scope }
  49. 49. block-scoped vars
  50. 50. function-scoped
  51. 51. var foo = function(bar) { if (bar) { var message = 'Hello!'; // declared here alert(message); } return message; // still in scope here }; ES5:
  52. 52. iife IMMEDIATELY
 INVOKED
 FUNCTION
 EXPRESSION
  53. 53. var foo = function(bar) { if (bar) { (function() { var message = 'Hello!'; // declared here alert(message); })(); } return message; // ReferenceError: message is not defined }; ES5:
  54. 54. closure
  55. 55. // 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:
  56. 56. // 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:
  57. 57. hoisting & globals
  58. 58. function foo() { x = 10; y = 20; var x, y; var area = x * y; return area; }; ES5:
  59. 59. function foo() { var x, y; var area; x = 10; y = 20; area = x * y; return area; }; ES5:
  60. 60. function foo() { var x, y; // yikes! area may be in the global scope! x = 10; y = 20; area = x * y; return area; }; ES5:
  61. 61. let
  62. 62. function(bar) { if (bar) { var message = 'Hello!'; // declared here alert(message); } return message; // still in scope here }; ES5:
  63. 63. function(bar) { if (bar) { let message = 'Hello!'; // declared here alert(message); } return message; // ReferenceError: message is not defined }; ES6:
  64. 64. // 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:
  65. 65. // 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:
  66. 66. temporal dead zone
  67. 67. function foo() { x = 10; // ReferenceError: x is not defined y = 20; let x, y; let area = x * y; return area; }; ES6:
  68. 68. arrow functions
  69. 69. syntax
  70. 70. (args) => { statements }
  71. 71. function logSum(x, y) { var sum = x + y; console.log(sum); } ES5:
  72. 72. function logSum(x, y) { var sum = x + y; console.log(sum); } ES5: let logSum = (a, b) => { let sum = a + b; console.log(sum); }; ES6:
  73. 73. (args) => expression;
  74. 74. function sum(x, y) { return x + y; } ES5: let sum = (x, y) => x + y; ES6:
  75. 75. let speak = () => 'Hello!'; let wrappedMethod = (arg) => innerMethod(arg); let announce = (name) => `Announcing ${name}!`; let getUser = () => ( { id: 42, name: 'Jeff' } ); ES6:
  76. 76. let speak = () => 'Hello!'; let wrappedMethod = (arg) => innerMethod(arg); let announce = name => `Announcing ${name}!`; let getUser = () => ( { id: 42, name: 'Jeff' } ); ES6:
  77. 77. let speak = () => 'Hello!'; let wrappedMethod = (arg) => innerMethod(arg); let announce = (name) => `Announcing ${name}!`; let getUser = () => ( { id: 42, name: 'Jeff' } ); ES6:
  78. 78. lexical `this`
  79. 79. var person = { name: 'Jeff', greet: function() { console.log('Now greeting ' + this.name); setTimeout(function() { console.log('Hello, ' + this.name + '!'); }, 3000); } }; ES5:
  80. 80. 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:
  81. 81. 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 // Hello, ! ES5:
  82. 82. that | self
  83. 83. { }.bind(this)
  84. 84. var person = { name: 'Jeff', greet: function() { console.log('Now greeting ' + this.name); var that = this; setTimeout(function() { console.log('Hello, ' + that.name + '!'); }, 3000); } }; ES5:
  85. 85. var person = { name: 'Jeff', greet: function() { console.log('Now greeting ' + this.name); setTimeout(function() { console.log('Hello, ' + this.name + '!'); }.bind(this), 3000); } }; ES5:
  86. 86. let person = { name: 'Jeff', greet: function() { console.log(`Greeting ${this.name}`); setTimeout(() => { console.log(`Hello, ${this.name}!`); }, 3000); } }; ES6:
  87. 87. putting it to use
  88. 88. compatibility
  89. 89. http://kangax.github.io /compat-table/es6
  90. 90. bit.ly/es6-compat
  91. 91. $ npm install --save-dev babel-cli $ npm install --save-dev babel-preset-es2015 $ echo '{ "presets": ["es2015"] }' > .babelrc $ babel mySource.js -o myTranspiled.js
  92. 92. flexibility
  93. 93. flexibility
  94. 94. babeljs.io/repl
  95. 95. not all-or-nothing N E X T S T E P S
  96. 96. es6 is an evolution
  97. 97. evolve
  98. 98. @ j e f f r e y S t r a u s s # d e v E S 6 jeff@aranasoft.com

×