ES2015 Crash Course

If you feel overwhelmed by the lightning-fast pace of the JavaScript community, you're not alone. The JavaScript (likely using jQuery) you might have written in 2009 doesn't even remotely resemble the scripts of today. In this series, I'll give you a crash course on the latest and greatest that the language has to offer.

Start Series

Share this series on:

  • 01

    Episode 1 Run Time 9:00

    Babel Setup Free

    Before we begin toying around with the new features in ES6, we must first review basic compilation, using Babel. This way, all browsers will understand the cutting-edge ES6 code you'll soon be writing.
  • 02

    Episode 2 Run Time 1:46

    ES6 Compilation With Laravel Elixir Free

    If you happen to use Laravel as your framework of choice, then you'll be happy to know that, with Laravel Elixir, you don't even have to think about Babel. Everything will just work.
  • 03

    Episode 3 Run Time 10:02

    To Var, Let, or Const Free

    ES6 introduces two new keywords for declaring variables: let and const. The only question is: how do you know which of the three to choose for any given situation? Well, let's talk about it.
  • 04

    Episode 4 Run Time 7:41

    Arrows Free

    Arrows in ES2015 provide a friendly function shorthand for performing common tasks. While not a complete replacement for the function keyword, you'll still get an enormous amount of usage out of this new syntax.
  • 05

    Episode 5 Run Time 2:19

    Default Parameters Free

    ES5 doesn't offer support for default parameters. So, as a result, we all ended up resorting to less-than-ideal alternatives (like name = name || 'Joe'). Luckily, with ES6, it'll all just work the way you'd expect. Even better, you're not limited to primitives alone; you can even set the default value equal to the result of a function call!
  • 06

    Episode 6 Run Time 5:19

    Rest and Spread Free

    ES6 finally introduces support for both the "rest" and "spread" operators. In this lesson, I'll demonstrate what they are, and how you'll use them in your own codebases.
  • 07

    Episode 7 Run Time 4:09

    Template Strings Free

    Template literals allow us to remove all that funky trickery we resorted to for creating elegant multi-line strings. Instead, simply replace those single quotes with backticks, and you're done. Even better, they also support variable substitutions. No more awkward concatenation!
  • 08

    Episode 8 Run Time 7:47

    Awesome Object Enhancements Free

    ES6 includes a wide range of Object additions. In this episode, we'll review three of my favorites: property shorthand, short methods, and object destructuring.
  • 09

    Episode 9 Run Time 9:08

    Classes Free

    ES6 classes are particularly appealing to those of us who predominantly work in traditional server-side languages. With ES5, you'd need to leverage the confusing prototype object to attach methods. But, now, all of that awkward code is pushed behind the scenes. In its place is a more familiar structure that you'll love.
  • 10

    Episode 10 Run Time 11:44

    ES6 Modules Free

    Organizing JavaScript for large projects in 2005 was a bit of a nightmare. It wasn't abnormal to find twenty different script imports in an HTML file. And, worse, it was up to you, the developer, to understand and remember the order to which each of your scripts must be imported. To say it was all a dependency nightmare is an understatement. Luckily, in recent years, modules have come to the rescue!
  • 11

    Episode 11 Run Time 9:45

    Module Bundling With Rollup Free

    As we've begun to learn, while modern browsers are implementing much of the ES2015 spec, none of them yet support modules natively. This means we require a module bundler, like Browserify, Webpack, or Rollup. Let's begin with the latter. In this lesson, we'll compile ES2015 code using modules, down to vanilla ES5 code that all relevant browsers understand.
  • 12

    Episode 12 Run Time 12:32

    Module Bundling With Webpack Free

    In the previous lesson, we learned about Rollup. But, now, let's switch over to Webpack, which has a much larger community and plugin ecosystem. We'll set up a Webpack config file, transpile ES2015, and even peek at Laravel Elixir 6.0's seamless Webpack integration.

    View the completed setup for this lesson on GitHub.

  • 13

    Episode 13 Run Time 9:28

    Promises 101 Free

    Promises can be a bit tricky to understand at first, but maybe this lesson will help! At its core, a promise is nothing more than a stand-in or placeholder for an action that has not yet taken place.
  • 14

    Episode 14 Run Time 7:14

    Useful String Additions Free

    Nothing here will knock your socks off, but, nonetheless, it's still important that you're aware of the following new additions to the String API: startsWith(), endsWith(), includes(), and repeat().
  • 15

    Episode 15 Run Time 5:48

    Array#find and Array#includes Free

    ES2015 brings a number of new additions to arrays, however, you'll likely only make use of a few of them. In this episode, we'll review the new find, findIndex, and includes methods - with the latter actually being part of ES2017, not ES2015.

  • 16

    Episode 16 Run Time 9:12

    ES2015 Generators Free

    Generators will take some time to wrap your head around. So don't worry if it doesn't immediately click. In this episode, we'll lightly review the basic structure, and what it actually means for a function to be a "generator."
  • 17

    Episode 17 Run Time 5:35

    Sets Free

    In ES2015, a Set is an object that contains a collections of unique values of any type. Whether you simply want a cleaner API for working with this sort of structure, or need to enforce a unique constraint on all items within your collection, Sets are the way to go.