console adalah object bawaan browser untuk mencetak sesuatu ke panel Console di DevTools. Kebanyakan orang cuma kenal console.log, padahal isinya lebih banyak. Bayangin console.log itu satu pulpen, dan object console itu satu kotak alat tulis: ada stabilo kuning dan merah (warn, error), penggaris buat tabel (table), map buat mengelompokkan kertas (group), stopwatch (time), dan alat hitung jepret (count). Semuanya mencetak ke tempat yang sama, tapi hasilnya jauh lebih gampang dibaca.
🧪 Tebakan cepat:
console.table([{ name: "Ana", age: 25 }, { name: "Budi", age: 30 }])menampilkan tabel. Kolomnya apa saja? Tebak dulu, jawabannya ada di bagian "console.table: array of object jadi tabel".
console.log: satu panggilan, satu baris
const data = [45, 23, 67, 12, 89, 34, 56, 78, 90, 11];
console.log(data.length); // 10
console.log("min:", 11, "max:", 90); // min: 11 max: 90
console.log("min:" + 11 + ",max:" + 90); // min:11,max:90
- Tiap panggilan
console.logmencetak tepat satu baris. Latihan nanti menghitung baris ke-0, ke-1, ke-2, jadi urutan panggilannya penting. - Beberapa nilai dipisah koma dicetak dengan spasi di antaranya.
- Kalau formatnya harus persis, misalnya
min:11,max:90tanpa spasi, gabungkan sendiri jadi satu teks pakai+.
warn dan error: kasih level
console.warn("Data cuma 3 angka, rata-ratanya kurang mewakili");
console.error("Data kosong, gak ada yang bisa dihitung");
console.warn dicetak kuning dengan ikon segitiga, console.error merah dan ikut menampilkan jejak pemanggilnya (stack trace). Gunanya: di Console ada menu Default levels untuk menyaring per level. Pilih Errors saja, dan ratusan log biasa langsung hilang dari pandangan.
console.table: array of object jadi tabel
console.table([
{ name: "Ana", age: 25 },
{ name: "Budi", age: 30 }
]);
| (index) | name | age |
|---|---|---|
| 0 | 'Ana' | 25 |
| 1 | 'Budi' | 30 |
Kolomnya diambil dari nama property: name dan age, ditambah kolom (index) berisi nomor urut array. Itu jawaban tebakannya: bukan kolom Ana dan Budi, karena Ana dan Budi itu isinya, jadi baris. Untuk array of object (data dari API, misalnya), ini jauh lebih enak dibaca daripada console.log yang menampilkan (2) [{…}, {…}].
console.group: kelompokkan baris
console.group("analyzeArray");
console.log(10);
console.log("min:11,max:90");
console.log(50.5);
console.groupEnd();
Console menampilkan judul analyzeArray dengan segitiga, dan tiga baris di bawahnya menjorok ke dalam. Klik segitiganya untuk melipat. console.groupCollapsed sama, tapi mulai dalam keadaan terlipat. Setiap group harus ditutup groupEnd, kalau gak, semua log berikutnya ikut menjorok.
time dan count: ukur dan hitung
console.time("loop");
let sum = 0;
for (let i = 0; i < 10000; i++) sum += i;
console.timeEnd("loop"); // loop: 0.52 ms (angkanya beda tiap kali jalan)
console.count("klik"); // klik: 1
console.count("klik"); // klik: 2
console.time("loop")menyalakan stopwatch bernamaloop,console.timeEnd("loop")mematikannya dan mencetak lamanya dalam milidetik. Labelnya harus sama persis.console.count("klik")mencetak berapa kali label itu sudah dihitung. Cocok untuk tahu sebuah function dipanggil berapa kali.
Kalau kamu butuh durasinya sebagai angka (bukan cuma tulisan di Console), catat waktunya sendiri: Date.now() memberi waktu sekarang dalam milidetik.
const mulai = Date.now();
for (let i = 0; i < 10000; i++) sum += i;
const durasi = Date.now() - mulai;
console.log("time:" + durasi + "ms"); // time:0ms
performance.now() lebih teliti (ada angka di belakang koma), jadi bulatkan dulu dengan Math.round kalau butuh bilangan bulat.
Latihan: meringkas array angka
Dari data di atas, ini yang dihitung latihannya:
| Yang dicari | Cara | Hasil |
|---|---|---|
| jumlah elemen | arr.length |
10 |
| terkecil | Math.min(...arr) |
11 |
| terbesar | Math.max(...arr) |
90 |
| rata-rata | total 505 dibagi 10 | 50,5 |
const count = arr.length;
const min = Math.min(...arr);
const max = Math.max(...arr);
const total = arr.reduce((acc, n) => acc + n, 0);
const avg = Math.round((total / count) * 100) / 100;
...arr(spread) menuang isi array jadi argumen satu per satu, karenaMath.minmenerima angka, bukan array.Math.round(x * 100) / 100membulatkan ke 2 angka di belakang koma dan tetap berupa number: 50,5 jadi50.5, bukan"50.50".
Tiga lagi: assert, dir, trace
console.assert(syarat, pesan)cuma bicara kalau syaratnya false:console.assert(15 >= 18, "Belum cukup umur")mencetakAssertion failed: Belum cukup umur, sedangkan syarat yang true gak mencetak apa-apa.console.dir(elemen)menampilkan sebuah DOM element sebagai object JavaScript dengan semua property dan method-nya (classList,children,textContent...).console.log(elemen)menampilkannya sebagai HTML. Pakaidirkalau kamu mau tahu isi object-nya.console.trace("siapa?")mencetak urutan function yang memanggil baris itu.
⚠️ Jebakan yang sering ketemu
- Format yang meleset sedikit.
console.log("min:", 11)mencetakmin: 11dengan spasi. Kalau yang dimintamin:11,max:90, gabungkan jadi satu teks. toFixed(2)untuk rata-rata.(50.5).toFixed(2)hasilnya teks"50.50". Kalau yang diminta angka50.5, pakaiMath.round(x * 100) / 100.- Label
timeyang beda.console.time("loop")laluconsole.timeEnd("Loop")gak cocok, karena huruf besar-kecil ikut dihitung. - Lupa membersihkan. Log debugging yang tertinggal ikut terkirim ke user. Hapus sebelum kode di-deploy.
TL;DR: Object console punya alat untuk tiap kebutuhan: log (satu panggilan, satu baris), warn dan error (kuning dan merah, bisa disaring lewat Default levels), table (array of object jadi tabel dengan kolom (index) plus nama property, misalnya name dan age), group/groupEnd (mengelompokkan), time/timeEnd (stopwatch, label harus sama), count (menghitung panggilan), assert (cuma bicara kalau false), dir (semua property dan method sebuah DOM element), dan trace (siapa yang memanggil). Untuk durasi sebagai angka, pakai Date.now() sebelum dan sesudah. Rata-rata dua angka di belakang koma: Math.round(x * 100) / 100.
