Console

Program yang diam itu sulit dipercaya. Kita tidak tahu apakah data sudah masuk, berapa nilai variable di tengah proses, atau mulai dari baris mana eksekusi menyimpang. Satu alat menjawab semua pertanyaan itu: console, jendela tempat kode kita berbicara.

JavaScript menyediakan satu object bernama console dengan sekumpulan method untuk menampilkan pesan. Method-nya sama di browser dan di Node.js, sehingga kebiasaan yang kita bangun di chapter ini bisa langsung dipakai di keduanya. Kita mulai dari method yang paling sering dipakai, lalu menaikkan levelnya satu per satu.

Empat Tingkat Pesan: log, info, warn, dan error #

Class console menawarkan empat method dasar dengan tingkat kepentingan yang berbeda: console.log untuk pesan umum, console.info untuk informasi proses, console.warn untuk peringatan, dan console.error untuk galat. Pada tab Console browser, warn tampil berwarna kuning dengan ikon peringatan, sedangkan error tampil merah dengan ikon galat beserta jejak baris sumbernya. Berkas berikut mencoba keempatnya sekaligus:

console.log("Halo, %s!", "Budi");
console.log("Total belanja: %d rupiah", 75000);
console.info("Koneksi ke server berhasil");
console.warn("Stok Teh Melati menipis");
console.error("Gagal memuat data penjualan");

Output yang Dihasilkan:

Halo, Budi!
Total belanja: 75000 rupiah
Koneksi ke server berhasil
Stok Teh Melati menipis
Gagal memuat data penjualan

Mari kita telaah baris demi baris:

1. Baris 1 (console.log("Halo, %s!", "Budi")): placeholder %s diganti dengan string "Budi", sehingga teks yang dicetak menjadi Halo, Budi!.
2. Baris 2 (console.log("Total belanja: %d rupiah", 75000)): placeholder %d diganti dengan angka 75000.
3. Baris 3 (console.info(...)): mencetak pesan informasi; di Node method ini berperilaku sama persis dengan log.
4. Baris 4 (console.warn(...)): mencetak peringatan; di browser baris ini tampil kuning.
5. Baris 5 (console.error(...)): mencetak galat; di browser baris ini tampil merah dengan ikon dan jejak baris yang menunjuk ke sumbernya.

Cara memilih tingkatnya mengikuti makna pesan, bukan selera: log untuk hasil inspeksi biasa, info untuk penanda tahap proses, warn untuk kondisi yang tidak normal tetapi program masih bisa melanjutkan, dan error untuk operasi yang benar-benar gagal. Satu hal yang sering disalahpahami: console.error hanya melaporkan galat, bukan menghentikan program. Eksekusi baris berikutnya tetap berjalan; penghentian yang sesungguhnya adalah pekerjaan throw, yang dibahas di section Error Handling.

Placeholder Format: %s, %d, dan %c #

Dua baris pertama di atas memakai placeholder — tanda tempat di dalam string yang diganti dengan argument berikutnya. Placeholder ini menjaga teks tetap terbaca: string formatnya terlihat utuh, dan nilai-nilainya disisipkan pada posisi yang jelas. Dua yang paling sering dipakai adalah %s untuk string dan %d untuk angka.

Ada satu lagi yang khas browser: %c. Placeholder ini menerapkan gaya CSS pada teks sesudahnya:

console.log("%cDiskon akhir pekan", "color: white; background: green; padding: 2px 6px;");

Di tab Console Chrome, teks Diskon akhir pekan tampil dengan latar hijau. Baris yang sama dijalankan di Node menghasilkan teks polos Diskon akhir pekan, karena Node mengabaikan placeholder %c beserta gayanya.

console.table: Data dalam Bentuk Tabel #

Untuk kumpulan data yang strukturnya sama, console.table jauh lebih mudah dibaca daripada baris log yang panjang:

const produk = [
  { nama: "Kopi Gayo", stok: 24, harga: 45000 },
  { nama: "Teh Melati", stok: 40, harga: 20000 },
  { nama: "Gula Aren", stok: 12, harga: 15000 },
];

console.table(produk);

Output yang Dihasilkan:

┌─────────┬──────────────┬──────┬───────┐
│ (index) │ nama         │ stok │ harga │
├─────────┼──────────────┼──────┼───────┤
│ 0       │ 'Kopi Gayo'  │ 24   │ 45000 │
│ 1       │ 'Teh Melati' │ 40   │ 20000 │
│ 2       │ 'Gula Aren'  │ 12   │ 15000 │
└─────────┴──────────────┴──────┴───────┘

Mari kita telaah:

1. Baris 1-5 (const produk = [...]): sebuah array berisi tiga object produk — setiap object menyatukan nama, stok, dan harga. Array dan object dibedah tuntas di section tersendiri; di sini cukup lihat cara console menyajikannya.
2. Baris 7 (console.table(produk)): console menyusun setiap element array menjadi satu baris tabel, dengan properti object sebagai kolom.
3. Kolom (index): ditambahkan otomatis; angka 0 sampai 2 adalah posisi element di dalam array.

