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

Treating Javascriptophpobia

Treating Javascriptophpobia

Javascriptophpobia: “A persistent, abnormal, and irrational fear of Javascript that compels PHP developers to avoid it, despite the awareness and reassurance that it is not dangerous.” In this session, I will show you why that fear is irrational, and with any luck you will be cured from it. Starting from what we all know best, PHP, we’ll have a look at how certain concepts we already know, translate back to Javascript. During this session, we will not concentrate on the syntax of the building blocks that constitute the great Javascript language, but rather on the concepts and semantics of certain techniques. Once we know and understand these concepts, we’ll end with some best practices for writing neat and structured Javascript. This treatment is highly recommended for anyone who exhibits symptoms of severe Javascript dislike and aversion.

Tom Van Herreweghe

January 23, 2015
Tweet

More Decks by Tom Van Herreweghe

Other Decks in Programming

Transcript

  1. TREATING
    JAVASCRIPTOPHPOBIA

    View full-size slide

  2. TREATMENT OVERVIEW
    1. Scope
    2. Functions
    3. Closures
    4. (IIFE)
    5. Questions

    View full-size slide

  3. SCOPE
    The scope of a name binding – an association of
    a name to an entity, such as a variable – is the
    part of a computer program where the binding is
    valid: where the name can be used to refer to the
    entity.

    View full-size slide

  4. GLOBAL SCOPE
    $
    f
    o
    o = "
    b
    a
    r
    "
    ;
    $
    G
    L
    O
    B
    A
    L
    S
    [
    "
    b
    a
    r
    "
    ] = "
    b
    a
    z
    "
    ;
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    f
    o
    o
    )
    ; /
    / "
    b
    a
    r
    "
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    G
    L
    O
    B
    A
    L
    S
    [
    '
    f
    o
    o
    '
    ]
    )
    ; /
    / "
    b
    a
    r
    "
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    G
    L
    O
    B
    A
    L
    S
    [
    '
    b
    a
    r
    '
    ]
    )
    ; /
    / "
    b
    a
    z
    "
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    b
    a
    r
    )
    ; /
    / "
    b
    a
    z
    "

    View full-size slide

  5. LOCAL SCOPE
    f
    u
    n
    c
    t
    i
    o
    n f
    o
    o
    (
    )
    {
    $
    a = '
    a
    '
    ;
    }
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    a
    )
    ; /
    / n
    u
    l
    l
    f
    o
    o
    (
    )
    ;
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    a
    )
    ; /
    / s
    t
    i
    l
    l n
    u
    l
    l

    View full-size slide

  6. LOCAL SCOPE
    $
    a = '
    a
    '
    ;
    f
    u
    n
    c
    t
    i
    o
    n b
    a
    r
    (
    )
    {
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    a
    )
    ; /
    / n
    u
    l
    l
    }
    b
    a
    r
    (
    )
    ;

    View full-size slide

  7. LOCAL SCOPE
    $
    a = '
    a
    '
    ;
    f
    u
    n
    c
    t
    i
    o
    n b
    a
    r
    (
    )
    {
    g
    l
    o
    b
    a
    l $
    a
    ;
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    a
    )
    ; /
    / "
    a
    "
    $
    a = '
    b
    b
    b
    b
    '
    ;
    }
    b
    a
    r
    (
    )
    ;
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    a
    )
    ; /
    / "
    b
    b
    b
    b
    "

    View full-size slide

  8. SUPERGLOBALS
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    _
    S
    E
    R
    V
    E
    R
    )
    ; /
    / S
    e
    r
    v
    e
    r & e
    x
    e
    c
    u
    t
    i
    o
    n e
    n
    v i
    n
    f
    o
    r
    m
    a
    t
    i
    o
    n
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    _
    G
    E
    T
    )
    ; /
    / H
    T
    T
    P G
    E
    T v
    a
    r
    i
    a
    b
    l
    e
    s
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    _
    P
    O
    S
    T
    )
    ; /
    / H
    T
    T
    P P
    O
    S
    T v
    a
    r
    i
    a
    b
    l
    e
    s
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    _
    C
    O
    O
    K
    I
    E
    )
    ; /
    / H
    T
    T
    P c
    o
    o
    k
    i
    e
    s
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    _
    R
    E
    Q
    U
    E
    S
    T
    )
    ; /
    / _
    G
    E
    T + _
    P
    O
    S
    T + _
    C
    O
    O
    K
    I
    E
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    _
    F
    I
    L
    E
    S
    )
    ; /
    / H
    T
    T
    P F
    i
    l
    e U
    p
    l
    o
    a
    d v
    a
    r
    i
    a
    b
    l
    e
    s
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    _
    S
    E
    S
    S
    I
    O
    N
    )
    ; /
    / S
    e
    s
    s
    i
    o
    n i
    n
    f
    o
    r
    m
    a
    t
    i
    o
    n
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    _
    E
    N
    V
    )
    ; /
    / E
    n
    v
    i
    r
    o
    n
    m
    e
    n
    t v
    a
    r
    i
    a
    b
    l
    e
    s
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    G
    L
    O
    B
    A
    L
    S
    )
    ;

    View full-size slide

  9. BLOCK SCOPE
    $
    a = '
    a
    a
    '
    ;
    i
    f (
    t
    r
    u
    e
    ) {
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    a
    )
    ; /
    / "
    a
    a
    "
    $
    b = '
    b
    b
    '
    ;
    }
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    b
    )
    ; /
    / "
    b
    b
    "
    d
    o {
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    a
    )
    ; /
    / "
    a
    a
    "
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    b
    )
    ; /
    / "
    b
    b
    "
    $
    d = '
    d
    d
    '
    ;
    b
    r
    e
    a
    k
    ;
    } w
    h
    i
    l
    e (
    t
    r
    u
    e
    )
    ;
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    d
    )
    ; /
    / "
    d
    d
    "
    There is no "block" scope

    View full-size slide

  10. GLOBAL SCOPE
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    t
    h
    i
    s =
    =
    = w
    i
    n
    d
    o
    w
    )
    ; /
    / t
    r
    u
    e
    /
    / i
    n n
    o
    d
    e
    j
    s
    :
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    t
    h
    i
    s =
    =
    = g
    l
    o
    b
    a
    l
    )
    ; /
    / t
    r
    u
    e
    v
    a
    r p
    h
    p = "
    a
    w
    e
    s
    o
    m
    e
    "
    ; /
    / P
    r
    e
    f
    e
    r
    r
    e
    d
    !
    p
    h
    p = "
    a
    w
    e
    s
    o
    m
    e
    "
    ;
    t
    h
    i
    s
    .
    p
    h
    p = "
    a
    w
    e
    s
    o
    m
    e
    "
    ;
    w
    i
    n
    d
    o
    w
    .
    p
    h
    p = "
    a
    w
    e
    s
    o
    m
    e
    "
    ;

    View full-size slide

  11. LOCAL SCOPE
    f
    u
    n
    c
    t
    i
    o
    n f
    o
    o
    (
    ) {
    v
    a
    r a = "
    a
    "
    ;
    }
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    a
    )
    ; /
    / R
    e
    f
    e
    r
    e
    n
    c
    e
    E
    r
    r
    o
    r
    f
    o
    o
    (
    )
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    a
    )
    ; /
    / R
    e
    f
    e
    r
    e
    n
    c
    e
    E
    r
    r
    o
    r

    View full-size slide

  12. LOCAL SCOPE
    v
    a
    r a = "
    a
    "
    ;
    f
    u
    n
    c
    t
    i
    o
    n b
    a
    r
    (
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    a
    )
    ; /
    / "
    a
    "
    }
    b
    a
    r
    (
    )
    ;

    View full-size slide

  13. LOCAL SCOPE
    v
    a
    r a = "
    a
    "
    ;
    f
    u
    n
    c
    t
    i
    o
    n f
    o
    o
    (
    ) {
    v
    a
    r b = "
    b
    "
    ;
    f
    u
    n
    c
    t
    i
    o
    n b
    a
    r
    (
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    a
    )
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    b
    )
    ;
    v
    a
    r c = "
    c
    "
    ;
    }
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    c
    )
    ; /
    / R
    e
    f
    e
    r
    e
    n
    c
    e
    E
    r
    r
    o
    r
    r
    e
    t
    u
    r
    n b
    a
    r
    (
    )
    ;
    }
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    b
    )
    ; /
    / R
    e
    f
    e
    r
    e
    n
    c
    e
    E
    r
    r
    o
    r
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    c
    )
    ; /
    / R
    e
    f
    e
    r
    e
    n
    c
    e
    E
    r
    r
    o
    r
    f
    o
    o
    (
    )
    ;

    View full-size slide

  14. SUPERGLOBALS?
    No need for it; bindings always "trickle" down to a lower scope
    level.

    View full-size slide

  15. BLOCK SCOPE
    v
    a
    r a = '
    a
    a
    '
    ;
    i
    f (
    t
    r
    u
    e
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    a
    )
    ; /
    / "
    a
    a
    "
    v
    a
    r b = '
    b
    b
    '
    ;
    }
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    b
    )
    ; /
    / "
    b
    b
    "
    d
    o {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    a
    )
    ; /
    / "
    a
    a
    "
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    b
    )
    ; /
    / "
    b
    b
    "
    v
    a
    r c = '
    c
    c
    '
    ;
    b
    r
    e
    a
    k
    ;
    } w
    h
    i
    l
    e (
    t
    r
    u
    e
    )
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    c
    )
    ; /
    / "
    c
    c
    "
    There is no block scope... yet! (ECMAScript >= 6)

    View full-size slide

  16. SCOPE IN A NUTSHELL
    PHP JS
    Global scope script window
    Local scope function function
    Block scope no ES >=6
    Bubbles separate parent-child
    Access g
    l
    o
    b
    a
    l
    local -> local
    parent -> child
    local -> local

    View full-size slide

  17. PRIORITY
    v
    a
    r a = "
    a
    "
    ;
    f
    u
    n
    c
    t
    i
    o
    n f
    o
    o
    (
    )
    {
    v
    a
    r a = "
    b
    "
    ;
    f
    u
    n
    c
    t
    i
    o
    n b
    a
    r
    (
    )
    {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    a
    )
    ; /
    / "
    b
    "
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    w
    i
    n
    d
    o
    w
    .
    a
    )
    ; /
    / "
    a
    "
    }
    r
    e
    t
    u
    r
    n b
    a
    r
    (
    )
    ;
    }
    f
    o
    o
    (
    )
    ;
    Local > Global

    View full-size slide

  18. HOISTING - VARIABLES
    $
    a = "
    a
    "
    ;
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    a
    )
    ; /
    / "
    a
    "
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    b
    )
    ; /
    / n
    u
    l
    l
    v
    a
    r
    _
    d
    u
    m
    p
    (
    i
    s
    s
    e
    t
    (
    $
    b
    )
    )
    ; /
    / f
    a
    l
    s
    e
    $
    b = "
    b
    "
    ;

    View full-size slide

  19. HOISTING - VARIABLES
    v
    a
    r f
    o
    o = "
    b
    a
    r
    "
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    f
    o
    o
    )
    ; /
    / "
    b
    a
    r
    "
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    j
    s
    )
    ; /
    / u
    n
    d
    e
    f
    i
    n
    e
    d
    v
    a
    r j
    s = "
    a
    w
    e
    s
    o
    m
    e
    "
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    p
    h
    p
    )
    ; /
    / R
    e
    f
    e
    r
    e
    n
    c
    e
    E
    r
    r
    o
    r

    View full-size slide

  20. HOISTING - FUNCTIONS
    f
    u
    n
    c
    t
    i
    o
    n f
    o
    o
    (
    )
    {
    e
    c
    h
    o '
    F
    o
    o i
    s e
    x
    e
    c
    u
    t
    e
    d
    '
    ;
    }
    f
    o
    o
    (
    )
    ; /
    / "
    F
    o
    o i
    s e
    x
    e
    c
    u
    t
    e
    d
    "
    b
    a
    r
    (
    )
    ; /
    / "
    B
    a
    r i
    s e
    x
    e
    c
    u
    t
    e
    d
    "
    f
    u
    n
    c
    t
    i
    o
    n b
    a
    r
    (
    )
    {
    e
    c
    h
    o '
    B
    a
    r i
    s e
    x
    e
    c
    u
    t
    e
    d
    '
    ;
    }
    Functions need not be defined before they are
    referenced, except when a function is
    conditionally defined

    View full-size slide

  21. HOISTING - FUNCTIONS
    m
    y
    F
    u
    n
    c
    t
    i
    o
    n
    (
    )
    ; /
    / "
    I a
    m c
    a
    l
    l
    e
    d
    "
    f
    u
    n
    c
    t
    i
    o
    n m
    y
    F
    u
    n
    c
    t
    i
    o
    n
    (
    )
    {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    "
    I a
    m c
    a
    l
    l
    e
    d
    "
    )
    ;
    }

    View full-size slide

  22. WHAT IS HOISTING?
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    j
    s
    )
    ;
    v
    a
    r j
    s = "
    a
    w
    e
    s
    o
    m
    e
    "
    ;
    /
    / r
    e
    -
    w
    r
    i
    t
    t
    e
    n
    :
    v
    a
    r j
    s
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    j
    s
    )
    ;
    j
    s = "
    a
    w
    e
    s
    o
    m
    e
    "
    ;

    View full-size slide

  23. TL;DR - SCOPE
    1. Global scope (window / global)
    2. Local scope (function)
    3. Priority (Local > Global)
    4. Hoisting (declaration <> assignment)

    View full-size slide

  24. TREATMENT OVERVIEW
    1. Scope
    2. Functions
    3. Closures
    4. (IIFE)
    5. Questions

    View full-size slide

  25. FUNCTIONS
    A sequence of program instructions that perform
    a specific task, packaged as a unit.

    View full-size slide

  26. DECLARATION (1)
    /
    / f
    u
    n
    c
    t
    i
    o
    n l
    i
    t
    e
    r
    a
    l d
    e
    c
    l
    a
    r
    a
    t
    i
    o
    n
    f
    u
    n
    c
    t
    i
    o
    n f
    o
    o
    (
    /
    * o
    p
    t
    i
    o
    n
    a
    l p
    a
    r
    a
    m
    e
    t
    e
    r
    s *
    /
    ) {
    /
    * f
    u
    n
    c
    t
    i
    o
    n b
    o
    d
    y *
    /
    r
    e
    t
    u
    r
    n t
    r
    u
    e
    ; /
    / o
    p
    t
    i
    o
    n
    a
    l r
    e
    t
    u
    r
    n s
    t
    a
    t
    e
    m
    e
    n
    t
    }
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    f
    o
    o
    (
    )
    )
    ; /
    / t
    r
    u
    e
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    w
    i
    n
    d
    o
    w
    .
    f
    o
    o
    (
    )
    )
    ; /
    / t
    r
    u
    e
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    f
    o
    o
    .
    n
    a
    m
    e
    )
    ; /
    / "
    f
    o
    o
    "
    Function literal

    View full-size slide

  27. DECLARATION (2)
    /
    / f
    u
    n
    c
    t
    i
    o
    n e
    x
    p
    r
    e
    s
    s
    i
    o
    n
    v
    a
    r b
    a
    r = f
    u
    n
    c
    t
    i
    o
    n
    (
    /
    * o
    p
    t
    i
    o
    n
    a
    l p
    a
    r
    a
    m
    e
    t
    e
    r
    s *
    /
    ) {
    r
    e
    t
    u
    r
    n t
    r
    u
    e
    ;
    }
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    b
    a
    r
    (
    )
    )
    ; /
    / t
    r
    u
    e
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    b
    a
    r
    .
    n
    a
    m
    e
    )
    ; /
    / <
    e
    m
    p
    t
    y s
    t
    r
    i
    n
    g
    >
    Function expression
    (or "Inline function")
    (or "Anonymous function")
    (not a closure)

    View full-size slide

  28. DECLARATION (3)
    /
    / i
    n
    l
    i
    n
    e n
    a
    m
    e
    d f
    u
    n
    c
    t
    i
    o
    n
    v
    a
    r b
    a
    z = f
    u
    n
    c
    t
    i
    o
    n s
    c
    o
    o
    b
    y
    d
    o
    o
    (
    ) {
    r
    e
    t
    u
    r
    n t
    r
    u
    e
    ;
    }
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    b
    a
    z
    (
    )
    )
    ; /
    / t
    r
    u
    e
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    b
    a
    z
    .
    n
    a
    m
    e
    )
    ; /
    / "
    s
    c
    o
    o
    b
    y
    d
    o
    o
    "
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    s
    c
    o
    o
    b
    y
    d
    o
    o
    (
    )
    )
    ; /
    / R
    e
    f
    e
    r
    e
    n
    c
    e
    E
    r
    r
    o
    r
    Inline named function
    (also not a closure)

    View full-size slide

  29. DECLARATION - PHP
    /
    / f
    u
    n
    c
    t
    i
    o
    n l
    i
    t
    e
    r
    a
    l d
    e
    c
    l
    a
    r
    a
    t
    i
    o
    n
    f
    u
    n
    c
    t
    i
    o
    n f
    o
    o
    (
    ) {
    r
    e
    t
    u
    r
    n t
    r
    u
    e
    ;
    }
    v
    a
    r
    _
    d
    u
    m
    p
    (
    f
    o
    o
    (
    )
    )
    ; /
    / t
    r
    u
    e
    Function literal

    View full-size slide

  30. DECLARATION - PHP
    /
    / a
    n
    o
    n
    y
    m
    o
    u
    s f
    u
    n
    c
    t
    i
    o
    n
    $
    b
    a
    r = f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    r
    e
    t
    u
    r
    n t
    r
    u
    e
    ;
    }
    ;
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    b
    a
    r
    (
    )
    )
    ; /
    / t
    r
    u
    e
    v
    a
    r
    _
    d
    u
    m
    p
    (
    g
    e
    t
    t
    y
    p
    e
    (
    $
    b
    a
    r
    )
    )
    ; /
    / o
    b
    j
    e
    c
    t
    v
    a
    r
    _
    d
    u
    m
    p
    (
    g
    e
    t
    _
    c
    l
    a
    s
    s
    (
    $
    b
    a
    r
    )
    )
    ; /
    / "
    C
    l
    o
    s
    u
    r
    e
    "
    Function expression
    (not *really* a closure)

    View full-size slide

  31. DECLARATION - PHP
    /
    / i
    n
    l
    i
    n
    e n
    a
    m
    e
    d f
    u
    n
    c
    t
    i
    o
    n
    ?
    $
    b
    a
    z = f
    u
    n
    c
    t
    i
    o
    n b
    a
    z
    i
    n
    g
    a
    (
    ) { /
    / S
    y
    n
    t
    a
    x e
    r
    r
    o
    r
    r
    e
    t
    u
    r
    n t
    r
    u
    e
    ;
    }
    ;
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    b
    a
    z
    (
    )
    )
    ;

    View full-size slide

  32. INVOCATION (1)
    /
    / f
    u
    n
    c
    t
    i
    o
    n i
    n
    v
    o
    c
    a
    t
    i
    o
    n
    f
    u
    n
    c
    t
    i
    o
    n f
    o
    o
    (
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    t
    h
    i
    s =
    =
    = w
    i
    n
    d
    o
    w
    )
    ; /
    / t
    r
    u
    e
    }
    f
    o
    o
    (
    )
    ;
    Function invocation

    View full-size slide

  33. INVOCATION (2)
    /
    / m
    e
    t
    h
    o
    d i
    n
    v
    o
    c
    a
    t
    i
    o
    n
    v
    a
    r b
    a
    r = {
    a
    f
    t
    e
    r
    S
    u
    b
    m
    i
    t : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    t
    h
    i
    s =
    =
    = b
    a
    r
    )
    ; /
    / t
    r
    u
    e
    }
    }
    ;
    b
    a
    r
    .
    a
    f
    t
    e
    r
    S
    u
    b
    m
    i
    t
    (
    )
    ;
    Method invocation

    View full-size slide

  34. INVOCATION (3)
    /
    / c
    o
    n
    s
    t
    r
    u
    c
    t
    o
    r i
    n
    v
    o
    c
    a
    t
    i
    o
    n
    f
    u
    n
    c
    t
    i
    o
    n C
    a
    r
    (
    b
    r
    a
    n
    d
    ) {
    t
    h
    i
    s
    .
    m
    a
    k
    e = b
    r
    a
    n
    d
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    t
    h
    i
    s
    )
    ;
    }
    v
    a
    r b
    m
    w = n
    e
    w C
    a
    r
    (
    '
    b
    m
    w
    '
    )
    ; /
    / C
    a
    r
    { m
    a
    k
    e
    =
    "
    b
    m
    w
    " }
    v
    a
    r f
    o
    r
    d = n
    e
    w C
    a
    r
    (
    '
    f
    o
    r
    d
    '
    )
    ; /
    / C
    a
    r
    { m
    a
    k
    e
    =
    "
    f
    o
    r
    d
    " }
    Constructor invocation

    View full-size slide

  35. INVOCATION (4)
    /
    / c
    a
    l
    l / a
    p
    p
    l
    y i
    n
    v
    o
    c
    a
    t
    i
    o
    n (
    1
    )
    v
    a
    r a
    i
    r
    p
    l
    a
    n
    e = {
    f
    l
    y : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    t
    h
    i
    s
    )
    ;
    }
    }
    ;
    v
    a
    r f
    i
    g
    h
    t
    e
    r
    P
    l
    a
    n
    e = {
    t
    y
    p
    e
    : '
    f
    i
    g
    h
    t
    e
    r
    '
    }
    ;
    a
    i
    r
    p
    l
    a
    n
    e
    .
    f
    l
    y
    (
    )
    ; /
    / O
    b
    j
    e
    c
    t { f
    l
    y
    =
    f
    u
    n
    c
    t
    i
    o
    n
    (
    )
    }
    a
    i
    r
    p
    l
    a
    n
    e
    .
    f
    l
    y
    .
    c
    a
    l
    l
    (
    f
    i
    g
    h
    t
    e
    r
    P
    l
    a
    n
    e
    )
    ; /
    / O
    b
    j
    e
    c
    t { t
    y
    p
    e
    =
    "
    f
    i
    g
    h
    t
    e
    r
    "
    }
    Call / Apply invocation

    View full-size slide

  36. INVOCATION - PHP
    f
    u
    n
    c
    t
    i
    o
    n s
    u
    m
    (
    $
    a
    , $
    b
    ) {
    r
    e
    t
    u
    r
    n $
    a + $
    b
    ;
    }
    v
    a
    r
    _
    d
    u
    m
    p
    (
    s
    u
    m
    (
    1
    , 2
    )
    )
    ; /
    / 3
    v
    a
    r
    _
    d
    u
    m
    p
    (
    c
    a
    l
    l
    _
    u
    s
    e
    r
    _
    f
    u
    n
    c
    (
    '
    s
    u
    m
    '
    , 1
    , 2
    )
    )
    ; /
    / 3 ~ c
    a
    l
    l
    v
    a
    r
    _
    d
    u
    m
    p
    (
    c
    a
    l
    l
    _
    u
    s
    e
    r
    _
    f
    u
    n
    c
    _
    a
    r
    r
    a
    y
    (
    '
    s
    u
    m
    '
    ,
    [
    1
    , 2
    ]
    )
    )
    ; /
    / 3 ~ a
    p
    p
    l
    y

    View full-size slide

  37. INVOCATION - PHP
    /
    / s
    e
    t c
    o
    n
    t
    e
    x
    t
    $
    f
    o
    o = f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    r
    e
    t
    u
    r
    n $
    t
    h
    i
    s
    -
    >
    a + $
    t
    h
    i
    s
    -
    >
    b
    ;
    }
    ;
    $
    d
    a
    t
    a = n
    e
    w \
    S
    t
    d
    C
    l
    a
    s
    s
    (
    )
    ;
    $
    d
    a
    t
    a
    -
    >
    a = 1
    ;
    $
    d
    a
    t
    a
    -
    >
    b = 2
    ;
    $
    n
    e
    w
    F
    o
    o = C
    l
    o
    s
    u
    r
    e
    :
    :
    b
    i
    n
    d
    (
    $
    f
    o
    o
    , $
    d
    a
    t
    a
    )
    ;
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    n
    e
    w
    F
    o
    o
    (
    )
    )
    ; /
    / 3
    $
    n
    e
    w
    e
    r
    F
    o
    o = $
    f
    o
    o
    -
    >
    b
    i
    n
    d
    T
    o
    (
    $
    d
    a
    t
    a
    )
    ;
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    n
    e
    w
    e
    r
    F
    o
    o
    (
    )
    )
    ; /
    / 3

    View full-size slide

  38. NAMED FUNCTIONS
    /
    / n
    ! = n + (
    n
    -
    1
    )
    !
    v
    a
    r f
    a
    c
    t
    o
    r
    i
    a
    l = f
    u
    n
    c
    t
    i
    o
    n
    (
    x
    ) {
    r
    e
    t
    u
    r
    n (
    x =
    =
    = 1
    ) ? 1 : f
    a
    c
    t
    o
    r
    i
    a
    l
    (
    x
    -
    1
    ) + x
    ;
    }
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    f
    a
    c
    t
    o
    r
    i
    a
    l
    (
    4
    )
    )
    ; /
    / 1
    0 (
    = 4
    +
    3
    +
    2
    +
    1
    )

    View full-size slide

  39. NAMED FUNCTIONS
    /
    / c
    o
    p
    y r
    e
    f
    e
    r
    e
    n
    c
    e t
    o a
    n
    o
    n
    y
    m
    o
    u
    s f
    u
    n
    c
    t
    i
    o
    n
    ,
    /
    / a
    n
    d d
    e
    s
    t
    r
    o
    y t
    h
    e o
    r
    i
    g
    i
    n
    a
    l r
    e
    f
    e
    r
    e
    n
    c
    e t
    o i
    t
    v
    a
    r a
    l
    s
    o
    F
    a
    c
    t
    o
    r
    i
    a
    l = f
    a
    c
    t
    o
    r
    i
    a
    l
    ;
    f
    a
    c
    t
    o
    r
    i
    a
    l = n
    u
    l
    l
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    a
    l
    s
    o
    F
    a
    c
    t
    o
    r
    i
    a
    l
    (
    4
    )
    )
    ; /
    / T
    y
    p
    e
    E
    r
    r
    o
    r
    !

    View full-size slide

  40. NAMED FUNCTIONS
    /
    / b
    e
    t
    t
    e
    r s
    o
    l
    u
    t
    i
    o
    n
    :
    v
    a
    r m
    y
    F
    a
    c = f
    u
    n
    c
    t
    i
    o
    n f
    a
    c
    (
    x
    ) {
    r
    e
    t
    u
    r
    n (
    x =
    =
    = 1
    ) ? 1 : f
    a
    c
    (
    x
    -
    1
    ) + x
    ;
    }
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    m
    y
    F
    a
    c
    (
    4
    )
    )
    ; /
    / 1
    0
    v
    a
    r a
    l
    s
    o
    M
    y
    F
    a
    c = m
    y
    F
    a
    c
    ;
    m
    y
    F
    a
    c = n
    u
    l
    l
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    a
    l
    s
    o
    M
    y
    F
    a
    c
    (
    4
    )
    )
    ; /
    / 1
    0

    View full-size slide

  41. OVERLOADING
    /
    / P
    r
    e
    m
    i
    s
    e
    f
    u
    n
    c
    t
    i
    o
    n s
    u
    m
    (
    a
    , b
    ) {
    r
    e
    t
    u
    r
    n a + b
    ;
    }
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    s
    u
    m
    (
    1
    , 2
    )
    )
    ; /
    / 3
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    s
    u
    m
    (
    4
    , 6
    , 7
    )
    )
    ; /
    / 1
    0 (
    w
    h
    a
    t h
    a
    p
    p
    e
    n
    e
    d t
    o 7
    ?
    )

    View full-size slide

  42. OVERLOADING
    /
    / S
    o
    l
    u
    t
    i
    o
    n
    f
    u
    n
    c
    t
    i
    o
    n s
    u
    m
    2
    (
    ) { /
    / n
    o n
    a
    m
    e
    d a
    r
    g
    u
    m
    e
    n
    t
    s n
    e
    e
    d
    e
    d a
    n
    y
    m
    o
    r
    e
    v
    a
    r r
    e
    s
    u
    l
    t = 0
    ;
    f
    o
    r (
    v
    a
    r i = 0
    ; i < a
    r
    g
    u
    m
    e
    n
    t
    s
    .
    l
    e
    n
    g
    t
    h
    ; i
    +
    +
    ) {
    r
    e
    s
    u
    l
    t +
    = a
    r
    g
    u
    m
    e
    n
    t
    s
    [
    i
    ]
    ;
    }
    r
    e
    t
    u
    r
    n r
    e
    s
    u
    l
    t
    ;
    }
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    s
    u
    m
    2
    (
    4
    , 6
    , 7
    )
    )
    ; /
    / 1
    7
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    s
    u
    m
    2
    (
    1
    ,
    2
    ,
    3
    ,
    4
    ,
    5
    ,
    6
    ,
    7
    ,
    8
    ,
    9
    )
    )
    ; /
    / 4
    5

    View full-size slide

  43. TL;DR - FUNCTIONS
    1. 3 ways of declaring a function
    2. 4 ways of invoking a function
    3. Named functions (recursion)
    4. Overloading

    View full-size slide

  44. TREATMENT OVERVIEW
    1. Scope
    2. Functions
    3. Closures
    4. (IIFE)
    5. Questions

    View full-size slide

  45. CLOSURES
    A closure is a function or reference to a function
    together with a referencing environment
    A closure enables a function to access non-local
    variables even when invoked outside its
    immediate lexical scope.

    View full-size slide

  46. EXAMPLE (1)
    v
    a
    r f
    o
    o = '
    f
    o
    o
    '
    ;
    f
    u
    n
    c
    t
    i
    o
    n c
    l
    i
    c
    k
    (
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    f
    o
    o
    )
    ;
    }
    c
    l
    i
    c
    k
    (
    )
    ; /
    / "
    f
    o
    o
    "

    View full-size slide

  47. EXAMPLE (2)
    v
    a
    r e
    x
    e
    c
    u
    t
    e
    L
    a
    t
    e
    r
    ;
    f
    u
    n
    c
    t
    i
    o
    n b
    a
    r
    (
    ) {
    v
    a
    r m
    i
    c
    k
    e
    y = '
    m
    o
    u
    s
    e
    '
    ;
    e
    x
    e
    c
    u
    t
    e
    L
    a
    t
    e
    r = f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    m
    i
    c
    k
    e
    y
    )
    ;
    }
    }
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    t
    y
    p
    e
    o
    f e
    x
    e
    c
    u
    t
    e
    L
    a
    t
    e
    r
    )
    ; /
    / u
    n
    d
    e
    f
    i
    n
    e
    d
    b
    a
    r
    (
    )
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    t
    y
    p
    e
    o
    f e
    x
    e
    c
    u
    t
    e
    L
    a
    t
    e
    r
    )
    ; /
    / f
    u
    n
    c
    t
    i
    o
    n
    e
    x
    e
    c
    u
    t
    e
    L
    a
    t
    e
    r
    (
    )
    ; /
    / "
    m
    o
    u
    s
    e
    "

    View full-size slide

  48. EXAMPLE (PHP)
    $
    a
    m
    o
    u
    n
    t = 0
    ;
    $
    c
    l
    i
    c
    k = f
    u
    n
    c
    t
    i
    o
    n
    (
    ) u
    s
    e (
    &
    $
    a
    m
    o
    u
    n
    t
    ) {
    $
    a
    m
    o
    u
    n
    t
    +
    +
    ;
    }
    ;
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    a
    m
    o
    u
    n
    t
    )
    ; /
    / 0
    $
    c
    l
    i
    c
    k
    (
    )
    ;
    v
    a
    r
    _
    d
    u
    m
    p
    (
    $
    a
    m
    o
    u
    n
    t
    )
    ; /
    / 1

    View full-size slide

  49. USAGE: PRIVATE VARIABLES
    f
    u
    n
    c
    t
    i
    o
    n S
    o
    l
    d
    i
    e
    r
    (
    ) {
    v
    a
    r r
    a
    n
    k
    ;
    t
    h
    i
    s
    .
    s
    e
    t
    R
    a
    n
    k = f
    u
    n
    c
    t
    i
    o
    n
    (
    n
    a
    m
    e
    ) {
    r
    a
    n
    k = n
    a
    m
    e
    ;
    }
    ;
    t
    h
    i
    s
    .
    g
    e
    t
    R
    a
    n
    k = f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    r
    e
    t
    u
    r
    n r
    a
    n
    k
    ;
    }
    ;
    }
    v
    a
    r c
    o
    r
    p
    o
    r
    a
    l = n
    e
    w S
    o
    l
    d
    i
    e
    r
    (
    )
    ;
    c
    o
    r
    p
    o
    r
    a
    l
    .
    s
    e
    t
    R
    a
    n
    k
    (
    '
    c
    o
    r
    p
    o
    r
    a
    l
    '
    )
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    c
    o
    r
    p
    o
    r
    a
    l
    .
    r
    a
    n
    k
    )
    ; /
    / u
    n
    d
    e
    f
    i
    n
    e
    d
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    c
    o
    r
    p
    o
    r
    a
    l
    .
    g
    e
    t
    R
    a
    n
    k
    (
    )
    )
    ; /
    / "
    c
    o
    r
    p
    o
    r
    a
    l
    "

    View full-size slide

  50. TL;DR - CLOSURES
    1. Examples
    2. Usage: Private variables

    View full-size slide

  51. TREATMENT OVERVIEW
    1. Scope
    2. Functions
    3. Closures
    4. (IIFE)
    5. Questions

    View full-size slide

  52. IMMEDIATE FUNCTIONS
    IIFE - Immediately-Invoked Function
    Expressions

    View full-size slide

  53. DEFINITION
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    )
    {
    }
    )
    (
    )
    ;

    View full-size slide

  54. DEFINITION
    /
    / C
    a
    l
    l o
    p
    e
    r
    a
    t
    o
    r
    : (
    )
    (
    /
    * .
    .
    . *
    /
    )
    (
    )
    ;

    View full-size slide

  55. DEFINITION
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    )
    {
    v
    a
    r f
    o
    o = '
    f
    o
    o
    '
    ;
    }
    )
    (
    )
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    f
    o
    o
    )
    ; /
    / R
    e
    f
    e
    r
    e
    n
    c
    e
    E
    r
    r
    o
    r
    Temporary scope with private variables

    View full-size slide

  56. USAGE
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    $
    )
    {
    $
    (
    '
    a
    '
    )
    .
    b
    i
    n
    d
    (
    '
    c
    l
    i
    c
    k
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    )
    {
    a
    l
    e
    r
    t
    (
    '
    I w
    a
    s c
    l
    i
    c
    k
    e
    d
    '
    )
    ;
    }
    )
    ;
    }
    )
    (
    j
    Q
    u
    e
    r
    y
    )
    ;
    Aliasing variables

    View full-size slide

  57. USAGE
    /
    / P
    r
    e
    m
    i
    s
    e
    : k
    e
    e
    p t
    r
    a
    c
    k o
    f # r
    u
    n
    s
    v
    a
    r r
    u
    n
    s = 0
    ;
    v
    a
    r t
    i
    m
    e
    r = s
    e
    t
    I
    n
    t
    e
    r
    v
    a
    l
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    )
    {
    r
    u
    n
    s
    +
    +
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    r
    u
    n
    s
    )
    ;
    i
    f (
    r
    u
    n
    s >
    = 1
    0
    ) {
    c
    l
    e
    a
    r
    I
    n
    t
    e
    r
    v
    a
    l
    (
    t
    i
    m
    e
    r
    )
    ;
    }
    }
    , 5
    0
    0
    )
    ;
    Tidy global scope

    View full-size slide

  58. USAGE
    /
    / B
    e
    t
    t
    e
    r w
    a
    y o
    f k
    e
    e
    p
    i
    n
    g t
    r
    a
    c
    k
    :
    v
    a
    r t
    i
    m
    e
    r = s
    e
    t
    I
    n
    t
    e
    r
    v
    a
    l
    (
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    )
    {
    v
    a
    r r
    u
    n
    s = 0
    ;
    r
    e
    t
    u
    r
    n f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    r
    u
    n
    s
    +
    +
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    r
    u
    n
    s
    )
    ;
    i
    f (
    r
    u
    n
    s >
    = 1
    0
    ) {
    c
    l
    e
    a
    r
    I
    n
    t
    e
    r
    v
    a
    l
    (
    t
    i
    m
    e
    r
    )
    ;
    }
    }
    ;
    }
    )
    (
    )
    , 5
    0
    0
    )
    ;
    Clean global scope

    View full-size slide

  59. TL;DR - IIFE'S
    1. Temporary Scope
    2. Private variables
    3. Usage: Structuring code (aliasing)
    4. Usage: Tidy Scope

    View full-size slide

  60. BOOKS
    https://github.com/getify/You-Dont-Know-JS

    View full-size slide

  61. JOIND.IN/13118

    View full-size slide

  62. TOM VAN HERREWEGHE
    -
    @miljar miljar.github.io

    View full-size slide

  63. training.king-foo.be

    View full-size slide

  64. CREDITS - IMAGES
    1. Sleeping kid - https://flic.kr/p/5PcP7r
    2. Ju-jitsu feet - Jachim Coudenys
    3. Wolf spider - https://flic.kr/p/6hULjn
    4. Javascript screen - https://flic.kr/p/5Y1z6v
    5. Lobotomy - Wikimedia Commons
    6. Bubbles 1 - https://flic.kr/p/4Ljnww
    7. Cranes over Dubai - https://flic.kr/p/rFgym
    8. Overloading - https://flic.kr/p/xEwLt
    9. Currying - https://flic.kr/p/9ZGhy6
    10. YDKJS books - O'Reilly
    11. Secrets of the Javascript Ninja - Amazon.com

    View full-size slide

  65. CREDITS - REVIEWERS
    Gerry Vandermaesen
    Jani Hartikainen

    View full-size slide