es2015.md

ES2015

Getting and Using Babel

• Installation:
  • CLI: $ npm install -g babel-cli
  • Require: $ npm install -g babel-core
  • Browser: <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
  • Gulp: $ npm install --save-dev gulp-babel
• Usage
  • CLI: $ babel script.js or $ babel script.js
  • Require: require('babel-core/register');
  • Browser: <script type='text/babel'></script>
  • Gulp:

const
  gulp  = require('gulp')
, babel = require('gulp-babel')

gulp.task('build', () => {
  return gulp.src('src/index.js')
  .pipe(babel())
  .pipe(gulp.dest('public'))
})

Default Parameters

const foo = (a = 1, b = 2) => {}

Template Literals

const
  name  = process.argv[2] || 'you'
, greet = `howdy, ${name}, it's ${new Date()}`
console.log(`howdy, ${greet}`)

Multi-line Strings

let someLongThing = `
  This is SO much cleaner
  than needing to concatenate strings
  or put in escaped newlines!`

Destructuring Assignment

let {x, y} = $('body').data() // we'll get those variables

let {json} = require('body-parser')

let {username, password} = req.body

let [col1, col2] = $('.column')
  , [line1, line2, line3, , line5] = file.split('\n')

Enhanced Object Literals

const
  appConf = {port : 3000, url : 'foo.bar'}
, getNums = () => [1,2,3]
, svc     = {
    __proto__ : appConf
  , getNums
  , toString() {
      return JSON.stringify((super.valueOf()))
    }
  , getUrl() {
      return `http://${this.url}:${this.port}`
  , [`valueOf_${getNums().join(' ')}`] : getNums()
}
console.log(svc)

Arrow Functions

$('.btn').click(event => {
  this.sendData()
})

const doub = x => x * 2 // implicit return statement
const addTwo = (a, b) => a + b

Promises

const waitASec = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000)
}).then(() => {
  console.log('foo')
})

waitASec().then(() => waitASec).then(() => console.log('woot'))

Modules

// foo-bar.js
const foo = () => ['foo', 'bar']
export default foo

// quux-baz.js
export const quux = 'quux'
export const baz = () => 'b' + 'a' + 'z'

// some-other-file.js
import foo as bar from './foo-bar'
import {quux, baz} from './quux-baz'

// some-other-other-file.js
import * as qb from './quux-baz'
console.log(qb.quux) // 'quux'

More

• Classes
• Const and Let (and block-scoping)
• Generators
• Symbols
• Default rest spread
• New methods for Math, Number, String, Array, Object
• Binary and octal number types
• for of
• Map and Set
• Tail call optimization