Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

These Are APIS
 NOT JavaScript:
 AJAX (XMLHttpRequest, fetch) 
 the DOM, Shadow DOM, Events, JSON, Canvas, Console Interesting Things About JavaScript w @zgordon

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

semicolons; Interesting Things About JavaScript w @zgordon

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

// 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 ); }

Slide 15

Slide 15 text

{ // 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

Slide 16

Slide 16 text

function hoisting Interesting Things About JavaScript w @zgordon

Slide 17

Slide 17 text

Why can we call a function before we declare it?

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

ES6 Classes are NOT Hoisted

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

const has immutable binding NOT immutability

Slide 24

Slide 24 text

‘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

Slide 25

Slide 25 text

Object.freeze( ) provides immutability

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

this Interesting Things About JavaScript w @zgordon

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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 ); } }

Slide 32

Slide 32 text

Object Oriented 
 Programming != Class Based 
 Programming Interesting Things About JavaScript w @zgordon

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Favor Composition Over “Class” Inheritance

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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 );

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Template Strings Interesting Things About JavaScript w @zgordon

Slide 45

Slide 45 text

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 ); }

Slide 46

Slide 46 text

Event Propagation Interesting Things About JavaScript w @zgordon

Slide 47

Slide 47 text

WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon

document window Event Propagation

Slide 48

Slide 48 text

WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon

document window Event Propagation

Slide 49

Slide 49 text

WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon Event Propagation

document window Phase 1 - Capturing

Slide 50

Slide 50 text

WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon Event Propagation

document window Phase 2 - Target Phase 1 - Capturing

Slide 51

Slide 51 text

WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon Event Propagation

document window Phase 1 - Capturing Phase 2 - Target Phase 3 - Bubbling

Slide 52

Slide 52 text

WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon Event Propagation

document window Phase 1 - Capturing Phase 2 - Target Phase 3 - Bubbling

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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