Change CoffeeScript to ES6

I hasten to suggest that you have heard about ES6 and may have managed to try it. Then you probably will find an interesting article about some features of the specification, published by Blake Williams in the Thoughtbots blog. I, with the permission of the author, publish the translation.

Recently, I looked towards the ES6 specification, this is the next version of JavaScript, and finally I had the opportunity to use it in a project. In a short time of use, I realized that it solves many problems that CoffeeScript is trying to solve, but without radical changes in the syntax.

ES6 today

You can start writing on ES6 right now using the translator in ES5 6to5 . 6to5 supports quite a lot of build tools, including Broccoli, Grunt, Gulp, and Sprockets. Everything worked fine for me with sprockets-es6 , and 4.x Sprockets will support 6to5 out of the box. You can also try ES6 directly in the browser in the 6to5 REPL .


')

Classes

In ES6, as in Coffee, there is support for classes. Let's compare the same class written on Coffee and on ES6.

CoffeeScript gives us such advantages as setting instance variables from parameters, interpolating strings and calling functions without brackets:

 class Person constructor: (@firstName, @lastName) -> name: -> "#{@first_name} #{@last_name}" setName: (name) -> names = name.split " " @firstName = names[0] @lastName = names[1] blake = new Person "Blake", "Williams" blake.setName("Blake Anderson") console.log blake.name() 

In ES6 classes, you can define setters and getters:

 class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } get name() { return this.firstName + " " + this.lastName; } set name(name) { var names = name.split(" "); this.firstName = names[0]; this.lastName = names[1]; } } var blake = new Person("Blake", "Williams"); blake.name = "Blake Anderson" console.log(blake.name); 

If you used libraries or frameworks complementing JavaScript classes, you have already noticed that the syntax of ES6 has slight differences:

• No semicolon at the end of a function definition
• No function keyword
• No commas after each definition

Plus setters and getters that allow you to use the name function as an attribute.

Interpolation

I always wanted more powerful syntax of strings in javascript. By the way, ES6 provides so-called string patterns . Compare the Coffee and JS lines with the ES6 line templates.

CoffeScript:

 "CoffeeScript allows multi-line strings with interpolation like 1 + 1 = #{1 + 1} " 

Javascript:

 "JavaScript strings can only span a single line " + "and interpolation isn't possible" 

ES6:

 `Template strings allow strings to span multiple lines and allow interpolation like 1 + 1 = ${1 + 1} ` 

You can use string patterns in the previous example class definition by changing the getter name to:

 get name() { return `${this.firstName} ${this.lastName}`; } 

Unlike concatenation, this code is much cleaner.

Thick arrows

Another feature that makes Coffee so attractive - thick arrows - is in ES6. Thick arrows allow the function to this . For a start, let's see how we coped without thick arrows.

In ES5, we have to refer to this when defining a function:

 var self = this; $("buttob").on("click", function() { // do something with self }); 

Coffee allows you to do without arguments and brackets at all:

 $("button").on "click", => # do something with this 

In ES6, parentheses are required regardless of the presence of parameters:

 $("button").on("click", () => { // do something with this }); 

Other features

In ES6 there are other features that are worth mentioning.

Default arguments

CoffeeScript:

 hello = (name = "guest") -> alert(name) 

ES6:

 var hello = function(name = "guest") { alert(name); } 

Splats

Variadic functions , “splats” in Coffee terminology, allowing you to take N arguments by defining only one. In ES6, they are called “remaining arguments”.
CoffeeScript:

 awards = (first, second, others...) -> gold = first silver = second honorable_mention = others 

ES6:

 var awards = function(first, second, ...others) { var gold = first; var silver = second; var honorableMention = others; } 

Destructuring

Destructuring allows you to match arrays and objects with a template for extracting specific values.

CoffeeScript:

 [first, _, last] = [1, 2, 3] 

ES6:

 var [first, , last] = [1, 2, 3] 

Destructuring can be used in setters, as in the previous example with the name setter, to make the code more concise:

 set name(name) { [this.firstName, this.lastName] = name.split(" "); } 

Conclusion

ES6 translators are being actively developed and approaching CoffeScript in terms of functionality. This post talks only about the small number of features that ES6 provides JavaScript. You can find out more here .

Try ES6 in your next project!

A source