This course has been updated! We now recommend you take the JavaScript: The Recent Parts course.
Table of Contents
Arrow Functions
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.
The Arrow Function
Kyle introduces the ES6 arrow function which replaces the need for the JavaScript function keyword. There are other scoping features of arrow functions which Kyle will talk about later. He first focuses on why the abbreviated syntax arrow functions provide is not necessarily a benefit.
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.
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.
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
Exercise 0 Solution
Kyle walks through the solution to exercise 0. The solution is located in the file ex0-fixed.js.
Block Scope
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.
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.
Const
The behavior of the const keyword in JavaScript varies slightly from other languages. Const prevents a variable from being reassigned. However, complex data types like arrays and objects could still be mutated. Kyle works through a couple examples using the const keyword to reinforce its behavior.
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.
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.
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
Default Values
Prior to ES6, JavaScript developers needed to use conditional statements to create default values for a function’s parameters. In ES6, default parameter values can be specified in the function’s signature. Kyle demonstrates how to create default values and also explains the difference between null and undefined.
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.
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.
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.
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.
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.
Exercise 2 Solution
Kyle walks through the solution to exercise 2. The solution is located in the file ex2-fixed.js.
Babel
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.
Destructuring
Audience Q&A: TypeScript vs JavaScript
Before moving on to the next topic, Kyle talks briefly about the process of learning new, advanced features within any programming language. He also answer a few audience questions about his thoughts on TypeScript and other compile-to-JavaScript languages like CoffeeScript.
Array Destructuring
Destructuring in JavaScript is the process of extracting values out of an array or object into declared variables. Kyle starts by demonstrating destructuring with an array. He contrasts this with how it would be performed with ES5 syntax.
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.
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.
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.
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.
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.
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.
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.
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.
Exercise 3 Solution
Kyle walks through the solution to exercise 3. The solution is located in the file ex3-fixed.js.
Template Strings
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.
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.
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.
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.
Exercise 4 Solution
Kyle walks through the solution to exercise 4. The solution is located in the file ex4-fixed.js.
Symbols, Iterators, & Generators
Symbols
A symbol in ES6 is a unique unguessable string value available globally within the context of a JavaScript application. Symbols are most commonly used as property names within an object. The use of a symbol might denote a property that is special or one which should not be modified.
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.
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.
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.
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.
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.
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.
Exercise 5 Solution
Kyle walks through the solution to exercise 5. The solution is located in the file ex5-fixed.js.
Ranges
Before wrapping up the course, Kyle briefly talks about ranges. Ranges are not in JavaScript but are a common structure in other programming languages. Now that JavaScript has iterators, Kyle demonstrates how a range can be added to the JavaScript Number prototype.
Optimizing Code for the Reader
Kyle wraps up the course with a few final thoughts about writing code for the reader not the writer.