ES6: The Right Parts
Table of Contents
IntroductionKyle 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.
Arrow Function VariationsIn 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.
Promises & ThisArrow 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.
Exercise 0: The Arrow FunctionIn 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
Exercise 0 SolutionKyle walks through the solution to exercise 0. The solution is located in the file ex0-fixed.js.
Let vs. VarThe 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.
Closures & Explicit BlocksKyle 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.
When to use ConstBefore 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.
Exercise 1: Variable ScopingIn 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.
Exercise 1 SolutionKyle walks through the solution to exercise 1. The solution is located in the file ex1-fixed.js.
Default Values and the Gather/Spread Operator
Lazy ExpressionsA 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.
Gather & Spread Operators Part 1The 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.
Gather & Spread Operators Part 2Kyle 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.
Using the Gather & Spread OperatorsKyle 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.
Exercise 2In 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.
Exercise 2 SolutionKyle walks through the solution to exercise 2. The solution is located in the file ex2-fixed.js.
BabelKyle 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.
Destructuring and Default ValuesES6 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.
Dumping VariablesKyle 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.
Nested Array DestructuringMulti-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.
Object DestructuringJust 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.
Nested Object DestructuringObjects 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.
Destructuring and Function ParametersBoth 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.
Advanced DestructuringKyle 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.
Exercise 3In 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.
Exercise 3 SolutionKyle walks through the solution to exercise 3. The solution is located in the file ex3-fixed.js.
Concise Properties and MethodsKyle 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.
Template StringsTemplates 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.
Tag FunctionsA 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.
Exercise 4In 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.
Exercise 4 SolutionKyle walks through the solution to exercise 4. The solution is located in the file ex4-fixed.js.
Symbols, Iterators, & Generators
Well Known SymbolsWell 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.
IteratorsAn 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.
Creating a Custom IteratorAny 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.
GeneratorsA 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.
Computed Generator MethodsKyle 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.
Exercise 5In 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.
Exercise 5 SolutionKyle walks through the solution to exercise 5. The solution is located in the file ex5-fixed.js.
Optimizing Code for the ReaderKyle wraps up the course with a few final thoughts about writing code for the reader not the writer.