Inti materi ini adalah default parameter pada TypeScript/JavaScript, tetapi ada beberapa konsep penting di baliknya yang perlu dipahami supaya tidak sekadar menghafal sintaks.

1. Apa itu Default Parameter?

Default parameter adalah parameter fungsi yang memiliki nilai bawaan (default value).

Artinya, ketika kita memanggil fungsi dan tidak memberikan nilai untuk parameter tersebut, JavaScript/TypeScript akan menggunakan nilai default yang sudah kita tentukan.

Contoh sederhana:

function greet(name: string, gender: string = "male") {
    console.log(`Hello ${name}, your gender is ${gender}`);
}

Di sini kita punya dua parameter:

name: string
gender: string = "male"

• name → wajib diberikan
• gender → tidak wajib diberikan
• jika gender tidak diberikan → otomatis "male"

2. Contoh dari Materi

Pada awalnya, fungsi dibuat seperti ini:

function printDetails(
    name: string,
    age: number,
    gender: string
) {
    const message = `Hi my name is ${name} and I am ${age} years old ${gender}`;

    console.log(message);
}

Kemudian kita memanggilnya:

printDetails("John", 28, "male");

Hasilnya:

Hi my name is John and I am 28 years old male

Karena fungsi membutuhkan 3 parameter, kita harus memberikan 3 argument.

3. Masalahnya: Gender Tidak Harus Wajib

Misalnya kita ingin membuat aturan:

Nama wajib diberikan, umur wajib diberikan, tetapi gender boleh tidak diberikan.

Jadi kita ingin bisa melakukan:

printDetails("John", 28);

Namun dengan fungsi sebelumnya, ini akan menghasilkan error karena gender dianggap wajib.

TypeScript akan menganggap:

gender: string

berarti:

“Saya membutuhkan sebuah string untuk parameter gender.”

4. Solusinya: Gunakan Default Parameter

Kita bisa memberikan nilai default:

function printDetails(
    name: string,
    age: number,
    gender: string = "male"
) {
    const message = `Hi my name is ${name} and I am ${age} years old ${gender}`;

    console.log(message);
}

Perhatikan bagian:

gender: string = "male"

Artinya:

gender bertipe string, dan kalau tidak diberikan nilainya, gunakan "male".

Sekarang kita bisa memanggil:

printDetails("John", 28);

Hasil:

Hi my name is John and I am 28 years old male

Tidak ada error.

5. Kalau Kita Memberikan Nilai Gender?

Misalnya:

printDetails("John", 28, "female");

Maka hasilnya:

Hi my name is John and I am 28 years old female

Kenapa bukan "male"?

Karena kita memberikan nilai secara langsung.

Aturannya sederhana:

Ada argument → gunakan argument tersebut
Tidak ada argument → gunakan default value

Jadi:

printDetails("John", 28);

↓

gender tidak diberikan
        ↓
gunakan "male"

Sedangkan:

printDetails("John", 28, "female");

↓

gender diberikan
        ↓
gunakan "female"

6. Parameter vs Argument

Ini juga penting supaya tidak bingung.

Ketika kita membuat fungsi:

function printDetails(
    name: string,
    age: number,
    gender: string = "male"
) {
}

name, age, dan gender disebut parameter.

Sedangkan ketika kita memanggil:

printDetails("John", 28, "female");

"John", 28, dan "female" disebut argument.

Gampangnya:

Parameter = variabel yang disiapkan oleh fungsi.

Argument = nilai yang kita kirimkan ketika memanggil fungsi.

7. Kenapa Default Parameter Harus di Belakang?

Ini adalah bagian yang sangat penting dari materi.

Misalnya kita mencoba membuat:

function printDetails(
    gender: string = "male",
    name: string,
    age: number
) {
}

Secara konsep kita mungkin berpikir:

“Tidak masalah, kan gender sudah punya default value?”

Masalahnya adalah argument pada fungsi diberikan berdasarkan posisi/urutan.

Misalnya:

printDetails("John", 28);

TypeScript/JavaScript membaca berdasarkan urutan:

Argument pertama → parameter pertama
Argument kedua   → parameter kedua
Argument ketiga  → parameter ketiga

Jadi:

"John" → gender
28     → name
????   → age

Padahal yang kita inginkan:

"John" → name
28     → age
"male" → gender

Itulah sebabnya default parameter sebaiknya ditempatkan setelah parameter wajib.

8. Urutan yang Benar

Yang benar:

function printDetails(
    name: string,
    age: number,
    gender: string = "male"
) {
}

Sekarang:

printDetails("John", 28);

dibaca:

"John" → name
28     → age
tidak ada → gender
              ↓
          "male"

Sehingga hasilnya benar.

9. Bisa Punya Lebih dari Satu Default Parameter?

Bisa.

Misalnya:

function printDetails(
    name: string,
    age: number,
    gender: string = "male",
    city: string = "London"
) {
    console.log(
        `Hi my name is ${name}, I am ${age} years old, ${gender}, from ${city}`
    );
}

Kita bisa memanggil:

printDetails("John", 28);

Hasil:

Hi my name is John, I am 28 years old, male, from London

Karena:

gender → "male"
city   → "London"

10. Bagaimana Kalau Hanya Ingin Mengubah City?

Nah, ini hal yang sering membingungkan.

Misalnya:

printDetails("John", 28, "male", "Paris");

Ini mudah:

name   → John
age    → 28
gender → male
city   → Paris

