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

Road to ES6

Road to ES6

An introduction to ES6 (and some ESnext) new features.

E22edc988280c3b6ff183318bc1590c2?s=128

weLaika

May 04, 2016
Tweet

Transcript

  1. Road to ES6 Torino Coding Society 02/05/2016

  2. Change is good

  3. WHY JAVASCRIPT?

  4. WHY (AND WHAT IS) ES6?

  5. Let The let statement declares a block ({ statements })

    scope local variable. let is the new var
  6. The problem with blocks in ES5 was var i =

    1; console.log(i); // 1 if (true) { var i = 0; console.log(i); // 0 } console.log(i); // 0
  7. ES6 var i = 1; console.log(i); // 1 if (true)

    { let i = 0; console.log(i); // 0 } console.log(i); // 1 ES5 var i = 1; console.log(i); // 1 if (true) { var _i = 0; console.log(_i); // 0 } console.log(i); // 1
  8. Const The const declaration creates a read-only reference to a

    value. It does not mean the value it holds is immutable, just that the variable identi er cannot be reassigned. Constants can be declared with uppercase or lowercase, but a common convention is to use all- uppercase letters.
  9. CONST const MY_CONST = 7; MY_CONST = 20; // repl:

    "MY_CONST" is read-only const MY_CONST = 20; // repl: Duplicate declaration "MY_CONST" var MY_CONST = 20; // repl: Duplicate declaration "MY_CONST" const FOO; // SyntaxError: missing = in const declaration
  10. CONST // const also works on objects const MY_OBJECT =

    {"key": "value"}; MY_OBJECT = {"OTHER_KEY": "value"}; // repl: "MY_OBJECT" is read-only // Object attributes are not protected MY_OBJECT.key = "otherValue"; console.log(MY_OBJECT) // {"key":"otherValue"} // const are not immutable const MY_ARRAY = [1]; MY_ARRAY.push(2); console.log(MY_ARRAY); // [1,2]
  11. Arrow functions A new compact syntax for functions. Arrow operator

    preserve context.
  12. ES6 i => i*2 () => 2 (a,i) => i*a

    i => { a = i*2 return a + 4 } ES5 (function (i) { return i * 2; }); (function () { return 2; }); (function (a, i) { return i * a; }); (function (i) { a = i * 2; return a + 4; });
  13. LEXICAL THIS ES6 this.nums.forEach((v) => { if (v % 5

    === 0) this.fives.push(v) }) ES5 // variant 1 var self = this; this.nums.forEach(function (v) { if (v % 5 === 0) self.fives.push(v); }); // variant 2 (since ECMAScript 5.1 only) this.nums.forEach(function (v) { if (v % 5 === 0) this.fives.push(v); }.bind(this));
  14. Destructuring Arrays and object pattern matching and assignment.

  15. ARRAY MATCHING ES6 let list = [ 1, 2, 3

    ] let [ a, , b ] = list [ b, a ] = [ a, b ] ES5 var list = [1, 2, 3]; var a = list[0]; var b = list[2]; var _ref = [a, b]; b = _ref[0]; a = _ref[1];
  16. OBJECT MATCHING ES6 // direct assignment let obj = {

    a: 1, b: 2 }; let { a: a_var, b: b_var } = obj // assign returning object from a function let { st_par, nd_par } = getParams() // Default params var list = [ 7, 42 ] var [ a = 1, b, d = 0 ] = list ES5 var obj = { a: 1, b: 2 }; var a_var = obj.a; var b_var = obj.b; var _getParams = getParams(); var st_par = _getParams.st_par; var nd_par = _getParams.nd_par; var list = [7, 42]; var _list$ = list[0]; var a = _list$ === undefined ? 1 : _list$; var _list$2 = list[1]; var b = _list$2 === undefined ? 2 : _list$2; var d = list[2]; console.log(a, b, d) // 7, 42, 0
  17. OBJECT MATCHING ES6 // automatic assignment and filtering let user

    = {name: "Filippo", nickname: "mukkoo", socials: [{id: 1, facebook: "null"}, {id: 2, twitter: "@mukkoo" let {nickname, socials: [, twitter] } = user // nickname: "mukkoo" // twitter: {id: 2, twitter: "@mukkoo"} ES5 var _slicedToArray = function () { **...something here...** }(); var user = { name: "Filippo", nickname: "mukkoo", socials: [{ id: 1, facebook: "null" }, { id: 2, twitter: "@mukkoo var nickname = user.nickname; var _user$socials = _slicedToArray(user.socials, 2); var twitter = _user$socials[1];
  18. Parameter handling Default values, rest parameters & spread operator

  19. DEFAULT VALUES ES6 let my_func = (a = 2, b)

    => a + b ES5 var my_func = function my_func(a, b) { var a = arguments.length <= 0 || arguments[0] === undefined ? 2 : arguments var b = arguments[1]; return a + b; };
  20. REST PARAMETERS ES6 function f (x, ...a) { a //

    [2,"something",true,[1,2,3]] } f(1, 2, "something", true, [1,2,3]) ES5 function f(x) { for (var _len = arguments.length, a = Array(_len > 1 ? _len - 1 : _key = 1; _key < _len; _key++) { a[_key - 1] = arguments[_key]; } return a; } f(1, 2, "something", true, [1, 2, 3]);
  21. SPREAD OPERATOR ES6 let str = "foo" let chars =

    [ ...str ] // ["f", "o", "o"] let chars_obj = { ...str } // {"0":"f","1":"o","2":"o"} ES5 var str = "foo"; function _toConsumableArray(arr) { **...something here...** } var chars = [].concat(_toConsumableArray(str)); var _extends = Object.assign || function (target) { **...something here...** var chars_obj = _extends({}, str);
  22. String interpolation

  23. STRING INTERPOLATION ` operator (multiline) and ${} interpolation ES6 let

    user = { name: "Filippo" } let cart = { amount: 7 } let message = `Hello ${user.name}, your cart total is ${cart.amount} $` // Hello Filippo, // your cart total is 7 $ ES5 var user = { name: "Foo" }; var cart = { amount: 7 }; var message = "Hello " + user.name + ",\nyour cart total is " + cart.amount +
  24. Iterators An iterator enables custom iterations over an object. Is

    a function (Symbol.iterator) that return an object.
  25. ITERATORS Declare a function that returns an object with one

    function called next() that returns an object with two properties: value (current) and done (if iteration finished). let fibonacci = { [Symbol.iterator]() { let pre = 0, cur = 1 return { next () { [ pre, cur ] = [ cur, pre + cur ] return { done: false, value: cur } } } } } // for..of operator for (let n of fibonacci) { if (n > 100) break
  26. Classes OOP-style objects.

  27. CLASS DEFINITION ES6 class Shape { constructor (id, x, y)

    { this.id = id this.move(x, y) } move (x, y) { this.x = x this.y = y } } ES5 raw var Shape = function (id, x, y) { this.id = id; this.move(x, y); }; Shape.prototype.move = function (x, y) { this.x = x; this.y = y; };
  28. CLASS INHERITANCE ES6 class Rectangle extends Shape { constructor (id,

    x, y, width, height) { super(id, x, y) this.width = width this.height = height } } class Circle extends Shape { constructor (id, x, y, radius) { super(id, x, y) this.radius = radius } }
  29. Modules Support for exporting/importing values from/to modules (also single modules)

    without global namespace pollution. Support for asynchronous module loading.
  30. MODULES // lib/math.js export function sum (x, y) { return

    x + y } export var pi = 3.141593 // someApp.js import * as math from "lib/math" console.log("2π = " + math.sum(math.pi, math.pi)) // otherApp.js import { sum, pi } from "lib/math" console.log("2π = " + sum(pi, pi)) // lib/mathplusplus.js export * from "lib/math" export var e = 2.71828182846
  31. Promises The Promise object is used for deferred and asynchronous

    computations. A Promise represents an operation that hasn't completed yet, but is expected in the future. A Promise is in one of these states: pending: initial state, not ful lled or rejected. ful lled: meaning that the operation completed successfully. rejected: meaning that the operation failed.
  32. PROMISES & CHAINED PROMISES No more callback pyramid! ES6 function

    msgAfterTimeout (msg, who, timeout) { return new Promise((resolve, reject) => { setTimeout(() => resolve(` `), timeout) }) } msgAfterTimeout("", "Foo", 100).then((msg) => msgAfterTimeout(msg, "Bar", 200) ).then((msg) => { console.log(` `) }) ${msg} Hello ${who}! done after 300ms:${msg}
  33. PROMISES COMBINATION Parallel usage ES6 function fetchAsync (url, timeout, onData,

    onError) { … } let fetchPromised = (url, timeout) => { return new Promise((resolve, reject) => { fetchAsync(url, timeout, resolve, reject) }) } Promise.all([ fetchPromised("http://backend/foo.txt", 500), fetchPromised("http://backend/bar.txt", 500), fetchPromised("http://backend/baz.txt", 500) ]).then((data) => { let [ foo, bar, baz ] = data console.log(` `) success: foo=${foo} bar=${bar} baz=${baz}
  34. None
  35. Built-in methods

  36. Assign var dst = { quux: 0 } var src1

    = { foo: 1, bar: 2 } var src2 = { foo: 3, baz: 4 } Object.assign(dst, src1, src2) // dst: { quux: 0, foo: 3, bar: 2, baz: 4 } Find [ 1, 3, 4, 2 ].find(x => x > 3) // 4 [ 1, 3, 4, 2 ].find(x => x > 2) // 3 [ 1, 4, 3, 2 ].find(x => x > 2) // 4 Repeat "foo".repeat(3) // foofoofoo
  37. String search "hello".startsWith("ello", 1) // true "hello".endsWith("hell", 4) // true

    "hello".includes("ell") // true "hello".includes("ell", 1) // true "hello".includes("ell", 2) // false Number check Number.isNaN(42) === false Number.isNaN(NaN) === true Number.isFinite(Infinity) === false Number.isFinite(-Infinity) === false Number.isFinite(NaN) === false Number.isFinite(123) === true Number.isFinite("123") === false isFinite("123") = true
  38. Number trunc Math.trunc(42.7) // 42 Math.trunc( 0.1) // 0 Math.trunc(-0.1)

    // -0 Number sign Math.sign(7) // 1 Math.sign(0) // 0 Math.sign(-0) // -0 Math.sign(-7) // -1 Math.sign(NaN) // NaN
  39. ESnext

  40. PIPE OPERATOR ES6 let repeat = (str) => str +

    ", " + str let exclaim = (str) => str + "!" exclaim(repeat('hello')) // hello, hello! ESnext let repeat = (str) => str + ", " + str let exclaim = (str) => str + "!" 'hello' |> repeat |> exclaim // hello, hello!
  41. ASYNC/AWAIT function wait(t){ return new Promise((r) => setTimeout(r, t)); }

    async function asyncFunc(){ await wait(1000); } asyncFunc().then(() => console.log("3"));
  42. OTHER STUFF Exponentiation Operator let squared = 2 ** 2;

    // same as: 2 * 2 let cubed = 2 ** 3; // same as: 2 * 2 * 2 Values/Entries { a: 1, b: 2, c: 3 }.values // [1, 2, 3] { a: 1, b: 2, c: 3 }.entries // [['a', 1], ['b', 2], ['c', 3]]
  43. LEFT OUT Block-scoped functions Regular Expression Sticky Matching Enhanced Object

    Properties: Computed Property Names Enhanced Object Properties: Method Properties Destructuring Assignment: Fail-So Destructuring Template Literals: Custom Interpolation Template Literals: Raw String Access Extended Literals: Binary & Octal Literal
  44. Extended Literals: Unicode String & RegExp Literal Generators Classes: Static

    members Modules: Default export Symbol type Typed Arrays Meta-Programming: Proxying and Reflection Internationalization & Localization
  45. References corso-javascript.it babeljs.io es6-features.org github.com/hemanth/es7-features http://kangax.github.io/compat-table/esnext/

  46. THANKS! torinocodingsociety.it dev.welaika.com @MUKKOO