This course has been updated! We now recommend you take the ES6: The Right Parts course.
Table of Contents
History of JavaScript
Introduction
Aaron Frost is a Sr. Frontend Developer at DOMO. He spends a few minutes before beginning the course with an introducing himself and outlining what he will be covering.
History of JavaScript
Aaron begins the course with a brief history of JavaScript. This includes how it was created, standardized, and where it’s going in the future.
EcmaScript
EcmaScript is a language specification. JavaScript is an implementation of EcmaScript. Aaron walks through the history of how EcmaScript became the standard and how we got to where we are today.
The Future
Aaron starts by talking about the goals of the TC39 committee. The TC39 wants to make JavaScript a better language, more testable, and a de-facto standard. Aaron also talks a bit about the future. Harmony refers to all future features. “ES.Next” refers to features coming in the next version.
Proper Tail Calls, Declarations, and Rest Parameters
Proper Tail Calls
Improper Tail Calls mean a language doesn’t release the callstack after each recursive call. This is the case with JavaScript today. ES6 adds Proper Tail Calls which fix this issue.
Proper Tail Calls: ES5 vs. ES6
Aaron uses the Fibonacci Sequence to illustrate the differences of Proper Tail Calls in ES5 and in ES6. He also offers a few final thoughts about using recursion in JavaScript.
Variable Hoisting
Before exploring LET, CONST, and Blocks in ES6, Aaron explains how variable hoisting works in JavaScript. He shows a number of code example both as they are written, and as the JavaScript compiler interprets them.
LET
The LET keyword has two parts: LET Definitions and LET Looping. Definitions are its most basic form. It’s used just like the VAR keyword. Using LET in loops can be advantageous since temporary variables like “i” are not hoisted out of the loop and linger after the loop executes.
CONST and Blocks
Constant variables cannot be changed and will throw an error if an assignment occurs. Blocks in ES6 allow developers to create nested scopes on the fly using curly braces. Aaron shares couple code example and ends this section with some audience questions.
Rest Parameters
Rest parameters allow developers to use a single parameter in a function to catch multiple parameters passed to the function. By prefixing a parameter with three dots (i.e. …args), values passed to the function will be placed in an array with the name of the rest parameter.
Rest Argument Rules
Aaron walks through a number of rules that exist when using rest parameters. There can only be one per function, it must be the last argument, and it can’t have default values. Aaron also take the audience through a couple code examples.
Spread Operator, Destructuring, & Arrow Functions
Spread Operator
The spread operator extracts individual values from an array. This is useful when needing to combine multiple arrays or spreading results of a method call.
Destructuring
Destructuring allows developers to bind a set of variables to a corresponding set of values. The syntax can seem backward since braces are used on the left side of the assignment. Aaron walks through a simple example to help explain this technique. He also show how to alias the variable names being destructured.
Old Way vs. New Way
Aaron starts by showing the way we destructure objects today. He then walks through a few few variations using the new syntax that improve the readability. While the performance may be slightly improved by having less syntax, the differences are mainly aesthetic.
Destructuring Pattern
Aaron takes a step back and explains the logic behind the destructuring pattern. You can only deconstruct an Object. Also, the object must contain the properties assigned during the deconstruction. Aaron also demonstrates how to handle properties not contained in the target object.
Patterns In-Depth
Now that Aaron has described the Irrefutable and Refutable patterns in destructuring, he goes a little deeper into their intricacies. He demonstrates different ways they behave based on their refutable nature, default values, and nested position.
Destructuring Arrays
Square brackets, as opposed to curly braces, are used to destructure arrays. Aaron walks through a few practical use cases for destructuring arrays including swapping variable or improving method signatures.
Questions
Aaron answers a few audience questions on the benefits of destructuring. He also talks a little about compatibility and gives a couple last code examples before moving on.
Arrow Function Syntax
Arrow functions present a more concise syntax by eliminating the function keyword which can create shorter function declaration and definition. There still rules for how parameters or the function body are implemented.
Arrow Function Examples
Aaron walks through a few example where arrow function are useful. He also demonstrates why the real benefit of arrow functions is the lexical scope binding of the this keyword.
Functions vs. Arrow Functions
Aaron quickly demonstrates why developers will still need to use traditional functions and can’t completely replace them with arrow functions because they can cause scope issues.
Exercise: Arrow Functions
Aaron gives the audience some time to experiment with Arrow functions. He also answers a number of questions about their usage. This segues him into a coding example that uses arrow functions, destructuring, and default parameters.
Default Parameters, Classes, and Collections
Default Parameters
Rather than data-proofing a function’s parameters, default values can be specified to ensure a parameter has a value even if there isn’t anything passed to the function. This allows for less code to be written and a more readable API. Default parameters can also be assigned with a method call.
Exercise: Default Parameters
Aaron leads the audience through a code example that uses a method as the default value. This method returns a counter that is incremented when no parameter is specified. He also demonstrates how exceptions could be used when no value is present and other gotchas (like lexical scope) that can arise.
History of ES6 Classes
Aaron spends a few minutes describing the history of classes in ES6. He steps through Russell Leggett’s proposal that talks about how this implementation of classes needs to address the need today, but be future friendly.
Class Syntax
From a functionality standpoint, declaring a class is the same as declaring a function. They both can use the new keyword and be executed when instantiated. Aaron walks through the syntax and demonstrates that most of the features in classes can be implemented today using functions.
Private Properties
Aaron demonstrates how Symbols in ES6 can be used to create private properties. While, this technique for private properties can be done today, the Symbol object makes these properties slightly more obscure.
Getters, Setters, and Class Properties
Developers use getters and setters to expose private properties in an API. Aaron adds a getter and setter to his Monster class. He also demonstrates how to create public properties and methods and static types on a class.
Extending Classes
Classes can be extended using the extends keyword. This is very similar to what can be done today with prototypes. Aaron also demonstrates how the extends keyword can be method call that’s evaluated at runtime making the super class dynamically assigned.
Additional Class Features
Aaron explores a few other features of classes that are still being discussed. This includes how the super() method is called and default behavior when there isn’t a constructor. He ends the section on classes with a summary of their benefits and a few audience questions.
Collections
Collections are new ways of storing data similar to arrays or objects. Sets, like arrays, add values in a linear fashion. However, they force unique values. Sets have useful methods like has(), clear(), add(), and delete(). They also have an iterator which makes them efficient for looping.
Collection Maps & Weakmaps
Maps, similar to JSON objects, are name-value pairs. Get and set methods are used to read/write values to the map. Weakmaps are similar to maps, except their reference to an object doesn’t prevent garbage collection.
Modules, Promises, & Generators
Modules
Currently modules are really unsupported and only available through polyfills. They have two parts: Import/Export syntax and a Programatic Loading API. Modules can have a default object specified for exporting. Import statements can specify multiple modules from a single library.
Module Programatic Loading API
The Module Programatic Loading API uses promises to externally load modules. Developers can also catch any errors that may occur and handle them accordingly. Aaron demonstrates how this API can be used to load multiple modules and explores a few of the additional methods.
Promises
Promises make asynchronous code cleaner and more maintainable. They are created using the Promise() constructor. A promise is typically in one of four possible states. It can be fulfilled, rejected, pending, or settled. Code needing to wait until the promise returns can be wrapped in a then() method.
Generators
Generators enable JavaScript to be more cooperative by allowing a function to “pause” while another function or operation completes. They use a yield keyword to indicate where a function is paused. The next() method will resume the function from that position. Aaron walks through an example where values are passed both in and out of a generator through yield statements.
Build Tools
Traceur
Traceur is a JavaScript compiler that allows developers to code with upcoming JavaScript features and syntax. Traceur compiles the code back to the version of JavaScript supported today. Aaron walks the audience through how to set up Traceur and begin working with ES6 code in current browsers. FYI -- we also put together a starter project for you with a Grunt workflow: https://github.com/FrontendMasters/es6-grunt-getstarted
Wrap-up
Aaron wraps up the course discussing a few of the ES6 features he didn’t cover. He also talks about using the ES6 Compatibility Table to recognize what’s supported and the current state of the specification.