Kita bahas lecture ini pelan-pelan dari dasar, karena if adalah salah satu konsep paling penting dalam JavaScript. Hampir semua program yang “bisa mengambil keputusan” akan menggunakan konsep seperti ini.

1. Apa itu Conditional Statement?

Conditional statement adalah kode yang memungkinkan JavaScript mengambil keputusan berdasarkan suatu kondisi.

Dalam kehidupan sehari-hari kita sering melakukan hal seperti:

Jika hujan, saya membawa payung. Jika tidak hujan, saya tidak membawa payung.

Dalam JavaScript konsepnya menjadi:

if (hujan) {
    // bawa payung
}

Artinya:

Jika kondisi di dalam if bernilai true, jalankan kode di dalam {}.

Kalau false, kode tersebut dilewati.

2. Apa saja Conditional Statement di JavaScript?

Di lecture disebutkan ada beberapa jenis:

if
if...else
if...else if...else
switch

Lecture ini fokus pada if statement.

if adalah bentuk conditional statement yang paling dasar.

3. Syntax dasar if

Bentuk dasarnya:

if (condition) {
    // kode yang akan dijalankan
}

Ada tiga bagian penting:

if (condition) {
    code
}

if

Kata if berarti:

“Jika…”

(condition)

Ini adalah syarat/kondisi yang ingin kita periksa.

{ }

Disebut code block.

Kode di dalam {} hanya akan dijalankan jika condition menghasilkan true.

4. Contoh paling sederhana

let age = 20;

if (age >= 18) {
    console.log("Anda sudah dewasa");
}

Mari kita ikuti prosesnya.

Langkah 1

JavaScript membuat:

let age = 20;

Jadi:

age = 20

Langkah 2

JavaScript menemukan:

if (age >= 18)

Kemudian JavaScript mengecek:

20 >= 18

Hasilnya:

true

Langkah 3

Karena hasilnya true, JavaScript menjalankan:

console.log("Anda sudah dewasa");

Output:

Anda sudah dewasa

5. Bagaimana kalau kondisinya false?

Misalnya:

let age = 15;

if (age >= 18) {
    console.log("Anda sudah dewasa");
}

JavaScript mengecek:

15 >= 18

Hasil:

false

Karena false, code block dilewati.

Jadi tidak ada output.

6. Gambaran alur if

Bayangkan seperti pintu dengan penjaga.

             condition
                 ↓
              ┌─────┐
              │ if  │
              └──┬──┘
                 ↓
          ┌─────────────┐
          │ true / false│
          └──────┬──────┘
                 │
          ┌──────┴──────┐
          ↓             ↓
        true          false
          ↓             ↓
    jalankan {}     lewati {}
          ↓             ↓
       lanjut ke kode berikutnya

Jadi inti if:

true → masuk ke {} false → lewati {}

7. Condition tidak harus langsung true atau false

Ini bagian yang sangat penting dari lecture.

Di dalam if, kita bisa memberikan:

A. Boolean

if (true) {
    console.log("Hello");
}

atau:

if (false) {
    console.log("Hello");
}

Tapi lecture menjelaskan bahwa kita biasanya tidak menulis true atau false secara langsung.

Kenapa?

Karena:

if (true) {
    console.log("Hello");
}

akan selalu dijalankan.

Tidak ada keputusan yang sebenarnya.

Sedangkan:

if (false) {
    console.log("Hello");
}

tidak akan pernah dijalankan.

Jadi if paling berguna ketika kondisi kadang true dan kadang false.

8. Lebih umum: gunakan expression

Contohnya:

let x = 10;

if (x <= 10) {
    console.log("Hello World");
}

Di sini:

x <= 10

adalah comparison expression.

Comparison operator selalu menghasilkan Boolean.

Misalnya:

10 <= 10

menghasilkan:

true

Sedangkan:

12 <= 10

menghasilkan:

false

Jadi if sangat sering digunakan bersama operator perbandingan.

9. Contoh lengkap dari lecture

Misalnya:

let x = 12;

if (x <= 10) {
    console.log("Hello World");
}

console.log("Code execution complete");

Sekarang perhatikan.

x = 12

Maka:

12 <= 10

hasilnya:

false

Jadi:

console.log("Hello World");

dilewati.

Tetapi:

console.log("Code execution complete");

tetap dijalankan karena berada di luar if.

Output:

Code execution complete

10. Kalau x = 9?

let x = 9;

if (x <= 10) {
    console.log("Hello World");
}

console.log("Code execution complete");

JavaScript mengecek:

9 <= 10

Hasil:

true

Maka JavaScript menjalankan isi if.

Output:

Hello World
Code execution complete

