Deep JavaScript Foundations// Jul 18, 2017

Table of Contents

• Deep Foundations of Advanced JavaScript v2

  • 00:00:00 - 00:08:33 Introduction Kyle Simpson introduces Deep Foundations of Advanced JavaScript course.
    - https://frontendmasters.com/assets/kyle-simpson/js/deep-js-foundations.zip

• Scope

  • 00:08:34 - 00:12:08 Scopes and Closures Introduction Kyle reviews the topics that make up the second core foundation of JavaScript: Lexical scope, Nested Scope, Hoisting, Closure
  • 00:12:09 - 00:30:43 Understanding Scope Kyle introduces scope as the set of rules for storing variables in some location and for finding those variables at a later time. Kyle then uses the concept of scope to help understand the way the JavaScript compiler works.
  • 00:30:44 - 00:41:18 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. Kyle also answers questions from students.
  • 00:41:19 - 00:56:32 Execution of Function Code As the execution phase continues within the function scope, the same Left-Hand Side (LHS) and Right-Hand Side (RHS) operations are applied. Things get a little interesting with undeclared variables. They are automatically declared in the global scope.
  • 00:56:33 - 00:58:00 Partner Up for Scope In this challenge, students pair up with a colleague and explain scoping examples in JavaScript to each other.
  • 00:58:01 - 00:59:45 Partner Up for Scope Q&A Kyle answers students' questions from the scoping exericse.
  • 00:59:46 - 01:10:14 Strict Mode Kyle recommends using Strict Mode, which is done by putting "use strict" before any other statemnts.
  • 01:10:15 - 01:24:14 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.
  • 01:24:15 - 01:30:19 Scope Review Continuing to help explain Lexical Scope, Kyle quizzes the students.
  • 01:30:20 - 01:44:25 Named Function Expressions 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 the benefits of function expressions. Kyle also answers questions from students.
  • 01:44:26 - 01:50:34 Lexical Scope Kyle reviews Lexical Scope and Dynamic Scope, which are two models of scope programming languages.
  • 01:50:35 - 01:53:01 Function Scoping Kyle discusses function scoping as a method to use a function to create scope to protect variables from collision or access. To keep the function name from potentially causing a collision, Kyle creates an anonymous function expression.
    - http://benalman.com/news/2010/11/immediately-invoked-function-expression/
  • 01:53:02 - 02:02:31 IIFE Pattern To create an object in their scope without polluting the outer scope, Kyle demonstrates the Immediately Invoked Function Expressions (IIFE) Pattern, a technique used to hide scope involving wrapping code inside a function that is immediately called. Kyle answers questions from students.
  • 02:02:32 - 02:10:32 Block Scoping Kyle reviews the ES6 "let" keyword that 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.
  • 02:10:33 - 02:17:46 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.
  • 02:17:47 - 02:24:28 Const Keyword Kyle introduces const, which also creates a block-scoped variable, but whose value is fixed or constant. Any attempt to change that value at a later time results in an error.
  • 02:24:29 - 02:27:00 Challenge 2: Scoping Before delivering the next Challenge, Kyle takes a moment to review scope material discussed so far in the course. In this challenge, students take what they have learned about naming function expressions and using block scope and update the simple application code.
  • 02:27:01 - 02:37:43 Challenge 2: Solution Kyle walks through the solution to Challenge 2 and takes questions from students.
  • 02:37:44 - 02:54:23 Hoisting Kyle explains "hoisting," which 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.
  • 02:54:24 - 02:55:14 Challenge 3: Hoisting In this challenge, students use hoisting to make their code more legible.
  • 02:55:15 - 03:00:41 Challenge 3: Solution Kyle walks through the solution to Challenge 3 and takes questions from students.

