Lecture ini membahas operator precedence dan associativity. Keduanya sangat penting karena ketika satu expression memiliki banyak operator, JavaScript harus menentukan:

“Operator mana yang dikerjakan dulu?”

Kalau kita tidak memahami aturan ini, kita bisa salah menebak hasil sebuah expression.

1. Masalah yang ingin diselesaikan

Misalnya ada expression:

10 + 3 - 5 * 4 / 2

Ada banyak operator:

• +
• -
• *
• /

Pertanyaannya:

Apakah JavaScript mengerjakannya dari kiri ke kanan?

Kalau iya:

10 + 3 = 13
13 - 5 = 8
8 * 4 = 32
32 / 2 = 16

Hasilnya:

16

Tetapi ternyata JavaScript tidak sekadar mengerjakan semua dari kiri ke kanan.

Ada aturan yang disebut:

Operator precedence

2. Apa itu Operator Precedence?

Operator precedence = tingkat prioritas suatu operator.

Sederhananya:

Operator yang precedence-nya lebih tinggi akan dikerjakan lebih dahulu.

Contoh matematika yang sudah familiar:

10 + 3 * 5

Kita tidak menghitung:

10 + 3 = 13
13 * 5 = 65

Melainkan:

3 * 5 = 15
10 + 15 = 25

Karena * memiliki prioritas lebih tinggi daripada +.

Jadi:

10 + 3 * 5

hasilnya:

25

bukan:

65

3. Analogi gampang: antrean prioritas

Bayangkan ada antrean pekerjaan:

Pekerjaan A → prioritas rendah
Pekerjaan B → prioritas tinggi
Pekerjaan C → prioritas sedang

Walaupun A muncul lebih dulu, B dikerjakan terlebih dahulu karena prioritasnya lebih tinggi.

Begitu juga dengan operator.

Misalnya:

10 + 3 * 5

+ muncul lebih dulu, tetapi * punya precedence lebih tinggi.

Maka:

10 + (3 * 5)

4. Precedence bukan berarti semua operator punya prioritas berbeda

Ada operator yang memiliki precedence yang sama.

Contohnya:

+ dan -

keduanya memiliki precedence yang sama.

Begitu juga:

* dan /

keduanya memiliki precedence yang sama.

Nah, kalau precedence-nya sama, kita membutuhkan aturan kedua:

Associativity

5. Apa itu Associativity?

Associativity menentukan:

Kalau dua operator memiliki precedence yang sama, kita mulai dari arah mana?

Biasanya:

left-to-right

atau:

right-to-left

Jadi gampangnya:

Precedence

Menjawab:

“Siapa yang lebih diprioritaskan?”

Associativity

Menjawab:

“Kalau prioritasnya sama, mulai dari mana?”

6. Contoh sederhana

Perhatikan:

10 + 3 - 5

+ dan - mempunyai precedence yang sama.

Maka kita lihat associativity.

Untuk + dan -:

left → right

Jadi:

10 + 3 - 5
↓
13 - 5
↓
8

Hasil:

8

Bukan:

10 + (3 - 5)
= 10 + (-2)
= 8

Kebetulan hasilnya sama pada contoh ini, tapi secara konsep urutannya tetap kiri ke kanan.

7. Contoh yang lebih jelas

Perhatikan:

100 / 10 * 2

/ dan * memiliki precedence yang sama.

Associativity-nya:

left → right

Maka:

100 / 10 = 10
10 * 2 = 20

Jadi:

100 / 10 * 2
// 20

Bukan:

100 / (10 * 2)
= 100 / 20
= 5

8. Kembali ke contoh lecture

Expression:

10 + 3 - 5 * 4 / 2

Kita punya:

+  -  *  /

Prioritas sederhananya:

* /   → lebih tinggi
+ -   → lebih rendah

Jadi kita kerjakan * dan / terlebih dahulu.

Bagian:

5 * 4 / 2

Karena * dan / punya precedence sama, kita lihat associativity.

Keduanya:

left → right

Maka:

5 * 4 = 20
20 / 2 = 10

Expression sekarang menjadi:

10 + 3 - 10

Sekarang hanya ada:

+ dan -

Keduanya punya precedence sama dan associativity:

left → right

Maka:

10 + 3 = 13
13 - 10 = 3

Jadi:

10 + 3 - 5 * 4 / 2
// 3

9. Urutan pengerjaannya

Kita bisa memvisualisasikannya:

10 + 3 - 5 * 4 / 2
            ↓
10 + 3 - 20 / 2
            ↓
10 + 3 - 10
      ↓
    13 - 10
      ↓
       3

Jadi hasil akhirnya:

3

10. Ringkasan precedence operator yang sudah kita pelajari

