Lecture ini cukup panjang dan memang lebih penting daripada kelihatannya, karena comparison operator akan menjadi dasar untuk membuat keputusan dengan if, else, loop, validasi input, dan lain-lain.

Kita akan bahas perlahan dari yang paling sederhana, lalu masuk ke bagian yang biasanya bikin bingung:

1. Comparison operator dasar
2. Semua comparison menghasilkan Boolean
3. Membandingkan tipe data berbeda
4. == vs ===
5. != vs !==
6. Perbandingan String
7. null vs undefined
8. Kenapa null == 0 berbeda dengan null >= 0
9. Cheat sheet dan pola yang perlu dihafal

1. Apa itu Comparison Operator?

Comparison operator adalah operator yang digunakan untuk membandingkan dua value.

Tujuannya biasanya untuk menjawab pertanyaan seperti:

“Apakah A lebih besar dari B?”

“Apakah umur seseorang sudah 18 tahun?”

“Apakah password yang dimasukkan benar?”

“Apakah nilai ini sama dengan nilai tertentu?”

Contohnya:

let a = 20;
let b = 30;

console.log(a < b);

JavaScript membandingkan:

20 < 30

Jawabannya:

true

2. Comparison Operator Selalu Menghasilkan Boolean

Ini konsep yang sangat penting.

Comparison operator selalu menghasilkan salah satu dari dua nilai:

true

atau:

false

Tidak ada hasil seperti 20, "hello", atau 100.

Contoh:

console.log(10 > 5);

Hasil:

true

Sedangkan:

console.log(10 > 20);

Hasil:

false

Jadi kamu bisa mengingat:

Comparison = pertanyaan yang jawabannya true atau false.

3. Greater Than >

Operator:

>

artinya:

lebih besar dari

Contoh:

let a = 20;
let b = 30;

console.log(a > b);

Kita bertanya:

Apakah 20 lebih besar dari 30?

Jawabannya:

false

Karena 20 tidak lebih besar dari 30.

Sebaliknya:

console.log(b > a);

Artinya:

Apakah 30 lebih besar dari 20?

Hasil:

true

4. Less Than <

Operator:

<

artinya:

lebih kecil dari

Contoh:

let a = 20;
let b = 30;

console.log(a < b);

Artinya:

Apakah 20 lebih kecil dari 30?

Jawabannya:

true

Sedangkan:

console.log(b < a);

Artinya:

Apakah 30 lebih kecil dari 20?

Hasil:

false

5. Greater Than or Equal >=

Operator:

>=

artinya:

lebih besar ATAU sama dengan

Kata “atau” di sini sangat penting.

Misalnya:

let a = 30;
let b = 30;

console.log(a >= b);

Apakah 30 lebih besar dari 30?

❌ Tidak.

Apakah 30 sama dengan 30?

✅ Ya.

Karena salah satu kondisi terpenuhi, hasilnya:

true

Contoh lain:

let a = 40;
let b = 30;

console.log(a >= b);

Apakah 40 lebih besar dari 30?

✅ Ya.

Maka:

true

Tetapi:

let a = 20;
let b = 30;

console.log(a >= b);

20 tidak lebih besar dari 30 dan tidak sama dengan 30.

Maka:

false

6. Less Than or Equal <=

Operator:

<=

artinya:

lebih kecil ATAU sama dengan

Contoh:

let a = 20;
let b = 30;

console.log(a <= b);

Apakah 20 lebih kecil dari 30?

✅ Ya.

Hasil:

true

Kalau:

let a = 30;
let b = 30;

console.log(a <= b);

30 tidak lebih kecil dari 30, tetapi:

30 = 30

Jadi tetap:

true

Tetapi:

let a = 40;
let b = 30;

console.log(a <= b);

40 tidak lebih kecil dari 30 dan tidak sama dengan 30.

Hasil:

false

7. Ringkasan 4 Operator Dasar

Cara mengingat:

>   → lebih besar
<   → lebih kecil

>=  → lebih besar ATAU sama
<=  → lebih kecil ATAU sama

8. Hasil Comparison Bisa Disimpan ke Variable

Karena comparison menghasilkan Boolean, kita bisa menyimpan hasilnya.

Contoh:

