4 Cara Menampilkan Output pada JavaScript yang Wajib Kamu Ketahui

JavaScript adalah salah satu bahasa pemrograman paling populer di dunia, terutama untuk pengembangan web. Bahasa ini digunakan untuk membuat halaman web menjadi lebih interaktif, dinamis, dan menarik. Saat mempelajari JavaScript, salah satu hal dasar yang harus kamu pahami adalah cara menampilkan output atau hasil dari sebuah kode program.

Menampilkan output sangat penting karena memungkinkan kita untuk melihat hasil dari perintah, nilai variabel, maupun proses logika dalam JavaScript. Dalam artikel ini, kita akan membahas 4 cara utama menampilkan output pada JavaScript, lengkap dengan penjelasan dan contoh kodenya.

1. Menggunakan console.log()

📘 Pengertian

console.log() adalah cara paling umum dan sering digunakan oleh programmer untuk menampilkan output di konsol browser. Konsol ini bisa kamu akses melalui Developer Tools di browser (biasanya dengan menekan tombol F12 atau Ctrl + Shift + I di Chrome).

Fungsi console.log() sangat berguna saat kamu sedang debugging atau memeriksa apakah sebuah kode berjalan dengan benar.

💻 Contoh Penggunaan

let nama = "Rizky";
let umur = 25;
console.log("Halo, nama saya " + nama + " dan umur saya " + umur + " tahun.");

🧩 Hasil Output

Halo, nama saya Rizky dan umur saya 25 tahun.

Selain teks, kamu juga bisa menampilkan nilai variabel, objek, atau array ke konsol.

let buah = ["apel", "jeruk", "mangga"];
console.log(buah);

✅ Kelebihan

• Cocok untuk debugging.

• Dapat menampilkan berbagai tipe data.

• Tidak mengganggu tampilan halaman web.

⚠️ Kekurangan

• Tidak terlihat oleh pengguna biasa (hanya pengembang yang membuka konsol yang bisa melihatnya).

2. Menggunakan document.write()

📘 Pengertian

document.write() adalah cara klasik untuk menampilkan output langsung ke halaman web. Metode ini menuliskan teks atau HTML ke dalam dokumen web yang sedang dimuat.

Namun, perlu diperhatikan bahwa penggunaan document.write() tidak direkomendasikan untuk proyek modern karena bisa menghapus seluruh konten halaman jika dipanggil setelah halaman selesai dimuat.

💻 Contoh Penggunaan

document.write("Selamat datang di tutorial JavaScript!");

Kamu juga bisa menulis HTML di dalamnya:

document.write("<h2>Belajar JavaScript itu Menyenangkan!</h2>");

✅ Kelebihan

• Langsung menampilkan hasil di halaman web.

• Mudah digunakan untuk latihan dasar JavaScript.

⚠️ Kekurangan

• Tidak cocok digunakan setelah halaman selesai dimuat.

• Dapat menimpa seluruh isi halaman jika dipanggil secara tidak tepat.

• Tidak direkomendasikan untuk aplikasi modern.

3. Menggunakan alert()

📘 Pengertian

alert() digunakan untuk menampilkan kotak dialog (popup alert) di browser. Metode ini sering digunakan untuk memberikan notifikasi sederhana kepada pengguna, seperti pesan kesalahan, peringatan, atau informasi penting.

Fungsi alert() menampilkan teks di dalam kotak dialog dan menghentikan sementara eksekusi skrip sampai pengguna menekan tombol OK.

💻 Contoh Penggunaan

alert("Selamat datang di website kami!");

Atau bisa juga menampilkan hasil dari perhitungan:

let a = 10;
let b = 5;
alert("Hasil penjumlahan: " + (a + b));

✅ Kelebihan

• Menarik perhatian pengguna dengan cepat.

• Cocok untuk memberikan pesan atau notifikasi sederhana.

⚠️ Kekurangan

• Menghentikan eksekusi kode sampai pengguna menekan “OK”.

• Dapat mengganggu pengalaman pengguna jika digunakan terlalu sering.

4. Menggunakan Manipulasi DOM (innerHTML)

📘 Pengertian

Metode keempat dan paling fleksibel adalah menggunakan manipulasi DOM (Document Object Model), khususnya dengan properti innerHTML. Cara ini memungkinkan kamu untuk menampilkan output pada elemen HTML tertentu di dalam halaman, tanpa harus menimpa seluruh konten.

Metode ini sangat umum digunakan dalam pengembangan web modern, terutama ketika kamu ingin membuat tampilan yang dinamis.

💻 Contoh Penggunaan

HTML:

<p id="hasil"></p>

JavaScript:

let nama = "Dina";
document.getElementById("hasil").innerHTML = "Halo, " + nama + "! Selamat datang di situs kami.";

🧩 Hasil Output

Halo, Dina! Selamat datang di situs kami.

Kamu juga bisa menggunakan innerHTML untuk menambahkan elemen HTML secara dinamis:

document.getElementById("hasil").innerHTML = "<b>Belajar JavaScript</b> dengan semangat!";

✅ Kelebihan

• Fleksibel dan modern.

• Dapat menampilkan hasil di area tertentu tanpa merusak struktur halaman.

• Cocok untuk membuat tampilan interaktif.

⚠️ Kekurangan

• Perlu elemen HTML sebagai target penempatan.

• Jika tidak hati-hati, bisa menyebabkan celah keamanan (XSS) jika menampilkan input dari pengguna tanpa validasi.

Bonus: Perbandingan Singkat keempat Metode

Kesimpulan

Menampilkan output dalam JavaScript dapat dilakukan dengan berbagai cara, tergantung pada kebutuhanmu.
Jika kamu sedang belajar dasar JavaScript, document.write() dan alert() bisa menjadi langkah awal yang mudah dipahami.
Namun, ketika kamu mulai membangun aplikasi web modern, sebaiknya gunakan console.log() untuk debugging dan manipulasi DOM (innerHTML) untuk menampilkan hasil ke halaman dengan cara yang profesional.

Dengan memahami keempat metode ini, kamu sudah selangkah lebih maju dalam mempelajari JavaScript. Selanjutnya, kamu bisa mengeksplorasi cara lain seperti prompt(), confirm(), atau menampilkan data menggunakan framework seperti React, Vue, atau Angular.