Pernyataan Kondisional JavaScript Dijelaskan: Cara Menggunakan if, else if, dan switch

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Pendahuluan: Percabangan Kondisional JavaScript dan Peran “else if”

JavaScript adalah bahasa pemrograman yang banyak digunakan untuk mengimplementasikan fungsionalitas dinamis dalam pengembangan web. Di antara banyak fiturnya, percabangan kondisional merupakan mekanisme penting yang memungkinkan proses yang berbeda dijalankan berdasarkan kondisi tertentu.

Dalam artikel ini, kami fokus pada satu jenis percabangan kondisional: pernyataan “else if”. Kami akan menjelaskan sintaks dasar dan penggunaannya secara detail, menggunakan contoh konkret agar mudah dipahami oleh pemula.

Pentingnya Percabangan Kondisional dalam JavaScript

Dalam pemrograman, seringkali diperlukan melakukan tindakan yang berbeda tergantung pada kondisi tertentu. Misalnya, pada situs belanja daring, pengiriman dapat menjadi gratis tergantung pada jumlah pembelian, atau kode kupon hanya dapat diterapkan ketika kondisi spesifik terpenuhi.

Dalam situasi seperti itu, pernyataan if...else dan else if pada JavaScript memungkinkan Anda mendefinisikan logika kondisional yang fleksibel.

Apa Itu Pernyataan “else if”?

Pernyataan else if adalah sintaks yang digunakan untuk mengevaluasi banyak kondisi secara berurutan. Penggunaannya adalah sebagai berikut:

if (condition1) {
  // Process executed when condition1 is true
} else if (condition2) {
  // Process executed when condition2 is true
} else {
  // Process executed when all conditions above are false
}

Struktur ini sangat berguna ketika Anda perlu memeriksa beberapa kondisi. Misalnya, dapat digunakan untuk mengubah hak akses berdasarkan usia pengguna atau menentukan peringkat berdasarkan skor.

Ikhtisar Artikel

Artikel ini mencakup topik‑topik berikut secara berurutan:

1. Sintaks dasar dan penggunaan pernyataan “if” dan “else”
2. Sintaks dan contoh praktis pernyataan “else if”
3. Teknik terapan menggunakan contoh kode dunia nyata
4. Perbandingan antara pernyataan “else if” dan “switch”
5. Kesalahan umum dan tips pemecahan masalah

Dengan mempelajari topik‑topik ini, Anda akan memperkuat kemampuan dalam percabangan kondisional JavaScript dan dapat menulis program yang lebih maju.

Pada bagian berikutnya, kami akan mulai dengan melihat lebih dekat sintaks dasar pernyataan “if” dan “else”.

2. Dasar‑dasar: Sintaks dan Penggunaan Pernyataan “if” dan “else”

Percabangan kondisional JavaScript dapat diimplementasikan secara sederhana menggunakan pernyataan if dan else. Pada bagian ini, kami menjelaskan sintaks dasar mereka serta contoh penggunaannya.

Apa Itu Pernyataan “if”?

Pernyataan if adalah sintaks yang mengeksekusi kode hanya ketika kondisi yang ditentukan menghasilkan nilai true. Struktur dasarnya ditunjukkan di bawah ini.

if (condition) {
  // Code executed when the condition is true
}

Contoh Pernyataan “if”

Contoh berikut melakukan percabangan proses berdasarkan usia pengguna.

let age = 20;

if (age >= 18) {
  console.log("You are an adult.");
}

Pada kode ini, pesan “You are an adult.” ditampilkan ketika variabel age bernilai 18 atau lebih. Jika kondisi tidak terpenuhi, tidak ada yang dieksekusi.

Apa Itu Pernyataan “else”?

Pernyataan else mendefinisikan proses yang dijalankan ketika kondisi “if” bernilai false. Pernyataan ini biasanya dipakai bersama if.

if (condition) {
  // Code executed when the condition is true
} else {
  // Code executed when the condition is false
}

Contoh Pernyataan “else”

Contoh berikut menampilkan pesan yang berbeda ketika pengguna berusia di bawah 18 tahun.

let age = 16;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

Pada kode ini, “You are a minor.” ditampilkan ketika age kurang dari 18.

Ringkasan

Pada bagian ini, kami mempelajari sintaks dan penggunaan pernyataan kondisional dasar JavaScript: if dan else. Konstruksi ini menjadi fondasi tidak hanya untuk percabangan sederhana, tetapi juga untuk membangun logika yang lebih kompleks.

Di bagian berikutnya, kita akan melihat lebih dalam pernyataan else if, yang memungkinkan Anda menangani banyak kondisi. Kami akan menjelajahi contoh praktis dan teknik yang diterapkan.

3. Menengah: Sintaks “else if” dan Contoh untuk Pemula

Pada bagian ini, kami menjelaskan percabangan kondisional kompleks menggunakan pernyataan “else if”. Dengan menggunakan else if, Anda dapat mengevaluasi banyak kondisi secara berurutan dan mengeksekusi proses yang sesuai.

Sintaks Pernyataan “else if”

Pernyataan else if adalah sintaks yang diperluas untuk mengevaluasi banyak kondisi. Struktur dasar adalah sebagai berikut.

if (condition1) {
  // Process when condition1 is true
} else if (condition2) {
  // Process when condition2 is true
} else {
  // Process when all conditions are false
}

Contoh: Evaluasi Nilai Tes

Kode berikut menampilkan evaluasi berdasarkan nilai tes.

let score = 75;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else if (score >= 60) {
  console.log("Grade: D");
} else {
  console.log("Grade: F");
}

Ringkasan

Pada bagian ini, kami menjelaskan sintaks dan contoh pernyataan “else if”. Pernyataan else if adalah fitur kuat yang memungkinkan Anda mengevaluasi banyak kondisi secara berurutan.