let a = 40;
let b = 30;

let x = a > b;

JavaScript mengevaluasi:

40 > 30
↓
true

Kemudian:

x → true

Jadi:

console.log(x);

hasilnya:

true

Ini sangat berguna ketika nanti kita menggunakan if.

Misalnya:

let age = 20;

let isAdult = age >= 18;

Sekarang:

isAdult → true

Kita sudah mendapatkan jawaban dari sebuah kondisi.

9. Membandingkan Tipe Data yang Berbeda

Sekarang masuk bagian yang lebih menarik.

Bagaimana kalau kita membandingkan:

"20"

dengan:

10

Yang satu String, yang satu Number.

JavaScript memiliki aturan tertentu untuk melakukan comparison.

Untuk operator seperti:

>
<
>=
<=

JavaScript dapat melakukan type coercion, yaitu mengubah value ke bentuk yang sesuai untuk comparison.

Contoh:

console.log("2" > "1");

Untuk comparison numerik seperti ini, string tersebut dapat dikonversi menjadi angka:

"2" → 2
"1" → 1

2 > 1
↓
true

10. Contoh String Number dengan Number

console.log("100" < 50);

"100" adalah String.

Tetapi ketika dibandingkan menggunakan <, JavaScript mengubahnya menjadi Number:

"100" → 100

Kemudian:

100 < 50

Jawabannya:

false

Jadi:

console.log("100" < 50);
// false

11. Boolean Juga Bisa Mengalami Coercion

Kita sudah belajar sebelumnya bahwa dalam konteks numeric:

true  → 1
false → 0

Jadi:

console.log(true > 5);

bisa dipahami sebagai:

true → 1

1 > 5
↓
false

Maka:

false

Begitu juga:

console.log(false < 5);

menjadi:

0 < 5

hasilnya:

true

12. Sekarang Masuk ke == dan ===

Ini salah satu bagian paling penting dalam JavaScript.

Ada dua cara utama untuk melakukan equality comparison:

==

dan:

===

Keduanya digunakan untuk mengecek apakah dua value “sama”.

Tetapi ada perbedaan besar.

13. == — Loose Equality

Operator:

==

disebut loose equality atau non-strict equality.

Secara sederhana:

== membandingkan nilai dengan memungkinkan type coercion.

Contoh:

console.log(20 == 20);

Hasil:

true

Tidak ada masalah karena keduanya Number.

Tetapi lihat ini:

console.log(20 == "20");

Kiri:

20 → Number

Kanan:

"20" → String

Dengan ==, JavaScript dapat melakukan coercion sehingga "20" dibandingkan sebagai Number 20.

Jadi:

20 == "20"
↓
20 == 20
↓
true

Hasil:

true

14. === — Strict Equality

Operator:

===

disebut strict equality.

Aturannya:

Nilai harus sama DAN tipe data juga harus sama.

Contoh:

console.log(20 === 20);

Keduanya:

Number

dan nilainya sama.

Hasil:

true

Tetapi:

console.log(20 === "20");

Perhatikan:

20    → Number
"20"  → String

Tipe datanya berbeda.

Maka:

false

15. Cara Mudah Memahami == vs ===

Bayangkan kamu ingin memastikan dua barang sama.

==

Kamu hanya bertanya:

“Apakah nilainya sama?”

20 == "20"

Jawabannya:

true

===

Kamu bertanya:

“Apakah nilainya sama DAN jenisnya juga sama?”

20 === "20"

Jawabannya:

false

Karena:

20    → Number
"20"  → String

16. Tabel == vs ===

17. Mana yang Biasanya Lebih Aman?

Dalam JavaScript modern, kamu akan sangat sering melihat:

===

daripada:

==

Alasannya karena === lebih mudah diprediksi.

Dengan ==, JavaScript bisa melakukan type coercion yang kadang menghasilkan sesuatu yang mengejutkan.

Contoh klasik:

console.log("" == false);

Hasilnya:

true

Karena dengan ==, terjadi coercion.

Sedangkan:

console.log("" === false);

hasilnya:

false

Karena:

""     → String
false  → Boolean

Tipe datanya berbeda.

Untuk pemrograman sehari-hari, biasakan berpikir menggunakan === kecuali memang sengaja membutuhkan perilaku ==.

