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