Belajar Javascript Function

Function Expression

Materi ini memiliki 1 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

Selama ini kita sudah belajar mengenai cara membuat function dengan menggunakan deklarasi. Pada video ini, kita akan belajar mengenai cara membuat function dengan menggunakan ekspresi atau function expression. Contoh sintaksnya bisa dilihat di layar. Cara membuat function expression mirip dengan cara kita membuat variable ya. Jadi kita bisa menggunakan kata kunci const atau let, diikuti oleh nama variablenya dan operator assignment. Namun nilai yang kita masukkan adalah function lalu diikuti oleh tanda kurung. Di dalam tanda kurung, kita boleh menambahkan parameter yang dibutuhkan. Apabila tidak ada parameter, kita tetap harus menuliskan tanda kurung kosong. Kemudian diikuti oleh kurung kurawal, dan kita bisa menuliskan sekumpulan instruksi yang dijalankan oleh function tersebut di dalam kurung kurawal.

Cara menjalankan function expression tetap sama dengan function deklaration. Kita tinggal menuliskan nama variable diikuti oleh tanda kurung.

Kita langsung mulai coding. Kita ketik dahulu contoh function seperti di slide barusan.

const hello = function(name)
{
    console.log("Hi " + name);
}

hello("David");

Kita simpan dan jalankan di browser. Dan di bagian console keluar tulisan “Hi David”.

Kalau kita ketik “hello”, maka browser memberitahukan kita bahwa hello ini adalah sebuah fungsi. Bahkan browser bisa memberitahukan kita fungsi ini isinya apa.

Sedangkan apabila kita hendak menjalankannya, maka kita harus menuliskan nama variable ini diikuti oleh tanda kurung. Dan kita bisa menuliskan argument-nya di dalam tanda kurung, misalkan “Budi”. Dan hasilnya adalah “Hi Budi”.

Nah, yang menarik dari konsep ini adalah, ternyata variable di Javascript bisa merujuk ke function. Artinya pada saat kita membuat suatu function, maka kita bisa meminta parameter yang berupa function, dan kita juga bisa membuat function sebagai return value-nya. Khusus di video ini, kita akan mencoba menggunakan function sebagai parameter dulu ya. Sedangkan function sebagai return value akan dibahas di video berikutnya.

Sekarang kita buat function dengan nama callTwice. Kita gunakan cara deklarasi saja ya supaya tidak bingung. Parameternya kita beri nama func, singkatan dari function. Di dalam fungsi ini, kita memanggil func sebanyak dua kali dengan menggunakan argument “Sandra” dan “Dewi”. Maka functionnya menjadi:

function callTwice(func)
{
  func("Sandra");
  func("Dewi");
}

Setelah itu, kita panggil fungsi callTwice dengan menggunakan hello sebagai argumentnya. Perhatikan bahwa hello ini adalah sebuah fungsi ya.

callTwice(hello);

Kita simpan dan jalankan di browser. Maka kita mendapatkan hasil:

Hi Sandra
Hi Dewi

Artinya fungsi hello dijalankan sebanyak 2 kali, dengan argument “Sandra” dan “Dewi”. Konsepnya menarik ya.

Kita juga bisa membuat fungsi untuk memanggil hello menggunakan looping. Sebagai contoh kita buat function callInLoop dengan dua buat parameter, func dan count. Di dalamnya kita buat loop sebanyak count. Lalu kita panggil fungsi func dengan argument i. Kita panggil fungsi callInLoop dengan argument hello dan 5.

function callInLoop(func, count)
{
  for(let i = 0; i < count; i++)
  {
    func(i);
  }
}
callInLoop(hello, 5);

Kita simpan dan jalankan di browser. Sekarang fungsi hello dijalankan sebanyak 5 kali ya. Kalau kita panggil callInLoop dengan argument hello dan 10, maka fungsi hello dijalankan sebanyak 10 kali.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
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.