Operator Perbandingan JavaScript: Perbedaan == dan === (Loose vs Strict)
Operator perbandingan JavaScript dipakai untuk membandingkan dua nilai. Pelajari perbedaan == dan === (loose vs strict), type coercion, operator lain (>, <, !=, !==), dan jebakan yang sering bikin bug.
Pembuat Hyper Sheets & BelajarWeb.dev
Operator perbandingan di JavaScript adalah simbol yang dipakai untuk membandingkan dua nilai dan menghasilkan true atau false. Yang paling sering bikin pemula bingung adalah dua operator “sama dengan” yang bentuknya mirip: == (dua tanda sama dengan) dan === (tiga tanda sama dengan). Sekilas keduanya terlihat mengerjakan hal yang sama, padahal perbedaannya bisa jadi sumber bug yang sangat halus. Singkatnya: == membandingkan nilai saja (dan diam-diam mengubah tipe dulu), sedangkan === membandingkan nilai dan tipe sekaligus tanpa mengubah apa pun.
Di panduan ini kamu akan belajar operator perbandingan dari nol: apa bedanya == dan ===, apa itu type coercion yang jadi biang keroknya, daftar operator perbandingan lain (>, <, >=, !=, !==), jebakan-jebakan klasik seperti 0 == "", sampai aturan sederhana biar kodemu tetap aman. Semua contoh pakai istilah berbahasa Indonesia supaya gampang dicerna.
Apa Itu Operator Perbandingan?
Operator perbandingan adalah operator yang mengambil dua nilai, membandingkannya, lalu mengembalikan sebuah nilai boolean, true kalau perbandingannya benar, false kalau salah. Hasilnya inilah yang dipakai untuk mengambil keputusan di dalam program, misalnya di dalam if, perulangan, atau operator ternary.
const umur = 18
console.log(umur >= 17) // true → boleh punya KTP
console.log(umur === 20) // false → umur bukan 20
Setiap perbandingan selalu berujung pada satu dari dua jawaban: benar atau salah. Konsep boolean ini adalah fondasi dari semua percabangan dan kondisi di JavaScript.
Perbedaan == dan === (Ini Bagian Terpentingnya)
Inilah inti dari seluruh artikel ini. Keduanya sama-sama mengecek “apakah dua nilai sama?”, tapi caranya berbeda:
==(loose / longgar), hanya membandingkan nilai. Kalau tipe kedua sisi berbeda, JavaScript akan mengubah salah satunya dulu supaya tipenya cocok, baru dibandingkan. Proses “mengubah tipe diam-diam” ini disebut type coercion.===(strict / ketat), membandingkan nilai dan tipe sekaligus. Kalau tipenya berbeda, langsung dianggapfalsetanpa mengubah apa pun.
Lihat perbedaannya secara langsung dengan contoh paling terkenal:
console.log(5 == "5") // true → "5" diubah jadi angka 5 dulu, baru dibanding
console.log(5 === "5") // false → number vs string, beda tipe → langsung false
Pada baris pertama, == melihat number 5 di kiri dan string "5" di kanan. Karena tipenya beda, JavaScript mengubah string "5" menjadi number 5, lalu membandingkan 5 dengan 5, hasilnya true. Pada baris kedua, === melihat tipenya berbeda (number vs string) dan langsung menyimpulkan false. Nilai boleh sama secara “tampilan”, tapi tipenya jelas berbeda.
Apa Itu Type Coercion?
Type coercion adalah proses JavaScript mengubah nilai dari satu tipe ke tipe lain secara otomatis. Inilah “sihir tersembunyi” di balik == yang membuatnya tidak bisa ditebak. Karena aturannya rumit, hasilnya sering mengejutkan:
console.log(0 == "") // true 😳
console.log(0 == "0") // true
console.log("" == "0") // false
console.log(null == undefined)// true
console.log(false == 0) // true
Perhatikan tiga baris pertama: 0 == "" bernilai true, 0 == "0" bernilai true, tetapi "" == "0" justru false. Tiga perbandingan yang seolah saling berkaitan malah memberi hasil yang tidak konsisten, dan itulah kenapa == berbahaya. Dengan ===, semua kerumitan ini hilang karena tidak ada tipe yang diubah. Kalau kamu ingin memperdalam cara JavaScript menyimpan dan mengubah tipe data, ulas kembali panduan JavaScript untuk pemula yang membahas tipe data secara lengkap.
Coba Sendiri: == vs === Interaktif
Teori lebih gampang menempel kalau kamu melihatnya bekerja. Pilih nilai di sisi kiri dan kanan, lalu perhatikan bagaimana == dan === bisa memberi jawaban yang berbeda untuk pasangan nilai yang sama. Coba pasangan 5 dan "5", lalu 0 dan "", dan lihat penjelasannya:
Coba Sendiri
== vs ===Nilai kiri
Nilai kanan
5 ? "5"
5 == "5"true5 === "5"falseKenapa? === menghasilkan false karena tipe berbeda (number vs string). Tapi == menghasilkan true karena JavaScript diam-diam mengubah tipe dulu (type coercion) sebelum membandingkan, inilah sumber bug yang sering bikin pusing.
Setelah bermain dengan demo di atas, kamu akan lebih peka: setiap kali == dan === memberi hasil berbeda, di situ ada type coercion yang bekerja diam-diam.
Operator Perbandingan Lengkap
Selain dua operator kesetaraan tadi, ada beberapa operator perbandingan lain yang dipakai untuk mengecek besar-kecil dan ketidaksamaan. Berikut daftar lengkapnya:
| Operator | Arti | Contoh | Hasil |
|---|---|---|---|
== |
Sama dengan (longgar, ada coercion) | 5 == "5" |
true |
=== |
Sama persis (nilai + tipe) | 5 === "5" |
false |
!= |
Tidak sama (longgar) | 5 != "5" |
false |
!== |
Tidak sama persis (nilai + tipe) | 5 !== "5" |
true |
> |
Lebih besar dari | 10 > 5 |
true |
< |
Lebih kecil dari | 10 < 5 |
false |
>= |
Lebih besar atau sama dengan | 5 >= 5 |
true |
<= |
Lebih kecil atau sama dengan | 4 <= 3 |
false |
Sama seperti pasangan ==/===, operator ketidaksamaan juga punya dua versi: != (longgar, ikut coercion) dan !== (ketat). Aturannya sama persis, utamakan !== untuk menghindari kejutan.
Kesalahan Umum Saat Membandingkan Nilai
Beberapa jebakan yang sering menimpa pemula:
1. Memakai = alih-alih ==/=== di dalam if. Menulis if (status = "aktif") justru mengisi variabel status dengan "aktif" dan selalu bernilai true. Yang kamu maksud hampir pasti if (status === "aktif").
2. Mengandalkan == untuk data dari form atau input. Nilai dari input HTML selalu berupa string. Jadi nilaiInput === 5 akan false walau pengguna mengetik 5, karena nilaiInput sebenarnya string "5". Solusinya: ubah dulu tipenya dengan Number(nilaiInput), baru bandingkan dengan ===.
3. Membandingkan array atau object dengan ===. Dua object berbeda tidak pernah === walau isinya identik, karena yang dibandingkan adalah reference-nya, bukan isinya. [1,2] === [1,2] selalu false. Ini konsep terpisah yang berkaitan dengan cara object di JavaScript disimpan di memori.
4. Lupa bahwa NaN tidak sama dengan apa pun. NaN === NaN menghasilkan false. Untuk mengecek apakah sebuah nilai adalah NaN, pakai fungsi Number.isNaN(), bukan operator perbandingan.
Apa hasil dari 0 == "" dibandingkan dengan 0 === "" di JavaScript?
FAQ Seputar Operator Perbandingan
Apa perbedaan == dan === dalam JavaScript?
== (loose equality) hanya membandingkan nilai, dan kalau tipenya berbeda ia akan mengubah tipe salah satu sisi dulu (type coercion) sebelum membandingkan. === (strict equality) membandingkan nilai sekaligus tipe tanpa mengubah apa pun, kalau tipenya berbeda, langsung false. Contoh: 5 == "5" bernilai true, tapi 5 === "5" bernilai false.
Sebaiknya pakai == atau === ?
Gunakan === (dan !==) untuk hampir semua kasus. Ia lebih aman dan mudah ditebak karena tidak ada coercion tersembunyi. Banyak style guide profesional bahkan melarang ==. Pakai == hanya jika kamu benar-benar paham konsekuensinya, misalnya trik x == null untuk mengecek null dan undefined sekaligus.
Apa itu type coercion?
Type coercion adalah proses JavaScript mengubah nilai dari satu tipe ke tipe lain secara otomatis, misalnya string "5" menjadi number 5. Coercion inilah yang bekerja di balik == dan membuat hasilnya sering tidak konsisten, seperti 0 == "" yang bernilai true.
Kenapa 5 == “5” menghasilkan true tapi 5 === “5” menghasilkan false?
Karena == mengubah string "5" menjadi number 5 dulu, lalu membandingkan 5 dengan 5 sehingga hasilnya true. Sementara === melihat bahwa yang satu number dan yang satu string, tipenya berbeda, sehingga langsung menghasilkan false tanpa mengubah apa pun.
Bagaimana cara membandingkan dua array atau object?
Operator === tidak bisa dipakai untuk membandingkan isi array atau object, karena ia membandingkan reference (alamat memori), bukan isinya. [1,2] === [1,2] selalu false. Untuk membandingkan isi, kamu perlu membandingkan properti satu per satu, atau ubah keduanya menjadi string dengan JSON.stringify() untuk perbandingan sederhana.
Langkah Selanjutnya
Setelah paham operator perbandingan, konsep-konsep berikut akan terasa lebih mudah karena saling terkait:
- Percabangan (
if/else, ternary), di sinilah hasil perbandingan dipakai untuk mengambil keputusan. - Truthy dan falsy, memahami nilai mana yang dianggap “benar” atau “salah” saat dievaluasi sebagai boolean.
- Konversi tipe, mengubah string menjadi number dengan
Number()atauparseInt()sebelum membandingkan data dari input.
Operator perbandingan kelihatan sederhana, tapi salah paham soal == vs === adalah salah satu sumber bug paling umum bagi pemula. Aturannya cukup satu: pakai === secara default, dan kamu akan menghindari sebagian besar jebakannya. Untuk latihan bertahap dengan umpan balik langsung, kerjakan materi type coercion interaktif di Hyper Sheets yang bisa langsung dicoba di browser. Semakin sering kamu menulis ===, semakin alami rasanya, dan kodemu akan jauh lebih aman.