ES6: What the hell happened to Javascript?

Nordnet Academy

Javascript

  • Created in 10 days (May 1995)
    • Brendan Eich
  • ECMA for standartisation
  • ECMAScript 3 in 1998
  • Browser wars

Dumb language to make something blink on the web page..

Javascript

Javascript

Javascript

Javascript, Javascript everywhere..

  • Rapid community growth
  • Tools, IDE support, debuggers
  • Frameworks and SPAs

Javascript

  • ECMAScript 6, June 2015
  • Lots of new language features

ECMAScript 6

ES6

  • Constants
  • Block-scoping
    • variables/functions
  • Arrow functions
  • Extended parameter handling
  • Template strings
  • Enhanced object literals
  • New built-in methods
  • Map/Set & WeakMap/WeakSet
  • Typed arrays
  • Destructuring assignment
  • Modules
  • Classes
  • Promises
  • Generators
  • Iterators
  • Symbol type
  • Extended literals
  • Enhanced regular expressions
  • Meta-programming

ES6 support

ES6 Features

Before we begin..

Let + Const

  • Block-scoped binding
  • let is the new var
  • const is single assignment only

Arrow functions

  • Function shorthand using => syntax
  • Statement block body
    • a => { return a + 1; }
  • Expression block body
    • a => a - 1
  • Share same lexical this as surrounding code

Classes

  • Syntactic sugar
  • Easier to use (?)
  • Prototype-based inheritance
  • super()
  • Instance and static methods
  • Constructor

Enhanced object literals

  • Prototype at construction
  • Shorthand assignments
  • Methods and super() calls
  • Computed property names

Template strings

  • Syntactic sugar
  • Basic literal strings
  • Multiline strings
  • String interpolation

Destructuring

  • Binding variables
  • Supports arrays and objects
  • Fail-soft - undefined if fails

Default + Rest + Spread

  • Default parameter value
  • Array to consecutive arguments
  • Trailing parameters to array

Modules

  • Language level support

Promises

  • Async programming
  • Language level support

New built-in methods

  • Object.assign
  • String.startsWith/endsWith
  • String.includes/repeat
  • Array.find/findIndex
  • Array.keys/values/entries

Questions?

Made with Slides.com