Di lecture ini kita masuk ke Assignment Operator (=) di JavaScript. Kelihatannya sederhana, tetapi ada beberapa konsep penting di baliknya: assignment, return value, associativity dari kanan ke kiri, chaining assignment, dan shorthand assignment.

Saya jelaskan dari paling dasar sampai contoh yang lebih kompleks.

1. Apa itu Assignment Operator?

Assignment operator adalah operator yang digunakan untuk memberikan/menyimpan sebuah nilai ke dalam variable.

Operator assignment yang paling dasar adalah:

=

Contoh:

let x = 10;

Bacanya:

Buat variable x, lalu simpan nilai 10 ke dalam x.

Setelah kode tersebut dijalankan:

x
↓
10

Kalau kita cek:

console.log(x);

hasilnya:

10

Jadi:

x = 10;

artinya:

“Masukkan nilai 10 ke dalam variable x.”

2. Jangan menganggap = sebagai “sama dengan”

Ini penting sekali untuk pemula.

Dalam matematika:

x = 10

biasanya dibaca:

x sama dengan 10

Tetapi dalam JavaScript, = lebih tepat dipahami sebagai:

assign / simpan nilai

Misalnya:

let x = 10;
x = 20;

Ini bukan berarti kita mengatakan bahwa x “sama dengan” 20 dalam konteks perbandingan.

Kita sedang mengatakan:

“Nilai yang sebelumnya ada di x, sekarang diganti menjadi 20.”

Sehingga:

Awalnya:

x → 10

Setelah x = 20:

x → 20

3. Assignment Operator juga menghasilkan (return) sebuah nilai

Nah, ini bagian yang sedikit lebih menarik dari lecture.

Ketika kita melakukan assignment:

y = 20

JavaScript tidak hanya menyimpan 20 ke dalam y.

Expression tersebut juga menghasilkan nilai 20.

Contohnya:

let y;

console.log(y = 20);

Hasilnya:

20

Kenapa?

Karena prosesnya kira-kira:

y = 20
│
├── simpan 20 ke y
│
└── expression menghasilkan 20

Jadi:

console.log(y = 20);

bisa dipahami seperti:

y diberi nilai 20
       ↓
expression menghasilkan 20
       ↓
console.log(20)
       ↓
20

Setelah itu y juga berisi 20.

console.log(y); // 20

4. Assignment bukan hanya bisa menerima nilai langsung

Kita juga bisa memberikan expression di sebelah kanan =.

Misalnya:

let x = 10;
let y = 20;

let z = y + 10;

JavaScript akan mengevaluasi bagian kanan terlebih dahulu:

y + 10

Karena:

y = 20

maka:

20 + 10 = 30

Kemudian hasilnya dimasukkan ke z.

Jadi:

let z = y + 10;

prosesnya:

y + 10
 ↓
20 + 10
 ↓
30
 ↓
z = 30

Hasil akhirnya:

console.log(z); // 30

5. Kenapa Assignment punya Associativity Right-to-Left?

Ini konsep penting dari lecture.

Istilahnya:

Associativity = arah evaluasi ketika ada operator dengan precedence yang sama.

Untuk assignment operator =, associativity-nya adalah:

Right-to-left (kanan ke kiri)

Contohnya:

let x = 10;
let y = 20;

let z = x + y + 10;

Bagian kanan:

x + y + 10

dihitung terlebih dahulu.

Karena:

x = 10
y = 20

maka:

10 + 20 + 10
= 40

Kemudian:

z = 40

6. Bandingkan dengan operator matematika

Misalnya:

let a = 10 + 20 + 30;

Operator + untuk kasus ini dievaluasi dari kiri ke kanan:

10 + 20 + 30
 ↓
30 + 30
 ↓
60

Jadi:

(10 + 20) + 30

Sedangkan assignment:

a = b = c = 100;

dievaluasi dari kanan ke kiri.

Kita bahas ini di bagian berikutnya.

7. Chaining Assignment

Karena = memiliki associativity right-to-left, kita bisa melakukan assignment seperti ini:

let a, b, c, d;

a = b = c = d = 100;

Kelihatannya mungkin membingungkan.

Kita pecah:

a = b = c = d = 100

Karena assignment berjalan dari kanan ke kiri:

Langkah 1

d = 100;

Sekarang:

d → 100

Langkah 2

Hasil assignment tadi adalah 100, sehingga:

c = 100;

Sekarang:

c → 100
d → 100

Langkah 3

b = 100;

Sekarang:

b → 100
c → 100
d → 100

Langkah 4

a = 100;

Hasil akhirnya:

a → 100
b → 100
c → 100
d → 100

Jadi:

a = b = c = d = 100;

kurang lebih berarti:

d = 100;
c = d;
b = c;
a = b;

Semua akhirnya mendapatkan 100.

8. Kenapa ini bisa terjadi?

Karena assignment menghasilkan value.

Misalnya:

let x;

let y = (x = 100);

Prosesnya:

x = 100
 ↓
x menyimpan 100
 ↓
expression menghasilkan 100
 ↓
y = 100

Jadi:

x → 100
y → 100

Inilah salah satu alasan chaining assignment bisa dilakukan.

9. Shorthand Assignment Operator

Sekarang masuk bagian yang sangat sering digunakan dalam JavaScript.

Misalnya kita punya:

let sum = 10;

Kemudian kita ingin menambahkan 15 ke sum.

Cara biasa:

sum = sum + 15;

Prosesnya:

sum sebelumnya = 10

sum + 15
10 + 15
= 25

sum = 25

