ES6Rocks! JSConf Argentina 2014

ES6Rocks! JSConf Argentina 2014

ES6 is the sixth version of the language we love. The ECMAScript sixth version will be released in mid 2015, but all majors browsers are currently implementing the features we’ll have soon. In this talk you will know why ES6 Rocks! Also, you’ll learn how to write your code today with the new set of features and syntax both on node and the browser.

572696200604e59baa59ee90d61f7d02?s=128

Jaydson Gomes

November 29, 2014
Tweet

Transcript

  1. 3.
  2. 7.
  3. 8.
  4. 10.

    // String.contains(txt, start) let msg = "JS Conf Argentina!"; console.log(msg.includes("!"));

    // true console.log(msg.includes("JS")); // true console.log(msg.includes("X")); // false console.log(msg.includes("JS", 8)); // false String.includes(txt, start) https://github.com/tc39/Array.prototype.includes
  5. 11.

    // String.startsWith(txt, start) let msg = "JS Conf Argentina!"; console.log(msg.startsWith("JS"));

    // true console.log(msg.startsWith("js")); // false console.log(msg.startsWith("C")); // false console.log(msg.startsWith("C", 3)); // true
  6. 12.

    // String.endsWith(txt, end) let msg = "JS Conf Argentina!"; console.log(msg.endsWith("!"));

    // true console.log(msg.endsWith("Argentina!")); // true console.log(msg.endsWith("na!", 8)); // false console.log(msg.endsWith("Conf", 7)); // true
  7. 14.

    // Template strings // Basic literal string creation console.log(`In JavaScript

    '\n' is a line-feed.`); // Multiline strings console.log(`In JavaScript this is not legal.`); // Construct a DOM query var name = "Bob", time = "today"; console.log(`Hello ${name}, how are you ${time}?`);
  8. 15.

    // Template strings // Basic literal string creation console.log(`In JavaScript

    '\n' is a line-feed.`); // Multiline strings console.log(`In JavaScript this is not legal.`); // Construct a DOM query var name = "Bob", time = "today"; console.log(`Hello ${name}, how are you ${time}?`);
  9. 16.

    // Template strings // Basic literal string creation console.log(`In JavaScript

    '\n' is a line-feed.`); // Multiline strings console.log(`In JavaScript this is not legal.`); // Construct a DOM query var name = "Bob", time = "today"; console.log(`Hello ${name}, how are you ${time}?`);
  10. 17.

    // Tagged template strings let upper = function(strings, ...values) {

    let result = ''; for (let i = 0; i < strings.length - 1; i += 1) { result += strings[i].toUpperCase() + values[i].toUpperCase(); } return result; } let name = 'Jaydson'; let conf = 'JSConf'; let result = upper `Hello ${name}, welcome to ${conf}`; console.log(result); HELLO JAYDSON, WELCOME TO JSCONF
  11. 18.

    // simple i18n implementation let currentLang = 'en'; let strs

    = { 'en': { 'Hello ': 'Hello ', ', welcome to': ', welcome to ' }, 'es-ar': { 'Hello ': 'Hola ', ', welcome to': ', bienvenido a ' } }
  12. 19.

    // simple i18n implementation let i18n = function(strings, ...values) {

    let result = ''; let len = strings.length - 1; for (let i = 0; i < len; i +=1) { result += strs[currentLang][strings[i]] + values[i]; } return result; }; http://www.es6fiddle.net/i0r5wpso/ http://jaysoo.ca/2014/03/20/i18n-with-es6-template-strings/
  13. 20.

    // simple i18n implementation currentLang = 'es-ar'; let name =

    'Jaydson'; let conf = 'JSConf'; let result = i18n `Hello ${name}, welcome to ${conf}`; console.log(result); // Hola Jaydson, bienvenido a JSConf
  14. 21.

    // Octal and Binary Literals // ECMAScript 6 var value1

    = 0o71; // 57 in decimal var value2 = 0b101; // 5 in decimal Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
  15. 22.

    // isFinite() and isNaN() console.log(isFinite("25")); // true console.log(Number.isFinite("25")); // false

    console.log(isNaN("NaN")); // true console.log(Number.isNaN("NaN")); // false Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
  16. 23.
  17. 24.

    Math.acosh(x) Math.asinh(x) Math.atanh(x) Math.cbrt(x) Math.clz32(x) Math.cosh(x) Math.expm1(x) Math.fround(x) Math.log1p(x) Math.log10(x)

    Math.log2(x) Math.sign(x) Math.sinh(x) Math.tanh(x) Math.trunc(x) Math.hypot(...values) Math.imul(x, y)
  18. 25.

    // Array.from(obj, mapFn) let lis = document.querySelectorAll('.speaker h2'); console.log(Array.from(lis, s

    => s.innerHTML)); http://www.2ality.com/2014/05/es6-array-methods.html
  19. 26.
  20. 27.

    // Object literal shorthand function foo(bar, baz) { return {

    x: true, bar: bar, baz: baz }; } function conf(name) { return { country: 'AR', name: name }; }
  21. 28.

    // Object literal shorthand function foo(bar, baz) { return {

    x: true, bar, baz }; } function conf(name) { return { country: 'AR', name }; }
  22. 29.

    // Destructuring assignment (array pattern) var m = 11, d

    = 29, y = 2014; let [m, d, y] = [11, 29, 2014];
  23. 30.

    // Destructuring assignment (object pattern) function today() { return {

    d: 29, m: 11, y: 2014 }; } let { m: month, y: year } = today(); // month = 11, year = 2014
  24. 32.

    // Block scope /* Let */ for (var i =

    0; i < 3; i++) { let j = i * i; console.log(j); // Works } console.log(j); // Fail http://es6rocks.com/2014/08/what-you-need-to-know-about-block-scope-let/
  25. 35.

    // Single parameter arrow fn let plusOne = x =>

    x + 1; console.log( plusOne(5) ); // 6
  26. 36.

    // Single parameter arrow fn let plusOne = x =>

    x + 1; console.log( plusOne(5) ); // 6 Function
  27. 37.

    // Single parameter arrow fn let plusOne = x =>

    x + 1; console.log( plusOne(5) ); // 6 Param name
  28. 38.

    // Single parameter arrow fn let plusOne = x =>

    x + 1; console.log( plusOne(5) ); // 6 return
  29. 39.

    // n parameters arrow fn let sum = (n1, n2)

    => n1 + n2; console.log( sum(2,2) ); // 4
  30. 40.

    // Parameterless Arrow fn let conf = () => "JSConfAR";

    console.log( conf() ); // JSConfAR
  31. 41.

    // Arrow fn with a body let doSomething = (x,

    y) => { // logic return true; }
  32. 42.

    // Classical ‘this’ issue var foo = { init: function

    () { setTimeout(function () { this.log(); }, 1000); }, log: function () { console.log('foooo'); } } foo.init(); //TypeError: this.log is not a function
  33. 43.

    // Fixing ‘this’ issue ES5 way var foo = {

    init : function () { setTimeout((function () { this.log(); }).bind(this), 1000); }, log : function () { console.log('foooo'); } } foo.init(); // foooo
  34. 44.

    // Fixing ‘this’ issue ES6 way let foo = {

    init : function () { setTimeout( () => this.log(), 1000 ); }, log : function () { console.log('foooo'); } }; foo.init(); // foooo
  35. 45.
  36. 46.

    class Animal { constructor(name) { this.name = name; } breathe

    () { console.log( `${this.name} is breathing` ); } }
  37. 47.

    class Dog extends Animal { constructor(name) { super(name); } bark()

    { console.log(`Woof! ${this.name} is barking`); } }
  38. 48.

    class Cat extends Animal { constructor(name) { super(name); } meow()

    { console.log(`Meow! ${this.name} is meowing`); } }
  39. 49.
  40. 50.

    // Creating modules // baz.js let baz = 'baz'; export

    default baz; // app.js import baz from “baz”;
  41. 51.

    // Creating modules // print.js let print = function (what)

    { return `print module - ${what}`; } export default print;
  42. 52.

    // Creating modules // foo.js import baz from "./baz"; console.log('From

    module baz >>> ', baz); let foo = 'foo'; export default foo; export let bar = 'bar'; // foo.js import { bar } from “foo”;
  43. 53.

    // Using modules // app.js import print from "./modules/print"; import

    foo, { bar } from "./modules/foo"; console.log( print('it works') ); // print module - it works console.log( print('wow') ); // print module - wow console.log( foo ); // foo console.log( bar ); // bar
  44. 57.
  45. 61.