Destructuring

Using ES6 today

Percentages show number of ES6 features supported.

Modern browsers

Edge 13 (84%)

Firefox 44 (74%)

Chrome 48 (65%)

Safari 9 (54%)

Compilers

Babel (71%)

Traceur (59%)

Polyfills

core-js (included with Babel)

es6-shim (17%)

Using ES6 today

Modern browsers

Object proxies

let/const

Symbols

Compilers

Destructuring

Default function parameters

Polyfills

Promises

new methods on Math, Array, etc

Destructuring arrays
[] = [];

var contact = [
  'http://www.deloitte.com',
  '550 Bourke Street, Melbourne',
  '+61 3 9671 7000'
];

// ES5
var url = contact[0],
  address = contact[1],
  phone = contact[2];
  
// ES6
var [url, address, phone] = contact;

Rest pattern

var contact = [
  'http://www.deloitte.com',
  '550 Bourke Street, Melbourne',
  '+61 3 9671 7000',
  'facebook.com/DeloitteAustralia',
  '@green_dot'
];
var [url, address, phone, ...rest] = contact;
console.log(rest);
// ['facebook.com/DeloitteAustralia', '@green_dot']

Swap two variables

var fruit = 'zucchini',
  vegetable = 'apple';
  
// ES5
var temp = fruit;
fruit = vegetable;
vegetable = temp;
delete temp;

// ES6
[fruit, vegetable] = [vegetable, fruit];

Nested arrays

// ES5
var ageGroups = [
  ['18-35', [20, 15]],
  ['35-50', [34, 30]],
  ['50-65', [26, 28]],
  ['65+', [20, 27]]
];
ageGroups.forEach(function(group) {
    var label = group[0],
      today = group[1][0],
      future = group[1][1];
    console.log(label, today, future);
});

Nested arrays

// ES6
var ageGroups = [
  ['18-35', [20, 15]],
  ['35-50', [34, 30]],
  ['50-65', [26, 28]],
  ['65+', [20, 27]]
];
ageGroups.forEach(function([label, [today, future]]) {
  console.log(`The ${label} age group makes up
  ${today}% today, and ${future}% in the future`);
});

Destructuring objects
{} = {};

Destructuring objects

var data = { fruit: 'apple', vegetable: 'zucchini' };
var { fruit, vegetable } = data;
var { fruit: f, vegetable: v } = data;

Default values

var data = { fruit: 'apple' };
var { fruit: f, vegetable: v = 'potato' } = data;
var {
  fruit: f,
  vegetable: v = 'potato'
} = data;

Destructuring in function parameters

var callServer = function({ url, method = 'GET' }) {
  console.log(`Make ${method} call to ${url}`);
};

callServer({ url: '/transactions' });

Nested objects

var drawCircle = function ({
  point: {
    x: pointX = 10,
    y: pointY = 10
  } = {},
  radius = 25
}) {
  console.log(pointX, pointY, radius);
};

drawCircle({
  point: { x: 20, y: 20 },
  radius: 35
});

drawCircle({
  point: { x: 20 },
  radius: 35
});

drawCircle({
  radius: 35
});

Babel in Middleman

https://github.com/vast/middleman-es6

Resources