11. Ini yang sebenarnya terjadi

Kode:

if (x <= 10) {
    console.log("Hello World");
}

secara konsep seperti mengatakan:

“JavaScript, cek dulu apakah x kurang dari atau sama dengan 10.”

Jika:

YA → jalankan Hello World
TIDAK → jangan jalankan Hello World

12. Contoh yang lebih nyata: voting

Nah, kemudian lecture menggunakan contoh yang lebih realistis.

Kita ingin membuat program:

Jika umur seseorang 18 tahun atau lebih, dia boleh memilih.

Secara manusia:

Jika umur >= 18
    → boleh voting
Jika tidak
    → tidak boleh voting

Dalam JavaScript:

let age = prompt("Please enter your age");

if (age >= 18) {
    console.log("You are eligible for voting");
}

13. Bagaimana prompt() bekerja?

Kita sudah belajar sebelumnya bahwa:

prompt()

digunakan untuk meminta input dari user.

Misalnya browser menampilkan:

Please enter your age
[ 20 ]

User memasukkan:

20

Kemudian:

let age = prompt("Please enter your age");

menyimpan input tersebut ke:

age

Tetapi ingat: hasil prompt() berupa string.

Jadi walaupun user mengetik:

20

sebenarnya:

typeof age

adalah:

"string"

14. Kenapa age >= 18 tetap bisa bekerja?

Karena JavaScript melakukan type coercion pada comparison tersebut.

Misalnya:

age = "20";

Ketika kita melakukan:

age >= 18

JavaScript akan mengonversi "20" menjadi number dalam proses perbandingan.

Kurang lebih:

"20" → 20

Kemudian:

20 >= 18

hasilnya:

true

Maka isi if dijalankan.

15. Bagaimana jika user memasukkan 15?

Input:

15

Maka:

age = "15"

Kemudian:

age >= 18

secara efektif menjadi:

15 >= 18

hasil:

false

Maka:

console.log("You are eligible for voting");

tidak dijalankan.

16. Bagian penting: kode setelah if tetap dijalankan

Misalnya:

let age = prompt("Please enter your age");

if (age >= 18) {
    console.log("You are eligible for voting");
}

console.log("Thank you for voting");

Jika user memasukkan:

15

hasilnya:

Thank you for voting

Kenapa?

Karena:

if (age >= 18)

bernilai false, sehingga block ini dilewati:

{
    console.log("You are eligible for voting");
}

Kemudian JavaScript lanjut ke:

console.log("Thank you for voting");

17. if tidak menghentikan seluruh program

Ini kesalahan pemahaman yang cukup umum bagi pemula.

Misalnya:

console.log("A");

if (false) {
    console.log("B");
}

console.log("C");

Output:

A
C

Bukan berarti program berhenti.

Yang dilewati hanya code block milik if.

Alurnya:

A
↓
cek if
↓
false
↓
skip B
↓
C

18. Nah, muncul masalah baru

Lecture kemudian membuat kebutuhan baru.

Kita ingin:

Jika umur >= 18
    → "You are eligible for voting"

Jika umur < 18
    → "You are not eligible for voting"

Misalnya kita menulis:

let age = 20;

if (age >= 18) {
    console.log("You are eligible for voting");
}

console.log("You are not eligible for voting");

Masalahnya adalah ketika age = 20, output menjadi:

You are eligible for voting
You are not eligible for voting

Padahal itu tidak masuk akal.

Seseorang tidak boleh mendapatkan dua hasil sekaligus.

19. Kenapa itu terjadi?

Karena JavaScript melihat dua statement yang berbeda:

if (age >= 18) {
    console.log("You are eligible for voting");
}

dan:

console.log("You are not eligible for voting");

Statement kedua tidak memiliki condition.

Jadi dia akan selalu dijalankan.

Kalau:

age = 20

maka:

if → true

sehingga:

eligible

dijalankan.

Kemudian JavaScript lanjut ke baris berikutnya:

not eligible

dan itu juga dijalankan.

20. Solusinya adalah if...else

Ini sebenarnya menjadi materi lecture berikutnya.

Bentuknya:

if (condition) {
    // dijalankan jika true
} else {
    // dijalankan jika false
}

Contoh:

let age = 20;

if (age >= 18) {
    console.log("You are eligible for voting");
} else {
    console.log("You are not eligible for voting");
}

Sekarang hasilnya:

Kalau age = 20

You are eligible for voting

Kalau age = 15

You are not eligible for voting

Tidak akan muncul keduanya sekaligus.

Tetapi ingat, lecture ini baru memperkenalkan masalah tersebut dan mengatakan solusinya akan dibahas di lecture berikutnya.

