JS.Next: ES6 / ES2015
This course has been updated! We now recommend you take the ES6: The Right Parts course.
Table of Contents
IntroductionAaron 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.
Proper Tail Calls, Declarations, and Rest Parameters
LETThe 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 BlocksConstant 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 ParametersRest 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 RulesAaron 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 OperatorThe spread operator extracts individual values from an array. This is useful when needing to combine multiple arrays or spreading results of a method call.
DestructuringDestructuring 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 WayAaron 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 PatternAaron 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-DepthNow 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 ArraysSquare 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.
QuestionsAaron 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 SyntaxArrow 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 ExamplesAaron 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 FunctionsAaron 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 FunctionsAaron 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 ParametersRather 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 ParametersAaron 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 ClassesAaron 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 SyntaxFrom 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 PropertiesAaron 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 PropertiesDevelopers 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 ClassesClasses 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 FeaturesAaron 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.
CollectionsCollections 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 & WeakmapsMaps, 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
ModulesCurrently 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 APIThe 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.
PromisesPromises 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.
Wrap-upAaron 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.