🚨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:

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:

5 % 2   // 1
-5 % 2  // -1   ❌

Modulus (seharusnya):

Selalu positif:

(-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

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

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

❌ Rotasi derajat jam jadi negatif

angle = (angle - 30) % 360;

Jika angle = 0, maka hasilnya -30.

❌ Pagination melingkar gagal

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:

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

Sekarang:

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

Selalu positif. Selalu aman.

Cara akhir:

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.