# 🚨90% Frontend Engineers Masih Keliru Tentang Operator Ini

Ketika pertama kali belajar JavaScript, hampir semua frontend engineer—termasuk saya—pernah melakukan satu kesalahan klasik: menganggap operator `%` sebagai **modulus**.  
Padahal... *itu salah besar.*

Kesalahan sederhana ini tidak hanya soal istilah. Dalam dunia nyata, bug dari penggunaan `%` bisa membuat:

* index array jadi negatif,
    
* carousel berhenti di slide yang salah,
    
* rotasi jam melompat aneh,
    
* kalkulasi waktu kacau,
    
* loop animasi jadi glitch.
    

Jika kamu pernah melihat bug *“kenapa index bisa -1?”*, besar kemungkinan penyebabnya adalah ini.

Inilah alasan kita perlu meluruskan miskonsepsi ini sekarang juga.

## 💥 `%` Bukan Modulus. `%` Adalah Remainder.

Mari perjelas:

> **Operator** `%` di JavaScript adalah *remainder operator* (sisa pembagian), bukan modulus.

Ini artinya, hasilnya mengikuti **tanda angka pertama**, bisa **negatif**, dan tidak cocok untuk banyak kasus matematis modern yang kita butuhkan di UI development.

Contoh yang sering mengejutkan banyak engineer:

```javascript
console.log(-5 % 2); // -1
```

Mayoritas developer berharap hasilnya `1` seperti modulus matematika.  
Tapi JavaScript punya definisi berbeda.

Dan ketika angka negatif mulai masuk ke logika kode kamu, semuanya bisa berantakan.

## 🎭 Kenapa Banyak Engineer Salah Paham?

Karena di banyak bahasa lain (Python, Rust, Haskell, Elixir, dll), `%` **memang** modulus, bukan remainder.

Sayangnya, JavaScript mengikuti model C, yang mendefinisikan `%` sebagai **remainder**.

Kita tidak sadar bahwa:

* JS → remainder
    
* matematika → modulus
    
* banyak bahasa modern → modulus
    

Inilah yang menciptakan jebakan diam-diam untuk developer JavaScript.

## 🧪 Remainder vs Modulus: Contoh yang Mematahkan Ekspektasi

### **Remainder (JavaScript** `%`):

Mengikut tanda operand pertama:

```javascript
5 % 2   // 1
-5 % 2  // -1   ❌
```

### **Modulus (seharusnya):**

Selalu positif:

```javascript
(-5 mod 2) = 1   ✔️
```

Perbedaan satu tanda minus ini bisa menyebabkan bug bertingkat—terutama ketika digunakan sebagai index.

## ⚠️ Bug Nyata yang Tercipta Karena Salah Pakai `%`

### ❌ Carousel yang bisa bergerak ke index -1

```javascript
let index = 0;
index = (index - 1) % 5;

console.log(index); // -1 ❌  bukan index valid
```

### ❌ Rotasi derajat jam jadi negatif

```javascript
angle = (angle - 30) % 360;
```

Jika `angle = 0`, maka hasilnya `-30`.

### ❌ Pagination melingkar gagal

```javascript
page = (page - 1) % totalPage;
```

Selalu menghasilkan angka minus jika page = 0.

Dan ya… bug seperti ini pernah memakan waktu debugging berjam-jam.

## 🛠 Solusi: Buat Modulus Asli di JavaScript

Karena JS **tidak punya operator modulus**, gunakan fungsi ini:

```javascript
const mod = (a, n) => ((a % n) + n) % n;
```

Sekarang:

```javascript
mod(-5, 2) // 1
mod(-1, 5) // 4
mod(5, 2)  // 1
```

Selalu positif. Selalu aman.

### Cara akhir:

```javascript
index = mod(index - 1, items.length);
```

Dan bug index negatif = hilang.

---

## 🎯 Kesimpulan Penting untuk Semua Frontend Engineers

1. `%` di JavaScript = remainder operator, bukan modulus.
    
2. Remainder bisa menghasilkan angka **negatif**.
    
3. Jika butuh hasil **selalu positif**, gunakan modulus custom.
    
4. Masalah ini sering menyebabkan bug tersembunyi pada:
    
    * carousel
        
    * pagination
        
    * rotasi angka
        
    * pergerakan UI melingkar
        
    * animasi
        
5. Semua frontend engineer perlu memahami perbedaan ini.
    

## 🔥 Penutup: “Bug Tersulit Adalah Bug yang Terlihat Benar”

Operator `%` terlihat sederhana, tetapi bisa menjadi sumber bug yang sulit ditemukan.  
Dengan memahami perbedaan remainder dan modulus, kamu bisa menulis kode lebih aman, lebih prediktif, dan lebih profesional.

Jika kamu sedang membangun UI atau aplikasi interaktif—pengetahuan kecil ini bisa menyelamatkan waktu debugging berjam-jam.