Clearly ES6 is a huge improvement over ES5, and tools like 6to5 allow us to use these cool features now. I was reading Replace CoffeeScript with ES6 by Blake Williams and thought it was a great summary of how ES6 solves many of the same problems that CoffeeScript solves; however I'd like to comment on a few of Blake's points.
Classes in ES6 (like many features in ES6) are very similar to the CoffeeScript equivalent. To support browsers that are not fully ES5 compliant (e.g. IE8-), however, we still can't really use getters/setters, so ignoring these the comparison is:
class Person
constructor: (@firstName, @lastName) ->
name: ->
"#{@firstName} #{@lastName}"
setName: (name) ->
[@firstName, @lastName] = name.split " "
@defaultName: ->
"Unidentified Person"
blake = new Person "Blake", "Williams"
blake.setName("Blake Anderson")
console.log blake.name()vs
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
name() {
return `${this.firstName} ${this.lastName}`;
}
setName(name) {
[this.firstName, this.lastName] = name.split(" ");
}
static defaultName() {
return "Unidentified Person"
}
}
var blake = new Person("Blake", "Williams");
blake.setName("Blake Anderson");
console.log(blake.name());I definitely like the way this is headed - no need for commas, no need to write function all over the place; but I'm in the "write less code" camp, so I prefer the former. However this is really a matter of taste so if you're happy with typing this. instead of @ and adding in all the extra curly brackets it definitely backs up Blake's statement that ES6 is a viable alternative.
That said, I much prefer CoffeeScript's implementation of super, though I can see why ES6 went the way they did allowing you to call a different method on the object's super.
Clearly ES6's and CoffeeScript's string interpolations are very similar; CoffeeScript interpolates for normal "strings", whereas ES6 uses `backtick escaped strings` (which are annoying to write in Markdown, by the way). CoffeeScript uses #{var} whereas ES6 uses ${var}. All much of a muchness at this point.
Where the difference really stands out is in the handling of whitespace - ES6 (or at least the 6to5 tool) includes all the whitespace between the `'s (including newlines and indentation), whereas CoffeeScript either joins with a single space in the case of simple " strings or preserves all whitespace accounting for indentation level in the case of """ strings. To my mind both of these behaviours are desirable, whereas ES6's is not, take for example:
(function() {
function foo(bar, val) {
if (bar) {
var str = `This is quite a long first line
so I wrap it to a second line and then
append the value ${val}`;
}
}
})();The output from passing this through 6to5's REPL is:
var str = "This is quite a long first line\n so I wrap it to a second line and then\n append the value " + val;CoffeeScript equivalents:
do ->
foo = (bar, val) ->
if bar
str = "This is quite a long first line
so I wrap it to a second line and then
append the value #{val}";
str2 =
"""
This is quite a long first line
so I wrap it to a second line and then
append the value #{val}
"""produce
var str = "This is quite a long first line so I wrap it to a second line and then append the value " + val;
var str2 = "This is quite a long first line\nso I wrap it to a second line and then\nappend the value " + val;I can't think of a situation where I'd prefer 6to5's implementation.
Brilliant additions to the JS syntax, these behave the same as CoffeeScript's but with ever-so-slightly different syntax rules.
Another brilliant addition, but I find splats can be quite powerful in the middle of an argument list, particularly in Node.js-style callback situations so that the callback is automatically popped off the end. For example:
# Splat dereferencing
names = ["Alice", "Belinda", "Catherine", "Davina", "Emma", "Francine", "Georgia", "Harriet", "Iglesias"]
[firstName, middleNames..., lastName] = names
# Splat function args preserving callback
foo = (fn, args..., callback) ->
results = (fn arg for arg in args)
process.nextTick ->
callback null, results
double = (a) -> a * 2
foo double, 80, 60, 40, (err, results) ->
console.log resultsSadly ES6 only allows splats at the end, requiring you to then manually pop() the callback (or lastName), making your code longer and more challenging to understand.
I must say I do like that ES6 lets you leave true blanks when doing var [first, , last] = [1, 2, 3] but using an underscore or similar is a one character workaround.
ES6 does object de/structuring pretty much the same as CoffeeScript (var {a, b} = {a: 1, c:3}, var {foo: a, bar: b} = {foo: 1, baz: 3} and var c = {a, b}) however there's a slight circumstance where CoffeeScript does it better: when referencing properties off of the current object, e.g. c = {@a, @b} (var c = {a: this.a, b: this.b}).
It wouldn't be fair to try and paint CoffeeScript as a perfect language - it certainly is not without its faults. Here's a list of features from ES6 (and even ES3) that I really miss in CoffeeScript.
- The ternary operator
a ? b : c(if a then b else cis too verbose for my taste) - Computed (dynamic) property names,
{[getKey()]: getValue()}(see the links in this StackOverflow answer for some interesting history) - Generators (coming very soon)
This is a great document. Thanks for the comparison rundown!