Lecture ini membahas Default Function Parameter, yaitu cara memberikan nilai bawaan (default value) untuk parameter function ketika pemanggil function tidak memberikan nilai.

Ini kelihatannya sederhana, tetapi konsepnya penting karena berkaitan langsung dengan hal yang sudah kamu pelajari sebelumnya: parameter, argument, undefined, function, dan operator =.

1. Apa Itu Default Function Parameter?

Pertama, ingat lagi konsep parameter.

Misalnya:

function greet(name) {
    console.log("Hello " + name);
}

Di sini:

name

adalah parameter.

Ketika function dipanggil:

greet("Budi");

"Budi" adalah argument.

Alurnya:

greet("Budi")
     ↓
"Budi" diberikan ke parameter
     ↓
name = "Budi"

2. Bagaimana Kalau Argument Tidak Diberikan?

Misalnya:

function greet(name) {
    console.log("Hello " + name);
}

greet();

Kita tidak memberikan argument.

Apa isi name?

Jawabannya:

undefined

Jadi secara mental:

greet()
  ↓
tidak ada argument
  ↓
name = undefined

Kemudian:

console.log("Hello " + name);

hasilnya:

Hello undefined

3. Kenapa Bisa undefined?

Ini menghubungkan dengan lecture tentang primitive data types yang sudah kamu pelajari.

Kamu sudah tahu:

let x;

Jika variable dideklarasikan tetapi tidak diberi nilai:

console.log(x);

hasilnya:

undefined

Hal yang sama berlaku untuk parameter.

function greet(name) {
    console.log(name);
}

greet();

Karena tidak ada argument:

name = undefined

Jadi:

Parameter yang tidak mendapatkan argument akan bernilai undefined, kecuali kita memberikan default value.

4. Masalah undefined

Lecture menggunakan contoh function:

function getYearsBeforeRetirement(birthYear, retirementAge) {
    let currentYear = new Date().getFullYear();

    let age = currentYear - birthYear;

    let yearsLeft = retirementAge - age;

    return yearsLeft;
}

Misalnya:

getYearsBeforeRetirement(1990, 60);

Maka:

birthYear    = 1990
retirementAge = 60

Misalnya tahun sekarang 2024:

age = 2024 - 1990
    = 34

Kemudian:

yearsLeft = 60 - 34
          = 26

Jadi:

26

5. Tapi Kalau retirementAge Tidak Diberikan?

Misalnya:

getYearsBeforeRetirement(1990);

Yang terjadi:

birthYear     = 1990
retirementAge = undefined

Kemudian function melakukan:

let yearsLeft = retirementAge - age;

Sama dengan:

undefined - 34

Dan seperti yang sudah kamu pelajari tentang arithmetic + coercion:

undefined - 34

hasilnya:

NaN

Karena undefined ketika digunakan dalam operasi arithmetic akan menghasilkan NaN.

6. Apa Itu NaN?

NaN = Not a Number

Misalnya:

console.log(undefined - 10);

hasil:

NaN

Karena JavaScript tidak bisa mendapatkan angka yang valid dari operasi tersebut.

Jadi alurnya:

retirementAge
      ↓
undefined
      ↓
undefined - 34
      ↓
NaN
      ↓
yearsLeft = NaN

Ini bisa menyebabkan bug.

7. Solusinya: Default Parameter

Daripada membiarkan:

retirementAge = undefined

kita bisa mengatakan:

“Kalau user tidak memberikan retirement age, gunakan 60.”

Syntax-nya:

function getYearsBeforeRetirement(birthYear, retirementAge = 60) {
    let currentYear = new Date().getFullYear();

    let age = currentYear - birthYear;

    let yearsLeft = retirementAge - age;

    return yearsLeft;
}

Perhatikan:

retirementAge = 60

Itulah default parameter.

8. Cara Membacanya

Bagian ini:

function getYearsBeforeRetirement(birthYear, retirementAge = 60)

bisa dibaca:

“Function ini punya parameter retirementAge. Kalau pemanggil tidak memberikan nilai untuk parameter tersebut, gunakan 60.”

Jadi:

retirementAge = 60

adalah nilai cadangan/default.

9. Kalau Argument Tidak Diberikan

Sekarang:

getYearsBeforeRetirement(1990);

Karena tidak ada argument kedua:

birthYear = 1990
retirementAge = 60

Kemudian:

currentYear = 2024

age = 2024 - 1990
    = 34

yearsLeft = 60 - 34
          = 26

Hasil:

26

Jadi kita tidak lagi mendapatkan:

NaN

10. Kalau Kita Memberikan Argument?

