Frontend Masters – Advanced JavaScript

Speaker Introduction (Part )

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

IIFE Pattern Questions

Before discussing the let keyword, Kyle fields a few questions about syntax style with the IIFE pattern.

Block Scope in ES

 

Block Scope in ES

In ECMAScript , 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

 

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

 

Dynamic Scope

Using a hypothetical example, Kyle briefly describes dynamic scope as it relates to Lexical scope.

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

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 

 

Exercise 

For this exercise, you will be using the files in the day/ex folder. Look at the README.md file for exercise instructions.

Exercise : Solution

 

Exercise : Solution

Kyle walks through the solution for exercise .

this Keyword

 

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

 

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

 

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 ES in the form of the “bind” method.

The new keyword

 

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

 

Quiz: this

Kyle presents a quiz about the “this” keyword.

Closure

Closures

 

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

 

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

 

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

 

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

Quiz: Closure

 

Quiz: Closure

Kyle presents a quiz about the different closure topics he covered.

Exercise 

 

Exercise 

For this exercise, you will be using the files in the day/ex folder. Look at the README.md file for exercise instructions.

Exercise : Solution

 

Exercise : Solution

Kyle walks through the solution for exercise .

Object-Oriented

Prototype

 

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 

 

Prototypes Explained, Part 

Using a code example from the slides, Kyle spends some time diagramming the relationship between an object and its prototype.

Prototypes Explained, Part 

 

Prototypes Explained, Part 

Kyle explains the relationship between __proto__ (dunder-proto) and the prototype keyword and how both reference the underlining prototype. ES added a standardized way to do this using the getPrototypeOf method.

Prototype Linkages

 

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

 

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

 

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

 

Quiz: Object Prototypes

Kyle presents a quiz about object prototypes and their behavior.

Exercise 

 

Exercise 

For this exercise, you will be using the files in the day/ex folder. Look at the README.md file for exercise instructions.

Exercise : Solution

 

Exercise : Solution

Kyle walks through the solution for exercise .

Inheritance

 

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

 

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

 

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

 

Quiz: Prototype Unit

Kyle presents a quiz about the prototype unit.

Exercise 

 

Exercise 

For this exercise, you will be using the files in the day/ex 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  Solution

 

Exercise  Solution

Kyle spends a few minutes at the beginning of the next day describing the solution to exercise .

Async Patterns

Callbacks

 

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

 

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

Generators are coming in ES. 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

 

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

asynquence

 

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

Quiz: Async Patterns

Exercise 

 

Exercise 

For this exercise, you will be using the files in the day/ex 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  Solution

 

Exercise  Solution

Kyle spends a few minutes at the beginning of the next day describing the solution to exercise .

Direct Download Link

Sales Page: https://frontendmasters.com/courses/advanced-javascript/

Add a Comment

Your email address will not be published. Required fields are marked *