18. != dan !==

Kalau:

==

artinya:

sama dengan

Maka:

!=

artinya:

tidak sama dengan

Contoh:

console.log(20 != 10);

Apakah 20 tidak sama dengan 10?

Ya.

Hasil:

true

Sedangkan:

console.log(20 != 20);

hasil:

false

Karena 20 memang sama dengan 20.

19. !== — Strict Not Equal

Operator:

!==

artinya:

tidak sama secara strict

Dia memperhatikan:

• nilai
• tipe data

Contoh:

console.log(20 !== 10);

Hasil:

true

Karena nilainya berbeda.

Contoh penting:

console.log(20 !== "20");

Ingat:

20    → Number
"20"  → String

Tipe berbeda.

Karena strict comparison, hasilnya:

true

Artinya kedua operand tidak strict-equal.

20. Ringkasan Equality Operators

Cara mengingat:

==   → sama, lebih longgar
===  → sama, lebih ketat

!=   → tidak sama, lebih longgar
!==  → tidak sama, lebih ketat

21. Contoh "" == false

Lecture memberikan contoh yang sangat bagus:

console.log("" == false);

Mari kita lihat.

Kiri:

"" → String

Kanan:

false → Boolean

Dengan ==, JavaScript melakukan coercion.

Dalam numeric conversion:

"" → 0
false → 0

Jadi:

0 == 0
↓
true

Maka:

console.log("" == false);
// true

Tetapi:

console.log("" === false);

akan menghasilkan:

false

karena:

String ≠ Boolean

22. Perbandingan String

Sekarang kita masuk ke bagian yang agak berbeda.

Bagaimana kalau kita melakukan:

console.log("a" < "z");

Apakah JavaScript mengubah "a" dan "z" menjadi Number?

Tidak dalam kasus perbandingan String seperti ini.

JavaScript melakukan lexicographical comparison.

Sederhananya:

String dibandingkan berdasarkan urutan karakter.

Untuk karakter, JavaScript menggunakan nilai Unicode.

Lecture menyebut contoh nilai ASCII. ASCII adalah bagian dari sistem Unicode untuk karakter-karakter dasar.

23. "a" < "z"

Secara sederhana:

"a"
↓
nilai karakter lebih kecil

"z"
↓
nilai karakter lebih besar

Karena a berada sebelum z, maka:

console.log("a" < "z");

hasil:

true

24. Huruf Besar vs Huruf Kecil

Ini juga penting.

Contoh:

console.log("a" < "A");

Banyak pemula mungkin berpikir:

“a dan A adalah huruf yang sama.”

Secara karakter memang sama-sama huruf A, tetapi case-sensitive dalam comparison.

Nilai Unicode/ASCII:

"A" → 65
"a" → 97

Karena:

97 < 65

adalah salah, maka:

"a" < "A"

hasilnya:

false

25. Membandingkan String yang Lebih Panjang

Misalnya:

console.log("grass" < "green");

JavaScript membandingkan karakter satu per satu dari kiri ke kanan.

Kita punya:

grass
green

Karakter pertama:

g vs g

Sama.

Lanjut:

r vs r

Sama.

Lanjut:

a vs e

Nah, berbeda.

Jadi JavaScript tidak perlu membandingkan karakter berikutnya.

Kita cukup menentukan hasil berdasarkan:

a vs e

Karena a berada sebelum e, maka:

"a" < "e"

adalah true.

Jadi:

"grass" < "green"

adalah:

true

Catatan: transkrip lecture tampaknya menyebut hasil untuk contoh ini secara tidak konsisten. Aturan yang benar untuk lexicographical comparison adalah "grass" < "green" → true, karena perbedaan pertama adalah a vs e.

26. Bagaimana Kalau Salah Satu String Merupakan Prefix?

Contoh:

console.log("two" > "to");

Bandingkan:

two
to

Karakter pertama:

t = t

Karakter kedua:

w = o

Sebenarnya sudah berbeda di sini, jadi kita tidak perlu melihat panjang.

Contoh yang lebih jelas adalah:

console.log("to" < "too");

Bandingkan:

to
too

Karakter pertama:

t = t

Karakter kedua:

