This document summarizes new features introduced in ES6 JavaScript, including classes, arrow functions, template strings, destructuring, modules, promises, and more. Key points covered are: - Classes introduce a new syntax for defining constructor functions and methods. - Arrow functions provide a concise syntax for writing anonymous functions, binding 'this' lexically instead of by how they are called. - Template strings allow for easy string interpolation and multiline strings using backticks. - Destructuring makes it easier to extract values from arrays and objects. - Modules allow code and assets to be bundled and shared between scripts through import and export statements. - Promises provide a cleaner way to handle

1. ES6 JavaScript
Rob Lund

2. Classes
class Panel {
constructor() {
// make the thing
}
addItem(toAdd) {
// add the item
}
}

3. Arrow Functions
arrayOfSomeStuff.filter(item => item < 20)
toggle.addEventListener('click', (evt) => {
// toggle the toggle
})

4. this
class Layer {
this.url = 'http://onxmaps.com/'
..
pages.forEach(function(page) {
console.log(this.url + page)
}.bind(this))
}
class Layer {
this.url = 'http://onxmaps.com/'
..
pages.forEach((page) => {
console.log(this.url + page)
})
}

5. Objects
var preferences = {
fontSize: 16,
// shorthand for theme: theme
theme
}
* there are a couple other object literal changes that have
varying levels of support and usefulness.

6. Template Strings
`using the backticks`
`now supports
multiline
strings`
`added ${adjective} support for interpolation`

7. Destructuring
var [name, type] = ['rob', 'shoe']
var {label, activity} = getActivity()
var [title, , link] = ['señor', 'rob', 'http://...']
function findAccount({name: customerName}) {
console.log(customerName)
}

8. Parameter Handling
// defaults
function getBook(title, version = 1) { .. }
// rest or splat operator
function addShoes(color, ...attributes) {
// attributes is an array containing parameters 2+
attributes.forEach(..)
}
// spread operator
function removeItem(name, type, element) { .. }
removeItem(...['walrus', 'shoe', panelElement])
// spread can also be used in other areas, like
// array or object literals (eg. simple concat)
var allLayers = [layer1, layer2, ...everythingElse]

9. const & let
// block-scoped read only values
const name = 'walrus'
// block-scoped variable values
let uri = '/account/'
Do not become part of the window object like var

10. for..of loops
for (const item of pileOfItems) {
console.log(item)
}
The problem with the old for..in loops:
• Did weird things with objects (nested properties)
• Did weird things with arrays (out of order)
New for..of loops:
• Flat out don't work with objects (stop iterating over object
properties you animal)
• Works great with arrays
* caveat: for..of works with iterable collections like NodeList, but
IE/Edge still has a rough time with this.

11. Modules
export function addItem(toAdd) { .. }
export const scale = 12
export class Layer { .. }
..
import { addItem, scale, Layer } from 'lib/layer'
// import everything with *
import * as layerLib from 'lib/layer'
console.log(layerLib.scale)
// default export
export default class Layer { .. }
..
import LayerHelper from 'lib/layer'

12. Promises
fetch(this.environment.apiUrl + '/v1/preferences', options)
.then(checkStatus)
.then(parseJson)
.then((response) => {
// do something with our parsed response object
})
.catch((error) => {
// handle your error
})
Writing your asynchronous code in a synchronous fashion

13. Other
• Map, Set data structures
• New helpful Math APIs
• Unicode variables and matching
• Generators

14. Thanks.
(Happy Valentine's Day)