Change CoffeeScript to ES6

I hasten to assume that you have heard about ES6 and, perhaps, managed to try it. Then you will probably find it interesting to note about some features of the specification published by Blake Williams on 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 the project. For a short time of use, I realized that it solves a lot of problems that CoffeeScript is trying to solve, but without radical syntax changes.

ES6 today

You can start writing on ES6 right now using the translator in ES5 6to5 . 6to5 supports 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 6to5 REPL .

Classes

ES6, like Coffee, has class support. Compare the same class written in Coffee and ES6.

CoffeeScript gives us such benefits as specifying instance variables from parameters, interpolating strings, and calling functions without parentheses:

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 that complement JavaScript classes, you have already noticed that the ES6 syntax has slight differences:

• There is no semicolon at the end of the function definition
• No keyword function
• No commas after each definition

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

Interpolation

I always wanted more powerful string syntax in JavaScript. Fortunately, ES6 provides so-called string patterns . Compare Coffee and JS strings with ES6 string patterns.

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 the string patterns in the previous class definition example 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 let you bind the function to this . To begin with, let's see how we managed without the thick arrows.

In ES5, we are forced to reference this by 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, brackets are required regardless of the availability of parameters:

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

Other features

There are other features worth mentioning in ES6.

Default arguments

CoffeeScript:

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

ES6:

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

Splats

Functions of Variadic , “splats” in Coffee terminology, allowing to accept N arguments by defining only one. In ES6, they are called “other 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;
}

Restructuring

Destructuring allows you to map arrays and objects to a pattern to extract 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 setter name , to make the code more concise:

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

Conclusion

ES6 translators are actively developed and come close to CoffeScript in functionality. This post only talks about the small number of features that ES6 provides JavaScript. You can learn more here .

Try ES6 in your next project!

A source