Nah, ini bagian yang sangat penting.

Default value bukan berarti parameter akan selalu bernilai 60.

Misalnya:

function getYearsBeforeRetirement(birthYear, retirementAge = 60) {
    let age = new Date().getFullYear() - birthYear;

    return retirementAge - age;
}

Kemudian:

getYearsBeforeRetirement(1990, 70);

Karena kita memberikan:

70

maka:

retirementAge = 70

bukan:

retirementAge = 60

Jadi:

Ada argument?
   │
   ├── YA → gunakan argument
   │
   └── TIDAK → gunakan default

11. Visualisasi

Misalnya:

function greet(name = "Guest") {
    console.log("Hello " + name);
}

Case 1

greet("Budi");

Alurnya:

"Budi" diberikan
      ↓
name = "Budi"
      ↓
default "Guest" tidak digunakan

Output:

Hello Budi

Case 2

greet();

Alurnya:

tidak ada argument
      ↓
name = undefined
      ↓
ada default?
      ↓
YA
      ↓
name = "Guest"

Output:

Hello Guest

12. Default Parameter Bisa Dianggap sebagai “Plan B”

Ini analogi yang mudah.

Misalnya kamu punya function:

function orderFood(food = "Nasi Goreng") {
    ...
}

Kamu bilang:

“Kalau customer tidak memilih makanan, kasih Nasi Goreng.”

Jadi:

orderFood("Mie");

→ customer memilih Mie.

orderFood();

→ tidak memilih → gunakan Nasi Goreng.

Jadi:

Default parameter = nilai cadangan.

13. Bagaimana dengan Explicit undefined?

Lecture memberikan detail yang sangat penting.

Misalnya:

function greet(name = "Guest") {
    console.log(name);
}

Kita tidak memberikan argument:

greet();

Hasil:

Guest

Sekarang kita secara eksplisit memberikan undefined:

greet(undefined);

Hasilnya tetap:

Guest

Ini penting.

Karena default parameter digunakan ketika argument:

tidak diberikan

atau

nilainya undefined

Jadi:

greet()
   ↓
undefined
   ↓
default digunakan

dan:

greet(undefined)
   ↓
undefined
   ↓
default digunakan

14. Tapi null Berbeda

Ini nuance yang sangat penting.

Misalnya:

function greet(name = "Guest") {
    console.log(name);
}

Kalau:

greet(undefined);

hasil:

Guest

Tetapi kalau:

greet(null);

hasil:

null

Kenapa?

Karena:

undefined → default digunakan
null      → dianggap value yang diberikan

Jadi default parameter bukan berarti “kalau value falsy gunakan default.”

Misalnya:

greet("");

tidak menggunakan "Guest".

greet(0);

tidak menggunakan default.

greet(false);

tidak menggunakan default.

Default parameter terutama aktif ketika argument bernilai:

undefined

atau tidak diberikan.

15. Rumus Mentalnya

Ingat:

Argument diberikan?
        │
        ↓
   nilainya undefined?
      /        \
    YA          TIDAK
    ↓             ↓
default         gunakan
digunakan       argument

Contoh:

function test(x = 10) {
    console.log(x);
}

Ini tabel yang sangat bagus untuk diingat.

16. Default Parameter dan Urutan Parameter

Nah, ini bagian lecture yang agak lebih tricky.

Misalnya kita punya:

function test(a, b = 10, c) {
    ...
}

Secara syntax JavaScript ini bisa ditulis.

Tetapi dari sisi penggunaan, ini sering membingungkan.

Misalnya:

test(1, 2);

maka:

a = 1
b = 2
c = undefined

Masalahnya muncul ketika kita ingin memberikan nilai ke c, tetapi ingin melewati b.

Misalnya kita ingin:

a = 1
b = 10
c = "John"

Kita tidak bisa cukup menulis:

test(1, "John");

karena "John" akan masuk ke b:

a = 1
b = "John"
c = undefined

17. Karena Argument Dipasangkan Berdasarkan Posisi

Ini adalah konsep penting.

Misalnya:

function test(a, b, c) {
}

Ketika:

test(10, 20, 30);

JavaScript mencocokkan berdasarkan posisi:

parameter     argument

a       ←     10
b       ←     20
c       ←     30

Bukan berdasarkan nama.

18. Contoh dari Lecture

Misalnya function:

function getYearsBeforeRetirement(
    birthYear,
    retirementAge = 60,
    name
) {
    ...
}

Kemudian:

getYearsBeforeRetirement(1990, "John");

JavaScript melihat posisi:

birthYear
   ↓
1990

retirementAge
   ↓
"John"

name
   ↓
undefined

