This workshop is important because:

ES6 (ECMAScript6) is the most recent version of JavaScript, and more and more tools are being converted to ES6 every day. Additionally, ES6 added many convenient and useful features to JavaScript. Taking advantage of these will make you a more effective developer.

After this workshop, developers will be able to:

• Explain the history of ECMAScript and JavaScript.
• List features of JavaScript added with ES6.
• Write and read JavaScript code that uses new ES6 features:
  • Explain block scope and when to use var, let, and const.
  • Interpolate strings with template literals.
  • Write shorter function declarations -- that don't create a new this -- with arrow functions.
  • Use default parameters in JavaScript.
• Write and read JavaScript code that uses new ES6 class and object features:
  • Assign multiple values at once with array or object destructuring.
  • Use concise object properties and methods (instead of key-value syntax).
  • Organize code in an object-oriented way with ES6 classes.
  • Share code among files using ES6 module export and import.

Before this workshop, developers should already be able to:

• Read and write ECMAScript5-style JavaScript, including functions.
• Describe JavaScript scope.
• Explain the meaning of this in JavaScript.
• For classes: explain constructor functions and prototypes; recognize prototype-based inheritance.
• For =>: give an example of a "closure" in JavaScript, and explain what it does.

The JavaScript standard is officially referred to as ECMAScript.

JavaScript is so widely used that any changes would affect the whole web. Because of this, a body known as TC39 or Ecma International formally approves official versions of ECMAScript for release.

Each version contains features or changes to be added to the language. The most recent is ECMAScript6. Most people shorten ECMAScript versions to ES, like 'ES6'.

In short, ECMAScript defines a language, and JavaScript is an implementation of that language.

Complete this awesome visualization of the current state of the JavaScript universe

Condensed timeline:

• 1999 - ES3 released, the first widespread use of the language.
• ES4 never released, largely due to political reasons.
• 2009 - ES5 released, what we've been writing so far in class.
• 2015 - ES6 publishe,d releasing a wide set of new features and syntax.

Many plugins, frameworks, and modules still use ES5 because it can take time to refactor projects and because browser support for the new version of the language is still not quite universal. However, the new syntax and features of ES6 are increasingly becoming more and more widespread among open-source projects and in the developer world at large. Also, you are very likely to see ES6 in the documentation of some technologies we use in this course.

Today is all about exploring some of the new features of ES6 and getting comfortable with the new syntax.

For more backstory, we recommend checking out this talk from Brendan Eich on what he views as the future of JavaScript.

So far, the primary way to control scope in an application has been through the use of functions:

// es5
var a = 1;
function myFunction() {
  a = 2;
  console.log(a);
}
console.log(a);
myFunction();

ES6 introduces the concept of block scoping, which allows us to limit the scope of a variable declared with let to a given block { ... }

// es6
var a = 1;
{
  let a = 2;
  console.log(a);
}
console.log(a);

You're more likely to see let declarations inside an if or for block:

//es5
for(var i = 0; i < 10; i++){
  console.log(i)
}
console.log("outside loop:", i)

// versus

//es6
for(let j = 0; j < 10; j++){
  console.log(j)
}
console.log("outside loop:", j)
//throws an error

let is great for temporary variables that don't need to last through the entire function.

Unlike with var, let or const will throw an error if you redeclare the same variable within the scope.

ES6 introduces another keyword for declaring variables: const

const is an identifier for variables that won't be reassigned:

const a = 1;
a = 2;
// Throws an error in chrome
const a = 2;
// throws an error
var a = 2;
// throws an error

const is also block scoped.

Complete exercises 1 and 2 in the exercises folder.

We previously used "concatenation" to insert variables into strings.

var name = "Inigo Montoya"
var killee = "my father"
var prepareTo = "die"

console.log("Hello. My name is "+ name + ". You killed " + killee +". Prepare to " + prepareTo + ".")

In ES6, we can "interpolate" strings with variables using template literal syntax. You'll recognize template literal strings because they're surrounded by backtics (\``).

let name = "Inigo Montoya"
let killee = "my father"
let prepareTo = "die"

console.log(`Hello. My name is ${name}. You killed ${killee}. Prepare to ${prepareTo}.`)

There are serious security issues with inserting user input into your code.

Complete exercise 8.

function hello(name){
  name = name || "stranger";
  console.log("Hello, " + name);
}

hello() // Hello, stranger
hello("Jessie") // Hello, Jessie!

With ES6, we now have the option add set a default value directly as part of the functions' parameters.

function hello(name = "stranger"){
  console.log("Hello, " + name)
}

hello() // Hello, stranger
hello("Jessie") // Hello, Jessie

One of the main benefits is that this makes it easier to allow optional arguments that might be falsy. As an example, what could go wrong with the ES5 optional argument strategy in the function below?

function pluralize(baseWord, suffix){
  suffix = suffix || 'es';
  return baseWord + suffix;
}

console.log(pluralize('shrimp', ''));

Complete exercises 3 and 4 in the exercises folder.

Arrow functions are a new shorthand syntax for defining anonymous functions:

// es5
var foods = ["pizza","mac n cheese","lasagna"]
foods.forEach(function(food){
  console.log("I love " + food)
})

// es6
let foods = ["pizza","mac n cheese","lasagna"]
foods.forEach( food => console.log(`I love ${food}`) )

If there is more than one parameter for the anonymous function, the parameters have to be wrapped in parentheses.

let foods = ["pizza","mac n cheese","lasagna"]
foods.forEach( (food,i) => console.log(`My #${i} favorite food is ${food}`) )

Arrow functions also have the benefit of not creating a new value of this inside the function (read more here). Compare the two code samples below.

