Learning the entire depths of ES6 can be daunting. Here’s 5 simple, but extremely useful, ES6 features to get started with today.
Note: Native browser support isn’t there yet, you’ll have to compile using something like Babel.
Constants and Block Scoped Variables
let essentially deprecating
var. Use these absolutely everywhere. Use
const for any constants (data that never changes) and
let for everything else.
Destructuring lets you pull properties off an object and create a variable for them all in one one line. You can even set default values and pull from nested objects! Here’s an example:
+’s to combine strings is old school. The new string interpolation syntax cleans things up a bunch!
Ever try storing formated HTML inside a string?
You can now create functions with an alternative syntax.
Besides saving a few characters arrow functions preserve the meaning of
this. There are situations where you’ll want
this to carry down a level, making arrow functions particularly useful.
If you’re initializing a property in which the key matches a variable, you can omit the
: 'value' part. Doesn’t seem like a big deal, but many times it allows you to bring things up to a single line.
Default Function Parameters
ES6 allows you to place default values right in the parameter parethesis. No more checking for undefined values inside the function.
Exports an Imports
ES6 allows you to export and import data from seperate files!
When combined with Webpack you can import from node modules.