Lecture ini membahas Arithmetic Operators (operator aritmatika/matematika) di JavaScript, tetapi sebenarnya ada beberapa konsep penting yang ikut muncul:

• +, -, *, /
• % → modulus/sisa bagi
• ** → exponentiation/pangkat
• operator precedence → operator mana yang dikerjakan lebih dulu
• associativity → kalau tingkat prioritas sama, dikerjakan dari arah mana
• type coercion saat operator digunakan pada String/Boolean
• perilaku khusus operator +
• kenapa NaN bisa muncul

Kita bahas dari yang paling dasar sampai bagian yang agak tricky.

1. Apa itu Arithmetic Operator?

Arithmetic operator adalah operator yang digunakan untuk melakukan operasi matematika.

Istilah lainnya:

Math operators

Kalau di sekolah kamu sudah mengenal:

+
-
×
÷

JavaScript juga punya operasi yang sama, tetapi simbol perkalian dan pembagian ditulis berbeda.

Ada 6 operator aritmatika dasar yang dibahas di lecture ini.

2. Addition +

Operator:

+

digunakan untuk penjumlahan.

Contoh:

let x = 10;
let y = 2;

console.log(x + y);

Hasil:

12

Karena:

10 + 2 = 12

Secara konsep:

x + y
↓   ↓
10  2
  ↓
  12

3. Subtraction -

Operator:

-

digunakan untuk pengurangan.

let x = 10;
let y = 2;

console.log(x - y);

Hasil:

8

Karena:

10 - 2 = 8

4. Multiplication *

Dalam matematika kita menggunakan ×.

Dalam JavaScript kita menggunakan:

*

Contoh:

let x = 10;
let y = 2;

console.log(x * y);

Hasil:

20

Karena:

10 × 2 = 20

Ingat:

JavaScript menggunakan *, bukan ×.

5. Division /

Untuk pembagian kita menggunakan:

/

Contoh:

let x = 10;
let y = 2;

console.log(x / y);

Hasil:

5

Karena:

10 ÷ 2 = 5

6. Modulus %

Nah, ini operator yang sering membingungkan pemula.

Operator:

%

disebut modulus.

Modulus memberikan:

sisa hasil pembagian.

Misalnya:

console.log(9 % 2);

Mari kita hitung.

9 ÷ 2 = 4 sisa 1

Jadi:

9 % 2 = 1

7. Cara memahami %

Jangan membaca:

9 % 2

sebagai “9 persen 2”.

Dalam JavaScript:

%

berarti:

berapa sisa setelah pembagian?

Contoh:

10 % 3

Pembagian:

10 ÷ 3 = 3 sisa 1

Jadi:

10 % 3 // 1

Contoh lain:

10 % 2

Karena:

10 ÷ 2 = 5 sisa 0

maka:

10 % 2 // 0

8. Kapan Modulus Berguna?

Modulus sangat berguna untuk mengetahui apakah angka genap atau ganjil.

Misalnya:

10 % 2

hasil:

0

Berarti 10 genap.

Sedangkan:

11 % 2

hasil:

1

Berarti 11 ganjil.

Nanti ketika belajar if, ini akan sangat berguna:

if (number % 2 === 0) {
    console.log("Genap");
}

Artinya:

Kalau sisa pembagian angka dengan 2 adalah 0, berarti angka tersebut genap.

9. Exponentiation **

Operator:

**

digunakan untuk pangkat.

Contoh:

console.log(2 ** 3);

Artinya:

2³

atau:

2 × 2 × 2

hasilnya:

8

Jadi:

2 ** 3 // 8

10. Contoh pangkat lainnya

5 ** 2

berarti:

5²
= 5 × 5
= 25

Jadi:

console.log(5 ** 2);

hasil:

25

11. Pangkat Pecahan

Ini bagian menarik dari lecture.

Misalnya:

9 ** (1 / 2)

Hasilnya:

3

Kenapa?

Karena:

9^(1/2)

sama dengan:

√9

Jadi:

9 ** (1 / 2)

→ 3

Sedangkan:

9 ** 2

berarti:

9²
= 81

Jadi pangkat pecahan bisa digunakan untuk operasi seperti akar.

12. Enam Arithmetic Operator