Hasil akhirnya:

console.log(sum); // 25

Tetapi JavaScript menyediakan bentuk yang lebih pendek:

sum += 15;

Ini memiliki arti yang sama dengan:

sum = sum + 15;

10. Cara membaca +=

Misalnya:

sum += 15;

Bacanya bisa kita pahami sebagai:

“Tambahkan 15 ke nilai sum saat ini.”

Kalau:

let sum = 10;

sum += 15;

maka:

10 + 15 = 25

Sehingga:

sum → 25

11. Operator -=

Hal yang sama berlaku untuk pengurangan.

Cara panjang:

sum = sum - 5;

Bisa ditulis:

sum -= 5;

Contoh:

let sum = 20;

sum -= 5;

console.log(sum);

Hasil:

15

Karena:

20 - 5 = 15

12. Operator *=

Untuk perkalian:

Cara panjang:

sum = sum * 2;

Bisa ditulis:

sum *= 2;

Contoh:

let sum = 10;

sum *= 2;

console.log(sum);

Hasil:

20

Karena:

10 × 2 = 20

13. Operator /=

Untuk pembagian:

Cara panjang:

sum = sum / 2;

Bisa ditulis:

sum /= 2;

Contoh:

let sum = 20;

sum /= 2;

console.log(sum);

Hasil:

10

14. Operator %= juga ada

Selain yang dibahas lecture, ada juga shorthand untuk modulus:

%=

Misalnya:

let number = 10;

number %= 3;

Sama dengan:

number = number % 3;

Karena:

10 % 3 = 1

maka:

number → 1

15. Operator **= juga ada

Untuk exponentiation:

let number = 2;

number **= 3;

Sama dengan:

number = number ** 3;

Hasil:

2³ = 8

Jadi:

console.log(number); // 8

16. Cheat Sheet Assignment Operator

Berikut bentuk-bentuk pentingnya:

Contoh:

let x = 10;

x += 5;  // 15
x -= 3;  // 12
x *= 2;  // 24
x /= 4;  // 6
x %= 4;  // 2
x **= 3; // 8

Perhatikan bahwa setiap operasi mengubah nilai x.

17. Bedakan = dengan == dan ===

Ini sangat penting karena pemula sering tertukar.

=

Untuk assignment:

let x = 10;

Artinya:

Simpan 10 ke x.

==

Untuk comparison / membandingkan nilai:

x == 10

Artinya kira-kira:

Apakah nilai x sama dengan 10?

===

Juga untuk comparison, tetapi lebih ketat:

x === 10

Artinya:

Apakah nilai dan tipe datanya sama?

Misalnya:

10 == "10"   // true
10 === "10"  // false

Ini topik comparison yang biasanya dibahas setelah assignment.

Untuk sekarang, cukup ingat:

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

18. Contoh praktis: menghitung total harga

Misalnya:

let total = 100;

Kemudian ada tambahan biaya 50.

Cara panjang:

total = total + 50;

Atau:

total += 50;

Kemudian ada diskon 20:

total -= 20;

Kemudian misalnya jumlahnya dikali 2:

total *= 2;

Kode lengkap:

let total = 100;

total += 50; // 150
total -= 20; // 130
total *= 2;  // 260

console.log(total);

Hasil:

260

19. Cara berpikir yang paling mudah

Anggap variable seperti kotak yang memiliki nama.

Misalnya:

let money = 100;

Bayangkan:

┌─────────────┐
│ money       │
│             │
│    100      │
└─────────────┘

Kemudian:

money += 50;

Artinya:

Ambil isi money, tambahkan 50, lalu simpan kembali ke kotak money.

100 + 50
  ↓
150
  ↓
┌─────────────┐
│ money       │
│             │
│    150      │
└─────────────┘

Begitu juga:

money -= 20;

berarti:

150 - 20
 ↓
130

20. Hal paling penting dari lecture ini

Ada 4 konsep utama yang harus benar-benar kamu pahami:

① = adalah assignment

let x = 10;

Artinya:

Simpan 10 ke dalam x.

② Assignment menghasilkan value

let x;

console.log(x = 20);

Output:

20

Karena x = 20 selain menyimpan 20 ke x, expression tersebut juga menghasilkan 20.

③ Assignment associative dari kanan ke kiri

a = b = c = 100;

diproses dari kanan:

c = 100
↓
b = 100
↓
a = 100

④ Ada shorthand assignment

x = x + 10;

bisa ditulis:

x += 10;

Begitu juga:

x = x - 10;  → x -= 10;
x = x * 10;  → x *= 10;
x = x / 10;  → x /= 10;
x = x % 10;  → x %= 10;
x = x ** 10; → x **= 10;

🧠 Cheat Sheet Super Singkat

// Assignment
let x = 10;

// Reassignment
x = 20;

// Assignment menghasilkan value
console.log(x = 30); // 30

// Chaining assignment
let a, b, c;
a = b = c = 100;

// Shorthand assignment
x += 5;  // x = x + 5
x -= 5;  // x = x - 5
x *= 5;  // x = x * 5
x /= 5;  // x = x / 5
x %= 5;  // x = x % 5
x **= 5; // x = x ** 5

Kalimat paling penting untuk diingat:

= bukan berarti “sama dengan” seperti matematika; dalam JavaScript, = berarti “assign/simpan nilai ke variable”.

Dan satu hal yang sangat penting untuk lecture berikutnya: = adalah assignment, sedangkan operator seperti == dan === digunakan untuk membandingkan. Ini nanti akan menjadi dasar saat belajar conditional/if.