ES 2015

It's Just 

Objectives

• Define and describe transpiler
• Use let and const
• Uses the fat arrow shortcut for writing anonymous functions
• Use new features of backtick template strings
• Describe the new ways you can assign values when declaring object literals
• Show how destructuring can be used to write more concise code
• Transpile ES2015 to ES5 with babel
• Uses the new class syntax, and super to call functions from the parent

Transpilers

• babel               https://babeljs.io/
• tracuer            https://github.com/google/traceur-compiler
• typescript       https://www.typescriptlang.org/
• coffee script   http://coffeescript.org/

and many more

Babel

npm install --save-dev babel-cli

babel script.js

Variable Declarations

let, const, var

Variable Declarations

// ES 5

var max = 99;
var min = 10;

var obj = {
    id : "6B7CDECF-E218-4183-A182-AB21F8C5B42C",
    name : "Matt Sprague",
    title : "Associate Instructor",
    dob : "2-10-1979"

};

// ES 6

const max = 99;
const min = 10;

let obj = {
    id : "6B7CDECF-E218-4183-A182-AB21F8C5B42C",
    name : "Matt Sprague",
    title : "Associate Instructor",
    dob : "2-10-1979"

};

Variable Declarations

let is Block-Scoped.

var is Function-Scoped

function func() {
    if (true) {
        var tmp = 123;
    }
    console.log(tmp); // 123
}

Variable Declarations

let is Block-Scoped.

var is Function-Scoped

function order(x, y) {
    if (x > y) { // (A)
        let tmp = x;
        x = y;
        y = tmp;
    }
    console.log(tmp===x); // ReferenceError: tmp is not defined
    return [x, y];
}

Variable Declarations

const is for CONSTANT declarations

const foo;
    // SyntaxError: missing = in const declaration

const bar = 123;
bar = 456;
    // TypeError: `bar` is read-only

Variable Declarations

hoisting              scope   globals?   

Object Creation

let firstName = "Matt";
let lastName = "Sprague";

var mattES5 = { firstName : firstName, lastName : lastName };
let mattES6 = { firstName, lastName };

console.log(matt);
// { firstName: 'Matt', lastName: 'Sprague' }

Object Creation

let firstName = "Matt";
let lastName = "Sprague"

let mattES5 = { 
    firstName, 
    lastName,
    speak : function() {
        console.log(`${this.firstName} ${this.lastName}`)
    } 

};



let mattES6 = { 
    firstName, 
    lastName,
    speak() {
        console.log(`${this.firstName} ${this.lastName}`)
    } 

};

mattES5.speak();
mattES6.speak();
// Matt Sprague

Template Strings

let author = {
    firstName : "Matt",
    lastName : "Sprague"
};
let date = new Date();

let label = `Created on ${date.toDateString()}`;
// Created on Mon Nov 28 2016

let creatorInfo = `by ${author.firstName} ${author.lastName}`;
// by Matt Sprague

Template Strings

function btnHTML(label,type="button",classList=[]){
    let classes = classList.length > 0 ? `class="${classList.join(' ')}"` : "";
    return `<button type="${type}" ${classes}>${label}</button>`
}

let btn = btnHTML("click it!","button",["btn","btn-normal"]);

// "<button type='button' class='btn btn-normal'>click it!</button>"

let header = document.querySelector("body>header");
header.insertAdjacentHTML("beforeend",btn);

Arrow Functions

"Anonymous" Functions

let len = (obj) => obj.length;

len([1,3,5,6,2]);
// 5


let pair = (a,b) => ({ key : a, value : b });

let p1 = pair(1,"Hello");

// p1 { key : 1, value : "Hello" } 

Arrow Functions

let body = document.querySelector("body");
let addScriptsButton = document.querySelector("#addScripts");
let sources = ["file1.js", "file2.js", "file3.js"];

addScriptsButton.addeventListener("click",function(e){
   
    sources.forEach(function(source){
        let script = document.createElement("script");
        script.src = source;
        body.appendChild(script);    
        

    });
    
});

Arrow Functions

let body = document.querySelector("body");
let addScriptsButton = document.querySelector("#addScripts");
let sources = ["file1.js", "file2.js", "file3.js"];

addScriptsButton.addeventListener("click", (e)=>{
   
    sources.forEach((source) => {
        let script = document.createElement("script");
        script.src = source;
        body.appendChild(script);    
        
    });
    
});

Destructuring

Pulls Values OUT of Objects

let words = ["First", "Second", "Third", "Fourth", "Fifth"];

let [first,second] = words;

// first = "First"
// second = "Second"

Destructuring

• Variable Declarations
• Parameter Definitions
• Assignments

Destructuring

const { x, y } = { x: 11, y: 8 }; // x = 11; y = 8

const [,,third,,fifth] = [1,2,3,4,5,6,7,8,9,10];

import { Link } from 'react-router';

class Declarations

• Beginning of OOP
• Organizes functions and variables
• Looks like Java or C#

class Declarations

class Dog {
    constructor(name,breed) {
        this._breed = breed;
        this._name = name;
        this._isSitting = false;
    }

    get name() {
        return this._name;
    }

    speak() {
        console.log("woof");
    }

    sit() {
        if(!this._isSitting) {
            this._isSitting = true;
        }
    }

    stand() {
        if(this._isSitting) {
            this._isSitting = false; 
        }
    }

}

class Declarations

let toby = new Dog("Toby", "Dachshund");

toby.sit();

toby.speak();

Inheritance

class Corgi extends Dog {
    constructor(name) {
        super(name,"Corgi");
    }

}

let ein = new Corgi("Ein");
ein.speak();

Data Strutcures

Sets and Maps

Set

A list of UNIQUE items

let words = ["Hello", "how", "are", "you", "this", "fine", "day"];

let letters = new Set();
words.forEach((word)=>{
  for(let letter of word) {
    letters.add(letter);
  }
});

Set {
  'H',
  'e',
  'l',
  'o',
  'h',
  'w',
  'a',
  'r',
  'y',
  'u',
  't',
  'i',
  's',
  'f',
  'n',
  'd' }

Map

A list of key/value pairs

let words = ["Hello", "how", "are", "you", "this", "fine", "day"];

let letterCounts = new Map();
words.forEach((word)=>{
  for(let letter of word) {
    if(letterCounts.has(letter)) {
        let val = letterCounts.get(letter)+1;
        letterCounts.set(letter,val);
    }
    else {
        letterCounts.set(letter,1);
    }
  }
});

Map {
  'H' => 1,
  'e' => 3,
  'l' => 2,
  'o' => 3,
  'h' => 2,
  'w' => 1,
  'a' => 2,
  'r' => 1,
  'y' => 2,
  'u' => 1,
  't' => 1,
  'i' => 2,
  's' => 1,
  'f' => 1,
  'n' => 1,
  'd' => 1 }