Lecture ini sangat penting, karena logical operator (||, &&, !) nantinya akan sering dipakai bersama if, validasi, filtering data, dan pengambilan nilai default.

Kalau comparison operator sebelumnya menjawab:

“Apakah A lebih besar dari B?” → true / false

maka logical operator digunakan untuk menggabungkan atau membalik kondisi/nilai tersebut.

1. Tiga Logical Operator di JavaScript

JavaScript memiliki 3 logical operator utama:

Contoh sederhana:

true || false
true && false
!true

Hasilnya:

true
false
false

Tetapi ada hal yang membuat logical operator JavaScript sedikit berbeda.

Di banyak bahasa pemrograman, logical operator terutama digunakan untuk true dan false.

JavaScript bisa menggunakan logical operator pada nilai non-Boolean, misalnya:

10 || 0
"Hello" && 100

Dan hasilnya bisa berupa:

10
100

Bukan otomatis true atau false.

Ini adalah bagian paling penting dari lecture ini.

2. Sebelum lanjut: pahami Truthy dan Falsy

Agar memahami || dan &&, kamu harus benar-benar paham truthy dan falsy.

Falsy

Di JavaScript hanya ada 6 nilai falsy utama:

false
undefined
null
""
NaN
0

Kalau nilai tersebut dianggap sebagai Boolean, hasilnya false.

Contoh:

Boolean(false)     // false
Boolean(undefined) // false
Boolean(null)      // false
Boolean("")        // false
Boolean(NaN)       // false
Boolean(0)         // false

Catatan: lecture menyebut “NN”, maksudnya adalah NaN.

3. Selain 6 nilai tersebut → Truthy

Hampir semua nilai lainnya adalah truthy.

Contohnya:

Boolean(10)        // true
Boolean(-10)       // true
Boolean("hello")   // true
Boolean("0")       // true
Boolean([])        // true
Boolean({})        // true

Perhatikan sesuatu yang sering menjebak pemula:

Boolean("0") // true

Kenapa?

Karena "0" adalah string yang tidak kosong, bukan angka 0.

Sedangkan:

Boolean(0) // false

4. Cara mudah mengingat Truthy dan Falsy

Bayangkan JavaScript punya “lampu”:

Falsy = lampunya mati 🔴

false
0
""
null
undefined
NaN

Truthy = lampunya menyala 🟢

Selain keenam nilai tersebut.

Jadi ketika JavaScript melihat:

if (nilai) {
    ...
}

JavaScript akan bertanya:

“Nilai ini dianggap truthy atau falsy?”

5. Operator OR ||

Operator OR ditulis:

||

Bacanya:

ATAU

Secara logika sederhana:

Yang penting ada minimal satu yang benar.

Contoh:

true || false

Hasil:

true

Karena salah satunya true.

Tabel OR

| A | B | A || B | |—|—|—| | false | false | false | | false | true | true | | true | false | true | | true | true | true |

Jadi:

|| menghasilkan kondisi benar kalau minimal satu operand truthy.

6. Hal penting: || di JavaScript tidak selalu mengembalikan Boolean

Ini yang membedakan JavaScript dari pemahaman logika sederhana.

Misalnya:

let x = true;
let y = false;

console.log(x || y);

Hasil:

true

Kelihatannya normal.

Tapi coba:

let x = 10;
let y = 0;

console.log(x || y);

Hasil:

10

Bukan:

true

Kenapa?

Karena || di JavaScript bekerja dengan konsep:

Cari nilai truthy pertama.

7. 10 || 0

Mari kita lihat:

10 || 0

JavaScript mengecek dari kiri:

10

Apakah 10 truthy?

Ya.

Maka JavaScript langsung berkata:

“Saya sudah menemukan nilai truthy. Ambil 10.”

Hasil:

10

Nilai 0 bahkan tidak perlu diperiksa.

8. Inilah yang disebut Short-Circuit Evaluation

Short-circuit artinya JavaScript berhenti mengevaluasi ketika sudah menemukan hasil yang pasti.

Contoh:

10 || 0 || 20

Urutannya:

10 → truthy

Ketemu truthy pertama.

Maka langsung:

10

0 dan 20 tidak perlu diproses lebih lanjut.

Secara sederhana:

10 || 0 || 20
↑
truthy → STOP

9. Contoh false || true || false

Sekarang:

false || true || false

