What the ES6?

What is ES6?

• ES6 is short for ECMA Script 6 (i.e. version 6 of spec).
   
• ECMA Script or ECMA-262 is one of 400+ public specs created by Ecma International (European Computer Manufacturers Association) since 1961.
   
• Other Ecma specs: FAT12/FAT16, C#, JSON, u3d files.
   
• ES1 standardise scripting behaviour between NS & IE.
   
• 'JavaScript' a mockbuster on Java hype by Netscape.

History of ECMA-262.

• Mocha (1993) → LiveScript (1995) → JavaScript (1995) → JScript (1996) → ECMA Script open spec (1997).
   
• v1 (1997) and v2 (1998) vision for unified script language.
   
• v3 (1999) adds regular expressions and other features.
   
• v4 (💀) never released.
   
• v5 (2009) and v5.1 (2015)  adds 'strict mode', JSON parsing, editorial changes and minor features.

ES6 is a huge deal!

• Development of ECMA-262 got very difficult/divisive.
   
• In 16 years only big features: 'JSON' and 'strict mode'
   
• ES4 was never released due to level of disagreement.
   
• With ES6 there's been break from previous approach.
   
• TC-39 (Technical Commitee 39) created Harmony, a new approach to managing ES development.

ES Harmony Approach.

• Focus on nearer-term smaller releases.
   
• Release a new iteration of the spec each year, therefore ES2015 for ES6.
   
• Proposals now have their own working groups with champions to make feedback more manageble.
   
• Created explicit feature progress indicators: sketch, proposal and standard.

Is there an ES7+?

• Yip, ES7 was released in 2016, and adds ** operator and Array.includes().
   
• ES8 (2017) adds async and await.
   
• ES9 (2018) adds new regular expressions and async iterators.
   
• You can follow the progress and propose features for ES10 via the dedicated ES10 page on TC39 website. 

Enter Transpilation

• Auto re-writes code to adhere to older iterations of ES.
   
• Either from newer ES specs or super-set languages.
   
• Previously not needed due to slow progress on ES.
   
• Core part of TC39 decision making. For example, the TC39 conclusion on the 'bind' feature was to:

Supporting older ES

• Babel or Google Traceur (Transpiles syntax only).
   
• Core JS or Babel Polyfill (Polyfills methods only).
   
• Webpack or Rollup (Transpiles module resolution only).
   
• Parcel (Module resolution, with Babel built-in).
   
• Some JS super-set languages like Typescript.

Key ES6 Changes

• 📜 Strings
• 💾 Variables
• ➡️ Functions
• 📦 Arrays and Objects
• 🎡 Loops
• 🐸 Classes
• 💍  Promises
• 🚚 Modules

📜 Strings

• New methods: startsWith, endsWidth, includes and repeat.
   
• For template literals uses back-ticks and not quotes.
   
• Allow embedded expressions via ${} syntax.
   
• Tags automatically assemble string into arguments.

💾 Variables

• Adds let and const in addition to existing var.
   
• Neither can not be re-declared.
   
• Scoped to functions and blocks (basically inside {}).
   
• Neither can be hoisted.
   
• const can not be re-assigned (can still be mutated).
   
• Preference depends on approach (OOP vs. functional).

➡️ Functions

• Shorter arrow syntax.
   
• Do not need parentheses if single parameter.
   
• Does not need curly brackets if single expression.
   
• Objects can be returned by encasing in parantheses.
   
• Does not have its own lexical this.
   
• Has no native arguments array.

📦 Arrays and Objects

• Property and method assignment shorthand.
   
• Object and array destructuring.
   
• Array and parameter rest operator. (Object rest ES7)
   
• Array from method for nodes list and arguments.
   
• Array find method useful when array of objects.

🎡 Loops

• ES5 For loop.
   
• For of loop for arrays.
   
• For in loop for objects.
   
• Caveats of using For in on objects.
   
• Generators.
   
• Custom iterator.

🐸 Classes

• Classes in ES5.
   
• Classes in ES6.
   
• Symbols.
   
• Methods: get, set, static and regular methods.

💍​ Promises

• ES5 callbacks (christmas tree of death).
   
• Promise pass function with 'resolve' and 'reject' params.
   
• Outside main flow, need '.catch' to handle errors.
   
• Chain promises: '.then' and resolve all: 'Promise.all()'
   
• Terminating promises.
   
• Using fetch for AJAX and assets.

🚚​ Modules

• Named imports and exports. (tree-shaking).
   
• Can use 'as' to rename named imports.
   
• Default imports and exports.
   
• Arrow methods only in ES7 (manually 'this.bind').
   
• '<scripts type="modules">' and '<scripts nomodules>'
   
• Other types of JS modules: CommonJS, AMD and UMD.

Download Example

1. Install NodeJS.
    
2. Download via browser or clone example via Git:
   
   
    
3. Open either 'es-modules' or 'parcel-transpilation' via terminal, command-line or Powershell.
    
4. Run 'npm install & npm start'.

Shoutout: Codebridge

• Weekly Community Evenings at Codebridge.
   
• Join #tech-for-good Slack channel on ZA Tech.

Get in touch

• Email: venterschalk@gmail.com
   
• Github: https://github.com/schalkventer
   
• Corrections and/or suggestions via Github: https://github.com/schalkventer/workshops-and-presentations
   
• Slack (ZA Tech, Code for Africa): @schalkventer