CoffeeScript online - IDE, editor, compilador, intérprete

Cómo usar el compilador de CoffeeScript online

1. Escribe o pega código CoffeeScript en el editor. Restablecer ejemplo recupera el código inicial, con funciones, una comprensión de listas y una pequeña jerarquía de clases.
2. Pulsa Ejecutar o usa Ctrl + Enter (⌘ + Enter en Mac).
3. El compilador oficial de CoffeeScript convierte tu código en JavaScript. Si hay un error de sintaxis, el mensaje indica su línea y su columna, y no se ejecuta nada.
4. Si la compilación tiene éxito, el JavaScript se ejecuta en el motor de JavaScript de tu navegador. La salida de console.log aparece en el panel Salida, con los objetos y los arrays formateados como JSON. Abre JavaScript generado, debajo de la salida, para ver el código compilado.
5. Elige un límite de tiempo de 5, 15 o 60 segundos, o pulsa Detener para terminar una ejecución antes.

Usa Copiar o main.coffee para guardar tu código fuente. El botón de disposición alterna entre los paneles lado a lado y apilados.

Tanto la compilación como la ejecución se hacen en un Web Worker de tu navegador, y tu código nunca se envía a un servidor. El editor guarda automáticamente tu último código en tu navegador, por separado para cada compilador.

Sobre CoffeeScript 2

CoffeeScript es un lenguaje pequeño que se compila a JavaScript. Su sintaxis se inspira en Ruby y Python: sangría en lugar de llaves, paréntesis opcionales, -> para las funciones y retornos implícitos. Varias de sus ideas, como las funciones flecha, las clases, la desestructuración y la interpolación de cadenas, acabaron convirtiéndose en JavaScript estándar.

Esta página usa CoffeeScript 2.7 en modo bare, así que la salida no se envuelve en una función adicional. CoffeeScript 2 genera código moderno ES2015+. Sus clases se convierten en clases de JavaScript, => se convierte en una función flecha y cualquier función que contenga await se convierte en una función async.

Qué se admite

• El lenguaje CoffeeScript 2 completo: clases con extends y super, el atajo @, interpolación de cadenas con "#{...}", rangos como [1..5], desestructuración, splats, el operador existencial ? y async/await.
• Objetos y funciones integrados estándar de JavaScript, como Math, JSON, los métodos de Array y Promise.

Limitaciones:

• Sin DOM: el código se ejecuta en un worker, así que document y window no están disponibles.
• Sin require, import ni paquetes de npm, y sin API de Node.js.
• Sin cuadro de entrada. Define tus datos de prueba en el código.

Ejemplo práctico: comprensiones y @

evens = (n for n in [1..10] when n % 2 is 0)
console.log evens                    # [2, 4, 6, 8, 10]

class Basket
  constructor: (@owner) ->
    @items = []
  addAll: (list) ->
    list.forEach (item) => @items.push item
    this

basket = new Basket('Ada').addAll ['tea', 'milk']
console.log "#{basket.owner} has #{basket.items.length} items"

(@owner) en el constructor guarda el argumento como this.owner. La función de retorno de llamada usa =>, así que @items sigue refiriéndose a la cesta. Con una flecha fina -> se referiría a otra cosa y la llamada fallaría. Abre JavaScript generado para ver cómo la comprensión se convierte en un bucle y la clase en una clase ES.

Errores habituales

• Los espacios en blanco son significativos. La sangría define los bloques, así que una línea mal alineada cambia el significado o no compila.
• Retornos implícitos. Una función devuelve el valor de su última expresión. Un bucle al final de una función reúne sus resultados en un array. Añade un return explícito si no quieres ese comportamiento.
• in frente a of. for x in array recorre los valores, mientras que for key, value of object recorre las propiedades. Es lo contrario de lo que podría esperar un desarrollador de JavaScript.
• Las comprensiones necesitan paréntesis cuando las asignas o las imprimes. Sin ellos, evens = n for n in list asigna cada elemento a evens por turnos, así que acabas con el último elemento en lugar de un array.
• Sin var ni let. Asignar a un nombre que ya existe en un ámbito exterior actualiza esa variable en lugar de crear una nueva.
• is, isnt, and, or y not son alias, y == se compila al estricto ===.

¿CoffeeScript o TypeScript hoy?

Para proyectos nuevos, la mayoría de los equipos eligen TypeScript o JavaScript moderno, porque ofrecen tipos estáticos y más compatibilidad con editores y bibliotecas. CoffeeScript sigue siendo útil para mantener código existente, como aplicaciones antiguas de Ruby on Rails, y para scripts rápidos y concisos. Si migras, el JavaScript generado es un buen punto de partida. Ordénalo con el Formateador y minificador de JavaScript, o prueba el resultado en el Compilador de TypeScript online.

Preguntas frecuentes

¿Puedo convertir CoffeeScript a JavaScript aquí?

Sí. Ejecuta tu código, abre JavaScript generado y copia la salida. La produce el compilador oficial de CoffeeScript 2.7 en modo bare.

¿Por qué mi función devuelve un array que no esperaba?

Por los retornos implícitos. Si un bucle es la última expresión de una función, sus resultados se reúnen y se devuelven. Termina la función con return o con otro valor para evitarlo.

¿Dónde puedo ejecutar directamente el JavaScript?

Usa el Compilador de JavaScript online, o consulta todos los compiladores online.

Actualizado 2026-10-17