JavaScript:

false → falsy → lanjut
true  → truthy → STOP

Hasil:

true

Nilai false terakhir tidak perlu diperiksa.

10. Kalau semua nilai Falsy?

Misalnya:

false || 0 || undefined || "" || null

Semuanya falsy.

JavaScript akan terus berjalan sampai akhir:

false      → lanjut
0          → lanjut
undefined  → lanjut
""         → lanjut
null       → selesai

Karena tidak menemukan truthy sama sekali, JavaScript mengembalikan nilai terakhir.

Jadi:

false || 0 || undefined || "" || null

hasilnya:

null

11. Rumus gampang untuk ||

Ingat ini:

|| → ambil nilai truthy pertama

Kalau tidak ada truthy → ambil nilai terakhir

Contoh:

0 || "" || 25 || 100

Hasil:

25

Karena 25 adalah truthy pertama.

Contoh:

0 || "" || null || false

Tidak ada truthy.

Hasil:

false

Karena false adalah nilai terakhir.

12. Operator AND &&

Sekarang kita masuk ke:

&&

Bacanya:

DAN

Secara logika:

Semua harus benar.

Contoh:

true && true

hasil:

true

Tetapi:

true && false

hasil:

false

13. Tabel AND

Jadi:

&& hanya menghasilkan kondisi benar kalau semuanya truthy.

14. Cara berpikir &&

Bayangkan kamu mau masuk ke suatu ruangan.

Syaratnya:

Punya tiket DAN punya ID

Kalau:

Punya tiket = true
Punya ID    = true

→ boleh masuk.

Tapi:

Punya tiket = true
Punya ID    = false

→ tidak boleh masuk.

Karena satu saja gagal, keseluruhan AND gagal.

15. && juga bisa digunakan dengan non-Boolean

Sama seperti ||, JavaScript tidak selalu mengembalikan true atau false.

Contoh:

10 && 0

Hasil:

0

Kenapa?

Karena 10 truthy, jadi JavaScript lanjut.

Kemudian:

10 → truthy → lanjut
0  → falsy  → STOP

Maka yang dikembalikan adalah:

0

16. Aturan &&

Ingat:

&& → ambil nilai falsy pertama

Kalau tidak ada falsy → ambil nilai terakhir

Contoh:

"hello" && 100 && undefined && 50

Urutannya:

"hello"   → truthy → lanjut
100       → truthy → lanjut
undefined → falsy  → STOP

Hasil:

undefined

50 tidak diperiksa.

17. Kalau semuanya Truthy?

Contoh:

"hello" && 100 && true && "world"

Semuanya truthy.

Maka JavaScript sampai akhir.

Hasil:

"world"

Karena "world" adalah nilai terakhir.

18. Rumus || vs &&

Ini bagian yang wajib banget dihafalkan.

OR ||

Cari TRUTHY pertama
Kalau tidak ada → ambil nilai terakhir

AND &&

Cari FALSY pertama
Kalau tidak ada → ambil nilai terakhir

Visualnya:

||  → truthy → STOP
&&  → falsy  → STOP

19. Perbandingan || dan &&

20. Kenapa || dan && bisa mengembalikan angka/string?

Karena ada dua konsep berbeda:

Dalam logika Boolean

true || false

hasilnya:

true

Dalam JavaScript dengan nilai non-Boolean

10 || 20

hasilnya:

10

JavaScript tidak harus mengubah hasil akhirnya menjadi Boolean.

JavaScript menggunakan truthy/falsy untuk menentukan nilai mana yang harus dikembalikan.

Ini sangat penting.

21. Operator NOT !

Sekarang operator ketiga:

!

Bacanya:

NOT / kebalikan

! adalah unary operator, artinya hanya bekerja pada satu operand.

Contoh:

!true

hasil:

false

Dan:

!false

hasil:

true

22. NOT membalik Boolean

Gampangnya:

true  → ! → false
false → ! → true

Contoh:

let a = true;

console.log(!a);

Hasil:

false

23. Bagaimana kalau ! digunakan pada non-Boolean?

Nah, JavaScript akan melakukan dua langkah.

Misalnya:

let a = 100;

!a

Langkah 1

JavaScript melihat:

100

100 adalah truthy.

Maka:

100 → true

Langkah 2

Kemudian ! membalik:

true → false

Jadi:

!100

hasil:

false

24. Contoh !0

