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!

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

Guy L. Steele, Jr.

Mike Cowlishaw

Mike Cowlishaw

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

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()