Di bagian berikutnya, kami akan memperkenalkan contoh yang lebih maju dan studi kasus untuk membantu Anda membangun keterampilan praktis.

4. Lanjutan: Kode Praktis dan Studi Kasus Menggunakan “else if”

Pada bagian ini, kami memperkenalkan contoh kode praktis menggunakan pernyataan else if. Dengan mengerjakan skenario yang umum ditemui dalam aplikasi nyata, Anda dapat memperkuat keterampilan terapan Anda.

Kasus 1: Validasi Input Formulir

let username = "user123";
let password = "pass123";

if (username === "") {
  console.log("Please enter a username.");
} else if (password === "") {
  console.log("Please enter a password.");
} else if (password.length < 6) {
  console.log("Password must be at least 6 characters long.");
} else {
  console.log("The input is valid.");
}

Kasus 2: Evaluasi Nilai dan Peringkat

let score = 72;

if (score >= 90) {
  console.log("Rank: S");
} else if (score >= 80) {
  console.log("Rank: A");
} else if (score >= 70) {
  console.log("Rank: B");
} else if (score >= 60) {
  console.log("Rank: C");
} else {
  console.log("Rank: D");
}

Ringkasan

Pada bagian ini, kami memperkenalkan contoh terapan dan kode praktis menggunakan pernyataan else if. Dengan menerapkan pola-pola ini, Anda dapat menangani logika kondisional yang lebih kompleks.

Di bagian berikutnya, kami akan membandingkan pernyataan else if dan switch secara detail serta menjelaskan cara memilih di antara keduanya.

5. “else if” vs “switch”: Mana yang Harus Anda Gunakan?

Dalam JavaScript, dua pendekatan yang umum digunakan untuk percabangan kondisional adalah pernyataan else if dan pernyataan switch. Pada bagian ini, kami membandingkan sintaks dan karakteristiknya serta menjelaskan cara memilih yang tepat untuk kasus penggunaan Anda.

Fitur Pernyataan “else if”

Sintaks dan Contoh

let grade = "B";

if (grade === "A") {
  console.log("Excellent!");
} else if (grade === "B") {
  console.log("Good performance.");
} else if (grade === "C") {
  console.log("Pass level.");
} else {
  console.log("Retest required.");
}

Fitur Pernyataan “switch”

Sintaks dan Contoh

let grade = "B";

switch (grade) {
  case "A":
    console.log("Excellent!");
    break;
  case "B":
    console.log("Good performance.");
    break;
  case "C":
    console.log("Pass level.");
    break;
  default:
    console.log("Retest required.");
}

Ringkasan

• Pernyataan “else if”: Cocok untuk ekspresi kondisional kompleks dan operator logika.
• Pernyataan “switch”: Cocok untuk mengatur percabangan kondisional berdasarkan nilai tertentu.

6. Kesalahan Umum dan Tips Penanganan Error

Pada bagian ini, kami menjelaskan kesalahan umum saat menggunakan pernyataan else if dan cara mencegahnya melalui penanganan error yang tepat.

Kesalahan Umum dan Solusinya

Evaluasi Kondisi yang Salah

let age = 20;

if (age > 18) {
  console.log("You are an adult.");
} else if (age > 20) {
  console.log("You are over 20.");
} else {
  console.log("You are a minor.");
}

Menambahkan Penanganan Error

try {
  let input = prompt("Please enter a score:");
  let score = parseInt(input);

  if (isNaN(score)) {
    throw new Error("Please enter a numeric value.");
  }

  if (score >= 90) {
    console.log("Grade: A");
  } else if (score >= 80) {
    console.log("Grade: B");
  } else {
    console.log("Grade: C");
  }
} catch (error) {
  console.error(error.message);
}

Ringkasan

Dengan mencegah kesalahan dalam ekspresi kondisional dan menggunakan teknik debugging serta penanganan error, Anda dapat menulis kode yang lebih aman dan lebih kuat.

7. FAQ: Menjawab Pertanyaan Umum

Pada bagian ini, kami menjawab pertanyaan umum dan kesalahpahaman yang sering dimiliki pembaca tentang pernyataan else if di JavaScript.

Q1. Apa perbedaan antara “else if” dan “if”?

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else {
  console.log("Grade: C");
}

Q2. Berapa kali Anda dapat menggunakan “else if”?

Tidak ada batasan, tetapi jika Anda memiliki banyak kondisi, pertimbangkan untuk menggunakan pernyataan switch.

Q3. Apa perbedaan antara “else if” dan operator ternary?

let score = 75;
console.log(score >= 60 ? "Passed!" : "Failed.");

8. Kesimpulan: Kuasai Pernyataan “else if” JavaScript

Dalam artikel ini, kami membahas segala hal mulai dari dasar hingga contoh lanjutan tentang percabangan kondisional JavaScript menggunakan pernyataan else if.

Poin Pembelajaran Utama

• Sintaks dasar: Mempelajari cara ekspresi kondisional mengontrol alur program.
• Contoh praktis: Memperkuat keterampilan terapan melalui kode dunia nyata.
• Perbandingan: Memahami cara memilih antara else if dan switch.
• Penanganan error: Mempelajari teknik debugging untuk mencegah kesalahan.

Langkah Selanjutnya

• Menggunakan operator logika: Pelajari ekspresi kondisional yang lebih kompleks.
• Operator ternary dan evaluasi short-circuit: Menyederhanakan kondisi.
• Menggabungkan kondisional dengan fungsi: Meningkatkan ketergunaan kembali kode.

Kuasai pernyataan else if dan mulailah menulis program JavaScript yang praktis dan dunia nyata!