You Don't Know JS
0:00:00 - 0:13:57
Kyle Simpson is back with his second Frontend Masters workshop. He starts with a little background about himself including links to his website, open source projects, and contact information.
0:13:58 - 0:19:34
Speaker Introduction (Part 2)
Kyle makes his living teaching and presenting around the world. He provides links to all of his presentations and talks a little about the new book he's writing.
0:19:35 - 0:22:59
0:23:00 - 0:32:16
ECMAScript Language Specification
- 0:00:00 - 0:13:57 Speaker Introduction Kyle Simpson is back with his second Frontend Masters workshop. He starts with a little background about himself including links to his website, open source projects, and contact information.
- 0:58:51 - 1:10:24 Execution of Function Code As the execution phase continues within the function scope, the same LHR and RHR operations are applied. Things get a little interesting with undeclared variables. They are automatically declared in the global scope.
- 1:23:36 - 1:33:39 Function Declarations, Function Expressions, and Block Scope A function declaration occurs when the function keyword is the first word of the statement. Functions assigned to a variable become function expressions. Kyle explains these difference while also describing why it is bad to use anonymous functions.
- 1:33:40 - 1:38:44 Lexical Scope Both Lexical Scope and Dynamic Scope are two models of scope programming languages. Meaning "compile-time scope," Kyle uses a building metaphor to help explain Lexical Scope.
- 1:47:59 - 1:57:28 IIFE Pattern The Immediately Invoked Function Expressions (IIFE) Pattern is a technique used to hide scope involving wrapping code inside a function that is immediately called. This technique allows developers to create an object in their scope without polluting the outer scope.
- 1:57:29 - 2:01:54 IIFE Pattern Questions Before discussing the let keyword, Kyle fields a few questions about syntax style with the IIFE pattern.
- 2:01:55 - 2:06:02 Block Scope in ES6 In ECMAScript 6, the "let" keyword will implicitly create a block-level scope and add declarations to that scope rather than the enclosing function. The most common use-case for the let keyword is for loops.
2:06:03 - 2:14:09
Problems with let keyword
Kyle describes a few issues he has with the let keyword. Some of his issues are stylistic, but others are related to common variable functionality like hoisting. Kyle discusses his solutions for these issues and a tool he created to help.
- 2:14:10 - 2:16:01 Dynamic Scope Using a hypothetical example, Kyle briefly describes dynamic scope as it relates to Lexical scope.
- 2:16:02 - 2:17:41 zz: Scope Kyle presents a quiz about what was covered in the Scope section of this course and reviews the answers with the audience.
- 2:30:42 - 2:33:45 Exercise 1 For this exercise, you will be using the files in the day1/ex1 folder. Look at the README.md file for exercise instructions.
- 2:33:46 - 2:41:37 Exercise 1: Solution Kyle walks through the solution for exercise 1.
- 2:53:43 - 3:00:15 Binding Confusion Attempting to force the "this" keyword into a different lexical scope can lead to some binding confusion. Kyle pulls an example he found on Stack Overflow around this confusion to further demystify usage of the "this" keyword.
- 3:00:16 - 3:13:06 Explicit Binding The explicit binding rule allows developers to use the "call" method and pass an explicit reference for the "this" binding. Explicit bindings can also be set using the "apply" method. Kyle explains explicit bindings and also detours into a discussion about a technique he calls "hard binding." Hard binding was added as of ES5 in the form of the "bind" method.
- 3:21:13 - 3:24:40 Quiz: this Kyle presents a quiz about the "this" keyword.
- 3:39:19 - 3:44:36 More Closure Examples Kyle demonstrates a few additional closure examples inside loops and the misconceptions that arise. He also compares closure to traditional object references to explain the difference.
- 3:44:37 - 3:55:07 Module Patterns Kyle explains the different module patterns that use closure. This includes the classic, modified, and modern patterns. He also discusses what to expect in ES6.
- 3:55:08 - 3:59:03 Quiz: Closure Kyle presents a quiz about the different closure topics he covered.
- 3:59:04 - 4:00:58 Exercise 2 For this exercise, you will be using the files in the day1/ex2 folder. Look at the README.md file for exercise instructions.
- 4:00:59 - 4:11:15 Exercise 2: Solution Kyle walks through the solution for exercise 2.
- 4:16:17 - 4:26:16 Prototypes Explained, Part 1 Using a code example from the slides, Kyle spends some time diagramming the relationship between an object and its prototype.
- 4:26:17 - 4:33:11 Prototypes Explained, Part 2 Kyle explains the relationship between __proto__ (dunder-proto) and the prototype keyword and how both reference the underlining prototype. ES5 added a standardized way to do this using the getPrototypeOf method.
- 4:33:12 - 4:41:42 Prototype Linkages Prototype linkages allow delegation to other objects to hand method calls or property references. This allows additional objects to be created from a prototype with duplication of the function code. This binding is beneficial as long as developers don't break any rules.
- 4:48:06 - 4:52:28 Linked Prototype Diagram Kyle revisits the prototype diagram he drew on the whiteboard earlier. This time, however, he shows a more complex version outlining the relationship of the two linked prototypes.
- 4:52:29 - 4:55:31 Quiz: Object Prototypes Kyle presents a quiz about object prototypes and their behavior.
- 4:55:32 - 4:58:18 Exercise 3 For this exercise, you will be using the files in the day1/ex3 folder. Look at the README.md file for exercise instructions.
- 4:58:19 - 5:05:02 Exercise 3: Solution Kyle walks through the solution for exercise 3.
- 5:10:08 - 5:16:22 OLOO Rather than relating prototypes to inheritance, Kyle demonstrates that prototypes allow actions to be delegated to other objects. Kyle refers to this a Objects Linked to Other Objects or OLOO. He modifies the previous example to use this OLOO technique.
5:16:23 - 5:25:26
Now that Kyle has explained this OLOO method for creating and delegating objects, he spends a few minutes answering audience questions. He also compares the old prototype-based code with the new OLOO code and shows all the prototype functionality is moved to the Object.create method.
- 5:25:27 - 5:32:41 Quiz: Prototype Unit Kyle presents a quiz about the prototype unit.
- 5:32:42 - 5:34:53 Exercise 4 For this exercise, you will be using the files in the day1/ex4 folder. Look at the README.md file for exercise instructions. In the interest of time, Kyle gives this exercise to the audience as a "homework" assignment.
- 5:34:54 - 5:57:14 Exercise 4 Solution Kyle spends a few minutes at the beginning of the next day describing the solution to exercise 4.
- 6:05:26 - 6:08:25 Solving Callback Problems Kyle demonstrates a few techniques developers have used to get around callback issues. For example, providing separate callbacks in the case of success and failure functionality. Most of these solutions only lead to more inversion of control.
- 6:08:26 - 6:15:55 Generators Generators are coming in ES6. A generator is a new type of function that can be paused during execution and resumed at a later time. The are paused using the yield keyword.
- 6:15:56 - 6:23:56 Promises Kyle explains how promises are a way to subscribe to the completion of a task. For example, when a function is called, a promise will let you know when the function completes. Kyle demonstrates jQuery's implementation of promises and compares it to the native implementation in ES6.
6:23:57 - 6:29:41
Kyle shows a library he wrote as an alternative to promises called asynquence. Sequences are automatically chained promises. His library, asynquence, represents asynchronous sequences.
- 6:29:42 - 6:32:06 Quiz: Async Patterns
- 6:32:07 - 6:34:38 Exercise 5 For this exercise, you will be using the files in the day1/ex5 folder. Look at the README.md file for exercise instructions. In the interest of time, Kyle gives this exercise to the audience as a "homework" assignment.
- 6:34:39 - 6:54:24 Exercise 5 Solution Kyle spends a few minutes at the beginning of the next day describing the solution to exercise 5.