o = o

String pertama sudah habis.

Karena "to" merupakan prefix dari "too", string yang lebih pendek dianggap lebih kecil.

Maka:

"to" < "too"
↓
true

27. Algoritma Sederhana String Comparison

Ketika membandingkan dua String, bayangkan JavaScript melakukan:

Karakter pertama
      ↓
sama?
      ↓
ya → lanjut karakter berikutnya
      ↓
berbeda?
      ↓
tentukan berdasarkan urutan karakter

Kalau semua karakter yang dibandingkan sama sampai salah satu string habis:

bandingkan panjang string

Ini mirip cara kita mengurutkan kata dalam kamus.

Makanya disebut:

Lexicographical order

28. null dan undefined

Sekarang kita masuk ke bagian yang agak tricky.

Kita sudah tahu:

null

dan:

undefined

sama-sama menunjukkan “tidak ada nilai”, tetapi secara konsep keduanya berbeda.

null

Biasanya berarti:

Programmer secara sengaja mengatakan “tidak ada nilai”.

Contoh:

let user = null;

undefined

Biasanya berarti:

Belum ada nilai yang diberikan.

Contoh:

let user;

console.log(user);

hasil:

undefined

29. null === undefined

Sekarang:

console.log(null === undefined);

Hasil:

false

Kenapa?

Karena === membandingkan tipe juga.

Secara konsep:

null       → Null
undefined  → Undefined

Tipe berbeda.

Jadi:

false

30. Tapi null == undefined

Ini salah satu pengecualian terkenal dalam JavaScript:

console.log(null == undefined);

hasil:

true

Dengan ==, JavaScript memiliki aturan khusus bahwa:

null == undefined

adalah:

true

Tetapi keduanya tidak loose-equal dengan value lain sembarangan.

Misalnya:

null == 0

hasilnya:

false

Ini akan kita bahas karena sangat penting.

31. null >= 0 Bisa true

Ini bagian yang paling sering membuat orang bingung.

Coba:

console.log(null >= 0);

Hasil:

true

Kenapa?

Untuk relational comparison seperti:

>
<
>=
<=

null diperlakukan sebagai numeric value 0.

Jadi:

null >= 0

menjadi:

0 >= 0

dan:

true

32. Tapi null == 0 adalah false

Sekarang lihat:

console.log(null == 0);

Hasil:

false

Ini kelihatannya aneh:

null >= 0 → true
null == 0  → false

Bukankah null dianggap 0?

Tidak secara universal.

Ini kunci penting:

Aturan equality (==) berbeda dengan aturan relational comparison (>=, >, <, <=).

33. Kenapa null == 0 False?

Karena == memiliki aturan khusus untuk null.

Untuk loose equality:

null == undefined → true

Tetapi:

null == 0
null == false
null == ""

adalah:

false

Jadi jangan berpikir:

“null selalu berubah menjadi 0.”

Yang benar:

Dalam relational comparison, null dapat dikonversi menjadi 0.

Tetapi dalam loose equality, null memiliki aturan khusus.

34. undefined Lebih Tricky Lagi

Dalam operasi numerik/comparison tertentu, undefined dapat dikonversi menjadi:

NaN

Ingat:

NaN = Not a Number

Dan NaN menghasilkan false dalam relational comparisons.

Misalnya secara konsep:

undefined >= 0

menjadi:

NaN >= 0

hasil:

false

Begitu juga:

undefined < 0

hasil:

false

35. null vs undefined — Yang Wajib Dihafal

Untuk equality:

null == undefined

hasil:

true

Tetapi:

null === undefined

hasil:

false

Karena strict equality memperhatikan tipe.

Dan:

null == 0

hasil:

false

Sedangkan:

null >= 0

hasil:

true

Karena relational comparison memperlakukan null sebagai 0.

36. Tabel Penting null dan undefined

37. Kenapa Comparison Operator Penting?

Karena comparison operator adalah fondasi untuk membuat keputusan dalam program.

Misalnya kita punya umur:

let age = 20;

Kita bisa bertanya:

age >= 18

Hasilnya:

true

Nanti bisa digunakan:

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

Artinya:

Kalau age >= 18 bernilai true, jalankan kode tersebut.

