You Don't Know JS
- 00:00 - 12:28 Introduction Kyle Simpson begins his course, ES6: The Right Parts by briefly introducing himself and talking about his history with Frontend Masters. Kyle also talks about why he titled the course “The Right Parts” and how he uses ES6 to write more declarative code.
- 18:12 - 29:59 Arrow Function Variations In Kyle’s opinion, one of the drawbacks to the arrow function is the many variations. Arrow functions can be written with or without parentheses, curly braces, and the return keyword. Kyle walks through a number of these variations and explains why he believes they cause added confusion.
- 30:00 - 39:20 Promises & This Arrow functions make using promises a little easier syntactically because the abbreviated syntax makes for cleaner code. Kyle, however, argues that anonymous functions within promises can make debugging more difficult. Kyle then spends a few minutes talking through a use-case for the arrow function that greatly benefits developers.
- 39:21 - 42:10 Exercise 0: The Arrow Function In this exercise, you will find all the instances the function keyword and replace them with arrow functions. The starting file for this exercise is ex0.js
- 42:11 - 54:39 Exercise 0 Solution Kyle walks through the solution to exercise 0. The solution is located in the file ex0-fixed.js.
- 54:40 - 01:05:45 Let vs. Var The let keyword adds block scoping to ES6. While some developers believe the let keyword should replace the var keyword, Kyle disagrees. He spends a few minutes comparing the two keywords and sharing example of when one should be used over the other.
- 01:05:46 - 01:12:03 Closures & Explicit Blocks Kyle shares a couple more use-cases for the let keyword. One demonstrates how for loops create a closure with the header variable if it’s declared using let. The other use-case involves creating an explicit block when using let to more clearly designate the intended use of the variable.
- 01:21:07 - 01:25:16 When to use Const Before morning on to the next exercise, Kyle answers a couple audience questions. When doing so, he talks about use-cases for the const keyword he thinks are beneficial. He also talks about using the const keyword with the Object.freeze method.
- 01:25:17 - 01:26:29 Exercise 1: Variable Scoping In this exercise, you will modify the for loop in the ex1.js file add functions to the fns array. These functions will use the let and const keywords to ensure the correct closures are created and the assertion at the bottom of the file remains true.
- 01:26:30 - 01:28:42 Exercise 1 Solution Kyle walks through the solution to exercise 1. The solution is located in the file ex1-fixed.js.
Default Values and the Gather/Spread Operator
- 01:33:06 - 01:45:58 Lazy Expressions A default value could be in the form of a function call. This would be a lazy expressions because the function would not be called until it’s needed. Kyle talks through a couple scenarios where using a function as a default value would be useful. He also demonstrates how scope works with lazy expressions.
- 01:45:59 - 01:51:55 Gather & Spread Operators Part 1 The gather & spread operators are denoted by three dots (…). How it is used depends on the context. In an assignment context, it’s the gather operator. In a value-list context, it’s the spread operator.
- 01:51:56 - 01:59:38 Gather & Spread Operators Part 2 Kyle continues explaining the gather & spread operators by showing how they could be used with an existing list of parameters or values. He also answers a few audience questions about assigning default values to a gather operator or using it as a default value.
- 01:59:39 - 02:08:20 Using the Gather & Spread Operators Kyle highlights a few other use-cases for the gather & spread operators. He also briefly explains that only data types that have an iterator can be spread. Kyle will be explaining iterators later in the course.
- 02:08:21 - 02:09:44 Exercise 2 In this exercise, you will modify the code in the ex2.js file and use the gather and spread operators manipulate the two arrays in the bar function. This way the foo function returns a value that makes the console.log statement at the bottom true.
- 02:09:45 - 02:11:49 Exercise 2 Solution Kyle walks through the solution to exercise 2. The solution is located in the file ex2-fixed.js.
02:11:50 - 02:20:13
Kyle spends a few minutes showing babeljs.io which is an online tool that uses Babel to convert ES6 code into compliant ES5 syntax. While the command line version is better for development, the online tool is useful for understanding how ES6 code would be written in ES5.
- https:// babeljs.io
- 02:37:25 - 02:44:42 Destructuring and Default Values ES6 destructuring allows developers to specify default values for each element they are extracting. Kyle demonstrates how to declare default values both for the individual variable as well as the entire destructured object.
- 02:44:43 - 02:49:03 Dumping Variables Kyle spends a few minutes talking about a technique for dumping variables through destructuring. He uses empty slots in an array to “catch” the variables to be dumped. He then uses the gather operator to populate the original variable with the remaining destructured values.
- 02:49:04 - 03:02:45 Nested Array Destructuring Multi-level arrays can be destructured with the same syntax. After demonstrating the syntax for nested array destructuring, Kyle spends a few minutes answering audience questions about default values and combining destructuring with the spread/gather operators.
- 03:02:46 - 03:09:56 Object Destructuring Just like with arrays, objects can be destructured as well. The main difference is the use of curly braces instead of square brackets. Kyle demonstrates a shorter notation for when the variable name in the target object matches the variable name in the destructured object.
- 03:09:57 - 03:18:54 Nested Object Destructuring Objects with nested object values can be destructured as well. Kyle walks through a brief example where the foo function generates a nested object which needs to be destructured. He also talks about assigned default object values.
- 03:18:55 - 03:25:37 Destructuring and Function Parameters Both array and object destructuring can occur in a function’s parameter list. Kyle works through a few examples where destructuring in a parameter list can be useful. He also explains how it works with default parameters.
- 03:25:38 - 03:35:24 Advanced Destructuring Kyle shares an advanced example of destructuring which he often uses in his applications. He destructures a “defaults” object so the default values are used inside a “config” object. This way if a configuration variable is not set, it will use the default value.
- 03:35:25 - 03:36:15 Exercise 3 In this exercise, you will use object destructuring to populate the parameters of the response function and restructure those variables in the call to the check function. The code for this exercise is located in the ex3.js file.
- 03:36:16 - 03:39:59 Exercise 3 Solution Kyle walks through the solution to exercise 3. The solution is located in the file ex3-fixed.js.
- 03:40:00 - 03:52:43 Concise Properties and Methods Kyle spends a few minutes demonstrating concise properties and methods which provide a shorthand notation for declaring properties and methods on an object. He also illustrates a few of the pitfalls with the syntax.
- 03:52:44 - 04:06:51 Template Strings Templates Strings are an alternative to string concatenation. They allow variables to be injected into string literals to form fully interpolated strings. They also honor newline characters and other breaks within the string literal.
- 04:06:52 - 04:17:35 Tag Functions A tag function is an expression prefixed to a string template. The tag function is passed an array of the string literals from the template as well as a list of variable values. While tag functions are not commonly used, Kyle shares a few use-cases where they can beneficial.
- 04:17:36 - 04:18:08 Exercise 4 In this exercise, you will create a tag function named “upper” which transform the variable values in the template string to uppercase. The code for this exercise is in the ex4.js file.
- 04:18:09 - 04:21:43 Exercise 4 Solution Kyle walks through the solution to exercise 4. The solution is located in the file ex4-fixed.js.
Symbols, Iterators, & Generators
- 04:30:41 - 04:33:22 Well Known Symbols Well known symbols are properties on the Symbol object. They include iterator, toStringTag, toPrimitive, and isConcatSpreadable. Kyle spends a few minutes explaining how these symbol properties are used before diving deeper into Symbol.iterator.
- 04:33:23 - 04:43:05 Iterators An iterator is a simple interface for stepping through data. For example, arrays have an iterator property which will return an object that will step through the items in the array. Each call to the next() method on the iterator will return a value property as well as a done property.
- 04:43:06 - 04:52:12 Creating a Custom Iterator Any object can have an iterator. Kyle demonstrates how to create a custom iterator on a basic object. He defines a Symbol.iterator property and initializes the iterator object with a next() method.
- 04:52:13 - 05:01:21 Generators A generator is a function that can be started and stopped through the use of an iterator. The yield keyword indicates where the function should pause and what value should be returned at that pause. A done property is returned along with the yielded value to indicate if the function has finished running.
- 05:01:22 - 05:04:17 Computed Generator Methods Kyle revisits the custom iterator code to show how it could be written using a generator instead of a custom iterator. This is possible because generators produce an iterator.
- 05:04:18 - 05:08:02 Exercise 5 In this exercise you will create a numbers object that is iterable. This iterable object should be able to iterate one-by-one through a set of number or step through the numbers at a custom interval. The code for this exercise is in the ex5.js file.
- 05:08:03 - 05:12:16 Exercise 5 Solution Kyle walks through the solution to exercise 5. The solution is located in the file ex5-fixed.js.
- 05:17:13 - 05:19:15 Optimizing Code for the Reader Kyle wraps up the course with a few final thoughts about writing code for the reader not the writer.