flarnie

// ES6 Default Function Arguments
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
function sayHi(target = 'everyone') {
 console.log('Hi ', target, '!');
}

sayHi('Alice'); // Hi Alice!
sayHi(); // Hi everyone!

// ES5 compatible syntax transpiled by es6-transpiler

flarnie

// ES6 Iterating with 'for .. of' loops
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
var arr = [1, 2, 3];
arr.foo = 'foo';
// WITH the 'for .. of' syntax
for (let item of arr) {
 console.log(item); // logs 1, 2, and 3
}

// WITHOUT using the 'for .. of' syntax

flarnie

// ES6 Destructuring Assignment
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
var coordObj = { x: 10, y: -2 };
var coordArr = [10, -2];

// Unpack the object
var { x, y } = coordObj;

// Unpack the array
var [x, y] = coordArr;

flarnie

// ES6 template literals
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings
var id = 3;
var componentType = 'widget';
var description = `This is ${componentType} number ${id}`;
 
// ES5 compatible syntax transpiled by es6-transpiler
// https://github.com/termi/es6-transpiler
var description = (("This is " + componentType) + (" number " + id) + "");

flarnie

// ES6 "fat arrow functions"
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
// One-line shorthand
var sayHello = (name) => console.log('Hello ', name);
 
// Multi-line example
var sayHelloTwice = (name) => {
  console.log('Hello ', name);
  console.log('Hi again ', name);
};

flarnie

// ES6 block scoping ('let' and 'const')
// 'let' example
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
if (true) {
  let foo = 'bar';
}
console.log(foo) // raises error: 'foo' is not defined

// Also prevents pass-by-reference errors in 'for' loops:
var funcs = [];

flarnie

// ...
//= require js-routes
// ...

flarnie

require('./init.js');

flarnie

npm install webpack -save

flarnie

// ES6 syntax
postsCollection.each((post) => {
 if (post.get('highlighted')) {
 this.highlightedPosts.push(post);
 }
});


// The translated version output by webpack
var this$0 = this;