Di chapter Variables kita memperbarui nilai dengan pola saldo = saldo + 25000: nilai lama dibaca, dihitung, lalu disimpan kembali ke wadah yang sama. Pola itu benar, tetapi muncul terus-menerus — stok gudang berkurang tiap transaksi, poin member bertambah tiap pembelian, penghitung maju tiap kejadian. Karena begitu lazim, JavaScript menyediakan keluarga operator assignment yang lebih ringkas.

Chapter ini membahas operator = beserta variasinya +=, -=, *=, /=, %=, **=, dan ??=. Semuanya mengubah nilai variabel yang sudah ada, jadi seluruh contoh memakai let.

Dari Pola Lama ke Penulisan Ringkas #

Kedua baris berikut melakukan hal yang persis sama:

js
stok = stok + 25;
stok += 25;

Engine membaca nilai stok, menjumlahkannya dengan 25, lalu menimpa stok dengan hasilnya — baik pada bentuk panjang maupun ringkas. Bentuk += hanyalah penulisan pendek; tidak ada mekanisme baru di baliknya. Urutan kerjanya juga mengikuti aturan yang sama dengan = biasa: sisi kanan selalu dihitung lebih dulu, baru hasilnya disimpan (posisi assignment sebagai operator paling akhir dalam urutan evaluasi kita bahas di chapter Operator Precedence). Pola yang sama berlaku untuk operator aritmatika lain, sehingga kita mendapat satu keluarga lengkap:

OperatorContohSetara denganHasil (jika awalnya 20)
+=stok += 5stok = stok + 525
-=stok -= 5stok = stok - 515
*=stok *= 5stok = stok * 5100
/=stok /= 5stok = stok / 54
%=stok %= 5stok = stok % 50
**=stok **= 2stok = stok ** 2400

Satu contoh cepat untuk **=, karena operator pangkat paling jarang muncul di gudang data nyata:

js
let porsi = 2;
porsi **= 3;
console.log(porsi);

Output yang Dihasilkan:

text
8

porsi **= 3 menaikkan 2 ke pangkat tiga, menghasilkan 8.

+= Adalah Menambah, = Adalah Menimpa #

Perbedaan tanda + di depan = terlihat kecil, tetapi akibatnya besar — dan ini salah satu kesalahan tulis yang paling sering terjadi:

js
let poinMember = 100;
poinMember += 50; // menambah 50 ke nilai lama
console.log(poinMember);

let poinTersesat = 100;
poinTersesat = 50; // menimpa nilai lama dengan 50
console.log(poinTersesat);

Output yang Dihasilkan:

text
150
50

Baris kedua dari tiap pasangan memakai nilai yang sangat mirip, tetapi hasilnya berbeda jauh: poinMember menjadi 150 karena += membaca nilai lama 100 lalu menambahkannya dengan 50, sedangkan poinTersesat menjadi 50 karena = menimpa nilai lama tanpa membacanya. Ketika poin member tiba-tiba “berkurang” padahal program dimaksudkan menambah, periksa dahulu apakah = kehilangan operator aritmatikanya di depannya.

Penghitung Harian #

Pola assignment gabungan paling klasik adalah penghitung yang bertambah tiap kejadian. Berikut pencatatan pengunjung kedai selama satu hari:

js
let pengunjungHariIni = 0;

pengunjungHariIni += 12; // keramaian pagi
pengunjungHariIni += 9;  // keramaian siang
pengunjungHariIni -= 3;  // tiga pesanan dibatalkan

console.log(pengunjungHariIni);

Output yang Dihasilkan:

text
18

Penghitung dimulai dari 0, bertambah 12 lalu 9, dikurangi 3, dan berakhir di 18. Bentuk pengunjungHariIni += 12 jauh lebih mudah dibaca daripada bentuk panjangnya, dan pola ini akan terus kita pakai saat menghitung total, rata-rata, dan pengulangan di section-section berikutnya.

Contoh: Pembaruan Stok Gudang #

Berkas berikut mengikuti satu hari kegiatan gudang kedai kopi Budi dan Siti — kiriman masuk, pesanan keluar, barang dibagi ke cabang — dengan setiap operator gabungan:

// pembaruan-stok.js
// Memperbarui angka gudang dengan operator assignment gabungan.

let stokKopi = 40;
stokKopi += 25; // kiriman dari gudang pusat
stokKopi -= 12; // pesanan toko mitra diambil
console.log("Stok kopi:", stokKopi);

