CoffeeScript es un compilador para JavaScript que añade «syntactic sugar» inspirado pr Ruby, Python, y Haskell; Hace la escritura de JavaScript más sencilla y legible. Simplifica la sintaxis de funciones, objetos, arrays, declaraciones lógicas, vinculaciones, manejo de alcances, y mucho más. Todos las archivos CoffeeScript son salvados con una extensión .coffee.

Objetos y arrays

CoffeeScript se deshace de llaves ({}), punto y comas (;), y comas (,). Sólo esto nos salva de tener que estar repitiendo innecesarios caracteres en el teclado. En su lugar, CoffeeScript enfatiza en el uso apropiado de la tabulación, lo que hace el código más legible, pero además es imprescindible para que el código funcione bien.

Este sería un ejemplo de un array escrito con Coffeescript.

#COFFEESCRIPT
colores = [
"azul"
"rojo"
"verde"
"negro"
]

Este sería el mismo ejemplo una vez compilado a JavaScript

 

(function () {
    var colores;
    colores = [
        'azul',
        'rojo',
        'verde',
        'negro'
    ];
}.call(this));

Puedes ver que con CoffeeScript no necesitamos tener comas, pero tampoco llaves para determinar que es un array.

Declaraciones Lógicas y operadores

CoffeeScript elimina un montón de paréntesis (()) en declaraciones lógicas y   funciones. Esto hace la lógica del código mucho más sencilla de entender de un vistazo. Veamos otro ejemplo:

#COFFEESCRIPT
situar = "Europa" if es_en_continente

 

//JAVASCRIPT – SALIDA
(function () {
    var situar;
    if (es_en_continente) {
        situar = 'Europa';
    }
}.call(this));

En este ejemplo, podemos ver claramente que CoffeeScript es más sencillo de leer y escribir. CoffeeScript reemplaza todos los paréntesis implicados en cualquier aplicación lógica.

Operadores tales como &&, ||, y !== son reemplazados por palabras para hacer el código más legible. Aquí podemos ver una lista de los operadores más utilizados:

CoffeeScript JavaScript
is ===
isnt !==
not !
and &&
or ||
true, yes, on true
false, no, off false
@, this this

Veamos una declaración lógica un poco más compleja y como es compilada:

 

#COFFEESCRIPT
# Supongamos que "this" es un objeto que representa un coche y sus propiedades

if @color_carrocer is "verde"
  permiso_pase = "correcto"
else
  permiso_pase = "incorrecto"
//SALIDA - JAVASCRIPT
(function () {
    var permiso_pase;
    if (this.color_carrocer === 'verde') {
        permiso_pase = 'correcto';
    } else {
        permiso_pase = 'incorrecto';
    }
}.call(this));

Observa como el contexto de this es pasado al símbolo @ sin la necesidad de un punto, haciendo @color_carrocer igual a this.color_carrocer.

Functions

En JavaScript una función es un bloque de código diseñado para ejecutar una tarea particular. JavaScript tiene un par de modos de crear funciones que están simplificadas en CoffeeScript. Veamos:
Creación de una función con CoffeScript

#COFFEESCRIPT
#Crear una función
hola_mundo = ->
  console.log "¡Hola Mundo!"

Esta misma función compilada a JavaScript

//SALIDA - JAVASCRIPT
(function () {
    var hola_mundo;
    hola_mundo = function () {
        return console.log('\xA1Hola Mundo!');
    };
}.call(this));

CoffeeScript usa ->  en lugar de la palabra clave function(). Los ejemplos precedentes mostrarán en la consola un «Hola Mundo». De nuevo, usaremos la tabulación para especificar los contenidos de la función, así que no necesitamos las llaves ({}). Esto significa que tenemos que asegurarnos que tenemos la lógic entera de la función «tabulada» bajo su namespace.

¿Qué pasa con los parámetros? podemos usar (p1,p2) -> donde p1 p2 son parámetros. Vamos hacer que nuestra función hola_mundo muestre nuestro nombre:

 

 

#COFFEESCRIPT
hola_mundo = (nombre) ->
  console.log "Hola #{nombre}"
//SALIDA - JAVASCRIPT
(function () {
    var hola_mundo;
    hola_mundo = function (nombre) {
        return console.log('Hola ' + nombre);
    };
}.call(this));

En este ejemplo, podemos ver como los parámetros están colocados entre paréntesis. Hacemos también interpolación string. CoffeeScript permite al programador fácilmente añadir lógica a un string escapando el string con  #{}. Observa también que, a diferencia de JavaScript, no tenemos que devolver nada  al final de la función. CoffeeScript automáticamente devuelve la salida del último comando.

Interpolación de Strings

En CoffeeScript la interpolación String evaluará la expresión dentro del delimitador y su marcador será reemplazado por el resultado de la expresión. Consideremos la siguiente expresión simple:

 

NOTA: En CodePen pulsa en «View Compiled» para ver como el código CoffeeScript compilará como JavaScript. En Result pulsa con el botón derecho «inspeccionar elemento» para ver la salida en la consola.

See the Pen Concatenación String Simple by 0utKast (@0utKast) on CodePen.

 

La interpolación String  puede también evaluar expresiones complejas, como por ejemplo:

 

See the Pen CoffeeScript interpolación String compleja by 0utKast (@0utKast) on CodePen.

 

Ver siguiente (CoffeeScript con jQuery)

Introducción a CoffeeScript I. ¿Qué es?

1 comentario

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>