Jadi pola berpikirnya:

Data
 ↓
Comparison
 ↓
true / false
 ↓
Decision

Ini adalah salah satu fondasi utama programming.

38. Contoh Dunia Nyata

Misalnya sistem menentukan apakah siswa lulus:

let score = 80;

let passed = score >= 75;

JavaScript menghitung:

80 >= 75
↓
true

Maka:

passed → true

Atau validasi umur:

let age = 17;

let canVote = age >= 18;

Hasil:

17 >= 18
↓
false

Jadi:

canVote → false

39. Pola Comparison yang Sebaiknya Kamu Hafalkan

let age = 20;

age > 18      // true
age < 18      // false
age >= 18     // true
age <= 18     // false

age == 20     // true
age === 20    // true

age != 18     // true
age !== 18    // true

Kalau:

age = "20";

maka:

age == 20     // true
age === 20    // false

Karena:

"20" → String
20   → Number

40. Cheat Sheet Lengkap

Comparison dasar

>   // lebih besar
<   // lebih kecil
>=  // lebih besar atau sama
<=  // lebih kecil atau sama

Contoh:

10 > 5    // true
10 < 5    // false
10 >= 10  // true
10 <= 10  // true

Equality

==   // loose equality
===  // strict equality

Contoh:

20 == "20"   // true
20 === "20"  // false

Inequality

!=   // loose not equal
!==  // strict not equal

Contoh:

20 != "10"   // true
20 !== "10"  // true

41. Satu Aturan yang Sangat Penting

Kalau kamu melihat:

>
<
>=
<=

pikirkan:

“Ini comparison secara urutan/nilai.”

Kalau melihat:

==

pikirkan:

“Bandingkan dengan kemungkinan coercion.”

Kalau melihat:

===

pikirkan:

“Nilai DAN tipe harus sama.”

42. Perbandingan == vs === dengan Analoginya

Bayangkan ada dua kotak.

Kotak pertama:

[ 20 ]

Kotak kedua:

[ "20" ]

==

Bertanya:

“Apakah isi yang dimaksud sama?”

JavaScript bisa mengubah "20" menjadi 20.

20 == "20"
↓
20 == 20
↓
true

===

Bertanya:

“Apakah isinya sama DAN jenisnya sama?”

20    → Number
"20"  → String

Jenis berbeda.

false

43. Kesimpulan Lecture

Ada beberapa konsep yang wajib benar-benar kamu kuasai.

1. Comparison menghasilkan Boolean

10 > 5
// true

atau:

10 > 20
// false

2. Operator dasar

>   → lebih besar
<   → lebih kecil
>=  → lebih besar atau sama
<=  → lebih kecil atau sama

3. == vs ===

==   → loose equality → bisa melakukan coercion
===  → strict equality → nilai + tipe harus sama

Contoh:

20 == "20"   // true
20 === "20"  // false

4. != vs !==

!=   → loose not equal
!==  → strict not equal

5. String dibandingkan secara lexicographical

JavaScript membandingkan karakter dari kiri ke kanan.

"a" < "z" // true

Dan huruf besar/kecil berbeda karena nilai karakternya berbeda:

"a" < "A" // false

6. null dan undefined punya aturan khusus

Yang paling penting:

null == undefined
// true

null === undefined
// false

null == 0
// false

null >= 0
// true

Jangan mencoba menghafalkan semuanya sebagai satu aturan besar. Ingat bahwa equality dan relational comparison memiliki aturan coercion yang berbeda.

🧠 Inti Besarnya

Kalau disederhanakan, comparison operator itu sebenarnya seperti kita mengajukan pertanyaan kepada JavaScript:

20 > 10
↓
"Apakah 20 lebih besar dari 10?"
↓
true

20 === "20"
↓
"Apakah nilainya DAN tipenya sama?"
↓
false

Dan hasil true/false inilah yang nanti menjadi bahan bakar untuk:

comparison
    ↓
true / false
    ↓
if / else
    ↓
program mengambil keputusan

Jadi setelah lecture ini, === vs == dan ++/-- adalah dua hal yang sangat bagus untuk kamu kuasai kuat-kuat, karena keduanya akan terus muncul di materi JavaScript berikutnya.