Menjalankan JavaScript Pertama Anda

Kita membuka konsol browser dan menulis baris JavaScript pertama. Tidak perlu memasang apa pun.

Bab ini membahas tiga hal: membuka DevTools dengan F12, console.log untuk melihat hasil, dan menjalankan beberapa baris sekaligus. Bacalah berurutan, karena bagian akhir memakai hasil dari bagian awal.

Gambaran

Sebelum menulis kode, pahami dulu masalah yang ingin diselesaikan. Pada topik Menjalankan JavaScript Pertama Anda, kesalahan yang paling sering terjadi adalah langsung mencontoh potongan kode tanpa memahami kenapa kode itu ditulis begitu. Akibatnya, saat kebutuhan sedikit berbeda, kode tersebut sulit diubah.

Kita mulai dari membuka DevTools dengan F12. Bagian ini menjadi dasar untuk dua bagian berikutnya.

Contoh

Berikut contoh yang akan kita kembangkan sepanjang bab:

const belanja = [
  { nama: 'Beras 5 kg', harga: 76500 },
  { nama: 'Minyak goreng 2 L', harga: 36900 },
];

const total = belanja.reduce((jumlah, item) => jumlah + item.harga, 0);
console.log(`Total: Rp ${total.toLocaleString('id-ID')}`);

Perhatikan bahwa setiap baris punya satu tugas. Pola ini memudahkan pengujian dan perubahan di kemudian hari.

Langkah

1. Mulai dari membuka DevTools dengan F12, lalu pastikan hasilnya sesuai harapan.
2. Lanjutkan ke console.log untuk melihat hasil. Di sinilah biasanya muncul pertanyaan, jadi bacalah pelan-pelan.
3. Terakhir, menjalankan beberapa baris sekaligus. Bandingkan hasilnya dengan contoh di atas.

Ringkasan

• membuka DevTools dengan F12
• console.log untuk melihat hasil
• menjalankan beberapa baris sekaligus

Di bab berikutnya kita memakai hasil bab ini sebagai dasar. Tandai bab ini selesai bila contoh di atas sudah berjalan di komputer Anda.