• Closure

  • 03:00:42 - 03:09:20 Closure Introduction Kyle introduces closures, which are when a function remembers its lexical scope even when the function is executed outside that lexical scope. Kyle shows examples using some common JavaScript structures like setTimeout and click events. He also demonstrates closure in shared scopes and nested scopes.
  • 03:09:21 - 03:17:11 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.
  • 03:17:12 - 03:18:35 Challenge 4: Closure In this challenge, students use closure to expand an entry of text.
  • 03:18:36 - 03:22:09 Challenge 4: Solution Kyle walks through the solution to Challenge 4.
  • 03:22:10 - 03:42:30 Module Patterns Kyle reviews modules, which let you define private implementation details that are invisible to the outside world. Kyle reviews different module patterns: classic, modern, and ES6 module patterns.
  • 03:42:31 - 03:48:33 Closure Review In reviewing Closure, Kyle quizzes the students.
  • 03:48:34 - 03:49:31 Challenge 5: Module, Part 1 In this challenge, students create module instance with a public API.
  • 03:49:32 - 03:53:31 Challenge 5: Solution, Part 1 Kyle walks through the solution to Challenge 5, Part 1.
  • 03:53:32 - 03:57:53 Challenge 5: Module, Part 2 Kyle introduces the second part of the challenge, where students clean up the UI and data operations.
  • 03:57:54 - 04:16:22 Challenge 5: Solution, Part 2 Kyle walks through the solution to Challenge 5, Part 2 and takes questions from students.
  • 04:16:23 - 04:18:22 Challenge 5: Module, Part 3 Kyle introduces the third part of the challenge, where students clean up the UI and data operations.
  • 04:18:23 - 04:46:05 Challenge 5: Solution, Part 3 Kyle walks through the solution to Challenge 5, Part 2 and takes questions from students.

• Object-Orienting

  • 04:46:06 - 04:49:54 Object-Oriented Introduction Kyle introduces the next core foundation to cover in the course, Object-Orienting: this, Prototypes, class {}, and "Inheritfance" vs. "Behavior Delegation."
  • 04:49:55 - 04:51:13 this Kyle reviews the "this" function. 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's relationship to the call site of the function.
  • 04:51:14 - 04:56:05 Binding Confusion Kyle demonstrates that attempting to force the "this" keyword into a different lexical scope can lead to some binding confusion.
  • 04:56:06 - 05:04:25 Explicit Binding Kyle explains explicit bindings and also detours into a discussion about a technique he calls "hard 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. Hard binding is available in the form of the "bind" method.
  • 05:04:26 - 05:12:23 The new Keyword Kyle explains the functionality of the "new" keyword and the effects it has when placed in front of a function call. JavaScript does not have classes and the "new" keyword does not do any instantiation.
  • 05:12:24 - 05:15:59 this Review In reviewing "this," Kyle quizzes the students.
  • 05:16:00 - 05:16:15 Challenge 6: this In this challenge, clean up hard-coded lexical references by using what has been learned about "this."
  • 05:16:16 - 05:17:50 Challenge 6: Solution Kyle walks through the solution to Challenge 6.

• Prototypes

  • 05:17:51 - 05:23:26 Prototypes Introduction 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.
  • 05:23:27 - 05:35:36 Explaining Prototypes, Part 1 Using a code example from the slides, Kyle spends some time diagramming the relationship between an object and its prototype.
    
  • 05:35:37 - 05:41:55 Explaining Prototypes, Part 2 Kyle explains the relationship between __proto__ (dunder-proto) and the prototype keyword and how both reference the underlining prototype.
  • 05:41:56 - 05:48:22 Prototype Linkages Prototype linkages allow delegation to other objects to hand method calls or property references. This process 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.
  • 05:48:23 - 05:51:49 Prototype: Objects Linked Prototypes in JavaScript can be linked and share a parent-child relationship similar to a subclass and superclass. This relationship is beneficial when extending a prototype to add additional methods. However, there are issues with constructor references.
  • 05:51:50 - 05:52:53 Linked Prototype Diagram Kyle revisits the prototype diagram he drew on the whiteboard earlier. This time, however, he shows a more sophisticated version outlining the relationship of the two linked prototypes.
  • 05:52:54 - 05:54:31 Prototype Review In reviewing Prototype, Kyle quizzes the students.
  • 05:54:32 - 05:55:21 Challenge 7: Prototype In this challenge, students convert a module factory function to prototype-style constructor function.
  • 05:55:22 - 06:02:32 Challenge 7: Solution Kyle walks through the solution to Challenge 7 and answers students' questions.
  • 06:02:33 - 06:09:24 ES6 Class Kyle dives into E6S class, stating that it's "syntactic sugar" and still prototype system.
  • 06:09:25 - 06:17:56 Class Caution If you use an ES6 class, Kyle points out the areas of caution.
  • 06:17:57 - 06:20:00 Clearing Up Inheritance In classical inheritance, properties and methods of a class are copied to object instantiated from 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."
  • 06:20:01 - 06:30:10 Objects Linked as Other Objects 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 (OLOO) and simplifies a coding example by using this OLOO technique. Kyle compares object-oriented (OO), and OLOO approaches.
  • 06:30:11 - 06:37:21 Delegation: Design Pattern Kyle discusses the need to change our thinking from the class/inheritance design pattern to the behavior delegation design pattern.
  • 06:37:22 - 06:39:28 OLOO Review In further reviewing OLOO, Kyle quizzes the students.
  • 06:39:29 - 06:41:03 Challenge 8: Convert Modules to Objects In this challenge, students to take out module design within the small application and convert them into objects.
  • 06:41:04 - 06:48:11 Challenge 8: Solution Kyle walks through the solution to Challenge 8 and answers students' questions.