21. if juga bisa menggunakan truthy/falsy

Ini bagian yang agak penting.

Condition pada if tidak harus:

age >= 18

Kita juga bisa:

if (value) {
    // ...
}

JavaScript akan mengecek apakah value adalah truthy atau falsy.

22. Ingat lagi truthy dan falsy

Nilai falsy utama yang perlu kamu ingat:

false
0
""
null
undefined
NaN

Selain itu, pada dasarnya dianggap truthy.

Contoh:

if (10) {
    console.log("Jalan");
}

10 adalah truthy.

Jadi:

Jalan

akan muncul.

Contoh lain:

if ("hello") {
    console.log("Jalan");
}

String "hello" adalah truthy.

Maka:

Jalan

Sedangkan:

if (0) {
    console.log("Jalan");
}

0 adalah falsy.

Jadi tidak ada output.

23. Jebakan penting: "0" berbeda dengan 0

Ini salah satu bagian paling penting dari lecture.

Perhatikan:

0

adalah Number.

Dan:

"0"

adalah String.

Mereka terlihat mirip, tetapi berbeda.

0

Boolean(0)

hasil:

false

Jadi:

if (0) {
    console.log("Hello");
}

tidak dijalankan.

"0"

Boolean("0")

hasil:

true

Kenapa?

Karena "0" adalah string yang tidak kosong.

Ingat:

String kosong "" → falsy String berisi sesuatu → truthy

Jadi:

if ("0") {
    console.log("Hello");
}

akan dijalankan.

24. Kenapa ini penting dengan prompt()?

Misalnya:

let age = prompt("Enter your age");

if (age) {
    console.log("Age exists");
}

User memasukkan:

0

Yang disimpan sebenarnya:

age = "0";

Bukan:

age = 0;

Dan:

Boolean("0")

adalah:

true

Maka if tetap dijalankan.

25. Kalau ingin "0" menjadi angka 0

Kita bisa melakukan konversi:

let age = prompt("Enter your age");

age = Number(age);

Atau menggunakan unary + seperti yang sudah dibahas di lecture:

let age = prompt("Enter your age");

age = +age;

Sekarang kalau user memasukkan:

0

maka:

age

menjadi:

0

yang merupakan number.

Dan:

Boolean(0)

adalah:

false

26. Tetapi untuk kasus voting, jangan sekadar if (age)

Misalnya:

let age = +prompt("Enter your age");

if (age) {
    console.log("You are eligible");
}

Ini bukan logic yang tepat untuk voting.

Kenapa?

Karena kita sebenarnya tidak ingin bertanya:

“Apakah umur memiliki nilai truthy?”

Kita ingin bertanya:

“Apakah umur minimal 18?”

Jadi condition yang benar:

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

Ini jauh lebih jelas dan sesuai requirement.

27. Cara berpikir yang benar ketika membuat if

Ketika kamu ingin menggunakan if, tanyakan:

“Apa kondisi yang harus terpenuhi agar kode ini dijalankan?”

Misalnya:

Login

Jika password benar, masuk.

if (passwordCorrect) {
    console.log("Login berhasil");
}

Umur

Jika umur >= 18, boleh voting.

if (age >= 18) {
    console.log("Boleh voting");
}

Stok

Jika stok > 0, produk tersedia.

if (stock > 0) {
    console.log("Produk tersedia");
}

Saldo

Jika saldo cukup, transaksi boleh dilakukan.

if (balance >= price) {
    console.log("Pembayaran berhasil");
}

28. if sebenarnya sangat sederhana

Kalau semua teori kita sederhanakan:

if (condition) {
    code;
}

berarti:

“Jalankan code jika condition bernilai true.”

Misalnya:

if (10 > 5) {
    console.log("Benar");
}

JavaScript melakukan:

10 > 5
   ↓
true
   ↓
jalankan console.log()

Sedangkan:

if (10 < 5) {
    console.log("Benar");
}

menjadi:

10 < 5
   ↓
false
   ↓
skip console.log()

29. Hubungan dengan materi sebelumnya

Ini menarik karena materi-materi sebelumnya sekarang mulai terhubung.

Kita sudah belajar:

Comparison operator

age >= 18

menghasilkan:

true / false

Kemudian hasil tersebut dimasukkan ke:

if (...)

Jadi:

age >= 18
     ↓
true / false
     ↓
     if
     ↓
jalankan / skip

Kita juga sudah belajar prompt():

let age = prompt("Enter age");

Kemudian kita gunakan comparison:

age >= 18

Kemudian hasilnya digunakan oleh if:

if (age >= 18) {
    console.log("Eligible");
}

