🧮 Operasi Dasar & Kondisi

Setelah kita punya variabel untuk menyimpan data, hal seru berikutnya adalah memanipulasi data itu menggunakan operator. Operator ini ibarat alat yang memungkinkan kita melakukan berbagai operasi seperti menghitung angka, membandingkan nilai, atau menggabungkan teks. Misalnya, kita bisa menjumlahkan dua angka, cek apakah satu nilai lebih besar dari yang lain, atau menggabungkan dua kata jadi satu kalimat.
Nah, hasil dari operasi ini biasanya kita pakai untuk mengambil keputusan di program, contohnya dengan menggunakan struktur if...else. Jadi, program kita bisa “berpikir” dan menjalankan perintah yang berbeda berdasarkan kondisi tertentu. Misalnya, kalau nilai ujian lebih besar dari 70, tampilkan “Lulus”, tapi kalau kurang, tampilkan “Coba lagi”. Dengan begini, program jadi lebih pintar dan interaktif, nggak cuma jalan terus tanpa memperhatikan apa yang terjadi. Seru, kan?

⚖️ Struktur Umum Operasi dan Kondisi

// Variabel untuk contoh
let nilaiA = 10;
let nilaiB = 5;

// 1. Operasi Aritmatika
let hasilTambah = nilaiA + nilaiB; // Hasil: 15

// 2. Operasi Perbandingan
let apakahLebihBesar = nilaiA > nilaiB; // Hasil: true

// 3. Penggunaan dalam Kondisi if-else
if (apakahLebihBesar) {
  // Blok ini dijalankan jika kondisi true
  console.log("Nilai A lebih besar dari Nilai B");
} else {
  // Blok ini dijalankan jika kondisi false
  console.log("Nilai A tidak lebih besar dari Nilai B");
}

Penjelasan dari konsep di atas sebagai berikut:

Operasi Aritmatika: Dipakai buat hitung-hitungan, seperti + (tambah), - (kurang), * (kali), / (bagi), dan % (sisa bagi). Misalnya: 10 % 3 hasilnya 1.
Operasi Perbandingan: Buat ngebandingin dua nilai. Hasilnya true atau false. Contoh: 5 > 3, a === b (cek nilai dan tipe).
Operasi Logika: Digunakan untuk menggabungkan beberapa kondisi. Contoh: && (dan) : kedua kondisi harus true, || (atau) : salah satu kondisi cukup true.
Kondisi if-else: Struktur kontrol paling dasar. Blok kode di dalam if (kondisi) akan dieksekusi jika `kondisi` bernilai true. Jika tidak, blok kode di dalam else yang akan dieksekusi. Anda juga bisa menambahkan else if untuk membuat lebih banyak cabang kondisi.

💻 Contoh Kode:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Program Diskon</title>
  </head>
  <body>
    <h1>Cek Konsol Browser untuk Melihat Hasil</h1>

    <script>
      const totalBelanja = 250000;
      let diskon = 0; // nilai diskon awal

      console.log("Total Belanja Anda: Rp", totalBelanja);

      if (totalBelanja >= 500000) {
        diskon = 0.2; // diskon 20%
        console.log("Selamat! Anda mendapatkan diskon 20%");
      } else if (totalBelanja >= 200000) {
        diskon = 0.1; // diskon 10%
        console.log("Selamat! Anda mendapatkan diskon 10%");
      } else {
        console.log("Maaf, tidak ada diskon untuk belanja di bawah Rp 200.000");
      }

      // Operasi aritmatika untuk menghitung harga akhir
      const jumlahDiskon = totalBelanja * diskon;
      const hargaAkhir = totalBelanja - jumlahDiskon;

      console.log("Jumlah Potongan Harga: Rp", jumlahDiskon);
      console.log("Total yang Harus Dibayar: Rp", hargaAkhir);
    </script>
  </body>
</html>

⚙️ Demo Interaktif:

<!DOCTYPE html>
<html>
<head>
  <title>Cek Kelulusan</title>
</head>
<body>
  <h2 id="judul-hasil"></h2>
  <p id="keterangan-hasil"></p>

let grade = "";
      let keterangan = "";

// Logika Kondisi untuk menentukan grade
      if (nilai >= 80) {
        grade = "A";
        keterangan = "Luar Biasa, pertahankan!";
      } else if (nilai >= 70) {
        grade = "B";
        keterangan = "Bagus, tingkatkan lagi!";
      } else if (nilai >= 60) {
        grade = "C";
        keterangan = "Cukup, Anda lulus.";
      } else {
        grade = "D";
        keterangan = "Maaf, Anda perlu belajar lebih giat.";
      }

// Menampilkan hasilnya ke elemen HTML
      document.getElementById("judul-hasil").innerText = "Nilai Anda: " + nilai;
      document.getElementById("keterangan-hasil").innerText = "Status: " + keterangan + " (Grade " + grade + ")";
    };
  </script>
</body>
</html>

💡 Tips: Selalu gunakan operator perbandingan strict === daripada ==. Operator === memastikan nilai dan tipe datanya sama, sehingga lebih aman dan terhindar dari bug yang tidak terduga.