!0

0 adalah falsy.

Maka:

0 → false

Kemudian ! membalik:

false → true

Jadi:

!0 // true

25. Contoh beberapa nilai

!100       // false
!"hello"   // false
!0         // true
!""        // true
!null      // true
!undefined // true

Karena:

• 100 → truthy → ! → false
• "hello" → truthy → ! → false
• 0 → falsy → ! → true
• "" → falsy → ! → true

26. Trik mengubah nilai menjadi Boolean: !!

Ini salah satu bagian yang paling berguna dari lecture.

Misalnya:

let a = 100;

Kita ingin tahu:

Apakah 100 truthy atau falsy?

Kita bisa menggunakan:

!!a

Kenapa dua !?

!a

Pertama:

100
 ↓
true
 ↓ !
false

Jadi:

!a // false

Kemudian kita kasih ! lagi:

!!a

Menjadi:

100
 ↓
true
 ↓ !
false
 ↓ !
true

Hasil akhirnya:

true

27. Jadi !! bisa dianggap sebagai konversi ke Boolean

Contoh:

!!100       // true
!!"hello"   // true
!!0         // false
!!""        // false
!!null      // false
!!undefined // false

Cara gampang mengingat:

! pertama membalik sekaligus membuatnya Boolean.

! kedua membalik kembali ke kondisi Boolean aslinya.

Jadi:

!!value

secara praktis berarti:

“Nilai ini truthy atau falsy dalam bentuk Boolean?”

28. Hubungan dengan Boolean()

Ada dua cara:

Boolean(100)

hasil:

true

atau:

!!100

hasil:

true

Keduanya menghasilkan Boolean.

Untuk pemula, Boolean(value) biasanya lebih jelas dibaca.

Sedangkan:

!!value

adalah idiom JavaScript yang cukup umum.

29. Bagian paling penting: || bukan sekadar “atau”

Pemula sering berpikir:

10 || 20

pasti menghasilkan:

true

❌ Tidak.

Hasilnya:

10

Karena || mencari truthy value pertama.

Begitu juga:

"hello" || 100

hasil:

"hello"

Bukan true.

30. && juga bukan sekadar “dan”

Misalnya:

10 && 20

Bukan:

true

Hasilnya:

20

Karena:

10 → truthy → lanjut
20 → truthy → sampai akhir

Maka nilai terakhir:

20

31. Analogi sederhana

Bayangkan || seperti mencari orang pertama yang punya uang:

Andi    → tidak punya
Budi    → tidak punya
Citra   → punya
Deni    → punya

Dengan:

Andi || Budi || Citra || Deni

Kita berhenti di Citra.

|| → “Cari yang pertama bisa dipakai.”

Sedangkan && seperti pemeriksaan berantai:

Pintu 1 → lolos
Pintu 2 → lolos
Pintu 3 → gagal
Pintu 4 → tidak perlu dicek

Dengan:

Pintu1 && Pintu2 && Pintu3 && Pintu4

Kita berhenti saat menemukan yang gagal.

&& → “Cari yang pertama gagal.”

Ini cara yang sangat bagus untuk mengingat short-circuit.

32. Contoh nyata ||: nilai default

Ini salah satu penggunaan || yang sangat umum.

Misalnya:

let username = "";

Kita ingin:

Kalau username kosong, gunakan "Guest".

Bisa:

let name = username || "Guest";

Karena:

username = ""

adalah falsy.

Maka:

"" → falsy → lanjut
"Guest" → truthy → STOP

Hasil:

name = "Guest";

Contoh lain:

let username = "Budi";

let name = username || "Guest";

Karena "Budi" truthy:

"Budi" → truthy → STOP

Maka:

name = "Budi";

Ini salah satu alasan kenapa || sangat berguna.

33. Contoh nyata &&

Misalnya:

let isLoggedIn = true;

Kita ingin menjalankan sesuatu hanya kalau user sudah login.

Secara sederhana nanti bisa:

isLoggedIn && console.log("Welcome!");

Karena:

isLoggedIn

adalah true, JavaScript lanjut ke kanan:

console.log("Welcome!");

Kalau:

isLoggedIn = false;

maka:

false → STOP

sehingga bagian kanan tidak dijalankan.

Ini memanfaatkan short-circuit.

34. Contoh kombinasi || dan &&

Misalnya:

let username = "";
let age = 20;

