Intro to ES6

Function Scope

Block Scope

Let

function add(Array){
  var sum = 0;
  var i=101;
  for (i=0; i<10;i++){
    sum+=Array[i];
  }
  console.log(i); //Will be 10 
  //The Variable i is function scope.
}

function add(Array){
  var sum = 0;
  var i = 101;
  for (let i=0; i<10;i++){
    sum+=Array[i];
  }
  console.log(i);// Will be 101
}

Destructuring

//Allowing Multiple Returns

function getThree(){
  return [1,2,3];
}

var one,two,three;
[one,two,three] = getThree();

//Swapping Values w/o temp variable

[one,two] = [three,one];

console.log(one) //Prints 3;
console.log(two) //prints 1;

//Also can ignore certain returned values

[,,three] = getThree(); //Also works.

Destructuring

//Works with Objects as well

function getBookInfo(){
  return {
          name: 'Moby Dick',
          author: 'Herman Melville',
          pageCount: 635
        };
}

var name,author,pubDate;
var {name: name, author: author} = getBookInfo();
//can ignore specific properties. Destructure by property value;

var {name: name, pubDate: pubDate} = getBookInfo() //throws exception

//But

var {name: name, ?pubDate: pubDate} = getBookInfo() 
//Will work. ? similar to optional return value;

Arrow functions

Note: Still Experimental and subject to change. Ex. taken from mozilla

//No more need to use self=this trick; Arrow functions have Lexical Scope

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

// An empty arrow function returns undefined
let empty = () => {};

(() => "foobar")() // returns "foobar" 

var simple = a => a > 15 ? 15 : a; 
simple(16); // 15
simple(10); // 10

var complex = (a, b) => {
    if (a > b) {
        return a;
    } else {
        return b;
    }
}

New Parameter Options

//Default Parameters
function add(x,y=3){
  return x+y;
}

console.log(add(1)) //Should equal 4

//Variable Number of Arguments
function add(...values){
    console.log(values);
    var sum=0;
    for (let i=0;i<values.length;i++){
        sum+=values[i];
    }
    return sum
}

add(1,2,3,4) //will log [1,2,3,4]

//currently add only accepts numbers not an array
//Use the spread operator. 
add(...[1,2,3,4]) //will break the array into arguments;

//Can Destructure in parameters

function (x,{propname,propname2}){
    console.log(propname,propname2);
    //Logs the value of propname not name itself.
    //Similar to {key1: value1, key2: value2}
    //logs value1, value2
}

Object Literals

//Can declare functions as part of the object literal

var obj = {
    string: 'asdf',
    number: 1,
    getValString() {
        return 'b'
    }
}
//Cand apply deconstruction to return object as well to remove property name duplication

New Primitive: Symbol

let sym = Symbol('foo');
let sym2 = Symbol('foo');
console.log(sym === sym2) //False

//Mostly seems to be used for keys in objects

var obj = {};
obj[sym] = 'c',
obj['a'] = 'a',
obj['b'] = 'b'
for (let keys in obj){
    console.log(obj[key]);
}
//Will only log 'a', and 'b'. For in does not go over symbols
//Should use Object.getOwnPropertySymbols() to get symbol keys.

//No property name collisions. Allows certain methods,values to be private/harder to access

Symbols are a new primitive
Primary use object-property uniqueness
Take 1 Argument purely for debugging purposes

Classes

class Maths {
  constructor(initVal){
    this.init = initVal;
  }
  add(x){
    return this.init+x;
  }
}

var math = new Maths(2);
math.add(3) //returns 5

class Multiply extends Maths { //new inheritance syntax
  constructor(initVal){
    super(initVal); //Calls parent classes method. In this constructor
  }                 //Can be called on methods to overwrite them. 
  multiply(x){
    return this.init*x;
  }
}

var mult = new Multiply(3);
mult.multiply(3); //returns 9

Template Strings

var string = 'this is a beautiful day'; 

//Or with new syntax

var adjective = 'rainy';

