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

ES6 added const and let essentially deprecating var. Use these absolutely everywhere. Use const for any constants (data that never changes) and let for everything else.

const name = 'Robby'
let age = 27


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:

let robby = {
    name: 'Robby',
    age: 27,
    car: {
        make: 'kia',
        model: 'forte'

let { name, age, hair = 'brown', car: { make } } = robby

console.log(name, age, hair, make)
// -> Robby 27 brown kia

String Interpolation

Using +’s to combine strings is old school. The new string interpolation syntax cleans things up a bunch!

const BASE_URL = `https://devbanana.com`
const POST_URL = `${BASE_URL}/posts/new`
let age = `I'm currently ${20 + 7} years old!`

Ever try storing formated HTML inside a string?

const post = {
    title: '7 simple ES6 features',
    url: '/posts/7-simple-es6-features/',
    image: '/assets/es6/featured.jpg'

const postHTML = `
<div class="post">
    <img src="${post.image}">
    <a href="${post.url}">Read</a>

Arrow Functions

You can now create functions with an alternative syntax.

// Zero parameters
() => { console.log('hello')}

// One parameter
text => { console.log(text) }
(text) => { console.log(text) }

// Multiple parameters
(one, two) => { console.log(one, two) }

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.

let a = {
    name: 'Robby',
    delayedPrint: function() {
        setTimeout(() => {
        }, 1000)    
    delayedPrint2: function() {
        setTimeout(function() {
        }, 1000)    

a.delayedPrint() // -> 'Robby'
a.delayedPrint2() // => ''

Property Shorthand

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.

let name = 'robby'
let age = 27
let eyes = 'brown'
let weight = 165
let hair = 'brown'

let robby = {name, age, eyes, hair, weight}

Default Function Parameters

ES6 allows you to place default values right in the parameter parethesis. No more checking for undefined values inside the function.

function sayName(name = robby) {

sayName() // -> 'Robby'
sayName('Jeff') // -> 'Jeff'

Exports an Imports

ES6 allows you to export and import data from seperate files!

// helpers.js
export const srcHelper = filename => {
    return `https://devbanana.com/images/${filename}`

// index.js
import { srcHelper } from './helpers.js'

srcHelper('a.jpg') // ->  https://devbanana.com/images/a.jpg

When combined with Webpack you can import from node modules.

import $ from 'jquery'

if ($('body').length) {
    console.log('jQuery Imported!')