Sekarang kita punya:

+   → penjumlahan
-   → pengurangan
*   → perkalian
/   → pembagian
%   → sisa bagi
**  → pangkat

Contoh:

console.log(10 + 2);  // 12
console.log(10 - 2);  // 8
console.log(10 * 2);  // 20
console.log(10 / 2);  // 5
console.log(10 % 2);  // 0
console.log(10 ** 2); // 100

13. Setiap Operator Menghasilkan Nilai

Ini terhubung dengan materi sebelumnya tentang expression.

Contoh:

10 + 2

adalah expression.

Hasilnya:

12

Begitu juga:

10 - 2

menghasilkan:

8

Dan:

10 % 3

menghasilkan:

1

Jadi kamu bisa mengingat:

Operator melakukan operasi → menghasilkan sebuah nilai.

14. Menggunakan Banyak Operator Sekaligus

Sekarang bagian yang sangat penting.

Misalnya:

console.log(10 + 2 / 3 * 4 - 10);

Pertanyaannya:

Apakah JavaScript menghitung dari kiri ke kanan?

Tidak selalu.

Ini sangat penting.

JavaScript mempunyai aturan bernama:

Operator precedence

atau:

Prioritas operator.

15. Apa itu Operator Precedence?

Operator precedence menentukan:

Operator mana yang harus dikerjakan terlebih dahulu ketika ada banyak operator dalam satu expression.

Mirip dengan matematika yang sudah kamu pelajari.

Misalnya:

10 + 2 × 3

Kita tidak menghitung:

10 + 2 = 12
12 × 3 = 36

Karena perkalian mempunyai prioritas lebih tinggi.

Yang benar:

2 × 3 = 6

10 + 6 = 16

Jadi:

10 + 2 × 3
      ↓
    dulu

hasilnya:

16

JavaScript mengikuti konsep prioritas seperti ini.

16. Prioritas Operator Aritmatika

Untuk operator yang kita pelajari sekarang, secara sederhana:

**     → prioritas tinggi
* / %  → berikutnya
+ -    → berikutnya

Jadi:

**
↓
* / %
↓
+ -

Misalnya:

10 + 2 * 3

JavaScript melakukan:

2 * 3 = 6

kemudian:

10 + 6 = 16

Jadi:

10 + 2 * 3 // 16

17. Jangan Menghitung Selalu dari Kiri ke Kanan

Ini kesalahan umum.

Misalnya:

10 + 2 * 3

Kalau dari kiri ke kanan:

10 + 2 = 12
12 * 3 = 36

Tapi hasil JavaScript:

16

Karena * mempunyai precedence lebih tinggi daripada +.

18. Lalu Apa itu Associativity?

Nah, setelah mengetahui precedence, ada konsep kedua:

Associativity

Associativity menentukan:

Kalau dua operator mempunyai prioritas yang sama, mana yang dikerjakan terlebih dahulu?

Untuk beberapa operator aritmatika seperti:

*
/
%
+
-

associativity-nya adalah:

left-to-right

Artinya:

Kalau tingkat prioritasnya sama, evaluasi dari kiri ke kanan.

19. Contoh Associativity

Perhatikan:

20 / 5 * 2

/ dan * mempunyai precedence yang sama.

Karena associativity-nya left-to-right, JavaScript mengerjakan:

20 / 5
↓
4

Kemudian:

4 * 2
↓
8

Jadi:

20 / 5 * 2 // 8

Bukan:

20 / (5 * 2)
= 2

20. Contoh + dan -

Misalnya:

20 - 5 + 2

- dan + mempunyai precedence yang sama.

Maka dari kiri ke kanan:

20 - 5
↓
15

15 + 2
↓
17

Jadi:

20 - 5 + 2 // 17

21. Precedence vs Associativity

Ini sering tertukar.

Precedence

Menjawab:

Operator mana yang lebih penting/prioritasnya lebih tinggi?

Contoh:

10 + 2 * 3

* lebih tinggi daripada +.

Jadi * dikerjakan dulu.

Associativity

Kalau precedence sama, menjawab:

Mulai dari arah mana?

Contoh:

20 / 5 * 2

/ dan * punya precedence sama.

Maka lihat associativity:

left → right

