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

¿Qué ES 6? - Introducción a ECMAScript y Babel

Dan Zajdband
February 20, 2015

¿Qué ES 6? - Introducción a ECMAScript y Babel

Dan Zajdband

February 20, 2015
Tweet

More Decks by Dan Zajdband

Other Decks in Technology

Transcript

  1. ¿Qué ES 6?
    Introducción a ECMAScript 6 y Babel
    (aka 6to5)
    /
    Dan Zajdband @dzajdband

    View full-size slide

  2. getmango.com

    View full-size slide

  3. ¿Qué es ES?
    1995: Sun y Netscape anuncian JavaScript para Netscape
    2.0
    1996: Microsoft introduce JScript para IE 3.0
    1996/97: Netscape estandariza JavaScript bajo el nombre
    de ECMAScript

    View full-size slide

  4. ECMAScript
    "ECMAScript was always an unwanted trade
    name that sounds like a skin disease."
    Brendan Eich

    View full-size slide

  5. ECMAScript
    1999: ES3 introduce expresiones regulares y manejo de
    excepciones entre otras features.
    2008: La especificación de ES4 es abandonada por
    razones políticas.
    2009/11: ES5 trae strict mode, soporte para JSON, getters
    & setters...
    2015: ES6 la especificación está pautada para ser
    presentada a mitad de este año.
    (2015-): ES7 Work in progress.

    View full-size slide

  6. ECMAScript 6
    Metas
    Brindar una base para la creación de aplicaciones
    complejas
    Agregar utilidades del lenguaje
    Mantener compatibilidad con ES5

    View full-size slide

  7. ECMAScript 6
    Overview*

    View full-size slide

  8. *Ordenado por nivel de
    polémica entre los presentes
    Un poquito de quilombo sin romper nada

    View full-size slide

  9. Variables &
    scoping

    View full-size slide

  10. let vs. var - Block scoping
    /
    / E
    S
    6
    i
    f
    (
    t
    r
    u
    e
    ) {
    v
    a
    r x = 1
    ;
    l
    e
    t y = 2
    ;
    }
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    x
    )
    ; /
    / 1
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    y
    )
    ; /
    / y i
    s n
    o
    t d
    e
    f
    i
    n
    e
    d
    /
    / E
    S
    5
    i
    f (
    t
    r
    u
    e
    ) {
    v
    a
    r x = 1
    ;
    v
    a
    r _
    y = 2
    ;
    }
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    x
    )
    ; /
    / 1
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    y
    )
    ; /
    / y i
    s n
    o
    t d
    e
    f
    i
    n
    e
    d

    View full-size slide

  11. const
    c
    o
    n
    s
    t P
    I = 3
    .
    1
    4
    ;
    P
    I = 8
    ; /
    / E
    r
    r
    o
    r

    View full-size slide

  12. Object literals

    View full-size slide

  13. Shorthands
    /
    / E
    S
    6
    l
    e
    t f
    o
    o = '
    b
    a
    r
    '
    ;
    l
    e
    t x = {
    m
    y
    F
    u
    n
    c
    (
    ) {
    r
    e
    t
    u
    r
    n 3
    ;
    }
    ,
    f
    o
    o
    }
    ;
    x
    .
    f
    o
    o
    ; /
    / b
    a
    r
    x
    .
    m
    y
    F
    u
    n
    c
    (
    )
    ; /
    / 3
    /
    / E
    S
    5
    v
    a
    r f
    o
    o = "
    b
    a
    r
    "
    ;
    v
    a
    r x = {
    m
    y
    F
    u
    n
    c
    : f
    u
    n
    c
    t
    i
    o
    n m
    y
    F
    u
    n
    c
    (
    ) {
    r
    e
    t
    u
    r
    n 3
    ;
    }
    ,
    f
    o
    o
    : f
    o
    o
    }
    ;
    x
    .
    f
    o
    o
    ; /
    / b
    a
    r
    x
    .
    m
    y
    F
    u
    n
    c
    (
    )
    ; /
    / 3

    View full-size slide

  14. Computed property keys
    /
    / E
    S
    6
    l
    e
    t n
    o
    m
    b
    r
    e = '
    M
    é
    t
    o
    d
    o
    '
    ;
    l
    e
    t y = {
    [
    '
    m
    i
    ' + n
    o
    m
    b
    r
    e
    ]
    : "
    E
    s
    t
    e e
    s m
    i n
    o
    m
    b
    r
    e
    "
    }
    ;
    x
    .
    m
    i
    N
    o
    m
    b
    r
    e
    ; /
    / "
    E
    s
    t
    e e
    s m
    i n
    o
    m
    b
    r
    e
    "
    /
    / E
    S
    5
    v
    a
    r _
    d
    e
    f
    i
    n
    e
    P
    r
    o
    p
    e
    r
    t
    y = f
    u
    n
    c
    t
    i
    o
    n (
    o
    b
    j
    , k
    e
    y
    , v
    a
    l
    u
    e
    ) {
    r
    e
    t
    u
    r
    n O
    b
    j
    e
    c
    t
    .
    d
    e
    f
    i
    n
    e
    P
    r
    o
    p
    e
    r
    t
    y
    (
    o
    b
    j
    , k
    e
    y
    , {
    v
    a
    l
    u
    e
    : v
    a
    l
    u
    e
    ,
    e
    n
    u
    m
    e
    r
    a
    b
    l
    e
    : t
    r
    u
    e
    ,
    c
    o
    n
    f
    i
    g
    u
    r
    a
    b
    l
    e
    : t
    r
    u
    e
    ,
    w
    r
    i
    t
    a
    b
    l
    e
    : t
    r
    u
    e
    }
    )
    ;
    }
    ;
    v
    a
    r n
    o
    m
    b
    r
    e = "
    M
    é
    t
    o
    d
    o
    "
    ;
    v
    a
    r y = _
    d
    e
    f
    i
    n
    e
    P
    r
    o
    p
    e
    r
    t
    y
    (
    {
    }
    , "
    m
    i
    " + n
    o
    m
    b
    r
    e
    , "
    E
    s
    t
    e e
    s m
    i n
    o
    m
    b
    r
    e
    "
    )
    ;
    x
    .
    m
    i
    N
    o
    m
    b
    r
    e
    ; /
    / "
    E
    s
    t
    e e
    s m
    i n
    o
    m
    b
    r
    e
    "

    View full-size slide

  15. Destructuring

    View full-size slide

  16. Object destructuring
    /
    / E
    S
    6
    l
    e
    t f
    u
    l
    l
    N
    a
    m
    e = {
    "
    f
    i
    r
    s
    t
    "
    : "
    C
    o
    s
    m
    e
    "
    ,
    "
    l
    a
    s
    t
    "
    : "
    F
    u
    l
    a
    n
    i
    t
    o
    "
    }
    ;
    c
    o
    n
    s
    t {
    f
    i
    r
    s
    t
    : F
    , l
    a
    s
    t
    : L
    } = f
    u
    l
    l
    N
    a
    m
    e
    ;
    l
    e
    t {
    f
    i
    r
    s
    t
    : f
    , l
    a
    s
    t
    : l
    } = f
    u
    l
    l
    N
    a
    m
    e
    ;
    f
    ; /
    / C
    o
    s
    m
    e
    l
    ; /
    / F
    u
    l
    a
    n
    i
    t
    o
    f = "
    C
    a
    r
    l
    o
    s
    "
    ;
    F = "
    C
    a
    r
    l
    o
    s
    "
    ;
    /
    / e
    r
    r
    o
    r
    : "
    F
    " i
    s r
    e
    a
    d
    -
    o
    n
    l
    y
    /
    / E
    S
    5
    v
    a
    r f
    u
    l
    l
    N
    a
    m
    e = {
    f
    i
    r
    s
    t
    : "
    C
    o
    s
    m
    e
    "
    ,
    l
    a
    s
    t
    : "
    F
    u
    l
    a
    n
    i
    t
    o
    "
    }
    ;
    v
    a
    r F = f
    u
    l
    l
    N
    a
    m
    e
    .
    f
    i
    r
    s
    t
    ;
    v
    a
    r L = f
    u
    l
    l
    N
    a
    m
    e
    .
    l
    a
    s
    t
    ;
    v
    a
    r f = f
    u
    l
    l
    N
    a
    m
    e
    .
    f
    i
    r
    s
    t
    ;
    v
    a
    r l = f
    u
    l
    l
    N
    a
    m
    e
    .
    l
    a
    s
    t
    ;
    f
    ; /
    / C
    o
    s
    m
    e
    l
    ; /
    / F
    u
    l
    a
    n
    i
    t
    o
    f = "
    C
    a
    r
    l
    o
    s
    "
    ;
    F = "
    C
    a
    r
    l
    o
    s
    "
    ;
    /
    / e
    r
    r
    o
    r
    : "
    F
    " i
    s r
    e
    a
    d
    -
    o
    n
    l
    y

    View full-size slide

  17. Array destructuring
    /
    / E
    S
    6
    l
    e
    t f = "
    C
    o
    s
    m
    e
    "
    ;
    l
    e
    t l = "
    F
    u
    l
    a
    n
    i
    t
    o
    "
    ;
    [
    f
    , l
    ] = [
    l
    , f
    ]
    ;
    f
    ; /
    / F
    u
    l
    a
    n
    i
    t
    o
    l
    ; /
    / C
    o
    s
    m
    e
    /
    / E
    S
    5
    v
    a
    r f = "
    C
    o
    s
    m
    e
    "
    ;
    v
    a
    r l = "
    F
    u
    l
    a
    n
    i
    t
    o
    "
    ;
    v
    a
    r _
    r
    e
    f = [
    l
    , f
    ]
    ;
    v
    a
    r _
    r
    e
    f
    2 = _
    s
    l
    i
    c
    e
    d
    T
    o
    A
    r
    r
    a
    y
    (
    _
    r
    e
    f
    , 2
    )
    ;
    f = _
    r
    e
    f
    2
    [
    0
    ]
    ;
    l = _
    r
    e
    f
    2
    [
    1
    ]
    ;
    f
    ; /
    / F
    u
    l
    a
    n
    i
    t
    o
    l
    ; /
    / C
    o
    s
    m
    e

    View full-size slide

  18. Multiple return values
    /
    / E
    S
    6
    f
    u
    n
    c
    t
    i
    o
    n m
    u
    l
    t
    i
    R
    e
    t
    (
    ) {
    l
    e
    t x = "
    f
    o
    o
    "
    ;
    l
    e
    t y = "
    b
    a
    r
    "
    ;
    r
    e
    t
    u
    r
    n {
    x
    , y
    }
    ;
    }
    l
    e
    t {
    x
    , y
    } = m
    u
    l
    t
    i
    R
    e
    t
    (
    )
    ;
    x
    ; /
    / "
    f
    o
    o
    "
    y
    ; /
    / "
    b
    a
    r
    "
    /
    / E
    S
    5
    f
    u
    n
    c
    t
    i
    o
    n m
    u
    l
    t
    i
    R
    e
    t
    (
    ) {
    v
    a
    r x = "
    f
    o
    o
    "
    ;
    v
    a
    r y = "
    b
    a
    r
    "
    ;
    r
    e
    t
    u
    r
    n { x
    : x
    , y
    : y }
    ;
    }
    v
    a
    r _
    m
    u
    l
    t
    i
    R
    e
    t = m
    u
    l
    t
    i
    R
    e
    t
    (
    )
    ;
    v
    a
    r x = _
    m
    u
    l
    t
    i
    R
    e
    t
    .
    x
    ;
    v
    a
    r y = _
    m
    u
    l
    t
    i
    R
    e
    t
    .
    y
    ;
    x
    ; /
    / "
    f
    o
    o
    "
    y
    ; /
    / "
    b
    a
    r
    "

    View full-size slide

  19. Parameter
    handling

    View full-size slide

  20. Default, Named, Rest and
    Spread parameters
    /
    / E
    S
    6
    f
    u
    n
    c
    t
    i
    o
    n m
    i
    S
    P
    r
    i
    n
    t
    f
    (
    s
    t
    r
    =
    '
    C
    u
    a
    l
    q
    u
    i
    e
    r c
    o
    s
    a
    '
    , {
    u
    p
    p
    e
    r
    c
    a
    s
    e
    }
    , .
    .
    .
    f
    o
    r
    m
    a
    t
    ) {
    f
    o
    r
    (
    l
    e
    t p
    a
    r
    a
    m
    e
    t
    e
    r o
    f f
    o
    r
    m
    a
    t
    ) {
    s
    t
    r = s
    t
    r
    .
    r
    e
    p
    l
    a
    c
    e
    (
    /
    %
    s
    /
    , p
    a
    r
    a
    m
    e
    t
    e
    r
    )
    ;
    }
    i
    f
    (
    u
    p
    p
    e
    r
    c
    a
    s
    e
    ) s
    t
    r = s
    t
    r
    .
    t
    o
    U
    p
    p
    e
    r
    C
    a
    s
    e
    (
    )
    ;
    r
    e
    t
    u
    r
    n s
    t
    r
    ;
    }
    m
    i
    S
    P
    r
    i
    n
    t
    f
    (
    '
    H
    o
    l
    a m
    e l
    l
    a
    m
    o %
    s y t
    e
    n
    g
    o %
    s a
    ñ
    o
    s
    .
    '
    ,
    {
    u
    p
    p
    e
    r
    c
    a
    s
    e
    : t
    r
    u
    e
    , f
    o
    o
    : '
    b
    a
    r
    '
    }
    , '
    D
    a
    n
    '
    , 2
    5
    )
    ;
    /
    / "
    H
    O
    L
    A M
    E L
    L
    A
    M
    O D
    A
    N Y T
    E
    N
    G
    O 2
    5 A
    Ñ
    O
    S
    "
    l
    e
    t b
    l
    a
    ;
    m
    i
    S
    P
    r
    i
    n
    t
    f
    (
    .
    .
    .
    [
    b
    l
    a
    , {
    u
    p
    p
    e
    r
    c
    a
    s
    e
    : f
    a
    l
    s
    e
    , f
    o
    o
    : '
    b
    a
    r
    '
    }
    , '
    D
    a
    n
    '
    , 2
    5
    ]
    )
    ;
    /
    / "
    C
    u
    a
    l
    q
    u
    i
    e
    r c
    o
    s
    a
    "

    View full-size slide

  21. Default, Named, Rest and
    Spread parameters
    /
    / E
    S
    5
    f
    u
    n
    c
    t
    i
    o
    n m
    i
    S
    P
    r
    i
    n
    t
    f
    (
    _
    x
    , _
    r
    e
    f
    ) {
    f
    o
    r (
    v
    a
    r _
    l
    e
    n = a
    r
    g
    u
    m
    e
    n
    t
    s
    .
    l
    e
    n
    g
    t
    h
    , f
    o
    r
    m
    a
    t = A
    r
    r
    a
    y
    (
    _
    l
    e
    n > 2 ? _
    l
    e
    n - 2 : 0
    )
    , _
    k
    e
    y
    f
    o
    r
    m
    a
    t
    [
    _
    k
    e
    y - 2
    ] = a
    r
    g
    u
    m
    e
    n
    t
    s
    [
    _
    k
    e
    y
    ]
    ;
    }
    v
    a
    r s
    t
    r = a
    r
    g
    u
    m
    e
    n
    t
    s
    [
    0
    ] =
    =
    = u
    n
    d
    e
    f
    i
    n
    e
    d ? "
    C
    u
    a
    l
    q
    u
    i
    e
    r c
    o
    s
    a
    " : a
    r
    g
    u
    m
    e
    n
    t
    s
    [
    0
    ]
    ;
    v
    a
    r u
    p
    p
    e
    r
    c
    a
    s
    e = _
    r
    e
    f
    .
    u
    p
    p
    e
    r
    c
    a
    s
    e
    ;
    f
    o
    r (
    v
    a
    r _
    i
    t
    e
    r
    a
    t
    o
    r = f
    o
    r
    m
    a
    t
    [
    S
    y
    m
    b
    o
    l
    .
    i
    t
    e
    r
    a
    t
    o
    r
    ]
    (
    )
    , _
    s
    t
    e
    p
    ; !
    (
    _
    s
    t
    e
    p = _
    i
    t
    e
    r
    a
    t
    o
    r
    .
    n
    e
    x
    t
    v
    a
    r p
    a
    r
    a
    m
    e
    t
    e
    r = _
    s
    t
    e
    p
    .
    v
    a
    l
    u
    e
    ;
    s
    t
    r = s
    t
    r
    .
    r
    e
    p
    l
    a
    c
    e
    (
    /
    %
    s
    /
    , p
    a
    r
    a
    m
    e
    t
    e
    r
    )
    ;
    }
    i
    f (
    u
    p
    p
    e
    r
    c
    a
    s
    e
    ) s
    t
    r = s
    t
    r
    .
    t
    o
    U
    p
    p
    e
    r
    C
    a
    s
    e
    (
    )
    ;
    r
    e
    t
    u
    r
    n s
    t
    r
    ;
    }
    m
    i
    S
    P
    r
    i
    n
    t
    f
    (
    "
    H
    o
    l
    a m
    e l
    l
    a
    m
    o %
    s y t
    e
    n
    g
    o %
    s a
    ñ
    o
    s
    .
    "
    , { u
    p
    p
    e
    r
    c
    a
    s
    e
    : t
    r
    u
    e
    , f
    o
    o
    : "
    b
    a
    r
    " }
    , "
    /
    / "
    H
    O
    L
    A M
    E L
    L
    A
    M
    O D
    A
    N Y T
    E
    N
    G
    O 2
    5 A
    Ñ
    O
    S
    "
    v
    a
    r b
    l
    a = u
    n
    d
    e
    f
    i
    n
    e
    d
    ;

    View full-size slide

  22. Arrow
    functions

    View full-size slide

  23. Shorthand syntax
    /
    / E
    S
    6
    l
    e
    t d
    a
    t
    a = [
    1
    , 2
    , 3
    ]
    ;
    l
    e
    t d
    o
    u
    b
    l
    e
    s = d
    a
    t
    a
    .
    m
    a
    p
    (
    n
    u
    m =
    > n
    u
    m * 2
    )
    ; /
    / [
    2
    , 4
    , 6
    ]
    d
    o
    u
    b
    l
    e
    s
    .
    f
    o
    r
    E
    a
    c
    h
    (
    (
    e
    l
    e
    m
    e
    n
    t
    , i
    n
    d
    e
    x
    ) =
    > {
    e
    l
    e
    m
    e
    n
    t = e
    l
    e
    m
    e
    n
    t * 2
    ;
    d
    o
    S
    o
    m
    e
    t
    h
    i
    n
    g
    (
    e
    l
    e
    m
    e
    n
    t
    )
    ;
    }
    )
    ;
    m
    y
    O
    b
    j
    .
    o
    n
    (
    '
    d
    a
    t
    a
    '
    , (
    ) =
    > c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    d
    o
    u
    b
    l
    e
    s
    )
    )
    ;
    /
    / E
    S
    5
    v
    a
    r d
    a
    t
    a = [
    1
    , 2
    , 3
    ]
    ;
    v
    a
    r d
    o
    u
    b
    l
    e
    s = d
    a
    t
    a
    .
    m
    a
    p
    (
    f
    u
    n
    c
    t
    i
    o
    n (
    n
    u
    m
    ) {
    r
    e
    t
    u
    r
    n n
    u
    m * 2
    ;
    }
    )
    ; /
    / [
    2
    , 4
    , 6
    ]
    d
    o
    u
    b
    l
    e
    s
    .
    f
    o
    r
    E
    a
    c
    h
    (
    f
    u
    n
    c
    t
    i
    o
    n (
    e
    l
    e
    m
    e
    n
    t
    , i
    n
    d
    e
    x
    ) {
    e
    l
    e
    m
    e
    n
    t = e
    l
    e
    m
    e
    n
    t * 2
    ;
    d
    o
    S
    o
    m
    e
    t
    h
    i
    n
    g
    (
    e
    l
    e
    m
    e
    n
    t
    )
    ;
    }
    )
    ;
    m
    y
    O
    b
    j
    .
    o
    n
    (
    "
    d
    a
    t
    a
    "
    , f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    r
    e
    t
    u
    r
    n c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    d
    o
    u
    b
    l
    e
    s
    )
    ;
    }
    )
    ;

    View full-size slide

  24. Lexical this
    /
    / E
    S
    6
    c
    o
    n
    s
    t a
    n
    c
    h
    o
    r = d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    c
    l
    i
    c
    k
    m
    e
    '
    )
    ;
    f
    u
    n
    c
    t
    i
    o
    n m
    y
    C
    o
    m
    p
    o
    n
    e
    n
    t
    (
    ) {
    a
    n
    c
    h
    o
    r
    .
    a
    d
    d
    E
    v
    e
    n
    t
    L
    i
    s
    t
    e
    n
    e
    r
    (
    '
    c
    l
    i
    c
    k
    '
    , (
    ) =
    > t
    h
    i
    s
    .
    o
    n
    C
    l
    i
    c
    k
    (
    )
    )
    ;
    }
    /
    / E
    S
    5
    v
    a
    r a
    n
    c
    h
    o
    r = d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    "
    c
    l
    i
    c
    k
    m
    e
    "
    )
    ;
    f
    u
    n
    c
    t
    i
    o
    n m
    y
    C
    o
    m
    p
    o
    n
    e
    n
    t
    (
    ) {
    v
    a
    r _
    t
    h
    i
    s = t
    h
    i
    s
    ;
    a
    n
    c
    h
    o
    r
    .
    a
    d
    d
    E
    v
    e
    n
    t
    L
    i
    s
    t
    e
    n
    e
    r
    (
    "
    c
    l
    i
    c
    k
    "
    , f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    r
    e
    t
    u
    r
    n _
    t
    h
    i
    s
    .
    o
    n
    C
    l
    i
    c
    k
    (
    )
    ;
    }
    )
    ;
    }

    View full-size slide

  25. Basics
    /
    / E
    S
    6
    c
    l
    a
    s
    s P
    l
    a
    y
    e
    r {
    c
    o
    n
    s
    t
    r
    u
    c
    t
    o
    r
    (
    n
    a
    m
    e
    , s
    k
    i
    l
    l
    s
    =
    1
    0
    ) {
    t
    h
    i
    s
    .
    n
    a
    m
    e = n
    a
    m
    e
    ;
    t
    h
    i
    s
    .
    s
    k
    i
    l
    l
    s = s
    k
    i
    l
    l
    s
    ;
    }
    m
    a
    k
    e
    G
    o
    a
    l
    (
    ) {
    t
    h
    i
    s
    .
    s
    k
    i
    l
    l
    s +
    = 5
    ;
    }
    }

    View full-size slide

  26. Basics
    /
    / E
    S
    5
    v
    a
    r P
    l
    a
    y
    e
    r = (
    f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    f
    u
    n
    c
    t
    i
    o
    n P
    l
    a
    y
    e
    r
    (
    n
    a
    m
    e
    ) {
    v
    a
    r s
    k
    i
    l
    l
    s = a
    r
    g
    u
    m
    e
    n
    t
    s
    [
    1
    ] =
    =
    = u
    n
    d
    e
    f
    i
    n
    e
    d ? 1
    0 : a
    r
    g
    u
    m
    e
    n
    t
    s
    [
    1
    ]
    ;
    _
    c
    l
    a
    s
    s
    C
    a
    l
    l
    C
    h
    e
    c
    k
    (
    t
    h
    i
    s
    , P
    l
    a
    y
    e
    r
    )
    ;
    t
    h
    i
    s
    .
    n
    a
    m
    e = n
    a
    m
    e
    ;
    t
    h
    i
    s
    .
    s
    k
    i
    l
    l
    s = s
    k
    i
    l
    l
    s
    ;
    }
    _
    p
    r
    o
    t
    o
    t
    y
    p
    e
    P
    r
    o
    p
    e
    r
    t
    i
    e
    s
    (
    P
    l
    a
    y
    e
    r
    , n
    u
    l
    l
    , {
    m
    a
    k
    e
    G
    o
    a
    l
    : {
    v
    a
    l
    u
    e
    : f
    u
    n
    c
    t
    i
    o
    n m
    a
    k
    e
    G
    o
    a
    l
    (
    ) {
    t
    h
    i
    s
    .
    s
    k
    i
    l
    l
    s +
    = 5
    ;
    }
    ,
    w
    r
    i
    t
    a
    b
    l
    e
    : t
    r
    u
    e
    ,
    c
    o
    n
    f
    i
    g
    u
    r
    a
    b
    l
    e
    : t
    r
    u
    e
    }
    }
    )
    ;
    r
    e
    t
    u
    r
    n P
    l
    a
    y
    e
    r
    ;
    }
    )
    (
    )
    ;

    View full-size slide

  27. Static methods
    c
    l
    a
    s
    s P
    l
    a
    y
    e
    r {
    c
    o
    n
    s
    t
    r
    u
    c
    t
    o
    r
    (
    n
    a
    m
    e
    , s
    k
    i
    l
    l
    s
    =
    1
    0
    ) {
    t
    h
    i
    s
    .
    n
    a
    m
    e = n
    a
    m
    e
    ;
    t
    h
    i
    s
    .
    s
    k
    i
    l
    l
    s = s
    k
    i
    l
    l
    s
    ;
    }
    s
    t
    a
    t
    i
    c d
    o
    r
    s
    a
    l
    (
    ) {
    r
    e
    t
    u
    r
    n M
    a
    t
    h
    .
    f
    l
    o
    o
    r
    (
    M
    a
    t
    h
    .
    r
    a
    n
    d
    o
    m
    (
    )
    )
    ;
    }
    }

    View full-size slide

  28. Subclassing
    c
    l
    a
    s
    s M
    i
    l
    i
    t
    o e
    x
    t
    e
    n
    d
    s P
    l
    a
    y
    e
    r {
    c
    o
    n
    s
    t
    r
    u
    c
    t
    o
    r
    (
    f
    n
    a
    m
    e
    ) {
    l
    e
    t s
    k
    i
    l
    l
    s = 2
    5
    ;
    s
    k
    i
    l
    l
    s = f
    n
    a
    m
    e =
    =
    = '
    G
    a
    b
    r
    i
    e
    l
    ' ? 5 : 8
    0
    ;
    s
    u
    p
    e
    r
    (
    f
    n
    a
    m
    e
    , '
    M
    i
    l
    i
    t
    o
    '
    , s
    k
    i
    l
    l
    s
    )
    ;
    }
    m
    a
    k
    e
    G
    o
    a
    l
    (
    ) {
    i
    f
    (
    t
    h
    i
    s
    .
    f
    n
    a
    m
    e =
    =
    = '
    D
    i
    e
    g
    o
    '
    ) {
    s
    u
    p
    e
    r
    .
    m
    a
    k
    e
    G
    o
    a
    l
    (
    )
    ;
    }
    }
    }

    View full-size slide

  29. Named exports
    /
    / E
    S
    6
    /
    / m
    e
    n
    u
    .
    j
    s
    e
    x
    p
    o
    r
    t f
    u
    n
    c
    t
    i
    o
    n g
    e
    t
    I
    t
    e
    m
    (
    i
    n
    d
    e
    x
    ) {
    r
    e
    t
    u
    r
    n i
    t
    e
    m
    s
    [
    i
    n
    d
    e
    x
    ]
    ;
    }
    e
    x
    p
    o
    r
    t c
    o
    n
    s
    t P
    I = 3
    .
    1
    4
    ;
    /
    / m
    a
    i
    n
    .
    j
    s
    i
    m
    p
    o
    r
    t {
    g
    e
    t
    I
    t
    e
    m
    } f
    r
    o
    m '
    m
    e
    n
    u
    '
    ;
    g
    e
    t
    I
    t
    e
    m
    (
    1
    )
    ;
    i
    m
    p
    o
    r
    t * a
    s m
    e
    n
    u f
    r
    o
    m '
    m
    e
    n
    u
    '
    ;
    m
    e
    n
    u
    .
    g
    e
    t
    I
    t
    e
    m
    (
    1
    )
    ;
    /
    / E
    S
    5
    /
    / m
    e
    n
    u
    .
    j
    s
    e
    x
    p
    o
    r
    t
    s
    .
    g
    e
    t
    I
    t
    e
    m = g
    e
    t
    I
    t
    e
    m
    ;
    f
    u
    n
    c
    t
    i
    o
    n g
    e
    t
    I
    t
    e
    m
    (
    i
    n
    d
    e
    x
    ) {
    r
    e
    t
    u
    r
    n i
    t
    e
    m
    s
    [
    i
    n
    d
    e
    x
    ]
    ;
    }
    v
    a
    r P
    I = e
    x
    p
    o
    r
    t
    s
    .
    P
    I = 3
    .
    1
    4
    ;
    /
    / m
    a
    i
    n
    .
    j
    s
    v
    a
    r _
    m
    e
    n
    u = r
    e
    q
    u
    i
    r
    e
    (
    "
    m
    e
    n
    u
    "
    )
    ;
    v
    a
    r g
    e
    t
    I
    t
    e
    m = _
    m
    e
    n
    u
    .
    g
    e
    t
    I
    t
    e
    m
    ;
    g
    e
    t
    I
    t
    e
    m
    (
    1
    )
    ;
    v
    a
    r m
    e
    n
    u = r
    e
    q
    u
    i
    r
    e
    (
    "
    m
    e
    n
    u
    "
    )
    ;
    m
    e
    n
    u
    .
    g
    e
    t
    I
    t
    e
    m
    (
    1
    )
    ;

    View full-size slide

  30. Default exports
    /
    / E
    S
    6
    /
    / m
    e
    n
    u
    .
    j
    s
    e
    x
    p
    o
    r
    t d
    e
    f
    a
    u
    l
    t g
    e
    t
    I
    t
    e
    m
    (
    i
    n
    d
    e
    x
    ) {
    r
    e
    t
    u
    r
    n i
    t
    e
    m
    s
    [
    i
    n
    d
    e
    x
    ]
    ;
    }
    /
    / m
    a
    i
    n
    .
    j
    s
    i
    m
    p
    o
    r
    t g
    e
    t
    I
    t
    e
    m f
    r
    o
    m '
    m
    e
    n
    u
    '
    ;
    g
    e
    t
    I
    t
    e
    m
    (
    1
    )
    ;
    /
    / E
    S
    5
    /
    / m
    e
    n
    u
    .
    j
    s
    m
    o
    d
    u
    l
    e
    .
    e
    x
    p
    o
    r
    t
    s = g
    e
    t
    I
    t
    e
    m
    ;
    f
    u
    n
    c
    t
    i
    o
    n g
    e
    t
    I
    t
    e
    m
    (
    i
    n
    d
    e
    x
    ) {
    r
    e
    t
    u
    r
    n i
    t
    e
    m
    s
    [
    i
    n
    d
    e
    x
    ]
    ;
    }
    /
    / m
    a
    i
    n
    .
    j
    s
    v
    a
    r g
    e
    t
    I
    t
    e
    m = r
    e
    q
    u
    i
    r
    e
    (
    '
    m
    e
    n
    u
    '
    )
    ;
    g
    e
    t
    I
    t
    e
    m
    (
    1
    )
    ;

    View full-size slide

  31. Template
    strings

    View full-size slide

  32. Interpolation
    /
    / E
    S
    6
    c
    o
    n
    s
    t c
    h
    a
    m
    p
    i
    o
    n = `
    R
    a
    c
    i
    n
    g
    `
    ;
    c
    o
    n
    s
    t m
    y
    S
    t
    r
    i
    n
    g = `
    e
    s
    t
    e e
    s
    m
    i s
    t
    r
    i
    n
    g
    m
    u
    l
    t
    i
    l
    i
    n
    e
    a
    .
    $
    {
    c
    h
    a
    m
    p
    i
    o
    n
    } C
    a
    m
    p
    e
    ó
    n
    !
    `
    ;
    /
    / E
    S
    5
    c
    o
    n
    s
    t c
    h
    a
    m
    p
    i
    o
    n = '
    R
    a
    c
    i
    n
    g
    '
    ;
    c
    o
    n
    s
    t m
    y
    S
    t
    r
    i
    n
    g = "
    \
    n
    e
    s
    t
    e e
    s
    \
    n
    m
    i s
    t
    r
    i
    n
    g
    \
    n

    View full-size slide

  33. Tagged template strings
    f
    u
    n
    c
    t
    i
    o
    n t
    a
    g
    (
    s
    t
    r
    i
    n
    g
    s
    , .
    .
    .
    v
    a
    l
    u
    e
    s
    ) {
    a
    s
    s
    e
    r
    t
    (
    s
    t
    r
    i
    n
    g
    s
    [
    0
    ] =
    =
    = '
    a
    '
    )
    ;
    a
    s
    s
    e
    r
    t
    (
    s
    t
    r
    i
    n
    g
    s
    [
    1
    ] =
    =
    = '
    b
    '
    )
    ;
    a
    s
    s
    e
    r
    t
    (
    v
    a
    l
    u
    e
    s
    [
    0
    ] =
    =
    = 0
    )
    ;
    r
    e
    t
    u
    r
    n '
    w
    h
    a
    t
    e
    v
    e
    r
    '
    ;
    }
    t
    a
    g `
    a
    $
    { 4
    2 }
    b
    ` /
    / "
    w
    h
    a
    t
    e
    v
    e
    r
    "

    View full-size slide

  34. Maps
    l
    e
    t m
    a
    p = n
    e
    w M
    a
    p
    (
    )
    ;
    l
    e
    t o
    b
    j = {
    }
    ;
    m
    a
    p
    .
    s
    e
    t
    (
    o
    b
    j
    , 1
    2
    3
    )
    ;
    m
    a
    p
    .
    g
    e
    t
    (
    o
    b
    j
    )
    ; /
    / 1
    2
    3
    m
    a
    p
    .
    h
    a
    s
    (
    o
    b
    j
    )
    ; /
    / t
    r
    u
    e
    m
    a
    p
    .
    d
    e
    l
    e
    t
    e
    (
    o
    b
    j
    )
    ;
    f
    o
    r
    (
    l
    e
    t [
    k
    , v
    ] o
    f m
    a
    p
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    k
    , v
    )
    ;
    }

    View full-size slide

  35. Sets
    l
    e
    t s
    e
    t = n
    e
    w S
    e
    t
    (
    )
    ;
    s
    e
    t
    .
    a
    d
    d
    (
    '
    h
    o
    l
    a
    '
    )
    ;
    s
    e
    t
    .
    a
    d
    d
    (
    '
    m
    u
    n
    d
    o
    '
    )
    ;
    s
    e
    t
    .
    a
    d
    d
    (
    '
    h
    o
    l
    a
    '
    )
    ;
    f
    o
    r
    (
    l
    e
    t e
    l
    e
    m o
    f s
    e
    t
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    e
    l
    e
    m
    )
    ;
    } /
    / "
    h
    o
    l
    a m
    u
    n
    d
    o
    "
    l
    e
    t u
    n
    i
    q
    u
    e = [
    .
    .
    .
    n
    e
    w S
    e
    t
    (
    [
    1
    ,
    2
    ,
    3
    ,
    5
    ,
    1
    ,
    2
    ,
    3
    ,
    1
    ,
    5
    ]
    )
    ;
    ]
    ; /
    / [
    1
    ,
    2
    ,
    3
    ,
    5
    ]

    View full-size slide

  36. Object.assign
    l
    e
    t o
    b
    j = {
    x
    : 8
    , y
    : 1
    0
    }
    ;
    O
    b
    j
    e
    c
    t
    .
    a
    s
    s
    i
    g
    n
    (
    o
    b
    j
    , {
    y
    : 5
    }
    )
    ;
    o
    b
    j
    ; /
    / {
    x
    : 8
    : y 5
    }

    View full-size slide

  37. Strings utilities
    `
    $
    {
    '
    n
    a
    n
    '
    .
    r
    e
    p
    e
    a
    t
    (
    6
    )
    }
    a B
    a
    t
    m
    a
    n
    `
    ; /
    / n
    a
    n
    a
    n
    a
    n
    a
    n
    a
    n
    a
    n
    a
    n
    a
    n
    a
    n
    a B
    a
    t
    m
    a
    n
    '
    a
    b
    c
    '
    .
    s
    t
    a
    r
    t
    s
    W
    i
    t
    h
    (
    '
    a
    b
    '
    )
    ; /
    / t
    r
    u
    e
    '
    a
    b
    c
    '
    .
    e
    n
    d
    s
    W
    i
    t
    h
    (
    '
    b
    c
    '
    )
    ; /
    / t
    r
    u
    e
    '
    n
    e
    u
    q
    u
    e
    n
    '
    .
    i
    n
    c
    l
    u
    d
    e
    s
    (
    '
    u
    q
    u
    '
    )
    ; /
    / t
    r
    u
    e
    http://esdiscuss.org/topic/having-a-non-enumerable-
    array-prototype-contains-may-not-be-web-compatible

    View full-size slide

  38. Symbols
    c
    o
    n
    s
    t M
    Y
    _
    K
    E
    Y = S
    y
    m
    b
    o
    l
    (
    )
    ;
    l
    e
    t o
    b
    j = {
    }
    ;
    o
    b
    j
    [
    M
    Y
    _
    K
    E
    Y
    ] = 1
    2
    3
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    o
    b
    j
    [
    M
    Y
    _
    K
    E
    Y
    ]
    )
    ; /
    / 1
    2
    3

    View full-size slide

  39. Iterables
    l
    e
    t f
    i
    b
    o
    n
    a
    c
    c
    i = {
    [
    S
    y
    m
    b
    o
    l
    .
    i
    t
    e
    r
    a
    t
    o
    r
    ]
    (
    ) {
    l
    e
    t p
    r
    e = 0
    , c
    u
    r = 1
    ;
    r
    e
    t
    u
    r
    n {
    n
    e
    x
    t
    (
    ) {
    [
    p
    r
    e
    , c
    u
    r
    ] = [
    c
    u
    r
    , p
    r
    e + c
    u
    r
    ]
    ;
    r
    e
    t
    u
    r
    n { d
    o
    n
    e
    : f
    a
    l
    s
    e
    , v
    a
    l
    u
    e
    : c
    u
    r }
    }
    }
    }
    }
    f
    o
    r (
    v
    a
    r n o
    f f
    i
    b
    o
    n
    a
    c
    c
    i
    ) {
    /
    / t
    r
    u
    n
    c
    a
    t
    e t
    h
    e s
    e
    q
    u
    e
    n
    c
    e a
    t 1
    0
    0
    0
    i
    f (
    n > 1
    0
    0
    0
    )
    b
    r
    e
    a
    k
    ;
    }

    View full-size slide

  40. for-of
    /
    / E
    S
    6
    l
    e
    t i
    t
    e
    m
    s = [
    1
    ,
    2
    ,
    4
    ]
    ;
    f
    o
    r
    (
    l
    e
    t i
    t
    e
    m o
    f i
    t
    e
    m
    s
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    i
    t
    e
    m
    )
    ;
    }
    /
    / E
    S
    5
    v
    a
    r i
    t
    e
    m
    s = [
    1
    , 2
    , 4
    ]
    ;
    f
    o
    r (
    v
    a
    r _
    i
    t
    e
    r
    a
    t
    o
    r = i
    t
    e
    m
    s
    [
    S
    y
    m
    b
    o
    l
    .
    i
    t
    e
    r
    a
    t
    o
    r
    ]
    (
    )
    , _
    s
    t
    e
    p
    ; !
    (
    _
    s
    t
    e
    p = _
    i
    t
    e
    r
    a
    t
    o
    r
    .
    n
    e
    x
    t
    (
    )
    )
    v
    a
    r i
    t
    e
    m = _
    s
    t
    e
    p
    .
    v
    a
    l
    u
    e
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    i
    t
    e
    m
    )
    ;
    }

    View full-size slide

  41. Comprehensions
    v
    a
    r s
    q
    u
    a
    r
    e
    d = [ f
    o
    r (
    x o
    f [
    1
    ,
    2
    ,
    3
    ,
    4
    ,
    5
    ]
    ) i
    f (
    x > 2
    ) x * x ]
    ;

    View full-size slide

  42. Generators
    v
    a
    r f
    i
    b
    o
    n
    a
    c
    c
    i = {
    [
    S
    y
    m
    b
    o
    l
    .
    i
    t
    e
    r
    a
    t
    o
    r
    ]
    : f
    u
    n
    c
    t
    i
    o
    n
    *
    (
    ) {
    v
    a
    r p
    r
    e = 0
    , c
    u
    r = 1
    ;
    f
    o
    r (
    ;
    ;
    ) {
    v
    a
    r t
    e
    m
    p = p
    r
    e
    ;
    p
    r
    e = c
    u
    r
    ;
    c
    u
    r +
    = t
    e
    m
    p
    ;
    y
    i
    e
    l
    d c
    u
    r
    ;
    }
    }
    }
    f
    o
    r (
    v
    a
    r n o
    f f
    i
    b
    o
    n
    a
    c
    c
    i
    ) {
    /
    / t
    r
    u
    n
    c
    a
    t
    e t
    h
    e s
    e
    q
    u
    e
    n
    c
    e a
    t 1
    0
    0
    0
    i
    f (
    n > 1
    0
    0
    0
    )
    b
    r
    e
    a
    k
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    n
    )
    ;
    }

    View full-size slide

  43. Otros
    Promises
    Proxies
    Tail call optimization

    View full-size slide

  44. Use next generation JavaScript, today.

    View full-size slide

  45. Babel
    Transpiler de ES6+ a ES5
    Genera código claro y legible
    Funciona tanto en node.js como en el navegador
    Extensible via plugins (hay muchos andando)
    Comunidad creciente

    View full-size slide

  46. Features de ES7
    async/await
    f
    u
    n
    c
    t
    i
    o
    n p
    r
    o
    m
    i
    s
    i
    n
    g
    O
    p
    e
    r
    a
    t
    i
    o
    n
    (
    ) {
    r
    e
    t
    u
    r
    n n
    e
    w P
    r
    o
    m
    i
    s
    e
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    r
    e
    s
    o
    l
    v
    e
    , r
    e
    j
    e
    c
    t
    ) {
    s
    e
    t
    T
    i
    m
    e
    o
    u
    t
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    i
    f
    ( M
    a
    t
    h
    .
    r
    o
    u
    n
    d
    (
    M
    a
    t
    h
    .
    r
    a
    n
    d
    o
    m
    (
    )
    ) )
    r
    e
    s
    o
    l
    v
    e
    (
    '
    S
    u
    c
    c
    e
    s
    s
    !
    '
    )
    ;
    e
    l
    s
    e
    r
    e
    j
    e
    c
    t
    (
    '
    F
    a
    i
    l
    u
    r
    e
    !
    '
    )
    ;
    }
    , 1
    0
    0
    0
    )
    ;
    }
    }
    a
    s
    y
    n
    c f
    u
    n
    c
    t
    i
    o
    n f
    o
    o
    (
    ) {
    v
    a
    r m
    e
    s
    s
    a
    g
    e = a
    w
    a
    i
    t p
    r
    o
    m
    i
    s
    i
    n
    g
    O
    p
    e
    r
    a
    t
    i
    o
    n
    (
    )
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    m
    e
    s
    s
    a
    g
    e
    )
    ;
    }

    View full-size slide

  47. Referencias
    ES6 Rocks
    Understanding ES6
    Blog de Axel Rauschmayer
    Tour de Babel
    ES6 Overview

    View full-size slide