// es5
var pizza = {
  temperature: 0,
  toppings: ["cheese", "ham", "pineapple"],
  bake() {
    setInterval(function(){ // note that the setInterval function belongs to the window object
      this.temperature++
    }, 1000)
  }
}

// es6
var pizza = {
  temperature: 0,
  toppings: ["cheese", "ham", "pineapple"],
  bake() {
    setInterval( () => {
      this.temperature++
    }, 1000)
  }
}

pizza.bake();
console.log(pizza.temperature);

Additionally, the return statement is not needed with single line arrow functions. There is an implicit return.

// es6
let add = (x, y) => x + y
add(2, 3) //5

// es5
function subtract(x,y){ x+y } // es5 needs explicit return
subtract(2, 3) // undefined

If the arrow function is multi-line, you still need to explicitly return:

let add = (x,y) => {
  return x + y
}
add(2,3)
//undefined in console

The single line return can be faked by wrapping the expression in parentheses:

let add = (x,y) => (
  x + y
)

Complete exercise 10.

"Destructuring" is a kind of assignment that makes it possible to pull out multiple variables from data inside arrays and objects.

Here's an array example:

let [a,b] = [1,2]
a //= 1
b //= 2
let nums = [1,2,3,4,5]
let [first, second, third] = nums
first //= 1
second //= 2
third //= 3

And an example with an object:

var user = {
   id: 1,
   name: "Bob",
   age: 43 ,
   profile_url:  "http://api.co/users/1",
   location: "DC"
}

Complete exercise 5.

ES6 allows us to shorten object literals in a few ways.

First, we can omit function for method definitions within object literals.

// es5
var car = {
  drive: function(){
    console.log("vroom")
  }
}

Spot the differences between the ES5 code above and the ES6 code below.

// es6
let car = {
  drive(){
    console.log("vroom")
  }
}

Second, when a key is the same as the variable storing the value, there's a new shorthand for that as well.

// es5
var x = 1
var y = 2
var obj = {x:x, y:y}


//es6
let x = 1
let y = 2
let obj = {x,y}

We can combine these features to rewrite some function definitions. What is happening below?

// ES5
function greetUser (user) {
  console.log("Hello " + user.name + ", how's the weather in " + user.location)
}

// In ES6 becomes

function greetUser ({ name, location })  {
  console.log("Hello " + name + ", how's the weather in " + location)
}

// You would call both by using: greetUser(user) if you have a user variable
// set up with the proper structure.

Complete exercise 6.

ES6 adds class-based object-oriented programming. Click to expand more information about ES6 classes.

Classes in ES6 are defined as "syntactical sugar" on top of the prototypal patterns.

// es5
function Animal(name){
  this.name = name
}
Animal.prototype.speak = function(){
  console.log("my name is " + this.name)
}

function Dog(name){
  this.name = name
}
// prototype-based inheritance
Dog.prototype = new Animal()

var lassie = new Dog("lassie")
lassie.speak()

// es6
class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

// class-based inheritance
class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

var lassie = new Dog("lassie")

Practice with ES6 classes to complete exercises 12 and 13.

ES6 added built-in support for modules to help organize code on a larger scale. This feature is not avialable in browsers (yet), but many libraries support it.

Node.js has a module structure with export and require, like this:

// ES5
// routes.js file
module.exports = {
  index: function(){
    console.log("index route");
  }
}
// app.js
var routes = require("./routes.js");
routes.index();

ES6 modules are not the same (read more here). They have named imports and exports, which allow us to import functions and objects with a name tied to them:

// ES6
// routes.js
export function index(){
  console.log("index route")
}
export function show(){
  console.log("show route")
}

// app.js
// import just a few of the exports from a module
import {index, show} from 'routes'
index()
show()

// ES6
// import everything from a module
import * as routes from 'routes'
routes.index()
routes.show()

// ES6
// export a single value
export default function twice(x) {
  return x * 2;
}

Support for ES6 is great! - https://kangax.github.io/compat-table/es6/

If you need to support a legacy browser, check out the following tools:

• Traceur
• Babel

• ES6
• You Don't Know ES6
• Block Scope
• Destructuring
• Template Literals

There are serious security issues with inserting user input into your code. Complete exercise 9 to learn about and practice a more secure approach.

ES6 adds special support for getter and setter methods for objects. Research getters and setters, and complete exercise 7. If you've done exercise 13, also complete exercise 14.

let person = {
  firstName: "Jesse",
  lastName: "Shawl",
  get fullName(){   // creates a reader for person.fullName
    return this.firstName + " " + this.lastName
  },
  set fullName(newName){ // creates a writer for person.fullName
    var names = newName.split(" ")
    this.firstName = names[0]
    this.lastName = names[1]
  }
}
person.fullName = "j dog" // notice -  no parentheses

The spread operator ... allows an expression to be expanded into multiple elements. Complete exercises 11.

var dimensions = [10, 5, 2];
var volume = function(height, width, length){
  return height * width * length;
}

// es5
volume(dimensions[0], dimensions[1], dimensions[2]);

// es6
volume(...dimensions);

var days = ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"];
function reversedDays(arr){
  return arr.reverse();
}
// this returns a reversed version of the days array, ...
console.log(reversedDays(days))
// ... but now the original days array is reversed, too
console.log(days)

// es5
function reversedDays(arr){
  var newArray = [];
  for(let i = 0; i < arr.length; i++){
    newArray.push(arr[i]);
  }
  return newArray.reverse();
}

// es6
function reversedDays(arr){
  return [...arr].reverse()
}

// either way, we are now keeping the original days array in order
console.log(reversedDays(days))
console.log(days)

There are lots more features of ES6 that we have not covered:

• Symbols
• Iterator & for..of operator
• Generators
• Proxies
• Reflection and meta-programming