let hargaSatuan = 15000;
hargaSatuan *= 3; // membeli tiga bungkus sekaligus
console.log("Total belanja:", hargaSatuan);

let stokTeh = 53;
stokTeh /= 2; // dibagi rata ke dua gudang
console.log("Stok teh per gudang:", stokTeh);

let nomorLayar = 47;
nomorLayar %= 10; // layar antrean bergilir setiap 10 nomor
console.log("Nomor di layar:", nomorLayar);

// ??= mengisi hanya ketika nilai masih null atau undefined.
let catatanKirim = null;
catatanKirim ??= "Tanpa catatan";
console.log("Catatan:", catatanKirim);

let alamatTujuan = "Jl. Melati No. 7, Bandung";
alamatTujuan ??= "Alamat belum diisi";
console.log("Alamat:", alamatTujuan);

Output yang Dihasilkan:

text
Stok kopi: 53
Total belanja: 45000
Stok teh per gudang: 26.5
Nomor di layar: 7
Catatan: Tanpa catatan
Alamat: Jl. Melati No. 7, Bandung

Mari kita telaah baris-baris pentingnya:

  1. Baris 4–7 (let stokKopi = 40; dst.): += 25 membawa stok ke 65, lalu -= 12 menurunkannya ke 53. Dua pembaruan beruntun menunjukkan bahwa tiap operator membaca nilai terkini sebelum menimpanya.
  2. Baris 10–11 (hargaSatuan *= 3;): variabel hargaSatuan diubah menjadi 45000 — secara teknis benar, meski nama variabelnya sudah tidak cocok dengan isinya. Ini pengingat: setelah nilai berubah makna, pertimbangkan nama baru atau variabel terpisah.
  3. Baris 14–15 (stokTeh /= 2;): 53 / 2 menghasilkan 26.5. Operator /= tetap melakukan pembagian biasa, lengkap dengan pecahannya.
  4. Baris 18–19 (nomorLayar %= 10;): 47 % 10 menyisakan 7. Pola ini berguna untuk membuat nilai bergilir dalam rentang tetap, seperti nomor antrean di layar.
  5. Baris 22–24 (let catatanKirim = null; lalu catatanKirim ??= "Tanpa catatan";): nilai awal null dianggap “masih kosong”, sehingga operator ??= mengisinya dengan "Tanpa catatan".
  6. Baris 27–28 (alamatTujuan ??= "Alamat belum diisi";): kali ini nilai awal adalah string biasa yang tidak kosong, sehingga ??= membiarkannya apa adanya. Keluaran terakhir membuktikan nilai lama tetap utuh.

??= : Mengisi Hanya Bila Masih Kosong #

Operator ??= membaca dua tanda tanya yang berpasangan: “isi hanya jika nilai sekarang masih null atau undefined”. Jika variabel sudah memegang nilai apa pun — termasuk 0, "", atau false — operator ini tidak menyentuhnya. Pola ini pas untuk memberi nilai awal (default) tanpa menimpa data yang memang sudah ada, misalnya catatan pengiriman yang boleh kosong. Operator ?? tanpa tanda sama dengan — yang menjadi dasar perilaku ini — kita bedah tuntas di chapter berikutnya.

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

pembaruan-stok.js

Unduh berkas
javascript
// pembaruan-stok.js
// Memperbarui angka gudang dengan operator assignment gabungan.

let stokKopi = 40;
stokKopi += 25; // kiriman dari gudang pusat
stokKopi -= 12; // pesanan toko mitra diambil
console.log("Stok kopi:", stokKopi);

let hargaSatuan = 15000;
hargaSatuan *= 3; // membeli tiga bungkus sekaligus
console.log("Total belanja:", hargaSatuan);

let stokTeh = 53;
stokTeh /= 2; // dibagi rata ke dua gudang
console.log("Stok teh per gudang:", stokTeh);

let nomorLayar = 47;
nomorLayar %= 10; // layar antrean bergilir setiap 10 nomor
console.log("Nomor di layar:", nomorLayar);

// ??= mengisi hanya ketika nilai masih null atau undefined.
let catatanKirim = null;
catatanKirim ??= "Tanpa catatan";
console.log("Catatan:", catatanKirim);

let alamatTujuan = "Jl. Melati No. 7, Bandung";
alamatTujuan ??= "Alamat belum diisi";
console.log("Alamat:", alamatTujuan);