Untuk operator yang sejauh ini kamu pelajari, kamu bisa menggunakan gambaran sederhana berikut:

TINGGI
  ↑
  |  ()
  |  ** 
  |  ++ / -- (tergantung posisi)
  |  * / %
  |  + -
  |  < > <= >=
  |  == != === !==
  |  &&
  |  ||
  |  = += -= ...
  ↓
RENDAH

Catatan: tabel lengkap JavaScript jauh lebih panjang, dan beberapa operator punya aturan yang lebih detail. Untuk level lecture ini, yang paling penting adalah memahami konsepnya, bukan menghafal seluruh tabel.

11. Parentheses () memiliki precedence sangat tinggi

Ini bagian yang sangat penting.

Misalnya:

10 + 3 * 5

Hasil:

25

Karena * dikerjakan terlebih dahulu.

Tetapi kita bisa memaksa + dikerjakan dahulu:

(10 + 3) * 5

Sekarang:

10 + 3 = 13
13 * 5 = 65

Hasil:

65

Jadi:

Parentheses digunakan untuk mengelompokkan expression dan menentukan bagian mana yang dikerjakan terlebih dahulu.

12. Analogi parentheses

Bayangkan kamu berkata:

“Kerjakan bagian yang ada di dalam kotak terlebih dahulu.”

Misalnya:

(10 + 3) * 5

JavaScript melihat:

[10 + 3] → kerjakan dulu

Hasil:

13 * 5

Kemudian:

65

13. Parentheses bisa mengubah hasil expression

Bandingkan:

10 + 3 * 5

dan:

(10 + 3) * 5

Hasil:

10 + 3 * 5
= 25

sedangkan:

(10 + 3) * 5
= 65

Jadi parentheses bukan sekadar kosmetik.

Parentheses bisa benar-benar mengubah cara expression dievaluasi.

14. Associativity +, -, *, /

Operator:

+ - * /

umumnya memiliki associativity:

left → right

Artinya kalau operator memiliki precedence yang sama:

100 / 10 * 2

kerjakan:

100 / 10

dulu, kemudian:

* 2

15. Tidak semua operator left-to-right

Ini juga penting.

Assignment operator:

=

memiliki associativity:

right → left

Contohnya:

let a = 10;

Secara konsep:

10 → a

Nilai di sebelah kanan diberikan kepada variable di sebelah kiri.

16. Contoh assignment chaining

Perhatikan:

let a, b, c;

a = b = c = 10;

Karena assignment associativity-nya right-to-left, secara konsep:

a = (b = (c = 10))

Urutannya:

c = 10
b = 10
a = 10

Akhirnya:

a // 10
b // 10
c // 10

Ini contoh yang bagus untuk memahami bahwa associativity tidak selalu kiri ke kanan.

17. Assignment punya precedence rendah

Misalnya:

let result = 10 + 20 * 2;

Mana yang dikerjakan dulu?

Bukan:

result = 10

melainkan expression di sebelah kanan:

20 * 2
↓
40

10 + 40
↓
50

baru:

result = 50

Secara konsep:

let result = (10 + (20 * 2));

Jadi assignment terjadi setelah expression di sebelah kanan dievaluasi.

18. Kenapa = precedence-nya rendah?

Karena kita biasanya memang ingin menghitung expression terlebih dahulu.

Misalnya:

let total = 10 + 20 * 3;

JavaScript harus mendapatkan:

70

terlebih dahulu.

Kemudian:

total = 70

19. Contoh kompleks dari lecture

Lecture memberikan expression yang jauh lebih rumit:

10 + 23 || 20 + ++a + b-- * 2 && null

Misalnya:

let a = 10;
let b = 12;

Jangan langsung mencoba menghitung dari kiri ke kanan.

Itu justru membuat pusing.

Gunakan metode:

1. Cari precedence tertinggi → 2. kerjakan → 3. ulangi.

20. Langkah pertama: b--

Ada:

b--

Ini post-decrement.

Post-decrement memiliki precedence lebih tinggi daripada pre-increment.

Jadi b-- dikerjakan lebih dahulu.

Awalnya:

b = 12

b-- menghasilkan nilai:

12

tetapi setelah itu:

b = 11

Ini penting:

Post-decrement memakai nilai lama terlebih dahulu, baru mengurangi nilainya.

21. Kemudian ++a

Awalnya:

a = 10

++a adalah pre-increment.

Pre-increment:

1. naikkan nilai
2. kemudian gunakan nilai baru

Jadi:

a = 10
++a
↓
a = 11

Expression mendapatkan:

11

22. Kemudian multiplication

Ada:

b-- * 2

b-- menghasilkan 12.

Maka:

12 * 2
= 24

Perlu diingat:

