Block Scoping: Let

let

A new keyword: 

Conceptually similar to              but defines a variable only within the current

var

Block Scoping: Let

function log(msg) { console.log("LOG MESSAGE: " + msg); }

function f(x) {
    if (x > 0) {
        let { log, sin, cos } = Math;
        // log is now Math.log
        console.log('log(' + x + ')= ' +  log(5));
    }
    // log is now back to our logging function
    log("done computing f()");
}
f(3);
log('hello world!');

log(3)= 1.6094379124341003
done computing f()
hello world!

ES6

Block Scoping: Let

function log(msg) {
    console.log("LOG MESSAGE: " + msg);
}

function f(x) {
    if (x > 0) {
        let { log, sin, cos } = Math;
        // log is now Math.log
        console.log('log(' + x + ')= '
            +  log(5));
    }
    // log is now back to our logging function
    log("done computing f()");
}
f(3);
log('hello world!');

"use strict";

function log(msg) {
    console.log("LOG MESSAGE: " + msg);
}

function f(x) {
    if (x > 0) {
        var _log = Math.log;
        var sin = Math.sin;
        var cos = Math.cos;
        // log is now Math.log
        console.log("log(" + x + ")= "
            + _log(5));
    }
    // log is now back to
    //  our logging function
    log("done computing f()");
}
f(3);
log("hello world!");

ES6 -> ES5

ES6

ES5

Block Scoping: Const

const

A new keyword: 

Conceptually similar to              but defines a read-only variable. Writing to this variable throws a transpile error

let

Block Scoping: Const

const y = {};

y['a'] = 5;
console.log(y)
y = {}; //transpile error


const f = function () {console.log('hi');}

f(); //"hi"
f = function () {console.log('abc');} //transpile error

ES6

Block Scoping: Const

ES6 -> ES5

const y = {};

y['a'] = 5;
// transpile error
// y = {}; 


const f = function () {console.log('hi');}

f(); // "hi"
// transpile error
// f = function () {console.log('abc')l}

ES6

"use strict";


var y = {};

y.a = 5;
// transpile error
// y = {};


var f = function () {
  console.log("hi");
};

f(); // "hi"
// transpile error
// f = function () {console.log('abc')l}

ES5

Destructuring

Pattern matching for objects and arrays, in assignment and function parameters

Destructuring: Assignment

// Example 1, returning an object
function stats(arr) {
  var sum = arr.reduce(
    function(c,x) {
      return (c || 0) + x;
    }
  );
  return {
    sum: sum,
    mean: arr.length === 0
        ? 0
        : (sum / arr.length)
  };
}

var {sum, mean} = stats([1, 2, 3]);

console.log('Sum=', sum,
    '  Mean=', mean);

ES6

"use strict";

// Example 1, returning an object
function stats(arr) {
  var sum = arr.reduce(function (c, x) {
    return (c || 0) + x;
  });
  return {
    sum: sum,
    mean: arr.length === 0
        ? 0
        : sum / arr.length
  };
}

var _stats = stats([1, 2, 3]);

var sum = _stats.sum;
var mean = _stats.mean;

console.log("Sum=", sum,
    "  Mean=", mean);

ES5

Destructuring: Assignment

var [b,c,a] = [1,,2];
console.log("a=", a); //2
console.log("c=", c); //undefined

ES6

"use strict";

var _ref = [1,, 2];

var b = _ref[0];
var c = _ref[1];
var a = _ref[2];
console.log("a=", a); //2
console.log("c=", c); //undefined

ES5

Destructuring: Arguments

function divide({
    numerator: n,
    denominator: d }) {
  return n/d;
}

console.log('divide 6/4',
  divide({numerator: 6, denominator: 4})
);

ES6

"use strict";

function divide(_ref) {
  var n = _ref.numerator;
  var d = _ref.denominator;
  return n / d;
}
console.log("divide 6/4",
    divide({ numerator: 6, denominator: 4})
);

ES5

Default Parameter Values

Allows specification of a default value for function parameters.

Default Parameter Values

// Simple values
function addThree(a, b=4) {
  return a + b + 3;
}
addThree(4);
addThree(4,5);

// Works with arrays and objects too!
function normalizePayload(
  payload={users: []}, type) {
  console.log(payload);
};

ES6

"use strict";

// Simple values
function addThree(a) {
  var b = arguments[1] === undefined
    ? 4
    : arguments[1];
  return a + b + 3;
}
addThree(4);
addThree(4, 5);

