Pada video sebelumnya kita telah belajar mengenai function, yaitu sekumpulan instruksi yang dirancang untuk mencapai tujuan tertentu. Kemudian kita juga sudah belajar bahwa function bisa menghasilkan suatu output. Output ini bisa kita keluarkan dengan menggunakan kata kunci return, sehingga nantinya bisa digunakan lagi pada kode berikutnya. Atau kita juga bisa langsung menampilkan outputnya di layar dengan menggunakan perintah console.log.

Nah, yang belum kita pelajari adalah ternyata function bisa menerima nilai-nilai tertentu sebagai input. Nilai ini bisa kita kirimkan ke dalam function dalam bentuk parameter. Bagaiman caranya?

Sebagai contoh, kita membuat function greet yang berfungsi untuk menyapa pengunjung situs kita. Pertama kita lihat dahulu function tanpa parameter. Function ini dapat menampilkan ucapan “Selamat Datang” di console.

Namun function ini dapat berfungsi dengan lebih bagus lagi, apabila function bisa mengetahui siapa nama dari pengunjung situs kita. Disinilah kegunaan dari parameter. Jadi kita bisa mengirimkan nama pengunjung ke dalam function, sehingga nantinya function mengucapkan “Selamat Datang, ” diikuti oleh nama pengunjung. Di dalam contoh source code, kita bisa melihat bahwa di dalam tanda kurung nama function terdapat satu buah parameter name. Dan kemudian paramater name ini dapat digunakan di kode dalam function.

Kita langsung praktek coding ya. Kita tuliskan dahulu definisi dari function greet.

function greet()
{
  console.log("Selamat Datang");
}

Kalau script ini kita jalankan di browser. Maka belum ada tulisan apa-apa ya. Karena kita hanya menulis definisi saja. Kita belum menjalankan function greet. Untuk menjalankan function ini, maka kita mesti mengetikkan:

greet();

Dan kita menerima ucapan “Selamat Datang” di console.

Untuk meningkatkan kualitas dari ucapan selamat datang ini, akan lebih baik apabila kita bisa melakukan kostumisasi terhadap function greet dengan menambahkan nama pengunjungnya. Hal ini bisa kita lakukan dengan menambahkan parameter. Parameter bisa kita tambahkan di dalam tanda kurung setelah nama function, misalkan saya tambahkan parameter name. Dan kemudian di dalam function, parameter name ini dapat diperlakukan sama seperti variable biasa. Jadi kata “Selamat Datang” ini bisa kita edit dengan menambahkan string concatination dan diikuti oleh parameter name, sehingga kodenya menjadi:

