Save 37% off PRO during our Black Friday Sale! »

Interesting Things About JavaScript - WC San José 2017

De0a01122ca4a619004332ab04431b7b?s=47 Zac Gordon
September 02, 2017

Interesting Things About JavaScript - WC San José 2017

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

De0a01122ca4a619004332ab04431b7b?s=128

Zac Gordon

September 02, 2017
Tweet

Transcript

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

  2. These Are APIS
 NOT JavaScript:
 AJAX (XMLHttpRequest, fetch) 
 the

    DOM, Shadow DOM, Events, JSON, Canvas, Console Interesting Things About JavaScript w @zgordon
  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
  4. WordCamp Miami 2017 However, JavaScript does work differently than other

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

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

  7. ‘use strict’ // Applied to entire file function render( post

    ) { ‘use strict’ // Applied to function scope }
  8. ‘use strict’ // Need var, let or const postIds =

    [ 1, 2, 3, 4 ]; // Error
  9. semicolons; Interesting Things About JavaScript w @zgordon

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

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

    this'
  12. var ids = [ 1, 2, 3 ] // Semicolon

    needed in for loop for ( let i = 0; i < ids.length; i++ ) { console.log( ids[ i ] ) }
  13. 3 Types of Scope: Global, Function, Block Interesting Things About

    JavaScript w @zgordon
  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 ); }
  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
  16. function hoisting Interesting Things About JavaScript w @zgordon

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

  18. // Why can we call render before declaring it? render(

    "Hello World!" ); function render( title ) { console.log( title ); }
  19. var testUI = new UI(); // Reference Error class UI

    { }
  20. ES6 Classes are NOT Hoisted

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

  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
  23. const has immutable binding NOT immutability

  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
  25. Object.freeze( ) provides immutability

  26. ‘use strict’; const post = {}; Object.freeze( post ); post.title

    = "Hello World!"; // Error
  27. this Interesting Things About JavaScript w @zgordon

  28. this is determined by how it is called, not where

    it is declared Interesting Things About JavaScript w @zgordon
  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
  30. call, apply, bind Interesting Things About JavaScript w @zgordon

  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 ); } }
  32. Object Oriented 
 Programming != Class Based 
 Programming Interesting

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

    @zgordon
  34. class Post { constructor( id ) { this.id = id;

    } render() { console.log( this.id ); } } var p = new Post( 1 ); typeof p; // 'function'
  35. Prototypal Inheritance versus Class Inheritance Interesting Things About JavaScript w

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

    Page Prototypal Inheritance Content Post Page
  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; } }
  38. Favor Composition Over “Class” Inheritance

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

  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 );
  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
  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
  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
  44. Template Strings Interesting Things About JavaScript w @zgordon

  45. function render( post ) { var container = document.getElementById( 'main'

    ), article = document.createElement('article'), markup = ''; markup += `<h1><a href="${post.link}">${post.title.rendered}</a></h1>`; markup += `<div class=“entry-content">${post.content.rendered}</div>`; article.innerHTML = markup; container.appendChild( article ); }
  46. Event Propagation Interesting Things About JavaScript w @zgordon

  47. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon <html>

    <body> <p> <a> document window Event Propagation
  48. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon <html>

    <body> <p> <a> document window Event Propagation
  49. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon Event

    Propagation <html> <body> <p> <a> document window Phase 1 - Capturing
  50. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon Event

    Propagation <html> <body> <p> <a> document window Phase 2 - Target <a> Phase 1 - Capturing
  51. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon Event

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

    Propagation <html> <body> <p> <a> document window Phase 1 - Capturing Phase 2 - Target Phase 3 - Bubbling <a>
  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
  54. webpack & HTTP/2 Interesting Things About JavaScript w @zgordon https://medium.com/webpack/webpack-http-2-7083ec3f3ce6

  55. WordCamp Miami 2017 javascriptforwp.com/category/free-videos Interesting Things About JavaScript w @zgordon

    Learn JavaScript Deeply with Zac Gordon @zgordon