// Works with arrays and objects too!
function normalizePayload(_x, type) {
  var payload = arguments[0] === undefined
    ? { users: [] }
    : arguments[0];
  console.log(payload);
};

ES5

Rest Parameters

• Similar to Java  "arguments", except altering values has no weird effects
• It's a real array

Rest Parameters

var t = "Hello %s!"

function greet(template, ...args) {
  return args.map(function(arg) {
    return t.replace('%s', arg);
  }).join(', ');
}

console.log(greet(t, 'Mike', 'Dave', 'Steve'));
//  Hello Mike!, Hello Dave!, Hello Steve!

ES6

"use strict";

var t = "Hello %s!";

function greet(template) {
  for (var _len = arguments.length,
            args = Array(_len > 1
                ? _len - 1
                : 0),
            _key = 1;
        _key < _len;
        _key++) {
    args[_key - 1] = arguments[_key];
  }

  return args.map(function (arg) {
    return t.replace("%s", arg);
  }).join(", ");
}

console.log(greet(t, "Mike", "Dave", "Steve"));
//  Hello Mike!, Hello Dave!, Hello Steve!

ES5

Spread

• Expands arrays to act like multiple  variables (Flatten)
• A better Function.prototype.apply
• Easy array concatenation

Spread

var b = [2, 3];
var a = [1, ...b, 5];
console.log(a); // [1, 2, 3, 5]
a.push(...b);
console.log(a); // [1, 2, 3, 5, 2, 3]

ES6

"use strict";

var _toArray = function (arr) {
    return Array.isArray(arr)
        ? arr
        : Array.from(arr);
};

var b = [2, 3];
var a = [1].concat(_toArray(b), [5]);
console.log(a); // [1, 2, 3, 5]
a.push.apply(a, _toArray(b));
console.log(a); // [1, 2, 3, 5, 2, 3]

ES5

Modules

• Allows for better encapsulation of code on a per-file bases
• Built on patterns from YUI, AMD, CommonJS, etc...
• No code executes until requested modules are available and processed (async friendly)

Modules: Imports

// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

ES6

"use strict";

var _interopRequireWildcard = 
    function (obj) {
        return obj && obj.__esModule
            ? obj
            : { "default": obj };
    };

// app.js
var math = _interopRequireWildcard(
    require("lib/math")
);

alert("2π = " + math.sum(math.pi, math.pi));

ES5

Classes

• Syntactic sugar over prototypical inheritance
• Presents some of the same advantages as classical inheritance, in declarative form
  • super calls
  • instance methods
  • static methods
  • constructors

Classes

class Animal extends Object {

  constructor (name='Animal') {
    this.name = name
  }
  
  eat() {
    console.log(this.name + " is eating");
  }
}

class Canine extends Animal {
  static numLegs() {return 4;}

  constructor (name='Canine') {
    super(name);
  }
  eat() {
    super();
    console.log('...and then chasing his tail');
  }
}

class Dog extends Canine {
  constructor (name='Dog') {
    super(name);
  }
}

var d = new Dog();
d.eat(); // Dog is eating ...and then chasing his tail
var dd = new Dog('Charlie');
dd.eat(); // Charlie is eating ...and then chasing his tail
console.log(Dog.numLegs()); // 4

ES6

class Dog extends Canine {
  constructor (name='Dog') {
    super(name);
  }
}

var d = new Dog();
d.eat();
// Dog is eating ...and then chasing his tail

var dd = new Dog('Charlie');
dd.eat();
// Charlie is eating ...and then chasing his tail

console.log(Dog.numLegs());
// 4

ES6

Arrow Functions

• Similar to Java 8, C# concepts
• Behaves like a function, except "this" is always same as parent closure

Arrow Functions

var obj = {
  
  items: ['apple', 'pear'],
  
  formatItem: function(item) {
    return item.toUpperCase();
  },
  
  print: function () {
    console.log(
      this.items.map(
        x => this.formatItem(x)
      )
    );
  }
};

obj.print();

ES6

"use strict";

var obj = {

  items: ["apple", "pear"],

  formatItem: function (item) {
    return item.toUpperCase();
  },

  print: function () {
    var _this = this;
    console.log(this.items.map(
        function (x) {
          return _this.formatItem(x);
        }
    ));
  }
};

obj.print();

ES5