Proyek: kalkulator tip dan FizzBuzz

Tagihan 84 dengan tip 20 persen yang dibagi empat orang menjadi 25.20 per orang. Bab ini membangun kalkulator itu, lalu latihan klasik FizzBuzz, dari bagian-bagian di bab sebelumnya.

Dari masalah menjadi program

Menulis program dimulai sebelum ada kode. Pertama, katakan dengan kata-kata biasa apa yang masuk, apa yang keluar, dan apa yang terjadi di antaranya. Untuk kalkulator tip, masukannya adalah tagihan, persentase tip, dan jumlah orang. Keluarannya adalah tip, total, dan bagian setiap orang. Di antaranya ada tiga perhitungan kecil. Menuliskan ini mengubah satu tugas yang samar menjadi beberapa tugas kecil, yang masing-masing sudah kamu tahu cara mengerjakannya.

Langkah 1: perhitungannya

const bill = 84;
const rate = 0.2;
const people = 4;

const tip = bill * rate;          // 16.8
const total = bill + tip;         // 100.8
const each = total / people;      // 25.2

Periksa angkanya dengan tangan sebelum memercayai kodenya: 20 persen dari 84 adalah 16.8, totalnya 100.8, dan 100.8 dibagi 4 adalah 25.2. Menguji dengan nilai yang jawabannya sudah kamu ketahui adalah cara menangkap kesalahan, misalnya rate yang diketik 20 alih-alih 0.2, yang akan membuat tipnya 1680.

Langkah 2: menampilkan uang dengan benar

Uang biasanya ditampilkan dengan dua tempat desimal, dan mencetak 25.2 terlihat belum selesai. Metode bilangan toFixed(2) mengembalikan string dengan tepat dua desimal, jadi each.toFixed(2) memberi "25.20". Ingat dari bab bilangan bahwa desimal bisa membawa galat pembulatan biner yang sangat kecil; toFixed juga menyembunyikannya, dan itu alasan lain untuk memakainya saat menampilkan. Biarkan bilangan tetap berupa bilangan selama menghitung, dan panggil toFixed hanya di bagian paling akhir, saat mencetak.

Langkah 3: bungkus dalam fungsi

Perhitungan yang mungkin kamu jalankan lagi dengan angka lain sebaiknya ditaruh dalam fungsi. Fungsi di bawah mengembalikan sebuah objek, jadi satu pemanggilan bisa mengembalikan ketiga hasil dengan nama yang jelas. Parameter bawaan membuat kasus yang biasa jadi singkat ditulis.

function splitBill(bill, rate = 0.15, people = 1) {
  const tip = bill * rate;
  const total = bill + tip;
  return { tip, total, each: total / people };
}

const r = splitBill(84, 0.2, 4);
console.log(`Tip: ${r.tip.toFixed(2)}`);       // Tip: 16.80
console.log(`Each: ${r.each.toFixed(2)}`);     // Each: 25.20

Baris return { tip, total, each: total / people }; memakai bentuk singkat: menulis tip sendirian di dalam objek berarti tip: tip, yaitu properti yang kunci dan variabelnya bernama sama.

FizzBuzz

FizzBuzz adalah permainan berhitung yang dijadikan latihan pemrograman. Berhitunglah dari 1 sampai 15. Untuk kelipatan 3 ucapkan Fizz, untuk kelipatan 5 ucapkan Buzz, untuk kelipatan keduanya ucapkan FizzBuzz, dan selain itu ucapkan bilangannya. Latihan ini memakai perulangan, operator sisa bagi, dan rangkaian if, dan ada satu jebakan. Bilangan 15 adalah kelipatan 3, jadi kalau kamu menguji 3 lebih dulu, 15 mencetak Fizz dan tidak pernah sampai ke cabang FizzBuzz. Perbaikannya adalah aturan dari bab if: taruh kondisi paling sempit di depan.

for (let i = 1; i <= 15; i++) {
  if (i % 15 === 0) {
    console.log("FizzBuzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

Menguji i % 15 === 0 berhasil karena bilangan yang habis dibagi 3 dan 5 pasti habis dibagi 15. Menulis i % 3 === 0 && i % 5 === 0 mengatakan hal yang sama dengan lebih langsung, dan keduanya boleh. Saat versimu berjalan, bandingkan keluarannya baris demi baris dengan daftar yang diharapkan: 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz.

Apa yang dibuat selanjutnya

Sekarang kamu sudah memegang inti bahasa ini: nilai, variabel, operator, keputusan, perulangan, array, fungsi, dan objek. Hampir setiap program dibangun dari bagian-bagian ini. Langkah berikutnya yang bagus: tulis ulang FizzBuzz sebagai fungsi yang menerima batas atas, buat kalkulator tip membulatkan setiap bagian ke atas menjadi satuan mata uang utuh dengan Math.ceil, atau simpan daftar pengeluaran dalam array berisi objek lalu cetak totalnya per kategori. MDN JavaScript Guide, yang diikuti kursus ini, berlanjut dengan topik seperti koleksi, kelas, dan bekerja dengan halaman web.