Learn the key new features of the latest version of JavaScript.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
babel
README.md
intro.js

README.md

Class: ES2015

JavaScript


ES2015 is the latest version of JavaScript, sometimes called ES6, or Harmony. It has a lot of great new syntax that captures behaviors that developers have been implementing themselves for a long time. It's also the version of JavaScript used in Meteor and React. In this class I'll start by giving some of the history of the language and what ECMA means. Then we'll dive into some of the coolest new features, including classes, fat arrows, iterators, generators, promises, default params and the new spread operator.

What's in this class?

  • What is ECMAScript? - In this video I'll introduce the ES2015 class. The latest version of JavaScript, ES2015, is also known as ES6 or ECMAScript 2015. In this video you'll learn about some of the new features. And I'll take you on a tour of how it all started with Netscape and Microsoft.

  • Setup With Babel and Meteor - Babel is a JavaScript compiler that compiles ES6 syntax to older JavaScript syntax that will work across existing browsers. Babel is used by many companies including Facebook and Netflix. In addition to its basic job as a compiler, it's also a great learning tool. We can use it to see how to implement the new ES6 features using familiar JavaScript syntax. Meteor is a full stack web framework that uses Babel under the hood to support ES6. We'll be using Meteor in this class to easily get up and running.

  • Classes - Classes allow you to define methods that are shared across objects. You can also inherit from other classes. Classes in ES6 still use constructor functions and the prototype chain under the hood. But the new syntax makes following this pattern much easier. You can also define static methods directly in the class body.

  • How "Classes" Worked Before - JavaScript has always supported class-like behavior by using constructor functions, prototype objects and prototypal property lookup. But the mechanics were very confusing, and if you wanted "class" inheritance you would have to write a function yourself. In this video we'll take a trip down memory lane so you can see why the new "class" and "extends" keywords are so much better.

  • Fat Arrow Functions - Fat arrow functions (=>) let you concisely create new functions. They also correctly bind the thisArg of the function which saves us from having to store a "self" variable in the outer closure. In this video you'll see a few examples of fat arrow functions. We'll take an existing callback function using array and map and convert it to use the new syntax.

  • Iterators - Your objects can now participate in JavaScript iteration. For example, you could use a for of loop with a custom object! Learn how to define an iterator method on your object that returns an iterator. The iterator works alongside the iterator protocol to let the JavaScript runtime work with our iterable objects.

  • Generators - Generators provide a much nicer syntax for performing iteration. A generator function automatically returns a special generator object. The generator object has a next method just like the custom iterator method we wrote. Except, now we can simply use the yield keyword to pass control to the caller. In this video we'll rewrite our custom iterator method to use generators instead.

  • Promises - Promises give us a nicer API for working with asynchronous functions. Instead of passing callbacks that get called at a later time, we can use the "then" method of the promise. You can even chain together many "then" calls. In this video we'll implement a sleep method that works with promises to return a result at a later time.

  • The Spread Operator - The new spread operator saves a lot of time by letting us go back and forth between arrays and positional arguments. In many cases it replaces the need to use the apply method of functions. It also enables a common use case of accepting an anonymous number of positional arguments.

  • Default Parameters - You can now define default parameter values for functions. We used to do this by hand by "guarding" against null values and providing defaults in the body of the function. Now it's a lot easier to read and understand because the defaults can be provided right in the parameters list of the function. It even works with objects and nested object properties.