This course has been updated! We now recommend you take the Deep JavaScript Foundations, v3 course.
Table of Contents
Introduction
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.
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.
JavaScript Resources
Before jumping into the course content, Kyle runs through a few resources for JavaScript API documentation, writing styles, and the ECMAScript Language Specification.
ECMAScript Language Specification
Recently, Kyle tasked himself with finding clarification to the behavior of the "this" keyword. Kyle uses this example to demonstrate how to read and use the JavaScript specification.
Course Plan
Kyle explains the scope of this course. He will focus on the "what you need to know" parts of JavaScript. This includes coverage on Scopes, Closures, Object Oriented Coding, and Asynchronous Patterns.
Scope
Scope and the JavaScript Compiler
The scope is where you go to look for things. The current version of JavaScript only has function scope. Kyle uses the concept of scope to help understand the way the JavaScript compiler works.
Compiling Function Scope
As the JavaScript compiler enters a function, it will begin looking for declaration inside that scope and recursively process them. Once all scopes have been compiled, the execution phase can begin.
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.
Scope and Execution Example
Kyle walks the audience through another example of how the JavaScript compiler will declare and execute variables and functions. This example includes a nested function which creates a nested scope.
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.
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.
Cheating Lexical Scope: eval
Since there are many ways to cheat in JavaScript, Kyle demonstrates how the "eval" keyword can be used to cheat Lexical Scope rules. He also describes issues that arise when using the "with" keyword.
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.
IIFE Pattern Questions
Before discussing the let keyword, Kyle fields a few questions about syntax style with the IIFE pattern.
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.
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.
Dynamic Scope
Using a hypothetical example, Kyle briefly describes dynamic scope as it relates to Lexical scope.
zz: Scope
Kyle presents a quiz about what was covered in the Scope section of this course and reviews the answers with the audience.
Hoisting
Hoisting is the moving of declarations to the top of the scope block during the compiling phase. Hoisting applies to both variable declarations and functions. Kyle spends some time explaining why hoisting exists in JavaScript and the problems surrounding it.
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.
Exercise 1: Solution
Kyle walks through the solution for exercise 1.
this Keyword
Every function, while it's executing, has a reference to its current execution context called "this." The "this" reference is JavaScript's version of dynamic scope. Kyle explains the "this" keyword and its relationship to the call site of the function.
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.
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.
The new keyword
JavaScript does not have classes and the "new" keyword does not do any instantiation. Kyle explains the functionality of the "new" keyword and the effects it has when placed in front of a function call.
Quiz: this
Kyle presents a quiz about the "this" keyword.
Closure
Closures
Closures are often misunderstood by JavaScript developers. Closures are when a function remembers its lexical scope even when the function is executed outside that lexical scope.
Closure Examples
To further explain closure, Kyle shows examples using some common JavaScript structures like setTimeout and click events. He also demonstrates closure in shared scopes and nested scopes.
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.
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.
Quiz: Closure
Kyle presents a quiz about the different closure topics he covered.
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.
Exercise 2: Solution
Kyle walks through the solution for exercise 2.
Object-Oriented
Prototype
In JavaScript, every object is built by a constructor function and does not mean classes are being instantiated. When a constructor function is called, a new object is created with a link to the object's prototype.
Prototypes Explained, Part 1
Using a code example from the slides, Kyle spends some time diagramming the relationship between an object and its prototype.
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.
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.
prototype: Objects Linked
Prototypes in JavaScript can be linked and share a parent-child relationship similar to a subclass and superclass. This is beneficial when extending a prototype to add additional methods. However, there are issues with constructor references.
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.
Quiz: Object Prototypes
Kyle presents a quiz about object prototypes and their behavior.
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.
Exercise 3: Solution
Kyle walks through the solution for exercise 3.
Inheritance
In classical inheritance, properties and methods of a class are copied to object instantiated of that class. Subclasses inherit the properties and methods of a parent class and copy them to their instantiated objects. Kyle contrasts that with JavaScript's "prototypal inheritance" or "behavior delegation"
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.
OLOO Questions
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.
Quiz: Prototype Unit
Kyle presents a quiz about the prototype unit.
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.
Exercise 4 Solution
Kyle spends a few minutes at the beginning of the next day describing the solution to exercise 4.
Async Patterns
Callbacks
Callbacks are integral to JavaScript but can lead to many problems. They allow for asynchronicity to occur, but in the process, create an inversion of control where developers are handing off control of their application to another area or mechanism.
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.
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.
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.
asynquence
Kyle shows a library he wrote as an alternative to promises called asynquence. Sequences are automatically chained promises. His library, asynquence, represents asynchronous sequences.
Quiz: Async Patterns
Quiz: Async Patterns
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.
Exercise 5 Solution
Kyle spends a few minutes at the beginning of the next day describing the solution to exercise 5.