• Types

  • 06:48:12 - 06:53:33 Introducing Types and Coercion Kyle starts with an overview of first core foundation of JavaScript language: Types and Coercion
  • 06:53:34 - 07:05:07 Primitive Types Introduction While reviewing the built-in types: undefined, string, number, boolean, and object, Kyle notes that the symbol "type" is added in ES6 and "function" is a subtype of the "object" type.
  • 07:05:08 - 07:17:09 Special Values Kyle discusses special values in primitive types: NaN, Infinity, null, undefined (void), and negative and positive zero (+0, -0).
  • 07:17:10 - 07:31:19 Negative Zero Kyle reviews why JavaScript has two zeroes, a normal zero 0, otherwise known as a positive zero or +0, and a negative zero or -0.
  • 07:31:20 - 07:47:09 Native Functions Kyle goes over native functions or "natives," which are built-in JavaScript functions and takes questions from students.

• Coercion

  • 07:47:10 - 08:07:29 Abstract Value Operations Before getting into coercion, Kyle examines the rules that govern how values become either a string, number, or boolean. Then he reviews the abstract operations, or "internal-only operations," ToString, ToNumber, ToBoolean, and ToPrimitive.
  • 08:07:30 - 08:31:25 Explicit Coercion Reviewing common coercion operations, Kyle talks about implicit and explicit coercion. Explicit coercion refers to type conversions that are evident for other developers and not leave potential code traps.
  • 08:31:26 - 08:39:59 Date to number and ~ Kyle discusses Date to number coercion methods including Date.now() static function. He also talks about tilde ~ operator, or otherwise known as "bitwise NOT."
  • 08:40:00 - 08:42:06 The Bad Parts of Value Coercion Kyle reviews his thoughts about fixing coercion.
    - - http://davidwalsh.name/fixing-coercion
    - http://getify.github.io/coercions-grid
    
  • 08:42:07 - 08:56:11 Implicit Coercion: Strings & Numbers Kyle defines implicit coercion as a side-effect of some other operation or as something that is not clear when looking at the code that coercion will occur. Kyle introduces implicit coercion with a few examples using String and Number values.
  • 08:56:12 - 09:08:27 Implicit Coercion: Booleans Kyle reviews the boolean() native function and how booleans behave in JavaScript.
  • 09:08:28 - 09:18:43 Implicit Coercion: Loose Equals Mentioning that the most common complaint against implicit coercion in loose equals, == comparisons, comes from how falsy values surprisingly act when compared to each other, Kyle shows that == operator is used for checking values for equality comparison.
  • 09:18:44 - 09:21:09 Implicit vs Explicit Coercion Kyle reviews cases for when using double equals when coding.
  • 09:21:10 - 09:30:51 Double vs. Triple Equal Kyle discusses that the double-equal operator allows coercion in a comparison while triple equal operator, ===, does not. Afterward, Kyle walks through some examples demonstrating how the result of these two operators can differ.
  • 09:30:52 - 09:37:23 Double vs. Triple Equal Performance Kyle explains the performance impacts of double and triple equal operator. Afterward, Kyle shares some pro-tips about how to determine when this operator should be used.
  • 09:37:24 - 09:40:37 Challenge 1: Coercion In this challenge, students fix a simple application by checking types and coercion.
  • 09:40:38 - 10:02:27 Challenge 1: Solution Kyle walks through the solution to Challenge 1 and takes questions from students.

• Wrapping Up Deep Foundations of Advanced JS v2

  • 10:02:28 - 10:21:56 Case for a Deeper Understanding of JavaScript Rather than shipping code engineers barely know or use frameworks to aid work at a crutch, Kyle evangelizes for a more thorough understanding of the JavaScript language at a deeper or more deep level can help become better programmers and communicators.
  • 10:21:57 - 10:24:05 Wrapping Up Kyle wraps up the Deep Foundations of Advanced JS and gives thanks to the students for their focus and time.