7 ES6 features that will make you more productive

By now ES6 (aka ES2015) should be no surprise to you, but you might have been set back by the need to setup new tools in your project to enable the new JS syntax.
I won't lie to you, as we need old browsers to work with ES5, we need some sort of "transpilers" (source-to-source compilers) before we can even start working.
This post will hopefully make you switch to ES6 by showing you 7 features that will shave off precious minutes of work.

Code samples in this post are deliberately easy, so you can either run them in your Node (4+) terminal or online with tools like Babel's REPL.

Comments like this will resemble your Terminal's output:

// > "Hello ES6"

Without further ado, let's start with some of the basic struggles: strings concatenation/composition.
Unless you're Skynet, you might want to talk to Humans, and they still like strings much.

Template Literals

As soon as you find the backtick: ` on your keyboard you'll be ready to go with the new ES6 Template Literals.
That's a long word for: string interpolation/string templates.

Let's see how easy they are:

const lucky = 42;

console.log(`Your "lucky" number is ${lucky}`);

// > Your "lucky" number is 42

But wait, they will allow for simple multi-line strings too!

const lucky = 42;

console.log(`  
  Your "lucky" number is
  ${lucky}
`);

// > Your "lucky" number is
// > 42

String templates syntax will accept any JS expression (${expression}).

function getLucky() {  
  return 42
}

console.log(`  
  Your "lucky" number is
  ${getLucky()}
`);

// > Your "lucky" number is
// > 42

Strings are something common, and they still come with issues, but let's focus now on two of the hardest concepts in JS: scopes and this.

Let and Const

let should be your syntax of choice instead of var, when declaring new variables, but make sure you understand how they differ or you might end up having side effects.

// Outer block-scope
let lucky = 24;

if (lucky !== 42) {  
// Inner block-scope
  let lucky = 42;
  console.log(`no way, it's definitely ${lucky}`);
}

console.log(lucky);

// > no way, it's definitely 42
// > 24

On the other hand const will give you some helpers when working with constant references.

const lucky = 42;

lucky = 24;

// > TypeError: Identifier 'lucky' has already been declared

Please mind, const does not refer to "constants", it just mean that the reference (to right-hand side object) will stay the same (to avoid accidental reassignments).

const lucky = {  
  'number': 42
}

lucky.number = 24;

console.log(lucky.number);

// > 24

Arrow Functions

One of the main selling points for arrow functions is its concice syntax.

// Shortest form has one parameter and returns implicitly 
console.log([21].map(n => n * 2));

// > [42]

If you ever stumbled upon var self = this or implicit .bind(this) then you might consider that this inside of Arrow Functions has the same this context as in the parent scope.

Spread Operator (...)

The new ... operator will expand Arrays in multiple parameters.

console.log(  
  Math.max( ...[21, 2, 2 * 21] )
);

// > 42

Default parameters

Long gone are the undefined checks or bang-bang !! operators. Meet the Default parameters:

function getLucky(x=2, y=21) {  
  return x * y;
}
console.log( getLucky() );

// > 42

Destructuring Assignment

So you have a bunch of values that you want to move from one Object literal to another. Would you go back after looking at the Destructuring Assignment?

var { lucky, number } = { lucky: 42, number: 42, fake: 24 };

console.log(lucky, number);

// > 42, 42

Enhanced Object Literals

A shorthand assignment is introduced to Object Literals, as well as computed properties.

const number = 42;

function getLucky() {  
  return number;
}

let lucky = {  
  number,
  getLucky,
  ['forty' + 'two']: number
}

console.log(lucky.number, lucky.getLucky(), lucky.fortytwo);

// > 42 42 42

ES6 is breathing new life into JS, and it's definetily worth checking.
Combined with the right tools, you'll find it time-saving.

Useful References