Jadi "John" tidak otomatis tahu bahwa dia dimaksudkan untuk name.

JavaScript tidak berpikir:

“Oh, ini string, mungkin dia untuk name.”

JavaScript hanya melihat posisi.

19. Inilah Kenapa Default Parameter Sebaiknya di Belakang

Untuk API/function yang ingin mudah digunakan, pola yang baik adalah:

function test(a, b, c = 10) {
}

Bukan:

function test(a, b = 10, c) {
}

Contoh:

function createUser(name, age, country = "Indonesia") {
    ...
}

Kita bisa:

createUser("Budi", 25);

hasil:

name    = "Budi"
age     = 25
country = "Indonesia"

Atau:

createUser("Budi", 25, "Japan");

hasil:

name    = "Budi"
age     = 25
country = "Japan"

Ini sangat masuk akal.

20. Multiple Default Parameters

Kita juga bisa mempunyai beberapa default parameter.

Contoh:

function createUser(
    name = "Guest",
    age = 18,
    country = "Indonesia"
) {
    console.log(name, age, country);
}

Semua parameter memiliki default.

createUser();

hasil:

Guest 18 Indonesia

Atau:

createUser("Budi");

hasil:

Budi 18 Indonesia

Atau:

createUser("Budi", 25);

hasil:

Budi 25 Indonesia

Atau:

createUser("Budi", 25, "Japan");

hasil:

Budi 25 Japan

21. Kenapa Default Parameters Biasanya Ditaruh di Belakang?

Bayangkan:

function test(
    required1,
    required2,
    optional1 = 10,
    optional2 = 20
) {}

Ini sangat mudah dibaca:

required1
required2
   ↓
optional1
optional2

User bisa memberikan argument dari kiri ke kanan.

test(1, 2);

berarti:

required1 = 1
required2 = 2
optional1 = 10
optional2 = 20

Sedangkan kalau optional parameter ada di tengah:

function test(
    required1,
    optional = 10,
    required2
) {}

menjadi lebih sulit ketika ingin melewati optional parameter.

22. Catatan Teknis: “Harus Selalu di Akhir” Sedikit Disederhanakan

Ada satu hal yang perlu kamu ketahui supaya tidak salah saat nanti belajar JavaScript lebih dalam.

Lecture mengatakan:

default parameter harus selalu menjadi parameter terakhir.

Untuk best practice beginner dan pola function biasa, anggap ini sebagai aturan praktis yang bagus.

Tetapi secara teknis, JavaScript memungkinkan parameter non-default setelah default dalam beberapa bentuk:

function test(a = 10, b) {
    console.log(a, b);
}

Ini valid.

Misalnya:

test(undefined, 20);

akan menghasilkan:

a = 10
b = 20

Jadi bukan syntax error semata.

Namun masalahnya adalah cara pemanggilannya menjadi kurang nyaman jika ingin melewati parameter default.

Karena itu:

Untuk desain function yang mudah dipahami, letakkan parameter default di bagian akhir.

Jadi untuk level course kamu sekarang, pegang rule:

required parameters → default/optional parameters

23. Contoh yang Lebih Realistis

Misalnya kita membuat function pembayaran:

function calculatePrice(price, tax = 10) {
    return price + (price * tax / 100);
}

Jika:

calculatePrice(100);

maka:

price = 100
tax = 10

hasil:

110

Kalau:

calculatePrice(100, 20);

maka:

price = 100
tax = 20

hasil:

120

Jadi default parameter membuat function lebih fleksibel.

24. Default Parameter Tidak Sama dengan ||

Ini juga penting karena kamu sudah belajar logical operator.

Ada orang yang mungkin melakukan:

function greet(name) {
    name = name || "Guest";
}

Ini tidak sama persis dengan:

function greet(name = "Guest") {
}

Kenapa?

Karena || menggunakan konsep truthy/falsy.

Misalnya:

greet("");

Dengan ||:

"" → falsy
↓
"Guest"

Tetapi default parameter:

function greet(name = "Guest") {
    console.log(name);
}

greet("");

akan menghasilkan:

""

karena "" bukan undefined.

Jadi:

Default parameter
      ↓
khususnya menangani undefined

||
      ↓
menggunakan truthiness

Ini perbedaan yang sangat penting.

25. Hubungkan dengan Lecture Sebelumnya

Lecture ini sebenarnya melanjutkan beberapa konsep lama.

Dari Function

Kamu sudah belajar:

function add(a, b) {
    return a + b;
}

Sekarang:

function add(a, b = 10) {
    return a + b;
}

Dari undefined

Kamu sudah belajar:

let x;