b sekarang = 11

Tetapi nilai yang digunakan dalam multiplication tadi adalah 12.

23. Kemudian addition

Sekarang kira-kira expression-nya menjadi:

10 + 23 || 20 + 11 + 24 && null

Bagian arithmetic masih memiliki precedence lebih tinggi daripada logical operators.

Jadi:

10 + 23 = 33

dan:

20 + 11 + 24

karena + left-to-right:

20 + 11 = 31
31 + 24 = 55

Sekarang menjadi:

33 || 55 && null

24. Kemudian &&

Di JavaScript:

&&

memiliki precedence lebih tinggi daripada:

||

Jadi:

33 || 55 && null

bukan dibaca:

(33 || 55) && null

tetapi:

33 || (55 && null)

Kerjakan && dahulu.

55 && null

55 adalah truthy, jadi && lanjut ke null.

null adalah falsy.

Maka:

55 && null
// null

Expression sekarang:

33 || null

25. Terakhir ||

Sekarang:

33 || null

33 adalah truthy.

Maka || langsung mengembalikan:

33

Hasil akhir:

33

26. Ini contoh penting tentang precedence + short-circuit

Perhatikan:

33 || (55 && null)

Karena 33 sudah truthy, sebenarnya || tidak perlu mengevaluasi bagian kanan.

Jadi secara konsep JavaScript bisa berhenti di:

33 → truthy → STOP

Hasil akhirnya:

33

Ini menunjukkan bahwa dua materi sebelumnya saling berhubungan:

• Operator precedence menentukan struktur evaluasinya.
• Short-circuit menentukan apakah sebagian expression perlu dievaluasi atau tidak.

27. Cara membaca expression kompleks

Jangan lakukan ini:

10 + 23 || 20 + ++a + b-- * 2 && null

langsung dari kiri ke kanan.

Gunakan checklist:

Langkah 1

Cari parentheses:

(...)

Kerjakan dulu.

Langkah 2

Cari operator dengan precedence paling tinggi.

Misalnya:

b--
++a
**

Langkah 3

Kalau precedence sama, lihat associativity.

Misalnya:

* dan /

→ kiri ke kanan.

Langkah 4

Sederhanakan expression.

Langkah 5

Ulangi sampai tersisa satu nilai.

28. Precedence vs Associativity: bedanya apa?

Ini sering membingungkan pemula.

Bayangkan ada dua aturan.

Precedence = ranking

Misalnya:

* → ranking 12
+ → ranking 11

Karena * lebih tinggi:

10 + 2 * 5

maka:

2 * 5

dikerjakan dulu.

Associativity = arah

Kalau:

100 / 10 * 2

/ dan * ranking-nya sama.

Maka JavaScript bertanya:

“Mulai dari kiri atau kanan?”

Jawabannya:

left → right

Jadi:

100 / 10
↓
10 * 2
↓
20

29. Analogi paling mudah

Bayangkan lomba:

Precedence

Menentukan siapa yang punya prioritas masuk duluan.

VIP    → masuk dulu
Regular → belakangan

Associativity

Kalau dua orang memiliki level prioritas yang sama:

Orang A
Orang B

maka ada aturan:

dari kiri ke kanan

atau:

dari kanan ke kiri

Jadi:

Precedence menentukan prioritas. Associativity menentukan arah ketika prioritas sama.

30. Kesalahan umum pemula #1: menganggap semua dihitung kiri → kanan

Misalnya:

10 + 2 * 5

Pemula kadang:

10 + 2 = 12
12 * 5 = 60

❌ Salah.

Karena * punya precedence lebih tinggi.

Yang benar:

2 * 5 = 10
10 + 10 = 20

31. Kesalahan umum #2: menganggap semua operator punya precedence berbeda

Tidak.

Contohnya:

+ dan -

memiliki precedence yang sama.

Dan:

* dan /

memiliki precedence yang sama.

Kalau sama, kita gunakan associativity.

32. Kesalahan umum #3: menganggap parentheses tidak penting

Misalnya:

10 + 5 * 2

hasil:

20

Tetapi:

(10 + 5) * 2

hasil:

30

Parentheses bisa mengubah hasil secara signifikan.

33. Kesalahan umum #4: bingung antara = dan ==

Ingat:

=

adalah assignment operator.

Contoh:

let age = 20;

Artinya:

Masukkan nilai 20 ke variable age.

Sedangkan:

age == 20

adalah perbandingan loose equality.

Dan:

age === 20

adalah strict equality.

Jadi:

=    → assign
==   → compare
===  → strict compare

34. Kenapa lecture menyebut assignment associativity right-to-left?

Karena expression seperti:

a = b = 10;

dikelompokkan sebagai:

a = (b = 10);

