Operator dan Kondisional JavaScript: Mengambil Keputusan dalam Kode

Operator memungkinkanmu menghitung dan membandingkan nilai; kondisional memungkinkan kodemu memilih apa yang dilakukan. Pelajari operator aritmetika dan perbandingan, if/else if/else, operator logika, dan pintasan ternary.

Diterbitkan 17 Juli 20267 menit bacaOleh ACY Partner Indonesia
Operator dan kondisional JavaScript — if, perbandingan, dan logika
300 × 250Slot Iklan TersediaPasang iklan Anda di sini

Sampai sini kodemu memang sudah bisa menyimpan nilai, tapi belum bisa berbuat banyak dengan nilai itu, apalagi mengambil pilihan. Nah, di artikel inilah hal itu berubah. Operator adalah simbol-simbol yang dipakai untuk menghitung dan membandingkan nilai, sedangkan kondisional adalah cara kode mengambil keputusan — memilih satu jalur saat sesuatu bernilai benar, dan jalur yang berbeda saat tidak. Dua hal inilah yang bikin programmu mulai terasa pintar.

Buat banyak orang, di momen inilah pemrograman akhirnya benar-benar “nyantol”: kamu sadar bisa menulis kode yang seakan-akan berpikir — “kalau ini, lakukan itu; kalau bukan, lakukan yang lain.” Yuk kita bangun pelan-pelan.

Operator aritmetika: berhitung

Beberapa di antaranya sudah pernah kamu lihat sebelumnya. Operator aritmetika bekerja persis seperti dugaanmu:

const jumlah = 10 + 5;     // 15  (penjumlahan)
const selisih = 10 - 5;    // 5   (pengurangan)
const hasilKali = 10 * 5;  // 50  (perkalian)
const hasilBagi = 10 / 5;  // 2   (pembagian)
const sisa = 10 % 3;       // 1   (modulo — sisanya)

Kebanyakan sudah jelas, tapi yang terakhir perlu sedikit penjelasan. Operator %, yang disebut modulo, menghasilkan sisa dari sebuah pembagian. 10 % 3 hasilnya 1, karena 3 muat ke dalam 10 sebanyak tiga kali dan menyisakan 1. Ternyata operator ini sangat berguna — contohnya, number % 2 === 0 adalah cara baku untuk mengecek apakah sebuah angka genap (angka genap selalu habis dibagi 2, jadi sisanya nol).

Ada juga sejumlah pintasan praktis kalau kamu ingin menambah atau mengurangi nilai sebuah variabel:

let hitung = 5;
hitung += 1;   // sama dengan hitung = hitung + 1  → 6
hitung -= 2;   // sama dengan hitung = hitung - 2  → 4
hitung++;      // menambah 1  → 5

hitung++ termasuk yang paling sering dipakai — pintasan ini menambahkan 1 ke sebuah variabel, dan kamu bakal mengandalkannya terus-menerus setiap kali perlu mencacah atau menghitung sesuatu.

Operator perbandingan: mengajukan pertanyaan

Operator perbandingan membandingkan dua nilai, lalu mengembalikan sebuah boolean (true atau false). Inilah jenis-jenis pertanyaan yang nantinya diajukan oleh kondisionalmu:

Operator Arti Contoh Hasil
=== Sama dengan 5 === 5 true
!== Tidak sama dengan 5 !== 3 true
> Lebih besar dari 5 > 3 true
< Lebih kecil dari 5 < 3 false
>= Lebih besar atau sama 5 >= 5 true
<= Lebih kecil atau sama 3 <= 5 true

Masing-masing menghasilkan true atau false — dan itulah justru bahan yang dibutuhkan sebuah kondisional untuk memutuskan sesuatu.

Pakai === (tiga sama dengan), bukan == (dua sama dengan)

JavaScript menyediakan dua operator kesamaan, === dan ==, dan dalam hampir semua kasus kamu sebaiknya pakai ===. Bedanya begini: === mengecek nilainya sama sekaligus tipenya sama, sedangkan == malah mencoba menyamakan tipenya dulu sebelum membandingkan — dan ini sering bikin hasil yang membingungkan (misalnya "5" == 5 menghasilkan true, padahal "5" === 5 menghasilkan false). Dengan konsisten memakai === (dan !==), kamu terhindar dari satu kelas bug yang susah dilacak. Jadikan ini kebiasaan default-mu, dan baru pakai yang lain kalau memang ada alasan khusus.