Jadi:

20 / 5 → 4
4 * 2 → 8

22. Jangan Terlalu Khawatir Dulu

Lecture mengatakan pembahasan precedence dan associativity akan dilakukan lebih detail di lecture khusus.

Untuk sekarang cukup pegang:

**       → pangkat
* / %    → perkalian, pembagian, modulus
+ -      → penjumlahan, pengurangan

Dan jika operator dengan tingkat yang sama muncul:

biasanya → kiri ke kanan

23. Sekarang Bagian yang Sangat Penting: String

Sampai sekarang kita menggunakan angka:

10 + 5

Tapi bagaimana kalau:

"10" + 5

Perhatikan bahwa "10" memiliki tanda kutip.

Maka:

"10"

adalah String, bukan Number.

Ini terhubung dengan materi sebelumnya tentang data types dan type coercion.

24. Operator + Punya Perilaku Khusus

Kalau:

10 + 5

hasil:

15

Tetapi:

"10" + 5

hasilnya:

"105"

Kenapa?

Karena ketika operator + berhadapan dengan String, JavaScript dapat melakukan string concatenation.

25. Apa itu Concatenation?

Concatenation berarti:

Menggabungkan String menjadi satu String.

Contoh:

"Hello" + "World"

hasil:

"HelloWorld"

Kalau ingin ada spasi:

"Hello" + " " + "World"

hasil:

"Hello World"

26. Apa yang Terjadi pada "10" + 5?

JavaScript melihat:

"10" + 5

Operand pertama:

"10" → String

Operand kedua:

5 → Number

Karena ada String, JavaScript melakukan type coercion terhadap 5.

Secara sederhana:

"10" + 5
↓
"10" + "5"
↓
"105"

Jadi hasilnya adalah String:

"105"

27. Bagaimana Kalau Urutannya Dibalik?

Misalnya:

5 + "10"

Hasilnya:

"510"

Kenapa?

Karena tetap ada String:

5 + "10"
↓
"5" + "10"
↓
"510"

Jadi tidak peduli String berada di kiri atau kanan:

"10" + 5  // "105"
5 + "10"  // "510"

28. + dengan Boolean

Bagaimana:

"Hello" + true

Karena ada String, true akan dikonversi menjadi String:

true
↓
"true"

Kemudian:

"Hello" + "true"

hasil:

"Hellotrue"

Contoh:

console.log("Hello" + true);

Hasil:

Hellotrue

29. Bagaimana dengan Operator Selain +?

Nah, ini sangat penting.

Misalnya:

2 * "23"

Berbeda dari +.

Untuk operator seperti:

-
*
/
%
**

JavaScript akan mencoba mengubah nilai non-number menjadi Number.

30. Contoh String yang Bisa Diubah Menjadi Number

Perhatikan:

2 * "23"

"23" adalah String.

Tetapi String tersebut berisi angka yang valid.

JavaScript dapat mengubah:

"23"
↓
23

Sehingga secara sederhana:

2 * "23"
↓
2 * 23
↓
46

Hasil:

46

31. Tetapi "hello" Tidak Bisa Menjadi Number

Sekarang:

2 * "hello"

JavaScript mencoba:

"hello"
↓
Number

Tetapi "hello" tidak bisa diubah menjadi angka.

Hasil konversinya:

NaN

Kemudian:

2 * NaN

hasilnya:

NaN

32. Ingat Lagi Apa Itu NaN

Kamu sudah mempelajari ini di lecture data types.

NaN berarti:

Not a Number

Tetapi ada fakta yang agak aneh:

typeof NaN

hasilnya:

"number"

Jadi NaN adalah special numeric value dalam JavaScript.

33. Kalau Sudah NaN, Operasi Berikutnya Biasanya Tetap NaN

Contoh:

NaN + 10

hasil:

NaN

NaN * 5

hasil:

NaN

NaN - 100

hasil:

NaN

Secara sederhana:

NaN
 ↓
operasi matematika
 ↓
NaN

Ini bisa menjadi tanda bahwa ada masalah dalam data atau proses konversi.

34. Perbandingan + dengan Operator Lain

Ini bagian yang wajib kamu pahami.

+

Jika ada String:

"10" + 5

→ String

