Introduction To Es6

Objectives

Describe the major new features in ES6

Explain how let and const differ from var

Describe how to use arrow functions

Explain the value of the spread operator

Introduction

Up to now, you've probably been working in the browser and on the server with the version of JavaScript known as ECMAScript 5. ECMAScript is an evolving standard, the complete history of which we don't have time to cover here.

But you've probably also heard talk about this thing called ECMAScript 6, ES6, or ES2015 (they kinda missed the deadline on that one). ES6 is the next specification for JavaScript, and it's finally started to appear in a major way in browsers and on servers thanks to Node.js 5.

You can get the complete rundown of ES6 features in Node.js here; but we'll also run through the features that you might see in the upcoming labs here. For our purposes, anything that can be enabled with a simple "strict mode" declaration is fair game — but we won't teach you about the stuff behind the --es_staging or --harmony flag just yet.

Aside: Strict Mode

You might not have encountered it yet (at least knowingly), but ES5 has a way to opt in to a special version of JavaScript called strict mode.

You can read about the ins and outs of strict mode at the link above — generally, it turns silent failures into thrown errors, and it helps prevent variables sneaking into the global scope.

That is, in standard mode, the following code would run — it just wouldn't do anything:

deleteObject.prototype;

But in strict mode, this would throw a TypeError:

"use strict";deleteObject.prototype;

Strict mode can be invoked by writing

'use strict';

at the top of the current script — strict mode then applies to the entire script. Alternatively, you can apply strict mode to individual functions:

functionstrictFunction(){"use strict"// this will throw an error in strict modedeleteObject.prototype}functionstandardFunction(){// this will silently fail in standard modedeleteObject.prototype}

Strict mode does just as its name implies: it enforces stricter rules on the execution of your code. Note that some transpilers (like babel) can set strict mode for you.

Strict mode also enables some newer features that ES6 developers wanted to make sure users explicitly opted in to.

ES6 Features

There are a lot of new features, but for now we'll cover a subset of the new features below.

Notice how x declared outside of the if block differs from the x declared inside the block. Block-level scope means that the variable is available only in the block (if, for, while, etc.) in which it is defined; it differs from JavaScript's normal function-level scope, which restricts the variable to the function in which it is defined (or global/window if it's a global variable).

const

The keyword const does not require strict mode. Like let, it declares a variable with block-level scope; additionally, it prevents its variable identifier from being reassigned.

That means that the following will throw an error:

constmyVariable=1;myVariable=2;// syntax error

However, this does not mean that the variable's value is immutable — the value can still change.

Classes ("use strict")

"Wait," you say. "JavaScript has prototypal, not class-based, inheritance."

You're still right. But classes in JavaScript are awesome, and you'll be seeing them increasingly as ES6 adoption increases.

Consider the following simple example, based largely on the examples from MDN. We want to create a Polygon prototype and inherit from it. We'll start with ES5:

functionPolygon(height,width){this.height=height;this.width=width;}

Cool, so we got to the ES6 class constructor, which works just like a constructor in ES5. But now how do we implement the area() getter? Well, not very nicely — let's back up and rewrite what we just wrote:

Okay, so that worked, but look at how difficult it is to reason about. We have to plan in advance for the properties that we want to set, and area is not calculated dynamically — it's set when the Polygon is instantiated and then forgotten about, so if somehow a Polygon's height and width changed, its area would need to be updated separately. Gross.

Arrow functions

Arrow functions provide not only a terser way to define a function but also lexically bind the current this value. This ain't your grandpa's JS.

constgreet=(greeting,person)=>{returngreeting+', '+person+'!';};// 'Hello, Marv'greet('Hello','Marv');vara=['Hydrogen','Helium','Lithium','Beryl­lium'];// compare this implementation...vara2=a.map(function(s){returns.length});// ... to this implementation with the fat arrowvara3=a.map(s=>s.length);

Fat arrows also have implicit returns — the following are equivalent:

vara3=a.map(s=>s.length);vara4=a.map(s=>{returns.length;});

If the function only accepts one argument, parentheses are optional:

// this...vara3=a.map(s=>s.length);// ... is the same as thisvara3=a.map((s)=>s.length);

If there are zero or two or more arguments, though, you must use parens:

Destructuring

Destructuring makes it easier than ever to pull values out of objects and arrays and store them in variables. We destructure an array by putting our new variable names at the corresponding index and an object by giving our variable the same name as the key we are interested in.

Node Modules

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.

Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.