CoffeeScript Online - IDE, Editor, Compiler, Interpreter

Cara menggunakan compiler CoffeeScript online

1. Tulis atau tempel CoffeeScript ke editor. Reset contoh mengembalikan kode awal berisi fungsi, comprehension, dan hierarki kelas kecil.
2. Tekan Jalankan atau gunakan Ctrl + Enter (⌘ + Enter di Mac).
3. Compiler CoffeeScript resmi mengubah kode Anda menjadi JavaScript. Jika ada kesalahan sintaks, pesannya menampilkan baris dan kolomnya, dan tidak ada yang dijalankan.
4. Jika kompilasi berhasil, JavaScript dijalankan di mesin JavaScript browser Anda. Output console.log muncul di panel Output, dengan objek dan array dicetak rapi sebagai JSON. Buka JavaScript yang dihasilkan di bawah output untuk melihat kode hasil kompilasi.
5. Pilih batas waktu 5, 15, atau 60 detik, atau tekan Hentikan untuk mengakhiri proses lebih awal.

Gunakan Salin atau main.coffee untuk menyimpan kode sumber Anda. Tombol tata letak beralih antara panel berdampingan dan panel bertumpuk.

Kompilasi dan eksekusi sama-sama berlangsung di Web Worker di browser Anda, dan kode Anda tidak pernah dikirim ke server. Editor menyimpan otomatis kode terakhir Anda di browser, terpisah untuk setiap compiler.

Tentang CoffeeScript 2

CoffeeScript adalah bahasa kecil yang dikompilasi menjadi JavaScript. Sintaksisnya terinspirasi dari Ruby dan Python: indentasi sebagai pengganti kurung kurawal, tanda kurung opsional, -> untuk fungsi, dan return implisit. Beberapa idenya, seperti arrow function, kelas, destructuring, dan interpolasi string, kemudian menjadi bagian standar JavaScript.

Halaman ini memakai CoffeeScript 2.7 dalam mode bare, sehingga output tidak dibungkus dalam fungsi tambahan. CoffeeScript 2 menghasilkan kode ES2015+ modern. Kelasnya menjadi kelas JavaScript, => menjadi arrow function, dan fungsi apa pun yang berisi await menjadi fungsi async.

Yang didukung

• Seluruh bahasa CoffeeScript 2: kelas dengan extends dan super, singkatan @, interpolasi string dengan "#{...}", range seperti [1..5], destructuring, splat, operator eksistensial ?, dan async/await.
• Fitur bawaan JavaScript standar seperti Math, JSON, metode Array, dan Promise.

Keterbatasan:

• Tanpa DOM: kode berjalan di worker, jadi document dan window tidak tersedia.
• Tanpa require, import, atau paket npm, dan tanpa API Node.js.
• Tanpa kotak input. Tentukan data uji Anda di dalam kode.

Contoh: comprehension dan @

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) pada constructor menyimpan argumen sebagai this.owner. Callback memakai =>, sehingga @items tetap merujuk ke keranjang. Dengan panah tipis ->, ia akan merujuk ke hal lain dan pemanggilannya akan gagal. Buka JavaScript yang dihasilkan untuk melihat bagaimana comprehension menjadi loop dan kelas menjadi kelas ES.

Jebakan yang umum

• Spasi itu bermakna. Indentasi menentukan blok, sehingga baris yang tidak sejajar mengubah arti atau gagal dikompilasi.
• Return implisit. Fungsi mengembalikan nilai ekspresi terakhirnya. Loop di akhir fungsi mengumpulkan hasilnya ke dalam array. Tambahkan return eksplisit jika Anda tidak menginginkannya.
• in vs of. for x in array mengulang nilai, sedangkan for key, value of object mengulang properti. Ini kebalikan dari yang mungkin diharapkan developer JavaScript.
• Comprehension butuh tanda kurung saat Anda menetapkan atau mencetaknya. Tanpa itu, evens = n for n in list menetapkan setiap item ke evens secara bergantian, sehingga yang Anda dapat adalah item terakhir, bukan array.
• Tanpa var atau let. Menetapkan nilai ke nama yang sudah ada di scope luar memperbarui variabel itu, bukan membuat yang baru.
• is, isnt, and, or, dan not adalah alias, dan == dikompilasi menjadi === yang ketat.

CoffeeScript atau TypeScript saat ini?

Untuk proyek baru, sebagian besar tim memilih TypeScript atau JavaScript modern, karena keduanya menawarkan tipe statis serta dukungan editor dan library yang lebih luas. CoffeeScript masih berguna untuk memelihara codebase yang sudah ada, seperti aplikasi Ruby on Rails lama, dan untuk skrip singkat yang ringkas. Saat bermigrasi, JavaScript hasil kompilasi adalah titik awal yang baik. Rapikan dengan JavaScript Formatter & Minifier, atau coba hasilnya di Compiler TypeScript Online.

Pertanyaan yang sering diajukan

Bisakah saya mengonversi CoffeeScript ke JavaScript di sini?

Bisa. Jalankan kode Anda, buka JavaScript yang dihasilkan, dan salin hasilnya. Hasil itu dibuat oleh compiler CoffeeScript 2.7 resmi dalam mode bare.

Mengapa fungsi saya mengembalikan array yang tidak saya duga?

Karena return implisit. Jika loop adalah ekspresi terakhir dalam sebuah fungsi, hasilnya dikumpulkan dan dikembalikan. Akhiri fungsi dengan return atau nilai lain untuk menghindarinya.

Di mana saya bisa menjalankan JavaScript secara langsung?

Gunakan Compiler JavaScript Online, atau telusuri semua compiler online.

Diperbarui 2026-10-17