Intro to ES6

Brief History of JS

Some JS Facts

  • Created in ten days by Brendan Eich
  • September of 1995
  • Netscape
  • Mocha, Livescript
  • Submitted to ECMA in 1996

What the heck is Ecma?

  • European Computer Manufactures Association 
  • Ecma International
  • International, private non-profit standards organization for information and communication systems

So What do they do?

  • Over 400 standards
  • 9 different floppy disk standards!
  • C#  programming language
  • Dart programming language
  • JSON data interchange format
  • ECMAscript!

TC39 

(Technical Committee 39)

 

  • Brendan Eich
  • David Herman
  • Alex Russell
  • Yehuda Katz
  • Doug Crockford
  • Rick Waldron
  • Erik Arvidsson
  • Allen Wirfs-Brock

EcmaScript

  • ECMAScript is the name of the official standard
  • JavaScript is the most well known implementation of the spec

Still don't get it

Implementaion

  • V8
  • SpiderMonkey
  • Rhino
  • Chakra

Edition

Publish Date

Editors

1

2

3

4

5

5.1

6

7

June 1997

June 1998

December 1999

Abandoned

December 2009

June 2011

June 2015

TBD

Pratap Lakshman, Allen Wirfs-Brock

Pratap Lakshman, Allen Wirfs-Brock

 Allen Wirfs-Brock

Releases

What Am I using?

  • IE 6,7,8 => ES3 (Enterprise constraints)
  • Most people are using ES5
  • Some of the cool kids are using ES6 now!

I want to be a cool kid!

Transpiler/Compiler

  • 6to5 Babel - https://babeljs.io/
  • traceur - https://github.com/google/traceur-compiler

Polyfills

  • Feature by feature basis
  • Fallbacks
  • es6-promise - github.com/jakearchibald/es6-promise
  • es6-module-loader github.com/ModuleLoader/es6-module-loader

ES6 Features!  

Finally

Default Function Params

Default Function Params

  • Declare default values for optional parameters
function multiply(a, b) {
  b = typeof b !== 'undefined' ?  b : 1;
  return a * b;
}
function multiply(a, b = 1) {
  return a * b;
}

Arrow Functions

Arrow Functions

var reflect = function(value) {
    return value;
};

// same as

var reflect = value => value;



Benefits:

  • Shorter functions

Arrow Functions

var a = [
  "Hydrogen",
  "Helium",
  "Lithium",
  "Beryl­lium"
];

var a2 = a.map(function(s){ return s.length });

var a3 = a.map( s => s.length );

Benefits:

  • Shorter functions

Arrow Functions

function Person() {
  var self = this; // Some choose `that` instead of `self`. 

  self.age = 0;

  setInterval(function growUp() {
    self.age++;
  }, 1000);
}

Benefits:

  • Lexical This
function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++;
  }, 1000);
}

var p = new Person();

Template Strings

Template Strings

Benefits:

  • multiline strings

"This string is so long that
it wouldn't fit on one line"

// SyntaxError
`There is no poetry
without line breaks`

// Art

Template Strings

Benefits:

  • String Interpolation
var difficult = "fun";
var boring = "exciting!";

`Learning es6 is ${difficult} and ${boring}?`;

Shorthands

Property Definition

var a = "foo", 
    b = 42,
    c = {};

var o = { 
  a: a,
  b: b,
  c: c
};
var a = "foo", 
    b = 42, 
    c = {};

// Shorthand property names (ES6)
var o = { a, b, c };

Shorthand:

Method Definition

var obj = {
  myMethod: function () {
    ···
  }
};
let obj = {
  myMethod () {
    ···
  }
};

Shorthand:

Computed Properties

var property = 'foo';
var object = {};
object[property] = true;
var property = 'foo';
var object = {
  [property]: true
};

Shorthand:

let

let Statements

  • similar to `var` keyword
  • used for declaration
  • lexical scoping (scoped to the blocks in which they occur in)
  • Because scoping is important
var foo = "bar"
console.log(foo) // "bar"

let baz = "qux"
console.log(baz) // "qux"

// If they are in the same scope they can act similarly

let Statements

  • Lexical scoping
for (var i = 0; i <= 2; i += 1) {
   i;
}

console.log(i); // 3 (I was not supposed to stick around)
for (let i = 0; i <= 2; i += 1) {
    i;
}

console.log(i); // ReferenceError (Good. i is gone)

let Statements

  • let is not hoisted
  • var is hoisted
function kickRocks() {
  console.log(rock_type); // undefined
  var rock_type = "granite";

  console.log(shoe_type); // ReferenceError
  let shoe_type = "Nike";
}

const

const

  • similar to `var` and `let` keyword
  • used for declaration
  • read only
const color = 'red';

var color = 'blue'; // can't do it

color = blue;       // nope

let color = blue;   // still no

console.log(color + 'is my favorite color') // okay               

Spread Operator (...[1,2,3])

Spread Operator (...)

function Account(username, domain) {
  this.username = username;
  this.domain   = domain;
}

var bad_account = new Account(..."bogus.user@notmail.com".split('@'));

console.log(bad_account);

// Object { username: "bogus.user", domain: "notmail.com" }

Rest Parameters (...params)

Rest Params (...params)

function validatePresenceOf(object, ...properties) {
    
    properties.forEach(function (property) {
        
        if (!object.property) {
            
            alert(`${property} cannot be blank for ${object.name}!`);
        
        }
    
    });
}

var contact_info = {
    name: "Cat Stevens",
    phone: "409-528-1766",
    email: ""
};

validatePresenceOf(contact_info, 'phone', 'email');

// alert: email can't be blank for Cat Stevens! 

for...of

for...of vs for...in

  • for...in iterates over property names
  • for...of iterates over property values
var fishes = {
  one : 'fish', two  : 'fish',
  red : 'fish', blue : 'fish'
};

for (fish of fishes) { console.log(fish); }
// logs ['one','two','red','blue']

for (fish in fishes) { console.log(fish); }
// logs ['fish','fish','fish','fish']

New Methods: Array

New Methods: Array

var people = [
  { name: 'Fred',    age: 40 },
  { name: 'Barney',  age: 36 },
  { name: 'Pebbles', age: 1  }
];

people.find( function (person) {
  return person.age < 40;
});
// { name: 'Barney', age: 36 }

people.find( function (person) {
  return person.age > 40;
});
// undefined

Array.prototype.find()

New Methods: Array

var people = [
  { name: 'Fred',    age: 40 },
  { name: 'Barney',  age: 36 },
  { name: 'Pebbles', age: 1  }
];

people.findIndex( function (person) {
  return person.age < 40;
});
// 1

people.findIndex( function (person) {
  return person.age > 40;
});
// -1

Array.prototype.findIndex()

New Methods: String

New Methods: String

var quote = 'To be, or not to be';

quote.includes('bee');    // false
quote.includes('be');     // true
quote.includes('be', 1);  // false

quote.includes('to');     // false
quote.includes('To');     // true

String.prototype.includes()

Compatibility/Support

SacJS Intro to ES6

By Thomas Hopkins

SacJS Intro to ES6

An Intro to ES6 for the Sacramento JavaScript Meetup

  • 723
Loading comments...

More from Thomas Hopkins