This is JavaScript?


Sample ECMAScript 2015 code


I have a confession to make… I have never really been a fan of JavaScript. And that's really sad considering the latest language trends on GitHub. It's useful for certain, and I generally like the syntax and variety of functions available, but it is a real pain to write anything of decent complexity due to lack of features common in back-end languages like PHP.

Then, I came across ES6 In Depth by the Mozilla developer blog and I started to see how the language was becoming much easier to work with. I recommend you read any articles from that collection that are of interest to you, and perhaps even a few that aren't. This is a quick overview of what I really liked about ECMAScript 2015, but it is by no means as in depth as the articles by MDN.

Template Strings

Template strings are a great solution to the problem of complex concatenation in JavaScript. If you have spent more than an hour working in JavaScript, you'll have probably written something along the lines of:

alert('Hello, my name is ' + name);

That isn't too bad, but things can get ugly really fast when building up a string containing several variables.

Using template strings, you can accomplish the same thing using:

alert(`Hello, my name is ${name}`);

This is only slightly better in this simple example, but it makes a huge difference as things get more complicated.

Actual Classes!

JavaScript has had class-like things for a while now. The work just fine, but if you really think about it, the syntax and construction of them doesn't make much sense. They start of as a regular function, typically with a capitalized name, you then build up methods and properties in a prototype, and set a few properties using this.foo = 'bar';. Extending other classes is done though setting the prototype of one class to the prototype of another (using Object.create(OtherClass.prototype)) and then making a few alterations.

But now, JavaScript has the very useful class and extends keywords! And you define the methods within the same curly braces.

class Person extends Creature {
constructor(name) {
// Note, super calls the parent's constructor
super(name);
this.species = 'Human';
}
toString() {
return `Hello, my name is ${this.name}`;

}

Shorter, Simpler Anonymous Functions

Anonymous functions are one of the most important features of JavaScript, but they tend to make your code bloated with function function function. Arrow notation for functions makes things like filtering or mapping arrays much cleaner and easier. Instead of:

myArray.filter(function(number) {
return number > 5;
});

we can now use a cleaner and perhaps simpler syntax of:

myArray.filter(number => number > 5);
If you need to pass in multiple arguments, you must enclose them in parenthesis as in:
numbers.reduce((sum, num) => sum + num);
You can also write several lines of code, but doing so requires curly braces as we as a return statement (if necessary).

Lastly, it is important to note that this is treated differently when using anonymous arrow functions. You can think of them as implicitly being bound to the current this. The following are equivalent.
myArray.map(function(el) {
return this.method(el);
}.bind(this));

myArray.map(el => this.method(el));

Default Arguments

There really isn't too much to explain here. Functions can now easily declare default values for arguments. I think that I have found this to be the most useful feature because it saves so much work. No more checking for things like if (typeof arg === 'undefined').
function greet(name = 'Fred') {
alert(`Hello, ${name}`);
}

Rest and Spread Operators

As with most other new ES6 features, this one has been possible for a while now, but there were some techniques you needed to know as well as an odd decision that made them somewhat more difficult than they needed to be. You can now more easily set a function to take any number of arguments, and you can pass an array of arguments into a function.

For taking a variable number of arguments, we used to have to use the arguments keyword, which really could have (and maybe should have) been easier to work with since it isn't actually an array.

Again, the following are equivalent:
function log() {
var args = [];
for (var i = 0; i < arguments.length; i++) {
args.push(arguments[i]);
}
// ...
}

function log(...args) {
// ...
}
And, as an added bonus, the rest operator captures arguments from that argument on and stores them in an array, meaning it can be safely used with prior arguments.

The same operator can be used when calling functions, and it treats them as though they had been called with Function.apply.
var arr = [1, 2, 3];
log.apply(this, arr);
// Is the same as
log(...arr)

Now for the Bad News

Like nearly every new specification or set of features, I have to end this by saying that ECMAScript 2015 is not for use in production code. Browser implementation is very poor for the time being. To my knowledge, only Firefox Nightly supports everything that I've covered, and Chrome doesn't support any of the even with Enable Experimental… flags set. And, what's worse, these changes are to the syntax of JavaScript rather than new features, meaning polyfills and shims won't do any good.

But luckily, we have transpilers. I've been using Babel to convert my ES6 down into current JavaScript, and it's been working pretty well.

New features not covered in this post include: