Interesting Things About JavaScript - WC San José 2017

In this talk I go over various things about JavaScript that I find interesting.

Transcript

1. Interesting Things
   About JavaScript
   Zac Gordon @zgordon
   https://javascriptforwp.com
   

   View Slide

2. These Are APIS

   NOT JavaScript:

   AJAX (XMLHttpRequest, fetch) 

   the DOM, Shadow DOM, Events,
   JSON, Canvas, Console
   Interesting Things About JavaScript w @zgordon
   

   View Slide

3. WordCamp Miami 2017
   JavaScript is not a hard language.
   Almost everything you do in JavaScript
   involves an API. That makes things
   more complicated.
   Interesting Things About JavaScript w @zgordon
   

   View Slide

4. WordCamp Miami 2017
   However, JavaScript does work
   differently than other languages.
   Interesting Things About JavaScript w @zgordon
   

   View Slide

5. JavaScript is a compiled language
   Interesting Things About JavaScript w @zgordon
   

   View Slide

6. ‘use strict’;
   Interesting Things About JavaScript w @zgordon
   

   View Slide

7. ‘use strict’ // Applied to entire file
   function render( post ) {
   ‘use strict’ // Applied to function scope
   }
   

   View Slide

8. ‘use strict’
   // Need var, let or const
   postIds = [ 1, 2, 3, 4 ]; // Error
   

   View Slide

9. semicolons;
   Interesting Things About JavaScript w @zgordon
   

   View Slide

10. The cool kids don’t use semicolons,
    but sometimes they are necessary.
    

    View Slide

11. var string = 'This works';
    var another = 'So does this'
    

    View Slide

12. var ids = [ 1, 2, 3 ]
    // Semicolon needed in for loop
    for ( let i = 0; i < ids.length; i++ ) {
    console.log( ids[ i ] )
    }
    

    View Slide

13. 3 Types of Scope:
    Global, Function, Block
    Interesting Things About JavaScript w @zgordon
    

    View Slide

14. // Global Scope: postId
    var postIds = [ 1, 2, 3 ];
    // Global Scope: render
    function render( postId ) {
    // Function Scope: postId
    console.log( postId );
    }
    for( let postId of postIds ) {
    // Block Scope: postId
    console.log( postId );
    }
    

    View Slide

15. {
    // var is NOT Block Scoped
    var post1 = 1;
    }
    console.log( post1 ); // Logs 1
    {
    // let IS Block Scoped
    let post2 = 2;
    }
    console.log( post2 ); // Returns error
    

    View Slide

16. function hoisting
    Interesting Things About JavaScript w @zgordon
    

    View Slide

17. Why can we call a function
    before we declare it?
    

    View Slide

18. // Why can we call render before declaring it?
    render( "Hello World!" );
    function render( title ) {
    console.log( title );
    }
    

    View Slide

19. var testUI = new UI(); // Reference Error
    class UI {
    }
    

    View Slide

20. ES6 Classes are
    NOT Hoisted
    

    View Slide

21. var, let, const
    Interesting Things About JavaScript w @zgordon
    

    View Slide

22. keyword var let const
    global scope YES YES YES
    function scope YES YES YES
    block scope NO YES YES
    can be
    reassigned
    YES YES NO
    

    View Slide

23. const has
    immutable binding
    NOT immutability
    

    View Slide

24. ‘use strict’
    const post = {},
    ids = [ 1, 2, 3 ],
    id = 1;
    post.title = "Hello World!"; // Allowed
    post = "Hello World!"; // Error
    ids.push( 4 ); // Allowed
    id++; // Error
    

    View Slide

25. Object.freeze( )
    provides immutability
    

    View Slide

26. ‘use strict’;
    const post = {};
    Object.freeze( post );
    post.title = "Hello World!"; // Error
    

    View Slide

27. this
    Interesting Things About JavaScript w @zgordon
    

    View Slide

28. this is determined by
    how it is called,
    not where it is declared
    Interesting Things About JavaScript w @zgordon
    

    View Slide

29. var post = {
    id: 1,
    render: function() {
    console.log( this.id );
    }
    }
    post.render(); // 1
    class Post {
    constructor( id ) {
    this.id = id;
    }
    render() {
    console.log( this.id );
    }
    }
    var myPost = new Post( 1 );
    myPost.render(); // 1
    var UI = {
    id: 'UI-999',
    render: () => {
    console.log( this.id );
    }
    }
    post.render(); // undefined
    

    View Slide

30. call, apply, bind
    Interesting Things About JavaScript w @zgordon
    

    View Slide

