Before we start

ES6 Compatability Table

Gives a complete overview of where the API's are currently in browser implementation

Practicing

There is a REPL that will allow you to practice with the code that we are discussing. It is important that you start to practice writing the new syntax.

The Good Ol Days

Google homepage in 1998

Quick History Trip

The evolution of JavaScript

• Sun wanted Java put into Netscape browser in 1994
• Brendan Eich and Netscape decide that Java is not the future of the web
• Created Mocha in 10 days by Brendan Eich working for Netscape
• During the beta period, it was called LiveScript
• Sun officially released the naming rights to Netscape to use the name "Java"

• Netscape had server platform called LiveWire
• Mocha was going to be for those who were learning programming for the first time

• In 1996, Microsoft and Netscape argue and Netscape changes API
• To help Netscape, JavaScript was standardized by Ecma
• In 1999 Ecmascript 3 was released.
• There has not been an official release since 1999. Why?
• In 2006 there was hope as Mozilla Firefox was put on the market

• European Computer Manufacturer Assoc.
• Ecmascript is a language spec
• JavaScript implements the spec/api
• A technical committee was created to steer the API's
• Why? Microsoft monopolized the internet and IE was king

Why the gap?

• In 2006 there was talk of ES4 but with a bunch of different goals
• Companies could not agree on the changes from ES3.1 to 4. ES3.1 won
• In 2008, ES3.1 was changed to ES5 for marketing reasons
• At that time, they decided all features would go into a master list - called Harmony
• In 2011, ES5.1 was approved. Now the TC39 is finalizing ES6 and starting ES7
• You can read about the ECMAScript archives at https://esdiscuss.org/

• Harmony had features that went all the way back to 1996
• Any time a feature was not anonymously approved, it went into Harmony
• The reasons for the clashes between 1999 and now are the reason Harmony is large

Let us begin ES6

Day 1

So long var

cont and let to replace var

Your code will execute at runtime just as it appears at development time

Does that happen now?

I Put It There

Using var, where you put your code has less to do with the way it executes

Quick example:

What happens with this code at compile time?

						function topLevel() {
  foo = "ES";
  innerLevel();

  function innerLevel() {
    bar = 6;
  }
}

topLevel();
						

Trap variables inside functions only - no block scope

						var topic = "ES5";

function workshop() {
  var topic = "ES6";
  console.log(topic);
}

workshop();
console.log(topic);
						

ES6 changes to add block scope

Don't touch my function

Some functions get hoisted also

						// function declaration
function foo() {
  // code
}

// function expression
var bar = function() {
  // code
}
						

Don't touch my function

Some functions get hoisted also

						var b = undefined;

// function declaration
function foo() {
  // code
}

// function expression
// variable assignment does not happen until
// the code gets here
bar = function() {
  // code
}
						

So now we have Let

Basic form

						var topic = "Agilex";
if (true) {
  let workshop = "ES6";
}

console.log( topic + workshop );
						

AH! There is block scoping

SyntaxError :-)

Using var for same variable will return no errors

Using let you will receive a SyntaxError

Scoping Rules

var and let act similar except let has a scope of the block in which defined as well as any sub-blocks were they are not defined.

Scoping Rules

						function varTest() {
  var x= 31;
  if (true) {
    var x = 71; // same variable
    console.log(x); // 71
  }
  console.log(x); // 71
}
						

Scoping Rules

						function letTest() {
  let x = 31;
  if (true) {
    let x = 71; // different variable
    console.log(x); // 71
  }
  console.log(x); // 31
}
						

Enhanced Object Literals

Providing a declarative system of parts for defining object-based abstractions.

Object-based Abstractions

• Procedural code is needed to create abstraction patterns
• Programmer defined construction can be complex and hard to read
• Object initializers provide declarative object creation

Reference: ECMAScript Object Literals

Take for example:

                    var employee = {
  // shorthand for property:property
  position,
  
  // no function keyword needed
  code() {
    return 'I am coding';
  }
}
                    

We can now use Object.setPrototypeOf using enhanced object literal to link multiple objects via prototype chain.

                    var employee = {
  code() {
    return 'I am coding';
  }
};

var employer = {
  pay() {
    return 'I am paying you';
  }
};

Object.setPrototypeOf(employer, employee);

employer.code();
                    

Day 1 Done

Question and Answer time

Day 2

• Arrows
• Modules and module loaders
• Template strings
• Default/rest/spread