JavaScript

EcmaScript

• tc39
  • ecma262 (Javascript Spec)
  • Proposals

1. ES5
2. ES6
   • Symbols
   • for ... of loops
   • Template Literals
   • ES6 Modules
   • Native Promises
   • Generators
   • Rest & Spread Operators
   • Destructuring
3. ES7
   • Array.prototype.includes
   • Exponentiation Operator
4. ES8
   • Async & Await
   • Shared array buffers (Shared Memory)
   • Atomics
   • String Type Additions
   • Object.values and Object.entries
   • Trailing Commas

Handy stuff

• console.table()

• closures - A closure is a function having access to the parent scope, even after the parent function has closed.

Pre-ES6 Classes

var Greeter = (function () {
  function Greeter(message) {
    this.greeting = message;
  }

  // Method definition
  Greeter.prototype.greet = function () {
    return "Hello, " + this.greeting;
  };

  return Greeter;
}());

var greeter = new Greeter("world");

var button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function () {
  alert(greeter.greet());
};
document.body.appendChild(button);

ES2015 Modules

Workflow:

Write ES6 modules --> Transpile (Babel) --> (AMD or CommonJS) --> module loader (RequireJS or SystemJS)

Exporting:

• add export in front of the definition
• add export default in front of the definition to assign a Default Export

or

• add all exports to an export { } function at the bottom of the file
• add as to an export statement to alias an export

Importing:

• import an entire module with *. import * as somevar from './path/to/file.js'
• import { } from './file.js'
• add as to an import statement to create an alias for the import. (helpful for adding context)

Examples:

Named Exports

var theFunq = function(){
    // funky function
}

var yoThing = 'Some String';

export { theFunq as daFunk, yoThing }

Default Exports

export default function addResult(newResult){
    return newResult + 1;
}

function somePrivateFunction() {
    // not part of the API
}

export var theFunq = function(){
    // funky function
}

Bulk Import

import * as someVar from './path/to/file.js';

someVar.theFunq();

Named Imports

import { daFunk as funq, yoThing } from './path/to/file.js';

funq(myThang);

Default Imports

import addResult, { theFunq } from './path/to/file.js';

Babel

```bash $ npm install babel-cli --save-dev $ npm install babel-preset-es2015 --save-dev

$ ./node_modules/.bin/babel js --presets es2015 --out-dir build

this will create the build folder