Tetapi bagaimana kalau kita ingin:

name   → John
age    → 28
gender → default ("male")
city   → Paris

Kita tidak bisa langsung melakukan:

printDetails("John", 28, , "Paris");

Sintaks seperti itu tidak digunakan untuk “melewati” argument fungsi biasa.

Kita harus mengisi posisi sebelumnya, misalnya:

printDetails("John", 28, "male", "Paris");

Atau pada desain API yang kompleks, biasanya lebih cocok menggunakan object parameter.

11. Default Parameter Bukan Optional Parameter yang Sama Persis

Dalam TypeScript ada konsep lain yang mirip, yaitu optional parameter:

function greet(name?: string) {
    console.log(name);
}

Tanda ? berarti parameter tersebut optional.

Sedangkan:

function greet(name: string = "John") {
    console.log(name);
}

berarti parameter tersebut memiliki default value.

Perbedaannya:

Optional parameter

function greet(name?: string) {
    console.log(name);
}

Kalau tidak diberikan:

greet();

nilai name adalah:

undefined

Default parameter

function greet(name: string = "John") {
    console.log(name);
}

Kalau tidak diberikan:

greet();

nilai name adalah:

John

Jadi:

Optional parameter → boleh tidak diberikan.

Default parameter → boleh tidak diberikan dan ada nilai penggantinya.

12. Contoh Kehidupan Nyata

Bayangkan kita punya fungsi untuk membuat akun:

function createUser(
    name: string,
    country: string = "Indonesia"
) {
    console.log(`${name} lives in ${country}`);
}

Kita bisa melakukan:

createUser("Budi");

Hasil:

Budi lives in Indonesia

Karena country tidak diberikan.

Tapi kalau:

createUser("John", "USA");

hasilnya:

John lives in USA

Jadi default parameter sangat berguna ketika kita mempunyai nilai yang umum digunakan, tetapi user masih boleh menggantinya.

13. Contoh Lain: Pagination

Misalnya kita membuat fungsi untuk mengambil data:

function getUsers(
    page: number = 1,
    limit: number = 10
) {
    console.log(`Page: ${page}, Limit: ${limit}`);
}

Kalau:

getUsers();

hasil:

Page: 1, Limit: 10

Kalau:

getUsers(2);

hasil:

Page: 2, Limit: 10

Kalau:

getUsers(2, 20);

hasil:

Page: 2, Limit: 20

Ini contoh penggunaan default parameter yang sangat umum.

14. Hal Penting: Default Parameter Berjalan Saat Argument undefined

Ada detail JavaScript yang bagus untuk diketahui.

Misalnya:

function greet(name: string = "John") {
    console.log(name);
}

Kemudian:

greet();

hasil:

John

Kalau kita melakukan:

greet(undefined);

hasilnya juga:

John

Karena default parameter digunakan ketika nilainya undefined.

Namun null berbeda:

greet(null);

Dalam TypeScript dengan strict type checking, ini biasanya akan ditolak karena null bukan string.

Secara konsep JavaScript:

undefined → gunakan default
null      → bukan otomatis default

15. Kenapa Konsep Ini Penting di TypeScript?

Karena TypeScript adalah superset dari JavaScript.

Artinya, TypeScript menambahkan fitur seperti:

• type system
• interface
• generics
• access modifier
• dan lain-lain

tetapi tetap mempertahankan banyak fitur JavaScript.

Default parameter sendiri sebenarnya adalah fitur JavaScript modern (ES6), bukan fitur yang eksklusif milik TypeScript.

Karena itu sintaks ini berlaku di keduanya:

function greet(name: string = "John") {
}

TypeScript hanya menambahkan informasi tipe:

name: string

Sedangkan konsep default value:

= "John"

berasal dari JavaScript.

16. Kesimpulan yang Perlu Diingat

Kalau diringkas, default parameter adalah:

Parameter yang memiliki nilai bawaan sehingga kita tidak wajib memberikan argument untuk parameter tersebut ketika memanggil fungsi.

Sintaksnya:

function functionName(
    parameter: type = defaultValue
) {
}

Contoh:

function printDetails(
    name: string,
    age: number,
    gender: string = "male"
) {
    console.log(
        `Hi my name is ${name} and I am ${age} years old ${gender}`
    );
}

Pemanggilan:

printDetails("John", 28);

→

Hi my name is John and I am 28 years old male

Sedangkan:

printDetails("John", 28, "female");

→

Hi my name is John and I am 28 years old female

⭐ Tiga poin paling penting

1. Default parameter mempunyai nilai bawaan.

   gender: string = "male"
   

2. Argument untuk default parameter tidak wajib diberikan.

   printDetails("John", 28);
   

3. Default parameter sebaiknya diletakkan setelah parameter wajib.

   // ✅ Baik
   function test(name: string, age: number, gender: string = "male") {}
   

   // ❌ Jangan desain seperti ini
   function test(gender: string = "male", name: string, age: number) {}
   

Dan satu kalimat untuk mengingat semuanya:

Parameter wajib diletakkan di depan, parameter yang punya default value diletakkan di belakang.

Bagian akhir lecture juga sedang menjembatani materi berikutnya: karena konsep-konsep seperti default parameter berasal dari JavaScript, kursus TypeScript tidak perlu mengulang seluruh JavaScript. Setelah dasar-dasar ini, materi kemudian masuk ke Object-Oriented Programming (OOP) di TypeScript.