`this is a ${adjective} day`; //Uses backticks

//allows for easier multi-line strings. 

var multiLine = `a
                 b
                 c`;

//Can evaluate expressions before toString() it. 

var a = 10;
var b = 20;

`${a} + ${b} = ${a + b}`; // evaluates to '10 + 20 = 30';

Template Strings

//Mozilla example. 
var a = 5;
var b = 10;

function tag(strings, ...values) {
  console.log(strings); //strings are separated by ${};
  console.log(values);  // 
  console.log(typeof values[1]);  // values is a number
  console.log(strings.raw) //Strings have a raw property of the template string
  return "Bazinga!";
}

tag`Hello ${ a + b } world ${ a * b} asdf asdf asdf asdf `; 
//template calls tag as argument.

Maps/Sets

//Example from Mozilla

var myMap = new Map();

var keyObj = {},
    keyFunc = function () {},
    keyString = "a string";

// setting the values
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, "value associated with keyObj");
myMap.set(keyFunc, "value associated with keyFunc");

myMap.size; // 3

// getting the values
myMap.get(keyString);    // "value associated with 'a string'"
myMap.get(keyObj);       // "value associated with keyObj"
myMap.get(keyFunc);      // "value associated with keyFunc"

myMap.get("a string");   // "value associated with 'a string'"
                         // because keyString === 'a string'
myMap.get({});           // undefined, because keyObj !== {}
myMap.get(function() {}) // undefined, because keyFunc !== function () {}

Maps and Sets are new types of collections
Items in a set can only be added once
With maps, keys don't have to be strings

WeakSet/WeakMap

WeakSets/Maps are collections of Objects only
References to these objects are held "weakly"
If they are there are no other references to the objects contained in the WeakSet/Maps they are Garbage-Collected
No list of items stored in this way
Not enumerable, so it cannot be iterated through

//Code from lukehoban on github

var s = new Set();
// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Because the added object has no other references, it will not be held in the set

Iterators

Iterators - return a { value: anything, done: Boolean}
iterable - has a method that returns an iterator

//For Of Loop Example
//For-Of syntax works on iterables such as arrays

let array = ['hello','world','good','afternoon'];

for (let elem of array){
  console.log(elem); //No need to write array[i]. Elem is the value itself;
}

// using a generator function found on esdicuss.
function* entries(obj) {
   for (let key of Object.keys(obj)) {
     yield [key, obj[key]];
   }
}

import {entries} from !@iter!; // returns an iterable
for (let [key, value] of entries(myObj)) {
   // do something with key|value
}

Generators

Allow us to write async code synchronously with promises

//declare a generator function
var array = ['hello','world'];
function* generator() {
    for (let elem of array){
        yield elem;
    }
}

let genObj = generator();
console.log(genObj.next()); //{ value: 'hello', done: false }
console.log(genObj.next()); //{ value: 'world', done: false }
console.log(genObj.next()); //{ value: undefined, done: true }

Async Example

Bibliography

http://dailyjs.com/2012/07/23/js101-scope/
http://ariya.ofilabs.com/2013/02/es6-and-destructuring-assignment.html
http://tc39wiki.calculist.org/es6/symbols/
http://cdn.oreillystatic.com/en/assets/1/event/93/An%20Overview%20of%20ECMAScript%206%20Presentation.pdf
http://javascriptplayground.com/blog/2014/07/introduction-to-es6-classes-tutorial/
https://github.com/lukehoban/es6features#classeshttp://tc39wiki.calculist.org/es6/template-strings/
https://blog.domenic.me/es6-iterators-generators-and-iterables/
http://davidwalsh.name/async-generators

TechTalk

By Justin Sung

Intro to ES6

Destructuring

Destructuring

Arrow functions

New Parameter Options

Object Literals

New Primitive: Symbol

Classes

Template Strings

Template Strings

Maps/Sets

WeakSet/WeakMap

Iterators

Generators

Async Example

TechTalk

More from Justin Sung