"105"

-

"10" - 5

JavaScript mencoba mengubah "10" menjadi Number:

"10"
↓
10
↓
10 - 5
↓
5

Jadi:

"10" - 5 // 5

*

"10" * 5

→ "10" dikonversi menjadi 10

10 * 5
↓
50

/

"10" / 5

→ 10 / 5

hasil:

2

%

"10" % 3

→ 10 % 3

hasil:

1

35. Tabel Penting: String + Number

Kenapa + berbeda?

Karena + memiliki dua fungsi:

1. Penjumlahan Number
2. Concatenation String

Sedangkan operator seperti -, *, /, % pada dasarnya digunakan untuk operasi numerik sehingga JavaScript mencoba melakukan numeric coercion.

36. Boolean Juga Bisa Mengalami Coercion

Sekarang:

2 + true

Apa hasilnya?

Dalam operasi matematika, true dapat dikonversi menjadi:

true → 1

Maka:

2 + true
↓
2 + 1
↓
3

Hasil:

3

37. false Menjadi 0

Contoh:

2 + false

JavaScript mengonversi:

false → 0

Sehingga:

2 + 0
↓
2

Hasil:

2

Jadi untuk numeric coercion:

true  → 1
false → 0

38. Bagian Tersulit: 2 + 3 + "hello"

Ini contoh yang sangat bagus untuk memahami associativity dan type coercion sekaligus.

Expression:

2 + 3 + "hello"

Ada dua operator +.

Karena associativity + adalah left-to-right, JavaScript mulai dari kiri.

Langkah 1

2 + 3

Keduanya Number:

2 + 3 = 5

Sekarang expression menjadi:

5 + "hello"

Langkah 2

Sekarang ada String:

5 + "hello"

5 dikonversi menjadi String:

"5" + "hello"

Hasil:

"5hello"

Jadi:

2 + 3 + "hello"

menghasilkan:

"5hello"

39. Sekarang Dibalik

Perhatikan:

"hello" + 2 + 3

Jangan menganggap hasilnya:

"hello5"

Karena operasi dimulai dari kiri.

Langkah 1

"hello" + 2

Karena ada String:

"hello" + "2"

hasil:

"hello2"

Sekarang kita punya:

"hello2" + 3

Langkah 2

Masih ada String.

Jadi 3 dikonversi menjadi:

"3"

Kemudian:

"hello2" + "3"

hasil:

"hello23"

Jadi:

"hello" + 2 + 3

hasil:

"hello23"

40. Ini Contoh yang Sangat Penting

Bandingkan:

2 + 3 + "hello"

hasil:

"5hello"

dengan:

"hello" + 2 + 3

hasil:

"hello23"

Kenapa berbeda?

Karena evaluasi dilakukan dari kiri ke kanan untuk operator +.

41. Visualisasi

Kasus pertama

2 + 3 + "hello"

Evaluasi:

2 + 3
 ↓
 5

5 + "hello"
 ↓
"5hello"

Hasil:

"5hello"

Kasus kedua

"hello" + 2 + 3

Evaluasi:

"hello" + 2
 ↓
"hello2"

"hello2" + 3
 ↓
"hello23"

Hasil:

"hello23"

42. Bagaimana Kalau Menggunakan Kurung?

Kurung bisa mengubah urutan evaluasi.

Misalnya:

"hello" + (2 + 3)

Di sini JavaScript harus menghitung:

2 + 3
↓
5

Baru:

"hello" + 5

Kemudian:

"hello5"

Jadi:

"hello" + (2 + 3)

hasil:

"hello5"

Sedangkan:

"hello" + 2 + 3

hasil:

"hello23"

Kurung sangat berguna untuk membuat maksud kita jelas.

43. Contoh Praktis

Misalnya:

let price = 100;
let quantity = 3;

let total = price * quantity;

console.log(total);

Hasil:

300

Ini aman karena semuanya Number.

Sekarang bayangkan:

let price = "100";
let quantity = 3;

let total = price * quantity;

console.log(total);

Walaupun price adalah String:

"100"

operator * mencoba mengubahnya menjadi Number:

"100"
↓
100

Kemudian:

100 * 3
↓
300

Jadi hasilnya:

300

