Kyle Simpson
You Don't Know JS
Deep JavaScript Foundations, v3
10 hours, 32 minutes CC
Course Description
Dive into the core pillars of the JavaScript language with Kyle Simpson, author of the popular, You Don't Know JS, book series. You'll learn JavaScript's types, how to convert between them, and compare them with == and ===. You'll also learn lexical scope and closure. As well as the objects oriented system (this, prototypes and classes).
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: April 3, 2019
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 19 minutes
Kyle Simpson introduces the course and makes a case for why it matters to think deeply about JavaScript.
Kyle describes how incorrect assumptions about how code is working causes bugs.
Kyle breaks down JavaScript into three main pillars which will be covered during the course.
Types
Section Duration: 51 minutes
Kyle digs into JavaScript's type system and debunks the myth that everything in JavaScript is an object.
Kyle discusses the behavior of the typeof operator and focuses on cases that typically cause confusion.
Kyle explains how BigInt differs from other numbers in JavaScript.
Kyle dissects the various ways something can be empty in JavaScript: undefined, undeclared, and uninitialized.
Kyle discusses what a NaN, how to use isNaN, and common sources of error in the usage of both.
Kyle gives the context of -0 in JavaScript and explains how operations on it can cause unexpected results.
Students are instructed to define a new function that implements what was learned in the previous section.
Kyle live codes the solution to the exercise.
Kyle defines fundamental objects in JavaScript and foreshadows why it is wise to use them selectively.
Coercion
Section Duration: 38 minutes
Kyle introduces the operations JavaScript uses under the hood to perform coercion, starting with toPrimitive.
Kyle discusses the behavior of the abstract operation toString.
Kyle discusses the behavior of the abstract operation toNumber.
Kyle discusses the behavior of the abstract operation toBoolean.
Kyle walks through typical situations where number to string, string to number, and any type to boolean coercions occur.
Kyle introduces boxing and gives an example.
Kyle makes a case for learning situations where coercion causes unexpected results.
Philosophy of Coercion
Section Duration: 29 minutes
Kyle explains how to use coercion successfully by having a coding style that makes types obvious.
Kyle advocates for a culture where less experienced developers are encouraged to learn correct practices.
Kyle discusses code comments and the role of notation standards like JSDoc in code communication.
Kyle advocates for code that is clear in its usage of types, which allows for the use of implicit coercion.
Kyle argues it is a better approach to seek understanding of JavaScript features than to avoid them.
Students are instructed to define two validation functions.
Kyle live codes the solution to the exercise.
Equality
Section Duration: 1 hour, 11 minutes
Kyle compares the behavior of double equals and triple equals, which are often mistakenly defined.
Kyle discusses the choice to use double equals or triple equals and how linters can both help and hurt code.
Kyle analyzes the spec on coercive equality to understand completely each step of the double equals comparison.
Kyle walks through a few lines of code that utilize the double equals for coercive equality.
Kyle gives a summary of what double equals does when it is used in a program.
Kyle uses a code example to make the argument that famous corner cases are often pulled from situations unlikely to occur.
Kyle demonstrates what happens when an empty array is coerced into a boolean in multiple situations.
Kyle offers advice on using double equals for coercive equality comparisons.
Kyle makes the case that double equals is preferable to triple equals, which can be used as a sign that types are unknown.
Kyle introduces the exercise on equality, which is to handle corner cases in equality comparison.
Kyle codes the solution to the exercise.
Static Typing
Section Duration: 27 minutes
Kyle discusses the benefits and drawbacks of using tools like TypeScript and Flow for type checking.
Kyle defines what inferencing is in static typing.
Kyle defines what custom types are and explains how they can help to reduce type misassignments.
Kyle makes the assertion that the validation of operand types is a useful aspect of static typing.
After mentioning an article on TypeScript compared with Flow, Kyle summarizes his thoughts on these two tools.
Kyle discusses benefits of static typing.
Kyle discusses the drawbacks of static typing.
Kyle encourages students to understand JavaScript's type system sufficiently to use coercion with confidence.
Scope
Section Duration: 1 hour, 11 minutes
Kyle introduces the section of the course on scope.
Kyle walks through compilation of code using a silly exercise to illustrate a mental model for scope.
Kyle walks through execution of code using the exercise from the previous lesson.
Kyle answers questions about the stages of compilation and execution.
Kyle finishes walking through the execution of code, differentiating between two types of lookups.
The lexical scope stage of the two stage mental model is reviewed.
The compilation stage of the two stage mental model is reviewed.
Kyle demonstrates what dynamic global variables are and in what situations they are created.
Kyle gives various arguments for the usage of strict mode.
Kyle walks through an example of nested scope.
Kyle reviews the difference between a variable that is undefined versus one that is undeclared.
Kyle introduces a metaphor for lexical scope.
Scope & Function Expressions
Section Duration: 49 minutes
Kyle defines and analyzes function expressions in relation to scope.
Kyle gives three reasons why named function expressions are superior to anonymous function expressions.
Kyle breaks down the reasons why people use arrow functions and brings to light a few of their drawbacks.
Kyle presents a hierarchy of function types and explains each level based on information from previous lessons.
Students are instructed to write a set of comparable functions and function expressions.
Kyle live codes the first part of the solution using function declarations.
Kyle live codes the second part of the solution using arrow functions.
Advanced Scope
Section Duration: 1 hour, 15 minutes
Kyle contrasts the models of lexical scoping versus dynamic scoping and gives examples of each.
Kyle breaks down ways to thinking about lexical scope using the bucket model from previous lessons, a new technique, and a type highlighting tool.
Kyle demonstrates how dynamic scope works using a theoretical code example.
Kyle presents arguments in support of the core principle of strategically hiding information in levels of scope.
Kyle introduces the benefits of using the IIFE pattern.
Kyle differentiates between situations where it is and is not useful to create block scoping.
Kyle analyzes the choice of whether to choose let or var in the contexts of performance and code communication.
Kyle presents a use case for an explicit let block.
Kyle illustrates the potential semantic issues of using const.
Kyle identifies situations where const can be useful.
Kyle debunks myths surrounding the concept of hoisting and clarifies what is actually happening under the hood.
Kyle walks through code examples that utilize hoisting with functions and variables.
Kyle uses a code example to disprove the common saying "let doesn't hoist".
Students are instructed to refactor existing code to take advantage of hoisting.
Kyle live codes the solution to the exercise.
Closure
Section Duration: 50 minutes
Kyle discusses the context of closure in JavaScript in relation to functional programming languages.
Kyle defines what it means to close over variables and indicates where in a function it is occuring.
Kyle distinguishes between what it means to close over a variable instead of a value through code examples.
Kyle introduces the module pattern by explaining how data encapsulation involves closure.
Kyle discusses incompatibility issues with the ES6 module system and Node.js.
Kyle outlines the two styles of importing ES6 modules.
Students are instructed to refactor existing code to use the module pattern.
Kyle live codes the solution to the exercise.
Objects
Section Duration: 1 hour, 5 minutes
Kyle introduces the section of the course on objects.
Kyle explains through a code example how the this keyword allows for dynamic flexible reusability in JavaScript.
Kyle differentiates implicit binding from explicit binding by giving several examples of each.
Kyle highlights the four-part result of invoking a function with the new keyword.
Kyle explores the results of invoking a function with the default binding in non-strict mode and strict mode.
Kyle uses a code example to delve into the order of operations of which binding rule takes precedence.
Kyle analyzes how the this keyword behaves in arrow functions.
Kyle clarifies misconceptions about how the this keyword is resolved within arrow functions.
Students are instructed to refactor existing code to use the namespace pattern.
Kyle live codes the solution to the exercise.
Kyle explains what a class is and outlines a few of its capabilities.
Kyle walks through a temporary fix method for this keyword behavior in the context of classes.
Students are instructed to refactor existing code to use the class pattern.
Kyle live codes the solution to the exercise.
Prototypes
Section Duration: 1 hour, 3 minutes
Kyle introduces the section of the course on prototypes by discussing mental models.
Kyle presents a code example of a class system written using prototype to highlight data relationships.
Kyle constructs a diagram of the relationships within JavaScript's prototype system.
Kyle defines dunder prototypes and gives their use cases.
Kyle discusses binding, arrow function scope, setting dunder proto, and super.
Kyle walks through an example of shadowing within the prototypes system.
Kyle explains how to link prototypes to each other to take advantage of inheritance.
Kyle clarifies the difference between classical and prototypal inheritance in terms of copying or linking relationships.
Kyle comes to a conclusion about the design of JavaScript's inheritance system and elaborates on its strengths.
Kyle demonstrates how to implement a new design pattern involving linked objects.
Kyle argues for code designed with linked objects in mind.
Wrapping Up
Section Duration: 17 minutes
Kyle wraps up the course by communicating his hopes for students going forward.
Kyle introduces Typl, an alternative to TypeScript that would better address type errors in JavaScript.
I'm currently diving deep into the world of Frontend Masters, and I have to say, it's been an incredible journey so far! The content is incredibly rich, and the way industry experts and professionals break down complex concepts is simply phenomenal. With each session, I feel like I'm unlocking a whole new level of understanding.
And that's not all! I'm thrilled to announce that I've just completed the 'Deep JavaScript Foundations, v3' course by Kyle Simpson. Let me tell you, the depth of the concepts explored in the course is truly remarkable. I can't wait to put all this newfound knowledge into practice and see where it takes me. 🚀
I highly recommend checking out Frontend Masters. Trust me, you won't regret it!
Yash Jivani
SDE @ Citrusbug Technolabs
What a journey! 🎉 I've just finished the Deep JavaScript Foundations, v3 course by Kyle Simpson on Frontend Masters.
This course took me on a deep dive into JavaScript, covering things like Types, Scope, and Objects. 🚀 I learned a lot about how JavaScript works, and how to use Coercion, and got to explore the world of Scope and Closure. I also got to understand JavaScript's this keyword and prototypes better. 🧠
I won't lie, it was a big course with lots of tough parts. But I stuck with it, and I'm so glad I did. Now, JavaScript makes a lot more sense to me, and I feel ready to take on any JavaScript challenge. 💪
Big thanks to Kyle Simpson for creating such a great course. If you're tired of guessing how JavaScript works or getting confused by specific outputs, this is the course for you! It's a game-changer for really understanding JavaScript.
Dragos Barbuta
Frontend Developer @ Accutics
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops