While this presentation is largely technical, this is also good
information for sales, marketing and UX. The onset of ES6 in the
market will certainly create new opportunities with new and existing clients.
What is ECMA?
International standards based organization with a private membership. In addition to ECMAScript,
manages standards for C#, OpenXML, NFC, CLI and others. Based in Geneva, Switzerland.
function logDefaults(a = 1, b = 2) {
alert(a);
}
logDefaults();
A New Scope
function fnScoped() {
if (true) {
// x is "hoisted" to the function block
var x = 'It\'s true';
}
if (true) {
// x should be undefined... or should it?
alert(x)
}
}
fnScoped();
Block Scope (let)
function blockScoped() {
if(true) {
let x = 'it\'s true';
alert(x);
}
try {
alert(x);
} catch(e) {
alert('x is undefined');
}
}
blockScoped();
Block Scope (const)
// const are immutable
const foo = "bazinga!";
alert(foo);
//force a compiler exception
foo = "bar";
Template Strings (interpolation)
let piecesPerPie = 6;
let numberOfPies = 3;
alert(`There are ${numberOfPies} pies,
so we have ${piecesPerPie * numberOfPies}
pieces.`);
Fat Arrow
'use strict';
let gen = (seed) => seed*Math.random();
alert(gen(1000));
Object Destructuring
//syntactic sugar
let person = {
givenName: 'Tom',
surName: 'Cornilliac'
}
let{givenName:first, surName:last} = person;
alert(`My name is ${first} ${last}`);
Classes
class Address {
constructor( city, state ) {
this.city = city;
this.state = state;
}
toString() {
return `${this.city}, ${this.state}`;
}
}
alert( new Address( 'Marlborough', 'MA' ).toString() );
class Person {
get fullName() {
return `First:${this.first} Last:${this.last}`;
}
set fullName( value ) {
let parts = value.split(' ');
this.first = parts[0];
this.last = parts[1];
}
}
let p = new Person();
p.fullName = 'Kevin Kazmierczak';
alert( p.fullName );
Inheritence
class View {
render() {
return 'This is the base view';
}
}
class CollectionView extends View {
constructor( collection ) {
super( collection );
this.collection = collection;
}
render() {
var content = super.render();
return content += `\nHas ${this.collection.length} records`;
}
}
alert(new CollectionView( [ 1,2 ] ).render());
Modules - Named Exports
// mymodule.js
var double = function( x ) {
return x + x;
}
var square = function( x ) {
return x * x;
}
export { double, square }
// In another file
import { double, square } from 'mymodule';
double( 2 );
square( 3 );
Modules - Default Export
// mymodule.js
export default function ( x ) {
return x * x;
}
// In another file
import square from 'mymodule'
square( 3 );
Modules - Import Namespace
// mymodule.js
var name = 'Module';
var location = 'Internets';
export name;
export location;
// In another file
import * as mystuff from 'mymodule'
// mystuff.name would be 'Module'