31. var post = {
    id: 1,
    render: function() {
    console.log( this.id );
    }
    }
    UI.render(); // UI-999
    UI.render.call( post ); // 1
    UI.render.apply( post ); // 1
    var r = UI.render.bind( post );
    r(); // 1
    var UI = {
    id: 'UI-999',
    render: function() {
    console.log( this.id );
    }
    }
    

    View Slide

32. Object Oriented 

    Programming
    !=
    Class Based 

    Programming
    Interesting Things About JavaScript w @zgordon
    

    View Slide

33. ES6 Classes are
    NOT Classes
    Interesting Things About JavaScript w @zgordon
    

    View Slide

34. class Post {
    constructor( id ) {
    this.id = id;
    }
    render() {
    console.log( this.id );
    }
    }
    var p = new Post( 1 );
    typeof p; // 'function'
    

    View Slide

35. Prototypal Inheritance
    versus
    Class Inheritance
    Interesting Things About JavaScript w @zgordon
    

    View Slide

36. Interesting Things About JavaScript w @zgordon
    Class Inheritance
    Content
    Post Page
    Prototypal Inheritance
    Content
    Post Page
    

    View Slide

37. class Content {
    constructor( id ) {
    this.id = id;
    }
    render() {
    console.log( this.id );
    }
    }
    class Post extends Content {
    constructor( id, tag) {
    super( id )
    this.tag = tag;
    }
    }
    

    View Slide

38. Favor Composition
    Over “Class” Inheritance
    

    View Slide

39. Object.assign()
    Interesting Things About JavaScript w @zgordon
    

    View Slide

40. var newPost = {};
    function renderId() {
    console.log( this.id );
    }
    function renderTitle() {
    console.log( this.id );
    }
    Object.assign(
    newPost,
    {
    id: 3,
    title: 'New Post',
    renderId: renderId,
    renderTitle
    }
    );
    console.log( newPost );
    

    View Slide

41. Interesting Things About JavaScript w @zgordon
    Class: Content
    - id
    - title
    - render
    Sub Class: Post
    - tag
    - category
    Sub Class: Page
    - template
    Class: User
    - id
    - render
    

    Sub Class: Admin
    - category
    - template
    Class Inheritance
    

    View Slide

42. Interesting Things About JavaScript w @zgordon
    Class: Content
    - id
    - title
    - render
    Sub Class: Post
    - tag
    - category
    Sub Class: Page
    - template
    Class: User
    - id
    - render
    

    Sub Class: Admin
    - category
    - template
    Class Inheritance
    

    View Slide

43. Interesting Things About JavaScript w @zgordon
    Content: {}, id, title, render
    Post: Content, tag, category
    Page: Content, template
    User: {}, id, render
    Admin: User, template
    Composition
    

    View Slide

44. Template Strings
    Interesting Things About JavaScript w @zgordon
    

    View Slide

45. function render( post ) {
    var container = document.getElementById( 'main' ),
    article = document.createElement('article'),
    markup = '';
    markup += `${post.title.rendered}`;
    markup += `${post.content.rendered}`;
    article.innerHTML = markup;
    container.appendChild( article );
    }
    

    View Slide

46. Event Propagation
    Interesting Things About JavaScript w @zgordon
    

    View Slide

47. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon
    
    
    
    
    document
    window
    Event Propagation
    

    View Slide

48. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon
    
    
    
    
    document
    window
    Event Propagation
    

    View Slide

49. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon
    Event Propagation
    
    
    
    
    document
    window
    Phase 1 - Capturing
    

    View Slide

50. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon
    Event Propagation
    
    
    
    
    document
    window
    Phase 2 - Target
    
    Phase 1 - Capturing
    

    View Slide

51. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon
    Event Propagation
    
    
    
    
    document
    window
    
    Phase 1 - Capturing
    Phase 2 - Target
    Phase 3 - Bubbling
    

    View Slide

52. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon
    Event Propagation
    
    
    
    
    document
    window
    Phase 1 - Capturing
    Phase 2 - Target
    Phase 3 - Bubbling
    
    

    View Slide

53. WordCamp Miami 2017
    Event Propagation
    Bubbling
    el.addEventListener( 'click', sayHi, false );
    Capturing
    el.addEventListener( 'click', sayHi, true );
    Stopping Propagation
    event.stopPropagation();
    Interesting Things About JavaScript w @zgordon
    

    View Slide

54. webpack & HTTP/2
    Interesting Things About JavaScript w @zgordon
    https://medium.com/webpack/webpack-http-2-7083ec3f3ce6
    

    View Slide

55. WordCamp Miami 2017
    javascriptforwp.com/category/free-videos
    Interesting Things About JavaScript w @zgordon
    Learn JavaScript Deeply with Zac Gordon
    @zgordon
    

    View Slide