Jadi beberapa materi mulai membentuk satu program utuh:

prompt()
   ↓
user input
   ↓
String
   ↓
comparison
   ↓
true / false
   ↓
if
   ↓
jalankan atau skip

30. Analogi paling gampang: satpam

Bayangkan if seperti satpam di pintu.

if (age >= 18) {
    console.log("Boleh masuk");
}

Satpam memeriksa:

Apakah umur >= 18?

Kalau iya:

TRUE
 ↓
"Boleh masuk"

Kalau tidak:

FALSE
 ↓
Lewati pintu

Satpam tidak melakukan apa-apa terhadap orang yang tidak memenuhi syarat.

Itulah persis cara kerja if.

31. Kesalahan umum pemula

Kesalahan 1 — Menggunakan = untuk condition

Jangan:

if (age = 18) {
}

= adalah assignment.

Artinya memberikan nilai.

Untuk membandingkan gunakan:

if (age === 18) {
}

atau:

if (age >= 18) {
}

Kesalahan 2 — Lupa {}

Biasakan:

if (age >= 18) {
    console.log("Eligible");
}

Daripada menulis logic yang panjang tanpa block yang jelas.

Kesalahan 3 — Mengira if false menghentikan program

Tidak.

if (false) {
    console.log("A");
}

console.log("B");

Output:

B

if hanya melewati block-nya.

Kesalahan 4 — Menggunakan if (true) untuk logic biasa

if (true) {
    console.log("Hello");
}

Ini selalu dijalankan.

Kalau memang selalu ingin menjalankannya, cukup:

console.log("Hello");

Kesalahan 5 — Tidak sadar prompt() menghasilkan String

let age = prompt("Enter age");

Kalau user memasukkan 20, jangan langsung berpikir:

age = number 20

Sebenarnya:

age = "20"

Untuk memastikan menjadi Number:

let age = Number(prompt("Enter age"));

atau:

let age = +prompt("Enter age");

32. Contoh program lengkap

Misalnya kita ingin membuat program sederhana untuk mengecek apakah seseorang sudah cukup umur untuk voting.

let age = Number(prompt("Please enter your age"));

if (age >= 18) {
    console.log("You are eligible for voting");
}

console.log("Thank you for voting");

Misalnya user memasukkan:

20

Prosesnya:

prompt()
   ↓
"20"
   ↓
Number()
   ↓
20
   ↓
20 >= 18
   ↓
true
   ↓
"You are eligible for voting"
   ↓
"Thank you for voting"

Output:

You are eligible for voting
Thank you for voting

Kalau user memasukkan:

15

prosesnya:

"15"
 ↓
15
 ↓
15 >= 18
 ↓
false
 ↓
skip "You are eligible..."
 ↓
"Thank you for voting"

Output:

Thank you for voting

33. Inti besar lecture ini

Kalau kamu hanya ingin mengingat beberapa hal dari lecture ini, ingat ini:

1. if digunakan untuk membuat keputusan

if (condition) {
    // code
}

2. Jika condition true

jalankan code block

3. Jika condition false

skip code block

4. Condition biasanya berupa expression

Contohnya:

age >= 18

yang menghasilkan:

true

atau:

false

5. if juga bisa menerima truthy/falsy

if (value) {
}

6. "0" dan 0 berbeda

Boolean(0)   // false
Boolean("0") // true

7. prompt() menghasilkan String

let age = prompt("Age");

Untuk mengubahnya menjadi Number:

let age = Number(prompt("Age"));

atau:

let age = +prompt("Age");

8. if tidak menghentikan program

Jika condition false, hanya block if yang dilewati. JavaScript lanjut ke statement berikutnya.

🧠 Cheat sheet

// Basic
if (condition) {
    // dijalankan jika condition true
}

// Comparison
if (age >= 18) {
    console.log("Dewasa");
}

// Truthy
if ("hello") {
    console.log("Jalan");
}

// Falsy
if (0) {
    console.log("Tidak jalan");
}

// Input + conversion
let age = Number(prompt("Masukkan umur"));

if (age >= 18) {
    console.log("Boleh voting");
}

Dan konsep paling penting untuk dibawa ke lecture berikutnya:

             IF
              │
       ┌──────┴──────┐
       │             │
     TRUE          FALSE
       │             │
   jalankan       skip
   block           block

Kalimat paling sederhana untuk mengingat if:

if = “Kalau kondisi ini benar, lakukan sesuatu.”

Lecture berikutnya tentang if...else pada dasarnya akan menjawab masalah yang muncul di akhir lecture ini: “Kalau kondisi if ternyata false, bagaimana caranya menjalankan kode alternatif?”