Best new features in JavaScript ES6

I've been coding in JavaScript for quite a while. In fact, I can remember when JavaScript was used for such cool functionality as a replacement image when you hover over a button for example. It was pretty cool interactivity for 1998, but it wasn't until libraries such as jQuery came along in the 2000s that JavaScript really took off. Around this time AJAX was a big deal too where you could do things like create a form where the user could fill it out, submit the form and receive a partial page update without being redirected to another page. Pretty cool stuff indeed!

Modern JavaScript is light years beyond what it was originally when invented by Brendan Eich in 1995. jQuery is still around but its popularity of jQuery has waned a bit and the cool kids on the block are now React Vue and Angular.

These frameworks utilize JavaScript ES6 or ECMAScript 6 was released in 2015. This was a big advancement in JavaScript making it easier to write JavaScript than ever before. Here are just a few ways I like the ES6 syntax.

Template Strings

It is much easier to output variables with template strings. Instead of needing to concatenate the JS variables with the plus sign you can now just use backticks(`) and ${myVar} and voila your variables are output. Here is an example comparing the two.


var name1 = "Beavis";
var name2 = "Butthead";
document.getElementById("Demo2").innerHTML ="My favorite t.v show is " + name1 + " and" + " " + name2;
document.getElementById("Demo1").innerHTML =`My favrorite t.v show is ${name1} and ${name2}`;


The first example is ES5 and the second example is ES6. I say ES6 for the win!

Arrow Functions

The arrow function provides a concise way of writing functions via the fat arrow function (=>) instead of typing out the work function. Here are examples.

The old way


function number(params) {
return params * 2
}
number(5); // 10


And now the ES6 version with fat arrow functions


var number = params => params * 2
number(5); // 10
console.log(number(5));


The second one (ES6) is easier to understand and write out. ES6 wins again!

Rest Operator

With Rest, you can bind the first few function parameters to variables, and others to single variables as an array. This is super cool! Here is a quick example.


function printHolidays(first, second, third, ...others) {
console.log(`My favorite holidays are ${first}, ${second} and ${third}. Other favorite holidays are are: ${others}`)
}
printHolidays('Christmas', 'Thanksgiving', 'Easter', 'Halloween', 'St. Patricks Day')


Array Mapping

The map() method creates a new array with the results of calling a function for every array element.

Example Here


var words = [
'My',
'name',
'is',
'Bruce',
'Gilbert'
];

var sentence = [];

var sentence = words.map(function(word){
return word.toUpperCase();
});

document.write( sentence.join(' ') );
console.log(sentence);
console.log(words);


These are just a few of ES6's powerful new features. There are plenty of others of course. A few really good references for learning all of the new ES6 features are:

• Top Ten ES6 features by example
• Top ten ES6 features every busy JavaScript Developer should know