CoffeeScript online - IDE, editor, compilador, interpretador

Como usar o compilador CoffeeScript online

1. Escreva ou cole código CoffeeScript no editor. Restaurar exemplo traz de volta o código inicial com funções, uma comprehension e uma pequena hierarquia de classes.
2. Pressione Executar ou use Ctrl + Enter (⌘ + Enter no Mac).
3. O compilador oficial do CoffeeScript transforma o seu código em JavaScript. Se houver um erro de sintaxe, a mensagem mostra a linha e a coluna dele, e nada é executado.
4. Se a compilação der certo, o JavaScript é executado no mecanismo JavaScript do seu navegador. A saída de console.log aparece no painel Saída, com objetos e arrays formatados como JSON. Abra JavaScript gerado abaixo da saída para ver o código compilado.
5. Escolha um limite de tempo de 5, 15 ou 60 segundos, ou pressione Parar para encerrar uma execução antes.

Use Copiar ou main.coffee para guardar o seu código-fonte. O botão de layout alterna entre painéis lado a lado e empilhados.

Compilar e executar acontecem em um Web Worker no seu navegador, e o seu código nunca é enviado a um servidor. O editor salva automaticamente o seu último código no navegador, separadamente para cada compilador.

Sobre o CoffeeScript 2

O CoffeeScript é uma linguagem pequena que compila para JavaScript. A sintaxe dele é inspirada em Ruby e Python: indentação no lugar de chaves, parênteses opcionais, -> para funções e retornos implícitos. Várias das suas ideias, como arrow functions, classes, desestruturação e interpolação de strings, depois se tornaram padrão no JavaScript.

Esta página usa o CoffeeScript 2.7 no modo bare, então a saída não é envolvida em uma função extra. O CoffeeScript 2 gera código moderno ES2015+. As classes dele viram classes JavaScript, => vira uma arrow function, e qualquer função que contenha await vira uma função async.

O que é compatível

• A linguagem CoffeeScript 2 completa: classes com extends e super, o atalho @, interpolação de strings com "#{...}", intervalos como [1..5], desestruturação, splats, o operador existencial ? e async/await.
• Recursos nativos padrão do JavaScript, como Math, JSON, os métodos de Array e Promise.

Limitações:

• Sem DOM: o código roda em um worker, então document e window não estão disponíveis.
• Sem require, import nem pacotes npm, e sem APIs do Node.js.
• Sem caixa de entrada. Defina os seus dados de teste no código.

Exemplo prático: comprehensions e @

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) no construtor guarda o argumento como this.owner. O callback usa =>, então @items continua se referindo à cesta. Com uma seta fina ->, ele se referiria a outra coisa e a chamada falharia. Abra JavaScript gerado para ver como a comprehension vira um laço e a classe vira uma classe ES.

Armadilhas comuns

• Os espaços em branco são significativos. A indentação define os blocos, então uma linha desalinhada muda o significado ou não compila.
• Retornos implícitos. Uma função retorna o valor da sua última expressão. Um laço no fim de uma função reúne os resultados dele em um array. Adicione um return explícito se você não quiser isso.
• in vs of. for x in array percorre valores, enquanto for key, value of object percorre propriedades. É o contrário do que um desenvolvedor JavaScript poderia esperar.
• As comprehensions precisam de parênteses quando você as atribui ou imprime. Sem eles, evens = n for n in list atribui cada item a evens em sequência, e você acaba com o último item em vez de um array.
• Sem var nem let. Atribuir a um nome que já existe em um escopo externo atualiza essa variável em vez de criar uma nova.
• is, isnt, and, or e not são apelidos, e == compila para o === estrito.

CoffeeScript ou TypeScript hoje?

Para projetos novos, a maioria das equipes escolhe TypeScript ou JavaScript moderno, porque eles oferecem tipos estáticos e mais suporte em editores e bibliotecas. O CoffeeScript ainda é útil para manter bases de código existentes, como aplicações Ruby on Rails mais antigas, e para scripts rápidos e concisos. Ao migrar, o JavaScript gerado é um bom ponto de partida. Organize-o com o Formatador e minificador de JavaScript ou teste o resultado no Compilador TypeScript online.

Perguntas frequentes

Posso converter CoffeeScript em JavaScript aqui?

Sim. Execute o seu código, abra JavaScript gerado e copie a saída. Ela é produzida pelo compilador oficial do CoffeeScript 2.7 no modo bare.

Por que a minha função retorna um array que eu não esperava?

Por causa dos retornos implícitos. Se um laço é a última expressão de uma função, os resultados dele são reunidos e retornados. Termine a função com return ou com outro valor para evitar isso.

Onde posso executar o JavaScript diretamente?

Use o Compilador JavaScript online ou veja todos os compiladores online.

Atualizado 2026-10-17