Bukan:

(a = b) = 10;

Itulah maksud associativity right-to-left.

35. Tidak perlu menghafalkan seluruh tabel precedence

Lecture juga mengatakan hal ini, dan menurut saya ini nasihat yang bagus.

Kamu tidak perlu sekarang menghafal semua angka seperti:

15
14
13
12
11
...

Yang jauh lebih penting adalah memahami pola:

Parentheses → paling diprioritaskan
Arithmetic tertentu → sebelum comparison
Comparison → sebelum logical
Logical → sebelum assignment

Dan ketika lupa:

Gunakan parentheses secara eksplisit.

Misalnya daripada menulis expression yang membingungkan:

let result = a + b * c || d && e;

kamu bisa menulis:

let result = (a + (b * c)) || (d && e);

Memang lebih panjang, tetapi lebih mudah dibaca.

36. Tips penting: gunakan parentheses untuk readability

Meskipun JavaScript sudah punya aturan precedence, programmer tidak harus selalu mengandalkan ingatan.

Misalnya:

if (age >= 18 && hasTicket) {
    ...
}

sudah cukup jelas.

Tapi untuk expression yang rumit:

let result = a + b * c || d && e;

parentheses bisa membantu:

let result = (a + (b * c)) || (d && e);

Tujuannya bukan hanya membuat JavaScript mengerti.

Tujuannya juga:

Membuat manusia yang membaca kode mengerti.

37. Cheat Sheet Lecture Ini

Precedence

Menentukan operator mana yang dikerjakan terlebih dahulu.

Contoh:

10 + 2 * 5

* lebih tinggi → kerjakan dulu.

Associativity

Menentukan arah evaluasi jika precedence sama.

Contoh:

100 / 10 * 2

/ dan * sama-sama punya precedence.

Associativity:

left → right

Jadi:

100 / 10 * 2
↓
10 * 2
↓
20

Parentheses

(...)

→ mengelompokkan expression dan memiliki prioritas sangat tinggi.

Contoh:

(10 + 2) * 5

10 + 2 dikerjakan dulu.

Assignment

=

memiliki precedence rendah dan associativity:

right → left

Contoh:

a = b = 10;

secara konsep:

a = (b = 10);

38. Cara paling gampang mengingat semuanya

Simpan pola ini di kepala:

              PRECEDENCE
                  ↓
       "Siapa yang dikerjakan dulu?"

                  ↓

       Kalau prioritasnya sama

                  ↓

             ASSOCIATIVITY
                  ↓
       "Mulai dari arah mana?"

Dan untuk operator yang sudah kamu pelajari:

()          → grouping, sangat tinggi
**          → exponentiation
* / %       → multiplication level
+ -         → addition level
< > <= >=   → comparison
== === ...  → equality
&&          → logical AND
||          → logical OR
=           → assignment, rendah

Jangan menganggap daftar ini sebagai tabel lengkap seluruh JavaScript; ini peta belajar untuk operator yang sudah muncul di course-mu.

39. Hubungannya dengan materi sebelumnya

Kalau kita tarik benang merah dari lecture-lecture sebelumnya:

Variables
   ↓
Data Types
   ↓
Type Coercion
   ↓
Expressions
   ↓
Operators
   ↓
Arithmetic Operators
   ↓
Comparison Operators
   ↓
Logical Operators
   ↓
Operator Precedence & Associativity

Sekarang kamu mulai melihat bahwa JavaScript bukan hanya:

“Apa fungsi operator ini?”

tetapi juga:

“Kalau ada banyak operator sekaligus, mana yang dijalankan dulu?”

Itulah masalah yang diselesaikan oleh precedence dan associativity.

🎯 Inti yang wajib kamu kuasai

Kalau setelah lecture ini kamu bisa menjelaskan 4 hal berikut, berarti konsep dasarnya sudah bagus:

1. Precedence

Prioritas operator.

10 + 2 * 5

* dikerjakan dulu.

2. Associativity

Arah evaluasi ketika operator memiliki precedence yang sama.

100 / 10 * 2

/ dan * sama → kiri ke kanan.

3. Parentheses

Memaksa suatu bagian expression dikerjakan lebih dahulu.

(10 + 2) * 5

4. Assignment =

Precedence-nya rendah dan associativity-nya kanan ke kiri.

a = b = 10;

secara konsep:

a = (b = 10);

Satu kalimat untuk mengingat seluruh lecture

Precedence menentukan “siapa duluan”, sedangkan associativity menentukan “dari arah mana” kalau prioritasnya sama.

Dan ketika kamu menemukan expression yang terlalu rumit, jangan menebak—pecah menjadi beberapa langkah dan gunakan parentheses untuk memperjelas maksudnya.