Short demo of useful ES6 features, for Babel REPL https://babeljs.io/repl/

es6-demo.js

// Based on https://medium.com/sons-of-javascript/javascript-an-introduction-to-es6-1819d0d89a0f
console.log('========== Block scope and arrow functions');
let square = x => x * x;
let add = (a, b) => a + b;
let pi = () => 3.1415;
console.log(square(5)); // 25
console.log(add(3, 4)); // 7
console.log(pi()); // 3.1415

var x = 0;
for (let i = 0; i < 10; i++) { //
  x += 10;
  var j = j + 1 || 0; // 
}
console.log('x =', x) // x is available outside the for loop like we'd expect
console.log('j =', j) // J is also available outside the for loop, might be surprising
try {
  console.log('i =', i)
} catch(e) {console.log('i is not defined')}
// i is undefined when we use let, but leaks into the surrounding namespace when we use var.


console.log('\n========== Default parameters');
function sayMsg(msg='This is a default message.') {
  console.log(msg);
}
sayMsg(); // This is a default message.
sayMsg('This is a different message!');


console.log('\n========== Destructured assignment');
let [one, two] = [1, 2];
let {a:three, b:four} = {a: 3, b:  4}; 
console.log(one, two, three, four);


console.log('\n========= Iterators (like Java iterators)');
// for...of iterates over property values, for...in iterates over property names 
let arr = [1, 2, 3, 4, 5];
let sum = 0;
for (let v of arr) {
  sum += v;
}
console.log('1 + 2 + 3 + 4 + 5 =', sum);


console.log('\n========= Maps and sets');
// - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#Objects_and_maps_compared
// Maps are similar to Objects, but they:
//  - keep track of size, 
//  - remember insertion order
//  - don't have default keys
//
// Sets ensure values are unique
let map = new Map();
map.set('key', 'value');
map.set('foo', 'bar');
map.forEach((value, key, map) => console.log(value, key));

console.log("\n========= Spread Operator, like Groovy's spread operator")
function logStuff(a, ...args) {
  console.log('first arg:', a);
  console.log('rest of args:', args)
}
let nums = [5, 4, 3, 2, 1];
logStuff(...nums);


console.log('\n========= String template literals')
let person = {name: 'John Smith'};
let tpl = `My name is ${person.name}.`;
console.log(tpl);


// ========= Other fun parts
// - Generators
// - Modules
// - Proxies
// - New APIs for Math, Number, String, Object
// - Native Promises
// - Reflection API
// - Tail call recursion 

// ========= Why would we want to use this stuff?
// - It makes Javascript a little easier for us to use.
// - It (mostly) frees us from thinking about browser support for features.

// ========= When can we use it? 
// - Now, with a transpiler
// - Who uses a transpiler? Everyone.

// ========= Why wouldn't we want to use it?
// - bsb-web: we'd need to add a watch task that updates output when files change
// - Source maps are required for our sanity, and they may be hard to get working
// - It adds another build step, like the LESS compiler, and will slow things down
// - Browser performance, transpiled output may not be as performant as hand-written ES5