Masukkan Password
55 The arguments Parameter
Lecture ini membahas arguments object, yaitu fitur JavaScript yang memungkinkan sebuah regular function menerima dan membaca semua argument yang diberikan saat function dipanggil, bahkan ketika jumlah argument tersebut tidak sesuai dengan jumlah parameter yang dideklarasikan.
Ini penting karena nanti kamu akan menemukan kasus seperti:
addition(10, 20, 30, 40, 50);
dan kita ingin function bisa menangani berapa pun jumlah angka yang dikirim.
1. Mulai dari parameter dan argument
Sebelumnya kamu sudah belajar tentang parameter dan argument.
Contoh:
function addition(x, y) {
return x + y;
}
addition(10, 20);
Di sini:
x dan y
↓
parameter
Sedangkan:
10 dan 20
↓
argument
Jadi:
FUNCTION
┌─────────────────────────┐
│ addition(x, y) │
│ ↑ ↑ │
│ parameter │
└─────────────────────────┘
↑
│
addition(10, 20)
↑ ↑
argument
Biasanya parameter dan argument kita buat berpasangan.
function addition(x, y) {
return x + y;
}
addition(10, 20);
Maka:
x = 10
y = 20
2. Apa itu arguments?
Nah, JavaScript punya sesuatu yang secara otomatis tersedia di regular function, yaitu:
arguments
arguments berisi semua argument yang diberikan ketika function dipanggil.
Contoh:
function addition(x, y) {
console.log(arguments);
}
addition(10, 20);
Secara konsep:
arguments
↓
┌─────────────┐
│ 0: 10 │
│ 1: 20 │
│ length: 2 │
└─────────────┘
Jadi walaupun function hanya punya:
x, y
arguments tetap mengetahui semua argument yang dikirim.
3. Yang menarik: jumlah parameter tidak harus sama dengan argument
Misalnya:
function addition(x, y) {
console.log(x);
console.log(y);
console.log(arguments);
}
addition(10, 20, 30);
Parameter hanya:
x
y
Tetapi argument ada:
10
20
30
Maka:
x = 10
y = 20
arguments:
0 → 10
1 → 20
2 → 30
Argument 30 tidak masuk ke parameter x atau y, tetapi tetap bisa diakses melalui:
arguments[2]
Ini salah satu fungsi penting arguments.
4. arguments punya index
arguments menggunakan index seperti array.
Misalnya:
function test() {
console.log(arguments);
}
test(10, 20, 30, 40);
Secara konsep:
arguments
┌──────────────┐
│ 0 → 10 │
│ 1 → 20 │
│ 2 → 30 │
│ 3 → 40 │
│ length → 4 │
└──────────────┘
Kita bisa mengambil:
arguments[0]
→ 10
arguments[1]
→ 20
arguments[2]
→ 30
arguments[3]
→ 40
5. Ada property length
arguments juga mempunyai:
arguments.length
yang menunjukkan berapa banyak argument yang diberikan.
Contoh:
function test() {
console.log(arguments.length);
}
test(10, 20);
Hasil:
2
Kalau:
test(10, 20, 30);
hasil:
3
Kalau:
test(10, 20, 30, 40, 50);
hasil:
5
Jadi:
arguments.length
↓
jumlah argument aktual yang dikirim
6. Parameter dan arguments itu berbeda
Ini penting.
Misalnya:
function addition(x, y) {
console.log(x);
console.log(y);
console.log(arguments);
}
Ada dua konsep berbeda:
Parameter
x
y
Ini adalah nama yang kita tentukan saat membuat function.
arguments
arguments
Ini adalah kumpulan argument aktual yang diberikan saat function dipanggil.
Contoh:
addition(10, 20, 30, 40);
Maka:
Parameter:
x → 10
y → 20
arguments:
0 → 10
1 → 20
2 → 30
3 → 40
7. arguments bisa digunakan untuk jumlah argument yang tidak diketahui
Nah, ini use case utama lecture.
Misalnya kita ingin membuat function:
addition()
yang bisa menjumlahkan:
addition(10, 20)
atau:
addition(10, 20, 30)
atau:
addition(10, 20, 30, 40)
atau bahkan:
addition(10, 20, 30, 40, 50, 60, 70);
Masalahnya:
Kita tidak tahu dari awal akan ada berapa argument.
Kalau kita membuat:
function addition(x, y) {
return x + y;
}
kita hanya mendesain function untuk dua parameter.
8. Menggunakan arguments
Kita bisa membuat:
function addition() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
Sekarang kita tidak membutuhkan parameter x dan y.
Kita langsung membaca semua argument melalui:
arguments
9. Mari bedah kode tersebut
Kode:
function addition() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
Kita bahas satu-satu.
Step 1 — buat variable sum
let sum = 0;
Kita mulai dari:
sum = 0
Karena belum menjumlahkan apa pun.
Step 2 — mulai loop
for (let i = 0; i < arguments.length; i++) {
Kita ingin mengunjungi semua argument.
Misalnya:
addition(10, 20, 30);
maka:
arguments.length = 3
Loop menjadi:
i = 0
i < 3 ✓
i = 1
i < 3 ✓
i = 2
i < 3 ✓
i = 3
i < 3 ✗
STOP
10. Apa isi arguments[i]?
Kalau:
addition(10, 20, 30);
maka:
arguments[0] = 10
arguments[1] = 20
arguments[2] = 30
Jadi ketika:
i = 0
maka:
arguments[i]
menjadi:
arguments[0]
→ 10
11. Simulasi lengkap
Kita punya:
addition(10, 20, 30);
dan:
function addition() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
Iterasi pertama
i = 0
arguments[0] = 10
sum = 0
Maka:
sum += 10;
menjadi:
sum = 10
Iterasi kedua
i = 1
arguments[1] = 20
sum = 10
Maka:
sum += 20;
menjadi:
sum = 30
Iterasi ketiga
i = 2
arguments[2] = 30
sum = 30
Maka:
sum += 30;
menjadi:
sum = 60
Loop selesai.
Kemudian:
return sum;
Hasil:
60
12. Visualisasi prosesnya
addition(10, 20, 30)
↓
arguments
↓
┌───────────────┐
│ 0 → 10 │
│ 1 → 20 │
│ 2 → 30 │
│ length → 3 │
└───────────────┘
↓
for loop
↓
10 + 20 + 30
↓
60
13. Bisa juga empat argument
addition(10, 20, 30, 40);
Maka:
arguments[0] → 10
arguments[1] → 20
arguments[2] → 30
arguments[3] → 40
Loop menghitung:
0
↓
10
10
↓
10 + 20 = 30
30
↓
30 + 30 = 60
60
↓
60 + 40 = 100
Hasil:
100
Yang menarik adalah kita tidak perlu mengubah function.
Tetap:
function addition() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
Bisa menerima:
addition(10, 20);
addition(10, 20, 30);
addition(10, 20, 30, 40);
addition(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
14. Tapi arguments bukan benar-benar Array
Ini bagian yang perlu sedikit dikoreksi dari caption lecture.
Instruktur menyebut:
“this arguments is an array”
Untuk pemahaman beginner, memang boleh membayangkannya seperti array.
Tetapi secara teknis:
argumentsadalah array-like object, bukan Array asli.
Misalnya:
function test() {
console.log(arguments);
console.log(Array.isArray(arguments));
}
Hasil:
false
Jadi:
arguments
↓
array-like object
bukan:
arguments
↓
Array
15. Kenapa disebut “array-like”?
Karena dia punya karakteristik seperti array:
Punya index
arguments[0]
arguments[1]
arguments[2]
Punya length
arguments.length
Tetapi bukan Array asli.
Jadi sederhananya:
Array
├── index
├── length
├── banyak method Array
└── benar-benar Array
arguments
├── index
├── length
└── bukan Array
16. Kenapa ini penting?
Karena kamu tidak bisa berasumsi semua method Array tersedia pada arguments.
Misalnya Array punya:
push()
pop()
map()
filter()
reduce()
Sedangkan arguments bukan Array.
Jadi pola seperti:
arguments.push(10);
bukan cara yang tepat.
Kalau perlu Array sungguhan, nanti kita bisa convert:
const args = Array.from(arguments);
atau:
const args = [...arguments];
Tapi ini sudah sedikit lebih maju.
17. Bagian paling penting dari lecture: Arrow Function
Sekarang hubungkan dengan lecture sebelumnya.
Kita baru saja belajar:
arguments
tersedia di regular function.
Contoh:
function addition() {
console.log(arguments);
}
Ini bekerja.
Tetapi bagaimana dengan arrow function?
const addition = () => {
console.log(arguments);
};
Di arrow function:
arguments
tidak tersedia sebagai local arguments milik arrow function.
18. Mengapa arrow function tidak punya arguments?
Ini mirip sekali dengan konsep this yang baru kamu pelajari.
Kita sebelumnya belajar:
Regular function
punya this sendiri
Arrow function
tidak punya this sendiri
Hal yang sama secara konsep terjadi pada arguments.
Regular function
punya arguments sendiri
Arrow function
tidak punya arguments sendiri
Jadi:
REGULAR FUNCTION
├── punya this sendiri
└── punya arguments sendiri
ARROW FUNCTION
├── tidak punya this sendiri
└── tidak punya arguments sendiri
Ini koneksi yang sangat bagus dengan lecture sebelumnya.
19. Contoh error pada arrow function
Misalnya:
const addition = () => {
console.log(arguments);
};
addition(10, 20, 30);
Arrow function tidak memiliki arguments miliknya sendiri.
Maka kamu bisa mendapatkan error seperti:
ReferenceError: arguments is not defined
tergantung konteks luar kode tersebut.
20. Jadi bagaimana kalau ingin menerima banyak argument dengan arrow function?
Di JavaScript modern, kita biasanya menggunakan rest parameter:
const addition = (...numbers) => {
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
return sum;
};
Kemudian:
addition(10, 20, 30);
Hasil:
60
Ini adalah cara modern untuk kasus seperti ini.
Tapi kemungkinan besar rest parameter akan dibahas di lecture berikutnya, jadi untuk sekarang cukup kenali konsepnya.
21. arguments vs rest parameter
Nanti kamu akan sering melihat dua pendekatan ini.
Cara lama / legacy
function addition() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
Cara modern
const addition = (...numbers) => {
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
return sum;
};
Perbedaannya:
arguments | Rest parameter |
|---|---|
| Tersedia di regular function | Bisa digunakan di arrow function |
| Array-like object | Array asli |
| Tidak punya semua method Array | Punya method Array |
| Syntax khusus bawaan function | ...numbers |
| Banyak digunakan di kode lama | Umumnya lebih disukai di kode modern |
22. Hubungan arguments dengan parameter
Misalnya:
function test(a, b) {
console.log(a);
console.log(b);
console.log(arguments);
}
test(10, 20, 30, 40);
Kita punya:
parameter:
a = 10
b = 20
Tetapi:
arguments:
0 = 10
1 = 20
2 = 30
3 = 40
Jadi arguments menyimpan semua argument, bukan hanya argument yang memiliki pasangan parameter.
23. Kalau argument kurang dari parameter?
Ini juga menarik.
Misalnya:
function test(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
console.log(arguments);
}
test(10);
Maka:
a = 10
b = undefined
c = undefined
Tetapi:
arguments:
0 → 10
length → 1
Perhatikan:
Parameter
a → 10
b → undefined
c → undefined
Arguments
0 → 10
Jadi parameter yang tidak mendapatkan argument menjadi undefined.
Ini nyambung dengan lecture tentang default parameter yang baru saja kamu pelajari.
24. Kalau argument lebih banyak?
function test(a, b) {
console.log(a);
console.log(b);
console.log(arguments);
}
test(10, 20, 30, 40);
Maka:
a = 10
b = 20
tetapi:
arguments:
0 → 10
1 → 20
2 → 30
3 → 40
Jadi argument tambahan tetap ada di arguments.
25. Hubungkan dengan undefined
Kamu sebelumnya belajar:
function greet(name) {
console.log(name);
}
greet();
Hasil:
undefined
Karena tidak ada argument untuk name.
Sekarang kita tahu ada dua hal berbeda:
parameter
↓
name = undefined
sedangkan:
arguments
↓
tidak memiliki item untuk name
↓
length = 0
Contoh:
function greet(name) {
console.log(name);
console.log(arguments.length);
}
greet();
Hasil:
undefined
0
26. Satu hal yang sering membingungkan
Jangan menganggap:
arguments
adalah parameter bernama arguments yang kita buat sendiri.
Kita tidak menulis:
function addition(arguments) {
Tidak.
JavaScript menyediakan arguments secara otomatis untuk regular function.
Contoh:
function addition() {
console.log(arguments);
}
Kita langsung bisa menggunakannya.
27. Analogi sederhana
Bayangkan kamu punya restoran.
Function:
function order() {
...
}
Parameter adalah seperti:
kursi yang sudah disediakan
Misalnya:
function order(food, drink) {
}
Berarti kamu menyediakan dua tempat:
food
drink
Tapi customer bisa datang membawa:
nasi
teh
es krim
kue
kopi
arguments adalah seperti seluruh barang yang dibawa customer.
Jadi:
Parameter
↓
tempat yang kamu sediakan
Arguments
↓
semua barang yang benar-benar dibawa
28. Analogi arguments dengan tas
Bayangkan:
function shopping() {
console.log(arguments);
}
Lalu:
shopping("Apple", "Milk", "Bread", "Eggs");
arguments seperti tas:
arguments
┌───────────────────┐
│ 0 → Apple │
│ 1 → Milk │
│ 2 → Bread │
│ 3 → Eggs │
│ length → 4 │
└───────────────────┘
Kita bisa mengambil:
arguments[0]
→ Apple
arguments[2]
→ Bread
29. Satu hal yang sangat penting: arguments bergantung pada function
Karena arguments merupakan fitur dari regular function, kita harus memperhatikan syntax function.
Function declaration
function test() {
console.log(arguments);
}
✅ Ada arguments.
Function expression
const test = function () {
console.log(arguments);
};
✅ Ada arguments.
Arrow function
const test = () => {
console.log(arguments);
};
❌ Tidak punya arguments sendiri.
30. Hubungan dengan lecture this
Ini sebenarnya pola yang bagus untuk kamu lihat:
REGULAR FUNCTION
│
├── punya this sendiri
│
└── punya arguments sendiri
ARROW FUNCTION
│
├── tidak punya this sendiri
│
└── tidak punya arguments sendiri
Jadi lecture ini sebenarnya melanjutkan pembahasan sebelumnya.
Sebelumnya:
Bagaimana
thisbekerja pada regular function vs arrow function?
Sekarang:
Bagaimana
argumentsbekerja pada regular function vs arrow function?
31. Cheat sheet
| Konsep | Regular Function | Arrow Function |
|---|---|---|
this sendiri | ✅ | ❌ |
arguments sendiri | ✅ | ❌ |
| Bisa menerima banyak argument | ✅ | ✅ |
| Cara modern untuk banyak argument | arguments bisa, tapi legacy | Rest parameter ...args |
arguments berupa Array | ❌ | ❌ karena tidak ada |
arguments array-like | ✅ | ❌ |
32. Contoh yang perlu kamu pahami
Regular function
function addition() {
console.log(arguments);
}
addition(10, 20, 30);
arguments
0 → 10
1 → 20
2 → 30
length → 3
Function expression
const addition = function () {
console.log(arguments);
};
addition(10, 20, 30);
Sama:
arguments
0 → 10
1 → 20
2 → 30
Arrow function
const addition = () => {
console.log(arguments);
};
Arrow function tidak memiliki arguments sendiri.
33. Cara berpikir saat melihat kode
Kalau nanti kamu melihat:
function test() {
console.log(arguments);
}
langsung pikir:
"Ah, ini regular function.
Berarti saya punya akses ke arguments."
Kalau melihat:
const test = () => {
console.log(arguments);
};
langsung pikir:
"Ini arrow function.
Arrow function tidak punya arguments sendiri."
Dan kalau butuh banyak argument pada arrow:
const test = (...args) => {
...
};
34. Catatan teknis kecil tentang lecture
Ada dua penyederhanaan dari caption yang sebaiknya kamu luruskan.
① “arguments adalah array”
Lebih tepat:
argumentsadalah array-like object, bukan Array asli.
Dia punya:
arguments[0]
arguments[1]
arguments.length
tetapi bukan Array.
② “Setiap function mendapat arguments”
Lebih tepat:
Regular function memiliki
argumentsbinding sendiri. Arrow function tidak.
Jadi jangan menggeneralisasi bahwa semua jenis function punya arguments.
🧠 Inti lecture
Kalau kita sederhanakan seluruh lecture:
FUNCTION DIPANGGIL
↓
argument dikirim
↓
┌───────────────────┐
│ │
↓ ↓
parameter arguments
│ │
nama yang semua
kita definisikan argument aktual
│ │
↓ ↓
x = 10 0 → 10
y = 20 1 → 20
2 → 30
Dan yang paling penting:
Regular Function
↓
punya arguments
↓
arguments[0]
arguments[1]
arguments[2]
...
arguments.length
Sedangkan:
Arrow Function
↓
tidak punya arguments sendiri
↓
gunakan rest parameter jika
ingin menangani banyak argument
(...args) => {
...
}
Hafalan singkat:
arguments= kumpulan semua argument yang benar-benar dikirim ke regular function.
argumentsbisa diakses dengan index dan punyalength.
argumentsbukan Array asli, melainkan array-like object.
Arrow function tidak memiliki
argumentssendiri.
Dan ini nyambung langsung dengan lecture sebelumnya:
Regular Function
├── punya this sendiri
└── punya arguments sendiri
Arrow Function
├── tidak punya this sendiri
└── tidak punya arguments sendiri
Kalau pola ini sudah kamu pahami, kamu sebenarnya mulai melihat filosofi desain arrow function: arrow function sengaja dibuat tidak memiliki beberapa konteks/function-specific binding seperti this dan arguments, sehingga sangat cocok untuk callback dan nested function yang ingin menggunakan konteks dari luar.