let name = username || "Guest";
let result = age >= 18 && "Dewasa";

Untuk name:

"" → falsy
"Guest" → truthy

Jadi:

name // "Guest"

Untuk result:

age >= 18
20 >= 18
true

Kemudian:

true && "Dewasa"

Hasil:

"Dewasa"

Perhatikan lagi: && menghasilkan nilai, bukan harus Boolean.

35. Hati-hati dengan istilah “first truthy” dan “first falsy”

Jangan sampai tertukar:

||

a || b || c

Cari:

TRUTHY pertama

&&

a && b && c

Cari:

FALSY pertama

Contoh:

0 || 5 || 10

→ 5

Sedangkan:

10 && 0 && 20

→ 0

36. Short-Circuit adalah fitur yang sangat penting

Misalnya:

true || sesuatuYangBerat()

Karena sebelah kiri sudah true, JavaScript tidak perlu mengevaluasi sebelah kanan.

true → sudah cukup → STOP

Untuk &&:

false && sesuatuYangBerat()

Karena sudah ada false, hasil keseluruhan tidak mungkin menjadi true.

Jadi JavaScript berhenti:

false → sudah cukup → STOP

Ini bukan cuma teori. Teknik ini sering dipakai dalam kode JavaScript nyata.

37. Perbedaan besar dengan comparison operator

Lecture sebelumnya:

10 > 5

hasilnya selalu:

true

Karena comparison operator menghasilkan Boolean.

Sedangkan:

10 || 5

hasil:

10

Dan:

10 && 5

hasil:

5

Jadi:

38. Cheat Sheet

OR ||

A || B

Artinya:

Cari truthy pertama.

Jika:

0 || 10

hasil:

10

Jika:

10 || 20

hasil:

10

Jika semua falsy:

0 || "" || null

hasil:

null

AND &&

A && B

Artinya:

Cari falsy pertama.

Jika:

10 && 0

hasil:

0

Jika:

10 && 20

hasil:

20

Jika semua truthy:

10 && 20 && "hello"

hasil:

"hello"

NOT !

!value

Artinya:

Ubah ke Boolean lalu balik nilainya.

!true  // false
!false // true

!100   // false
!0     // true

Double NOT !!

!!value

Artinya:

Konversi nilai menjadi Boolean.

!!100   // true
!!0     // false
!!"abc" // true
!!""    // false

39. Satu tabel besar untuk dihafalkan

40. Beberapa contoh untuk latihan berpikir

Coba tebak dulu sebelum melihat jawabannya.

1

10 || 20

Jawaban:

10

Karena 10 sudah truthy.

2

0 || 20

Jawaban:

20

Karena 0 falsy, sehingga lanjut ke 20.

3

10 && 20

Jawaban:

20

Karena keduanya truthy dan 20 adalah nilai terakhir.

4

10 && 0 && 20

Jawaban:

0

Karena 0 adalah falsy pertama.

20 tidak perlu diperiksa.

5

!0

Jawaban:

true

Karena:

0 → falsy → ! → true

6

!!"Hello"

Jawaban:

true

Karena "Hello" truthy.

7

false || 0 || "" || "JavaScript"

Jawaban:

"JavaScript"

Karena tiga nilai pertama falsy, kemudian "JavaScript" truthy.

Inti lecture ini

Kalau kamu hanya mau mengingat 5 hal, ingat ini:

1. Ada 3 logical operator

||   // OR
&&   // AND
!    // NOT

2. JavaScript punya truthy dan falsy

Falsy utama:

false
0
""
null
undefined
NaN

Selain itu umumnya truthy.

3. || mencari truthy

A || B || C

Ambil truthy pertama.

Kalau tidak ada:

Ambil nilai terakhir.

4. && mencari falsy

A && B && C

Ambil falsy pertama.

Kalau tidak ada:

Ambil nilai terakhir.

5. ! membalik truthy/falsy

!true  // false
!false // true

!100   // false
!0     // true

Dan:

!!value

bisa digunakan untuk mendapatkan hasil Boolean dari suatu nilai.

Pola paling gampang diingat

||  → cari yang "BENAR" pertama
&&  → cari yang "SALAH" pertama
!   → BALIK

Kalau kamu sudah memahami pola || = first truthy, && = first falsy, dan ! = reverse, sebenarnya sebagian besar isi lecture ini sudah kamu kuasai.