44. Tapi Hati-hati dengan +

Misalnya:

let price = "100";
let quantity = 3;

let total = price + quantity;

console.log(total);

Hasilnya bukan:

300

melainkan:

"1003"

Karena:

"100" + 3
↓
"100" + "3"
↓
"1003"

Ini salah satu sumber bug yang sering terjadi pada JavaScript.

45. Kalau Memang Ingin Angka, Konversikan Secara Sengaja

Misalnya kita punya:

let price = "100";
let quantity = 3;

Kita ingin menghitung:

100 × 3 = 300

Bisa menggunakan:

let total = Number(price) * quantity;

Sekarang:

"100"
↓
Number("100")
↓
100

Kemudian:

100 * 3
↓
300

Ini disebut explicit conversion, yaitu kita sendiri yang secara sengaja melakukan konversi.

Ini lebih aman daripada bergantung sepenuhnya pada coercion otomatis.

46. Ringkasan Type Coercion di Lecture

Dengan +

Jika salah satu operand adalah String:

"10" + 5

maka:

5 → "5"

kemudian concatenation:

"10" + "5"
↓
"105"

Dengan -, *, /, %

JavaScript mencoba mengubah operand menjadi Number.

"10" - 5

menjadi secara sederhana:

10 - 5
↓
5

Tetapi:

"hello" - 5

menjadi:

NaN - 5
↓
NaN

47. Cheat Sheet Arithmetic Operators

+   → tambah / concatenation
-   → kurang
*   → kali
/   → bagi
%   → sisa bagi
**  → pangkat

Contoh:

10 + 3  // 13
10 - 3  // 7
10 * 3  // 30
10 / 3  // 3.333...
10 % 3  // 1
10 ** 3 // 1000

48. Cheat Sheet Precedence

Secara sederhana:

TINGGI
  ↓
**

* / %

+ -
  ↓
RENDAH

Contoh:

10 + 2 * 3

Kerjakan:

2 * 3 = 6
10 + 6 = 16

Hasil:

16

49. Cheat Sheet Associativity

Kalau operator memiliki precedence yang sama, untuk operator aritmatika yang dibahas lecture ini umumnya evaluasinya:

KIRI → KANAN

Contoh:

20 / 5 * 2

Menjadi:

20 / 5 = 4
4 * 2 = 8

Bukan:

20 / (5 * 2)

50. Cheat Sheet Type Coercion

Ini yang menurut saya paling penting untuk kamu kuasai sebelum lanjut.

10 + 5
// 15

"10" + 5
// "105"

"10" - 5
// 5

"10" * 5
// 50

"hello" * 5
// NaN

2 + true
// 3

2 + false
// 2

Dan:

2 + 3 + "hello"
// "5hello"

sedangkan:

"hello" + 2 + 3
// "hello23"

🧠 Inti Besar Lecture

Kalau dibuat menjadi satu peta:

ARITHMETIC OPERATORS
        │
        ├── +   → tambah
        ├── -   → kurang
        ├── *   → kali
        ├── /   → bagi
        ├── %   → sisa bagi
        └── **  → pangkat

Kemudian ketika ada banyak operator:

Operator Precedence
        ↓
Menentukan mana yang dikerjakan dulu

Kalau precedence sama:

Associativity
        ↓
Menentukan arah evaluasi
        ↓
umumnya kiri → kanan

Dan yang paling khas di JavaScript:

Operand String
      ↓
   Operator +
      ↓
String concatenation

sedangkan:

Operand String
      ↓
- * / %
      ↓
coba dikonversi ke Number

🎯 7 hal yang wajib kamu ingat

1. + → penjumlahan atau concatenation String.
2. - → pengurangan.
3. * → perkalian.
4. / → pembagian.
5. % → sisa pembagian, bukan persentase.
6. ** → pangkat.
7. Kalau ada String, + sangat berbeda perilakunya dibanding -, *, /, dan %.

Dan satu kalimat yang sangat bagus untuk dibawa ke lecture berikutnya:

Jangan hanya melihat operatornya. Lihat juga tipe data operand-nya.

Karena:

10 + 5

dan:

"10" + 5

menggunakan operator yang sama, tetapi menghasilkan sesuatu yang berbeda.