Building with ES6

Our Goal...

Efficiency!

ES6 Features we care about:

  • Reduce Boilerplate
  • Increase Readability
  • Increase Predictability

5 Features to Cover:

  • Using let or const instead of var

  • Arrow Functions for Callbacks
  • Shorthand Properties
  • Destructuring Assignments
  • Spread Operator

Using let or const

  • var lives in a function scope
  • let is a block scoped variable
  • const is a read-only block scope variable

Demo: http://bit.ly/1LqNJ2F

Using Arrow Functions

  • Functions make educated guesses on context
  • Arrow Functions enforce lexical this
  • Good for callbacks in object methods

Demo: http://bit.ly/1S4pTt0

Shorthand Properties

  • Reduce code footprint
  • Increase Readability
  • (Sort of) the opposite of object destructuring
  • undefined variables will be undefined props

Demo: http://bit.ly/1TOwUkP

Destructuring Assignments

  • Again, reduce code footprint, increase readability
  • Works for arrays and objects
  • undefined props are undefined variables

Demo: http://bit.ly/1popveZ

The Spread Operator

  • Access function arguments as an array
  • Great for optional args
  • Protip: Also converts array-like objects

Demo: http://bit.ly/1QYgYc8

Bonus!!

ES6 Imports

  • Can import entire modules, functions, etc.
  • Aliases are allowed
  • Can export entire modules, functions, etc.
  • Export "default" modules - one per script

More to Learn!

Questions?

Made with Slides.com