The Best of Javascript ES6 featured image

ECMAScript 6 is also known as ES6 and ECMAScript 2015. Some people call it JavaScript 6.

Javascript ES6 has made some nice changes which make Javascript a lot easier to use. One of the common questions is it safe to use. A quick answer is yes it’s safe. If you take a look at this web page. It shows current browsers and what features they support from ES6. If you’re a node.js developer you can use ES6 if your node version is greater than 6.4.  If your unlucky & have to support older browsers (we’re looking at you IE11), you can still use ES6 by using a compiler such as Babel. Babel converts your ES6 to ES5 so you can still code with ES6 without worrying.

Now we’re safe whats the best features of ES6

Javascript Let & Constant Variables 

The let statement allows you to declare a variable with block scope.

var item = 10;
{ 
  let item = 2;
}

The const statement allows you to declare a constant. Constants are similar to let variables, except that the value cannot be changed.

var item = 10;
{
  const item = 2;
}

You can read more about Let & Const on our Var vs Const vs Let blog post.

Arrow Methods

Arrow methods allows you to write shorter syntax for method expressions. You don’t need the function, return keywords & the curly brackets.

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;

Using Const is the safer than using var, because a function expression is the best constant value. You can only omit the return keyword and the curly brackets if the function is a single statement.

Classes

This is one of the biggest changes. Instead needed to use prototype inheritance we can now use the keyword class, and the properties is assigned a constructor method. The constructor method is called each time the class object is initialised.

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
mycar = new Car("Ford");

String Interpolations

This is common feature in other languages. This basically lets you insert variables directly into a string. In ES5 you would need to realy on ugly concatenation to get the same result.

// ES5
console.log('Hello ' + name + ', today is ' + today

// ES6
console.log(`Hello ${name}, today is ${today}`);

Destructuring Arrays

Less extreme as it sounds. It just a shorthand way to get values out of arrays or objects.  In ES5, you’d have to write out the array or object name each time you wanted to create a new variable.

// ES5
var randomData = {a: 12, b: false, c: 'blue'};
var a = randomData.a;
var c = randomData.c;

// ES6
var randomData = {a: 12, b: false, c: 'blue'};
var {a, c} = randomData;

New Array Methods

For Each

No longer do you us have to declare for key word with the ugly var iteration count. The new method iterates over array of object and passes the values to another method.

var numbers = [1, 2, 3, 4, 5];
function timesTwo(number){
  console.log(number * 2);
}
numbers.forEach(timesTwo);

Map

This allows you to peform an action to each array value & place those values into an new array.

var numbers = [1, 2, 3, 4, 5];
function timesTwo(number){
  return number * 2;
}
var doubleNumbers = numbers.map(timesTwo);
console.log(doubleNumbers);

Filter

The filter method iterates of values in an array to check if it meets a condition and if true adds it to a news into a new array without effecting the original.

var numbers = [1, 2, 3, 4, 5];
function isOdd(number){
  if(number % 2){
    return number;
  }
}
var oddNumbers = numbers.filter(isOdd);
console.log(oddNumbers);

Thats just a few

I’ve only touched a few of the new features that I found most useful when trying to implement more of ES6 into my development workflow. There are more features to check out. Visit es6-features.org for a more complete list and a few examples. You can get to grips with them in no time & make your next Javascript project a bit easier.