#es7

Destructuring assignments allow you to quickly unpack values from data structures like arrays and put them directly into variables or constants. For example:

const [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1 2 3

Variables or constants can be on both sides of the assignment, so it can be used to swap values without using temporary variables:

let d = 1, e = 2; [d, e] = [e, d]; console.log(d, e); // 2 1

This tends to be useful when iterating over arrays of objects:

const cars = [ { id: 'miata', value1: 155, value2: 2400 }, { id: '4c', value1: 237, value2: 2465 }, { id: 'elice', value1: 217, value2: 2000 } ]; function swapProperties(arr, property1, property2) { for (const ele of arr) { [ele[property1], ele[property2]] = [ele[property2], ele[property1]] } return arr; } console.log(swapProperties(cars, 'value1', 'value2')); // [ { id: 'miata', value1: 2400, value2: 155 }, // { id: '4c', value1: 2465, value2: 237 }, // { id: 'elice', value1: 2000, value2: 217 } ]

I just found and improved a PhaserJS boilerplate that uses ES2016/ES2015 (ES7/ES6) with Webpack to create a nice JavaScript game development codebase! Webpack takes all code and assets for your game (including images under 25kb!) and shoves it all into a single “game.bundle.js” file that gets loaded! It’s pretty awesome.

You can fork/download and use my boilerplate for your own games if you’d like! If you don’t know anything about ES2015 (ES6) or ES2016 (ES7), check out this little guide I like: ES6 for Humans

PS: If you’ve ever worked with Phaser and Webpack before, you know that it’s crazy hard to figure out how to get it working at all. If you want to hook it up yourself, check out how I did it in my boilerplate here. Doing it this way allows you to set it and forget it, not needing to require or import any Phaser files into your code! Much nicer than what I had to do before.

Usually, I don't blog about very new features that will (probably) be coming to JavaScript. But this feature has the potential to add a lot to JavaScript. Firstly, ES6 has a spread operator, but only for arrays and function calls. This is for object properties. It inserts all of an objects non-inherited properties in an object literal:

const objectA = { name: 'A' }; const objectB = { ...objectA }; console.log(objectB); // { name: 'A' } const objectC = { ...objectA, property1: 'value1' }; console.log(objectC); // { name: 'A', property1: 'value1' }

One of the simplist uses is to clean up the Object.assign syntax when you don't want to modify the original object. Object.assign allows you to copy one set of an object non-inherited properties to another:

const defaultPermissions = { name: 'A Person', isAdmin: false, canCreate: false, canDelete: false, }; const nonAdminUser = Object.assign({}, defaultPermissions, { canCreate: true, canDelete: true }); console.log(nonAdminUser); // { name: 'A Person', // isAdmin: false, // canCreate: true, // canDelete: true }

The problem is that forgetting to include {} will result in accidentally modifying the original object causing nasty consequences later (and its hard to notice). Instead spread properties can be used:

const nonAdminUser = { ...defaultPermissions, canCreate: true, canDelete: true }; console.info(nonAdminUser); // { name: 'A Person', // isAdmin: false, // canCreate: true, // canDelete: true }

Two objects can be directly merged if the overriding properties also come from a previous object too:

const nonAdminPermissions = { canCreate: true, canDelete: true }; const nonAdminUser3 = { ...defaultPermissions, ...nonAdminPermissions };

This feature already works in Node 8+ which is a stable long term support version. And is already a stage 3 feature which makes it likely that it will be accepted, so it is very likely to become a language feature. It just may take along time to see it in most browsers and other JS environments.