JavaScript is one of the most used programing languages on the web. With JavaScript, we can create animation, manipulate the DOM, and even build large scale single page web applications with popular frameworks such as Angular JS. With that said I thought it would be a good idea to highlight some of the new features in ECMAScript 6.
For those of you that don’t know, ECMAScript 6 is the newest version of JavaScript. You do not need to download any software to get all the benefits however you do need to make sure your browser is compatible. If you are unsure take a look at the following chart: https://kangax.github.io/compat-table/es6/
Let
Let gives us a new way to define a variable. let is only accessible within its current block where var is accessible within the current function, or globally if defined as. This is helpful when reusing variables such as I, x, y, etc.
Example
for(let I = 0; I < array.length; i++){
console.log(i); // 0
}
console.log(i); // undefined
Default Parameter Values
For those of you familiar with other programing languages such as PHP you’ll find this one handy. Up until ECMAScript 6 you could not define functions default parameters. You would be required to check if the variable is undefined and if so set it to your default.
Example
Function myFunction(x = 1, y = 1){
return x+y;
}
// The Old Way
Function myFunction(x , y){
if(x === undefined){ x = 1 }
if(y === undefined){ x = 1 }
return x+y;
}
Speed Operator
Speed operators essentially allow you to quickly concatenate strings and arrays without needing to uses concat().
Example
var array1 = [‘Item 1’, ‘item 2’];
var array2 = [‘item 3’, array1]; // [‘item 3’,’item 1’,’item 2’];
// The Old Way
var array1 = [‘Item 1’, ‘item 2’];
var array2 = [‘item 3’].concat(array1);
Classes
This has to be one of the most exciting additions to ECMAScript 6. Traditionally JavaScript is not an object oriented language. With the addition of Classes you can start taking advantage of OOP within your JavaScript application.
Example
Class Shape{
move(x,y){
this.x = x;
this.y = y;
}
}
I have just gone over a few of my favorite features, however, there are many more. For a full list please check out: http://es6-features.org/