Mejor JavaScript con CoffeeScript

Jan 4, 2013 · 4 min read

code

coffeescript

javascript

Siguiendo con mi último post acerca de como ser más productivo y escribir mejores hojas de estilo con SASS , este nuevo post no podría ir de otra cosa que no fuera acerca de CoffeeScript, que viene a ser a JavaScript lo que es SASS a las hojas de estilo, es decir, un lenguaje sencillo que se compila en JavaScript usando una sintaxis muy sencilla y aportando nueva funcionalidad muy útil.

Sintaxis

Lo que más me ha gustado desde que llevo usándolo es su sintaxis abreviada. Es como escribir JavaScript, pero omitiendo llaves, puntos y coma, paréntesis, indentación para bloques de código, etc. Lo que hace que programar sea muy rápido y directo al grano. Si estáis acostumbrados a la sintaxis de Ruby, por ejemplo, encontrareis muchas similitudes entre ambos.

# script.coffee
a = [1..10]
b = 2
$ -&gt;
  for i in a
  console.log i + b

/* script.js */
var a, b;
a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
b = 2;
$(function() {
  var i, _i, _len, _results;
  for (_i = 0, _len = a.length; _i &lt; _len; _i++) {
    i = a[_i];
    console.log(i + b);
  }
});

JavaScript seguro

Otra cosa que me ha gustado mucho es que el código generado es muy seguro. CoffeeScript siempre hará todo lo posible por compilar buen código JavaScript, teniendo siempre en cuenta el scope de tus scripts, previniendo colisiones de nombres, declarando automáticamente variables y demás. Si no estás acostumbrado a escribir JS seguro, no tienes que preocuparte, porque el se encarga de todo el trabajo sucio, dejándote a ti lo divertido.

Uso de clases

Otra aportación de CoffeeScript es el uso de clases, del cual carece JavaScript de manera nativa. El se encarga de crear todo el prototipado necesario por ti.

# script.coffee
class SurfBoard
  constructor: (@type) -&gt;
  description: -&gt;
    console.log "This surfboard is a #{@type}"

/* script.js */
var SurfBoard;
SurfBoard = (function() {
  function SurfBoard(type) {
    this.type = type;
  }
  SurfBoard.prototype.description = function() {
    console.log("This surfboard is a " + this.type);
  };
  return SurfBoard;
})();

Interpolación de cadenas

Ahora concatenar valores de variables a cadenas es mucho más sencillo con el uso de la expresión #{} en una cadena con comillas dobles, en vez de tener que hacerlo con el uso de +.

# script.coffee
$ -&gt;
 name = "Ricardo"
 console.log "Hi! My name is #{name}"

/* script-js */
$(function() {
 var name;
 name = "Ricardo";
 console.log("Hi! My name is " + name);
});

Expresiones condicionales

Otra característica que uso bastante es el uso de estas expresiones para expresiones de una solo linea, y consiste en pone la condición al final de la expresión usando if o unless.

# script.coffee
$ -&gt;
  name = "Ricardo"
  console.log "Hi! My name is #{name}" if name == 'Ricardo'

/* script-js */
var name;
name = "Ricardo";
if (name === "Ricardo") {
    return console.log("Hi! My name is " + name);
  }
});

Operadores

En CoffeeScript al usar los operadores == y !=, automáticamente los traducirá por === y por !==, evaluando así de manera más segura evitando conversiones no deseadas. También existe el operador existencial ? que evalúa si algo es indefinido o nulo.

# script.coffee
if quiver?
  quiver.push
  type: 'Retro twin fish'
  color: 'White'

/* script.js */
if (typeof quiver !== "undefined" &amp;&amp; quiver !== null) {
  quiver.push({
    type: 'Retro twin fish',
    color: 'White'
  });
}

Bucles y comprensiones

CoffeeScript también te ayuda manejar de manera más sencilla y moderna las iteraciones en arrays, y gracias a las comprensiones de listas, se pueden hacer cosas muy potentes en una sola linea de código.

# script.coffee
surfBoards = [
 name: "Longboard"
 fins: 1
,
 name: "Retro fish"
 fins: 2
,
 name: "Thruster"
 fins: 3
,
 name: "Quad"
 fins: 4
]
console.log "A #{board.name} has more than 2 fins" for board in surfBoards when board.fins &gt; 2

/* script.js */
var board, surfBoards, _i, _len;
surfBoards = [
  {
   name: "Longboard",
   fins: 1
  }, {
   name: "Retro fish",
   fins: 2
  }, {
   name: "Thruster",
   fins: 3
  }, {
   name: "Quad",
   fins: 4
  }
];
for (_i = 0, _len = surfBoards.length; _i &lt; _len; _i++) {
  board = surfBoards[_i];
  if (board.fins &gt; 2) {
    console.log("A " + board.name + " has more than 2 fins");
  }
}

En resumen

La verdad es que desde el día que empecé a utilizarlo no he parado de hacerlo y cada día me gusta más. En cuanto cambias el chip y le pillas el truco a la sintaxis y a todas estas mejoras que aporta, no hay excusa para no escribir JavaScript mejor, más seguro y legible. A continuación os pongo algunos links que me han ayudado:

http://coffeescript.org - Sitio oficial de CoffeeScript, donde está toda la documentación además de una consola virtual donde se puede escribir lo que se quiera en CoffeeScript y te lo compila automáticamente a JavaScript
http://coffeescript.codeschool.com - Tutorial muy bueno de la mano de Code School, donde aprender a base de ejemplos.
The Little Book on CoffeeScript - Mini libro de CoffeeScript muy sencillo y directo al grano.
CoffeeScript Cookbook - Recetas de la comunidad para la comunidad, que dan solución a un montón de problemas comunes.
http://js2coffee.org - Compilador online de JS a Coffee y viceversa... muy útil cuando quieres optimizar tu propio Coffee comparándolo con el que este sitio te compila.