Pernyataan if: melakukan sesuatu secara bersyarat

Pernyataan if menjalankan satu blok kode hanya jika sebuah kondisi bernilai benar:

const umur = 20;

if (umur >= 18) {
  console.log("Kamu sudah dewasa.");
}

Bentuknya seperti ini: if (kondisi) { kode }. Kondisinya ditaruh di dalam tanda kurung, dan kalau hasilnya true, kode di dalam kurung kurawal pun dijalankan. Kalau hasilnya false, kode itu dilewati begitu saja. Pada contoh di atas, umur bernilai 20 (jelas >= 18), jadi pesannya ikut tercetak.

else dan else if: menangani alternatifnya

Kalau berdiri sendiri, if cuma mengurus kasus yang “benar”. Supaya ada yang dikerjakan saat kondisinya justru salah, tinggal tambahkan else:

const umur = 15;

if (umur >= 18) {
  console.log("Kamu sudah dewasa.");
} else {
  console.log("Kamu masih di bawah umur.");
}

Dengan begini, tepat satu dari dua pesan yang akan tampil, tergantung umurnya. Lalu kalau kemungkinannya lebih dari dua, kamu bisa merangkainya pakai else if:

const skor = 75;

if (skor >= 90) {
  console.log("Nilai: A");
} else if (skor >= 80) {
  console.log("Nilai: B");
} else if (skor >= 70) {
  console.log("Nilai: C");
} else {
  console.log("Nilai: F");
}

JavaScript mengecek tiap kondisi satu per satu dari atas ke bawah, menjalankan yang pertama bernilai benar, lalu mengabaikan sisanya. Karena skor di sini 75, dua pengecekan pertama gagal, lolos di skor >= 70, mencetak “Nilai: C”, dan langsung berhenti di situ. else di bagian akhir berperan sebagai penampung semua kasus yang tidak cocok dengan kondisi mana pun. Pola if/else if/else ini termasuk salah satu struktur yang paling sering kamu temui di seluruh dunia pemrograman.

Operator logika: menggabungkan kondisi

Kadang sebuah keputusan bergantung pada lebih dari satu hal sekaligus. Di sinilah operator logika berguna untuk menggabungkan beberapa kondisi:

  • && (AND/DAN) — benar hanya kalau kedua sisinya sama-sama benar.
  • || (OR/ATAU) — benar kalau salah satu sisinya saja sudah benar.
  • ! (NOT/BUKAN) — membalik nilai: yang benar jadi salah, yang salah jadi benar.
const umur = 25;
const punyaTiket = true;

if (umur >= 18 && punyaTiket) {
  console.log("Kamu boleh masuk.");
}

Blok ini cuma jalan kalau umur >= 18 dan punyaTiket sama-sama benar — dua-duanya wajib terpenuhi. Coba ganti && jadi ||, dan kodenya akan jalan kalau salah satu saja sudah benar. Operator seperti inilah yang memungkinkanmu menuliskan aturan-aturan dunia nyata ke dalam kode: “kalau pengguna sudah login DAN punya izin,” atau “kalau hari ini akhir pekan ATAU hari libur.”

Operator ternary: pintasan yang ringkas

Untuk keputusan if/else yang sederhana, ada pintasan bernama operator ternary. Pintasan ini pas banget kalau kamu cuma ingin memilih satu dari dua nilai berdasarkan sebuah kondisi:

const umur = 20;
const pesan = umur >= 18 ? "Dewasa" : "Di bawah umur";
console.log(pesan);   // "Dewasa"

Cara bacanya: kondisi ? nilai kalau benar : nilai kalau salah. Jadi umur >= 18 ? "Dewasa" : "Di bawah umur" menghasilkan "Dewasa", karena kondisinya memang benar. Hasilnya sama persis dengan if/else mungil, bedanya cukup dalam satu baris saja. Gunakan untuk pilihan salah-satu yang ringkas; begitu logikanya mulai rumit, if/else biasa justru lebih enak dibaca.

Kondisi hanyalah boolean

