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
- A Middleman (Sprockets) extension
- Uses official Ruby-Babel bridge
- Just change the extension of any applicable JS files to .js.es6