console.log("Selamat Datang, “ + name);

Kita coba di browser ya. Sekarang setiap kali kita hendak memanggil function greet, kita harus menambahkan nama pengunjungnya di dalam tanda kurung. Sebagai contoh:

greet(“David”);

Dan browser pun menjawab:

Selamat Datang, David

Sebelum kita melanjutkan. Ada dua istilah yang perlu kita ketahui terlebih dahulu, yaitu Parameter dan Argument. Pada saat kita membuat definisi function, di dalam tanda kurung ini kita menuliskan nama-nama variable yang merupakan input bagi function. Nah, input ini kita sebut dengan nama parameter.

Kemudian pada saat kita menjalankan function tersebut, kita menuliskan lagi nilai yang menjadi input untuk function tersebut di dalam tanda kurung. Nilai disini adalah argument.

Jadi jelas ya, perbedaannya? Pada saat kita membuat definisi function, yang berada di dalam tanda kurung ini adalah parameter. Pada saat kita memanggil function tersebut, yang berada di dalam tanda kurung ini adalah argument.

Nah, yang perlu diingat lagi, berhubung Javascript adalah untyped language, maka nilai yang kita kirim sebagai argument ini bisa berupa tipe data apa saja. Walaupun function kita dirancang untuk tipe data string. Misalkan kita panggil function ini menggunakan beberapa tipe data lainnya:

greet(1);
greet(true);
greet(null);

Nah, sekarang pertanyaan berikutnya. Apabila kita memanggil function greet tanpa memberikan argument sama sekali. Apakah bisa jalan atau error? Kita coba ya.

greet();

Rupanya tetap berjalan normal ya. Argument secara otomatis tetap dikirimkan, namun menggunakan tipe data undefined. Dan berhubung Javascript bisa secara otomatis melakukan konversi dari tipe data lain menjadi tipe data string, maka fungsi tetap berjalan tanpa error. Namun perlu diperhatikan ya, ada instruksi tertentu yang bisa menyebabkan error sehingga nantinya kita harus menggunakan error handling.

Sebagai contoh, di dalam function kita tambahkan lagi kode yang mengakses parameter name menggunakan index.

console.log(“Huruf pertama “ + name[0]);

Nah, kalau kita coba menggunakan argument string “David”. Maka function dapat berjalan dengan benar. Namun kalau kita menggunakan tipe data lain, misalkan angka 1. Fungsi dapat berjalan, namun baris keduanya berganti menjadi undefined. Hal ini disebabkan karena tipe data numbers tidak memiliki index.

Yang menjadi masalah disini adalah kita tidak bisa menggunakan tipe data null dan undefined, karena akan menyebabkan fatal error. Kita coba ya. Kita panggil function greet dengan argument null. Browser tetap menjalankan function baris pertama. Namun pada saat hendak memproses baris kedua, browser berhenti dan mengeluarkan pesan error. Hal ini disebabkan karena tipe data null dan undefined tidak bisa menggunakan index.

Sekarang misalkan kita tambahkan lagi kode baru di bagian paling bawah function.

console.log(“Setelah huruf pertama”);

Di luar function, kita tambahkan pemanggil function dengan menggunakan argument null. Dan kemudian kita tambahkan lagi tulisan “Setelah function”.

greet(null);
console.log(“Setelah function”);

Kita simpan dan jalankan di browser. Perhatikan bahwa browser tetap menjalankan instruksi pertama di dalam function, yaitu “Selamat Datang, null”. Namun pada saat menjalankan instruksi kedua terjadi fatal error, dan browser langsung berhenti. Perhatikan bahwa perintah untuk menulis “Setelah huruf pertama” dan “Setelah function” sudah tidak dijalankan oleh browser.

Nah, untuk memperbaiki masalah seperti ini, nantinya kita harus menangkap error menggunakan try catch. Namun khusus di video ini kita tidak membahas mengenai try catch dahulu ya, karena kita masih fokus ke topik parameter dan argument. Nantinya kita akan membahas try catch dalam satu video khusus.

Kita hapus lagi kode yang barusan kita tambahkan. Selanjutnya, misalkan kita perlu mengirimkan dua parameter di dalam function yang sama. Apakah bisa? Jawabannya adalah bisa. Kita cukup tambahkan nama parameter kedua di dalam tanda kurung, dipisahkan oleh tanda koma. Maka deklarasi function kita menjadi:

function greet(name, age)
{
  console.log("Selamat Datang, " + name);
  console.log("Umur " + age);
}

Pada saat memanggil function greet, maka kita harus memasukkan 2 argument. Sebagai contoh:

greet(“David”, 25);

Dan hasilnya adalah:

Selamat Datang, David
Umur 25

Yang perlu diperhatikan disini adalah urutan dari argumentnya ya. Argument pertama dianggap sebagai name. Sedangkan argument kedua dianggap sebagai age.

Apakah bisa kita memanggil function greet dengan satu argument saya? Bisa ya. Sebagai hasilnya, parameter age akan diisikan dengan nilai undefined. Kalau menggunakan tiga argument atau lebih apakah bisa juga? Kita coba ya. Ternyata bisa. Argument yang ketiga dan seterusnya akan diabaikan, karena function greet hanya menggunakan dua parameter.

Oke, selanjutnya kita membahas mengenai default parameter ya. Kita sudah coba barusan, apabila kita memanggil function greet hanya menggunakan satu argument, maka parameter age secara otomatis diisikan dengan nilai undefined. Nah, dengan menggunakan default parameter ini, maka kita bisa mengganti nilai undefined ini menjadi nilai yang kita inginkan, misalkan menjadi 20.

Caranya adalah, pada bagian definisi fungsi, kita pergi ke bagian parameter yang kita inginkan. Misalkan parameter age. Lalu kita tambahkan simbol sama dengan diikuti oleh nilai defaultnya, misalkan 20. Kita simpan dan refresh browser. Dan sekarang apabila kita memanggil function greet hanya dengan satu argument saja, maka umurnya dianggap 20.

Untuk memanggil function, kita tidak harus mengirimkan argument dalam bentuk nilai, seperti yang kita lakukan dalam video ini. Sekarang kita coba hal baru ya, kita buat dahulu beberapa variable, lalu variable ini kita gunakan sebagai argument. Jadi setelah deklarasi function greet, kita tambahkan kode berikut:

let studentName = “David”;
let studentAge = 18;
greet(studentName, studentAge);

Artinya kita buat dahulu variable nama pelajar dan umur pelajar. Kemudian kedua variable ini kita gunakan sebagai argument. Kita simpan dan jalankan di browser. Dan script pun berjalan normal ya. Sama seperti sebelumnya.

Nah, sekarang pertanyaannya. Kalau di dalam function saya tambahkan kode

age += 10;

Artinya parameter age ini akan bertambah sepuluh. Jadi kalau kita memasukkan nilai umur 18, maka yang ditampilkan nantinya adalah 28.

Setelah kita menjalankan function greet, kita tambahkan lagi kode

console.log(“Student age “ + studentAge);

Pertanyaannya, berapakah nilai student age yang akan ditampilkan? 18 atau 28?

Kita simpan dan jalankan di browser.

Student age yang ditampilkan di console adalah 18. Artinya pada saat kita mengubah nilai dari parameter Age, nilai dari variable studentAge tidak ikut berubah. Nah, kalau di bahasa pemograman lain, kejadian seperti ini disebut dengan nama “Passing parameter by value”.

Lawan dari “Passing parameter by value” adalah “Passing parameter by reference”. Apabila kita menggunakan “Passing parameter by reference”, maka pada saat kita mengubah nilai pada parameter age, secara otomatis nilai pada studentAge turut berubah. Pertanyaan berikutnya, apakah kita bisa menggunakan “Passing parameter by reference” di dalam Javascript? Untuk semua tipe data primitif, Javascript secara otomatis menggunakan cara “Passing parameter by value”.

Namun behavior ini akan berbeda apabila kita menggunakan object. Kita sudah belajar dari video sebelumnya ya, yaitu objek String. Jadi misalkan kita membuat object baru dengan nama variable student. Lalu kita tambahkan dinamic property age dengan nilai 18.

let student = new String("David");
student.age = 18;
greet(student);
console.log("Student Age " + student.age);

Kemudian objek ini kita kirimkan sebagai argument. Tentunya deklarasi dari function greet mesti kita ubah sedikit ya, supaya bisa mendukung penggunaan objek ini.

function greet(student)
{
  student.age += 10;
  console.log("Selamat Datang, "
    + student);
  console.log("Umur " + student.age);
}

Kita simpan dan jalankan di browser. Perhatikan ya. Sekarang student age turut berubah menjadi 28. Artinya? Untuk semua tipe data primitif, Javascript menggunakan “Passing Parameter by Value”. Mengubah nilai parameter tidak mengubah nilai variable pemanggil fungsi. Sedangkan untuk semua tipe data objek, Javascript menggunakan “Passing Parameter by Reference”. Mengubah nilai parameter akan turut mengubah nilai variable pemanggil fungsi. Hal ini perlu diperhatikan ya pada saat teman-teman hendak membuat suatu fungsi.

Sekarang kita masuk ke materi terakhir dalam video ini, yaitu mengenai pseudo variable arguments. Sebagai contoh, kita buah sebuah fungsi baru dengan nama sum, yang deklarasinya seperti ini:

function sum()
{
  console.log(arguments);
}

Perhatikan ya, kita disini memanggil pseudo variable arguments untuk ditampilkan di console. Mengapa disebut pseudo? Karena variable ini ajaib. Kita tidak pernah mendeklarasikan nama variable ini baik di dalam parameter maupun di dalam function. Tapi variablenya secara otomatis ada.

Kita coba simpan dan jalankan di browser. Lalu kita ketik perintah:

sum();
sum(1);
sum(1,2);

Perhatikan bahwa browser meninformasikan ke kita bahwa variable arguments adalah object, yang berbentuk array. Dan semua nilai yang kita kirimkan sebagai argument, akan tercatat di dalam object arguments.

Bagaimana cara memanfaatkan arguments? Nah, kita sudah pernah belajar di tipe data string, bahwa string memiliki properti length yang menunjukkan jumlah huruf di dalam string. Dan huruf tersebut dapat diakses dengan menggunakan index. Array juga sama seperti itu. Array memiliki property length yang menunjukkan jumlah datanya, dan setiap datanya bisa kita akses dengan menggunakan index. Jadi kita bisa membuat satu variable result dengan nilai awal 0. Kemudian kita lakukan looping sebanyak length. Dan di dalam looping, kita tambahkan nilai result dengan nilai yang dikandung di dalam index-nya arguments. Terakhir kita kembalikan nilai dari result kepada pemanggil fungsi.

function sum()
{
  let result = 0;
  for(let i = 0; i < arguments.length; i++)
  {
    result += arguments[i];
  }
  return result;
}

Kita simpan dan jalankan di browser. Sekarang perhatikan ya, kalau kita panggil sum dengan satu argument angka satu. Maka hasilnya adalah satu.

Kalau kita panggil sum(1,2), maka hasilnya adalah 1 + 2, yaitu 3.

Kalau kita panggil sum(1,2,3) maka hasilnya adalah 1 + 2 + 3, yaitu 6.

Kalau kita panggil sum(1,2,3,4) maka hasilnya adalah 1 + 2 + 3 + 4, yaitu 10.

Dan begitu seterusnya ya. Jadi kita bisa memasukkan nilai sebanyak yang kita mau sebagai argument. Fungsi kita akan memproses semua argument tersebut, menjumlahkannya dan mengembalikan hasilnya.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.