Node menggambar tabel sebagai bingkai karakter seperti di atas. Browser menggambar tabel yang sama sebagai komponen interaktif: header kolomnya bisa diklik untuk mengurutkan data. Perhatikan juga bahwa Node menampilkan string dengan tanda kutip tunggal; di browser tabel, string tampil tanpa tanda kutip.

console.table juga menerima argument kedua berupa array nama kolom yang ingin ditampilkan. Panggilan console.table(produk, ["nama"]) menyembunyikan kolom stok dan harga, menyisakan kolom nama saja. Pemfilter ini praktis saat data memiliki banyak properti tetapi kita hanya tertarik pada beberapa kolom.

console.dir: Melihat Struktur Object #

console.log mengubah object menjadi teks satu tampilan. console.dir fokus pada struktur: ia menampilkan object sebagai pohon yang bisa dibuka per tingkat. Pada object bertingkat, opsi depth mengontrol sampai berapa tingkat yang ditampilkan:

const pesanan = {
  id: 1024,
  pelanggan: { nama: "Siti", kota: "Bandung" },
  item: { kode: "KPG-1", jumlah: 2 },
};

console.log(pesanan);
console.dir(pesanan, { depth: 0 });

Output yang Dihasilkan:

{
  id: 1024,
  pelanggan: { nama: 'Siti', kota: 'Bandung' },
  item: { kode: 'KPG-1', jumlah: 2 }
}
{ id: 1024, pelanggan: [Object], item: [Object] }

1. Baris 1-5 (const pesanan = {...}): object pesanan berisi properti sederhana (id) dan dua properti berupa object lagi (pelanggan, item).
2. Baris 7 (console.log(pesanan)): seluruh isi object dicetak sampai tingkat terdalam.
3. Baris 8 (console.dir(pesanan, { depth: 0 })): opsi depth: 0 membatasi tampilan ke tingkat terluar saja; object di dalamnya disingkat menjadi [Object].

Di browser, perbedaan log dan dir paling terasa pada elemen DOM: console.log(elemen) menampilkan elemen sebagai tag HTML, sedangkan console.dir(elemen) menampilkan struktur properti objectnya. Untuk object biasa, keduanya sama-sama tampil sebagai pratinjau yang bisa diperluas.

Mengukur Waktu dengan console.time #

Method console.time dan console.timeEnd bekerja berpasangan: yang pertama memulai pengukur dengan sebuah label, yang kedua menghentikannya dan mencetak durasi yang berlalu:

console.time("susun-laporan");

console.log("Menyusun laporan penjualan...");
console.log("Laporan siap dikirim.");

console.timeEnd("susun-laporan");

Output yang Dihasilkan:

Menyusun laporan penjualan...
Laporan siap dikirim.
susun-laporan: 3.09ms

1. Baris 1 (console.time("susun-laporan")): timer dengan label susun-laporan dimulai; nilai waktunya diambil dari jam sistem.
2. Baris 3-4 (console.log(...)): dua pekerjaan yang dianggap sedang diukur; durasinya ikut terhitung.
3. Baris 6 (console.timeEnd("susun-laporan")): pengukuran dihentikan; console mencetak label, titik dua, dan durasi dalam milidetik.

Angka durasi di komputer Anda pasti berbeda dari 3.09ms — nilainya bergantung kecepatan mesin dan beban sistem saat itu. Yang konsisten adalah bentuknya: label, titik dua, lalu durasi dengan satuan ms.

Pengukur ini berguna untuk membandingkan dua pendekatan pada data yang sama: beri label berbeda untuk masing-masing, misalnya cara-array dan cara-string, lalu bacalah dua durasi yang tercetak di akhir. Pola yang sama akan kita pakai lagi ketika course masuk ke topik performa — alat ukurnya sudah kita pegang sejak sekarang.

Bila pesan di Console mulai menumpuk, console.clear() membersihkan tampilan. Empat method dasar, satu tabel, satu dir, dan satu pasang pengukur waktu sudah cukup untuk hampir semua kebutuhan pengujian di course ini. Setiap contoh berikutnya tetap memakai console.log sebagai alat keluaran standar.

console.log("Halo, %s!", "Budi");
console.log("Total belanja: %d rupiah", 75000);
console.info("Koneksi ke server berhasil");
console.warn("Stok Teh Melati menipis");
console.error("Gagal memuat data penjualan");

const pesanan = {
  id: 1024,
  pelanggan: { nama: "Siti", kota: "Bandung" },
  item: { kode: "KPG-1", jumlah: 2 },
};

console.log(pesanan);
console.dir(pesanan, { depth: 0 });

const produk = [
  { nama: "Kopi Gayo", stok: 24, harga: 45000 },
  { nama: "Teh Melati", stok: 40, harga: 20000 },
  { nama: "Gula Aren", stok: 12, harga: 15000 },
];

console.table(produk);

console.time("susun-laporan");

console.log("Menyusun laporan penjualan...");
console.log("Laporan siap dikirim.");

console.timeEnd("susun-laporan");