Apa pun yang kamu taruh di dalam if (...) pada akhirnya cuma jadi satu boolean — true atau false. Perbandingan seperti umur >= 18 menghasilkan boolean; kombinasi logika seperti a && b juga menghasilkan boolean; bahkan variabel boolean biasa pun langsung bisa dipakai: if (sudahLogin) { ... }. Begitu kamu mulai memandang kondisional sebagai “jalankan ini kalau boolean-nya benar,” seluruh topik ini terasa jauh lebih ringan. Intinya tinggal melatih diri merumuskan pertanyaan yang tepat dalam bentuk boolean.

Penutup

Sekarang kodemu sudah bisa menghitung, membandingkan, sekaligus mengambil keputusan:

  • Operator aritmetika (+, -, *, /, %) untuk berhitung; % (modulo) memberikan sisanya. Pintasan seperti += dan ++ mengubah nilai variabel dengan lebih ringkas.
  • Operator perbandingan (===, !==, >, <, >=, <=) membandingkan nilai dan menghasilkan boolean. Biasakan selalu pakai ===, bukan ==.
  • if menjalankan kode saat kondisi benar; else mengurus kasus yang salah; else if menyambung beberapa kemungkinan sekaligus.
  • Operator logika && (dan), || (atau), dan ! (bukan) dipakai untuk menggabungkan kondisi.
  • Operator ternary (kondisi ? a : b) adalah pintasan satu baris untuk pilihan if/else yang sederhana.

Berbekal kondisional, programmu akhirnya bisa berperilaku berbeda di situasi yang berbeda — dan itulah inti dari sebuah logika. Berikutnya, kita akan belajar cara membungkus kode menjadi blok bernama yang bisa dipakai ulang dan dipanggil kapan pun kamu mau: fungsi, salah satu konsep paling penting di seluruh dunia pemrograman.

Tag:javascriptfrontendoperatorkondisionalpemula
728 × 90Slot Iklan TersediaPasang iklan Anda di sini

Artikel Terkait

Lihat Semua Artikel

Artikel yang Mungkin Kamu Suka

Apa Itu Framework Frontend? — chip kode dengan tag komponen
Frontend / Dasar

Apa Itu Framework Frontend?

Penjelasan ramah untuk pemula tentang apa itu framework frontend, kenapa mereka ada, masalah apa yang mereka selesaikan dibanding JavaScript biasa, dan kapan kamu memang sebaiknya memakainya.

20 Sep 20268 menit baca
Sampul fundamentals frontend bertuliskan Apa Itu Frontend dan HTML + CSS + JS
Frontend / Dasar

Apa Itu Frontend Development?

Panduan ramah pemula tentang frontend development: bagian website yang kamu lihat dan klik secara langsung. Pahami cara kerja HTML, CSS, dan JavaScript, serta bedanya frontend dengan backend.

20 Sep 20268 menit baca
Ilustrasi sampul untuk Apa yang Dikerjakan Frontend Developer
Frontend / Dasar

Apa yang Dikerjakan Frontend Developer: Panduan untuk Pemula

Penjelasan ramah pemula tentang apa yang sebenarnya dikerjakan frontend developer setiap hari: mengubah desain jadi antarmuka yang berfungsi, membangun UI yang bisa dipakai ulang, sampai urusan responsif, aksesibilitas, dan kecepatan.

20 Sep 20269 menit baca
Kartu judul bertuliskan Styling dan Interaktivitas di atas latar biru gelap ACY Partner
Frontend / Dasar

Cara Kerja Styling dan Interaktivitas

Penjelasan ramah pemula soal bagaimana CSS menyulap HTML polos jadi tampilan rapi, dan bagaimana JavaScript menambahkan perilaku — pola berpikir struktur, gaya, perilaku saat membangun halaman web.

20 Sep 20268 menit baca
Tiga lapisan front-end menyatu di satu halaman web
Frontend / Dasar

Cara HTML, CSS, dan JavaScript Bekerja Bersama

Panduan praktis untuk pemula: bikin satu tombol kecil, beri struktur dengan HTML, tampilan dengan CSS, dan perilaku dengan JavaScript, lalu lihat ketiga lapisan ini bekerja sama di halaman nyata.

20 Sep 20268 menit baca
Sampul ikhtisar praktik terbaik frontend
Frontend / Dasar

Ikhtisar Praktik Terbaik Frontend

Peta ringkas tentang apa itu frontend yang baik — HTML bermakna, CSS rapi, JavaScript secukupnya, desain responsif, performa, dan progressive enhancement, lengkap dengan arahan untuk mendalaminya.

20 Sep 20268 menit baca