What is ECMAScript? ECMAScript is the standards name for the language many of us know as JavaScript. To envision the relationship between the two, think of ECMAScript as the language, and JavaScript as the dialect. There are other dialects – including JScript, ActionScript, etc. – that are still around. These days, developers commonly use the terms “ECMAScript” and “JavaScript” to mean the same thing – and more and more I see developers referring to implementing ECMA, ES, or ECMAScript.
Version six of the ECMAScript standard – code-named “Harmony” – will include some very interesting features that bring the experience of implementing complex apps on the client side closer to the experience server side developers know and love. Although some of these features have been previously available using a combination of patterns and third party plugins – ECMAScript 6 aims to make many commonly used features available natively.
I’ll walk through a few of my highlights below, but keep in mind version 6 is a large release that has been a long time coming (five years since the last version’s publication) and has a ton of functionality and improvements that will be well worth exploring. So the features sites below should not be seen as any more or less important that other ES6 features. Also, it’s worth noting that not all browsers will support every feature right away, but it appears as if the development teams behind the major browsers are very motivated to support as much of the standard they can – as quickly as possible.
Promises
Promises are a representation of an object that will be available in the future. They are used in asynchronous JavaScript programming and are available today in many third party libraries, including JQuery, Angular, etc. ECMAScript 6 provides promises natively and can be used in a manner similar to the following:
var promiseExample = function() {
return new Promise(function(res, rej) {
setTimeout(res, 5000);
});
};
var showMeData = function() {console.log(‘Here is your response after a 5 second delay!’);
};
promiseExample().then(showMeData);
Test for yourself here: http://www.es6fiddle.net/i6jjq9za/
Classes
For those of you used to programming in C#, Java, or other OOP languages – classes are your foundational building blocks. To represent similar structures in JavaScript, to this point we’ve needed to rely on a pattern implementation (module, prototype, etc.) to implement class-like functionality. ECMAScript 6 provides classes available for use without the need to implement a separate pattern yourself. The actual implementation is simply syntactical sugar on top of a prototype-based pattern implementation – but removing the need to implement the pattern yourself is a nice win for developers:
class Vehicle {
constructor(make, model) {
this.name = ‘Vehicle’;
this.make = make;
this.model = model;
}
showInformation() {console.log(‘This ‘ + this.name + ‘ is a ‘, this.make + ‘ ‘ + this.model);
}
}
class Car extends Vehicle {
constructor(make, model) {
super(make, model);
this.name = ‘car’;
}
}
let c = new Car(‘Honda’, ‘Accord’);
c.showInformation();
Test for yourself here: http://www.es6fiddle.net/i6jkeca3/
Arrow functions
Again, a familiar (somewhat recent) concept in server side programming, arrow functions in JavaScript are shorthand used in function declaration. C# developers will recognize the syntax as lambda expressions. Example shown here taken from es6fiddle example directly:
let square = x => x * x;
let add = (a, b) => a + b;
let pi = () => 3.1415;
console.log(square(5));
console.log(add(3, 4));
console.log(pi());
Test for yourself here: http://www.es6fiddle.net/i6jkphzi/
Template Strings
Not an earth shattering change either, but I really appreciate this one. C# developers will again quickly recognize this approach for constructing strings – many developers find themselves doing frequently.
let car = {make: ‘Honda’, model: ‘Accord’};
let outputString = `This car is a ${car.make} ${car.model}.`;
console.log(outputString);
Test for yourself here: http://www.es6fiddle.net/i6jll829/