console.log(x);

→ undefined

Sekarang:

function test(x) {
    console.log(x);
}

test();

→ x adalah undefined.

Dari Arithmetic

Kamu sudah belajar:

undefined - 10

→ NaN.

Itulah kenapa default parameter bisa membantu mencegah masalah.

26. Visualisasi Lengkap

Tanpa default parameter:

function test(x)
        ↓
test()
        ↓
x = undefined
        ↓
digunakan dalam operasi
        ↓
bisa menghasilkan NaN / hasil tidak diinginkan

Dengan default parameter:

function test(x = 10)
        ↓
test()
        ↓
x = undefined
        ↓
default parameter aktif
        ↓
x = 10
        ↓
operasi aman

Kalau argument diberikan:

function test(x = 10)
        ↓
test(50)
        ↓
x = 50
        ↓
default tidak digunakan

27. Cara Membaca Syntax Default Parameter

Ketika melihat:

function calculate(price, tax = 10) {

jangan membaca:

“tax selalu 10.”

Tetapi baca:

“tax bernilai 10 jika caller tidak memberikan nilai tax atau memberikan undefined.”

Ini mental model yang jauh lebih tepat.

28. Contoh Beberapa Case

function calculate(price, tax = 10) {
    return price + (price * tax / 100);
}

Case 1

calculate(100);

price = 100
tax = 10

Case 2

calculate(100, 20);

price = 100
tax = 20

Case 3

calculate(100, undefined);

price = 100
tax = 10

Case 4

calculate(100, 0);

price = 100
tax = 0

Default tidak digunakan.

Case 5

calculate(100, null);

price = 100
tax = null

Default tidak digunakan.

29. Apa Keuntungan Default Parameter?

1. Menghindari undefined

Daripada:

retirementAge = undefined

kita punya:

retirementAge = 60

2. Mengurangi kemungkinan bug

Misalnya:

undefined - 34

→ NaN

Dengan default:

60 - 34

→ 26

3. Function lebih fleksibel

Kita bisa:

calculatePrice(100);

atau:

calculatePrice(100, 20);

4. Default value terdokumentasi langsung di parameter

Bandingkan:

function calculate(price, tax) {
    if (tax === undefined) {
        tax = 10;
    }
}

dengan:

function calculate(price, tax = 10) {
}

Yang kedua jauh lebih singkat dan jelas.

30. Cheat Sheet

Syntax

function functionName(parameter = defaultValue) {
    ...
}

Contoh

function greet(name = "Guest") {
    console.log("Hello " + name);
}

Argument diberikan

greet("Budi");

→ "Budi"

Argument tidak diberikan

greet();

→ "Guest"

Explicit undefined

greet(undefined);

→ "Guest"

null

greet(null);

→ null

0

greet(0);

→ 0

31. Mental Model Utama

Bayangkan function punya parameter dengan nilai cadangan:

                 CALL FUNCTION
                      │
                      ↓
             Ada argument untuk
               parameter ini?
                /           \
              YA             TIDAK
              ↓                ↓
       gunakan argument    gunakan default
              │                │
              └───────┬────────┘
                      ↓
              jalankan function

Dan khusus:

argument = undefined
       ↓
gunakan default

🧠 Inti yang Harus Kamu Ingat

Kalau hanya mau mengingat 6 hal dari lecture ini, ingat ini:

1. Parameter yang tidak mendapat argument bernilai undefined

function test(x) {
    console.log(x);
}

test(); // undefined

2. Default parameter memberikan nilai cadangan

function test(x = 10) {
}

3. Tidak ada argument → default digunakan

test(); // x = 10

4. undefined → default juga digunakan

test(undefined); // x = 10

5. Value yang benar-benar diberikan → gunakan value tersebut

test(50); // x = 50

6. Untuk desain function yang mudah digunakan, taruh default/optional parameters di bagian belakang

function test(required1, required2, optional = 10) {
}

🎯 Satu kalimat untuk mengingat semuanya

Default parameter adalah nilai cadangan untuk parameter function yang digunakan ketika argument tidak diberikan atau nilainya undefined.

Contoh paling sederhana:

function greet(name = "Guest") {
    console.log("Hello " + name);
}

greet("Budi");     // Hello Budi
greet();           // Hello Guest
greet(undefined);  // Hello Guest
greet(null);       // Hello null

Dan ini menjadi dasar yang bagus untuk lecture berikutnya, karena setelah memahami default parameter, kamu akan mulai melihat syntax JavaScript modern yang lebih ringkas seperti arrow function, lalu masuk ke konsep yang lebih dalam seperti this, value vs reference, dan seterusnya.