Belajar Javascript Dasar Part 8 – Function Expression JavaScript

Pada seri Belajar Javascript Dasar Part 7, kita telah membahas Parameter, Argument, dan Return Value pada function di JavaScript. Nah, pada bagian ke-8 ini, kita akan melanjutkan pembahasan dengan mengenal function expression JavaScript, salah satu cara untuk membuat dan menyimpan fungsi ke dalam sebuah variabel.

Memahami function expression penting karena konsep ini akan sering digunakan ketika Anda mulai menulis kode JavaScript yang lebih kompleks. Dengan memahami cara kerjanya, Anda tidak hanya menghafal sintaks, tetapi juga mengetahui kapan dan bagaimana Function Expression digunakan.

Yuk, ikuti pembahasannya sampai selesai untuk memahami konsep, sintaks, dan contoh penggunaan function expression dalam JavaScript.

Mengenal Kembali Function yang Sudah dibuat Sebelumnya

Sebelum masuk ke materi function expression, mari kita flashback mengingat kembali function yang sudah kita buat pada materi sebelumnya.

function hitungBeratIdeal(tinggiBadan) {
  return tinggiBadan - 100;
}

const beratIdeal = hitungBeratIdeal(170);

console.log('Berat badan ideal:', beratIdeal);

Function tersebut dibuat menggunakan keyword `function`, kemudian diikuti nama function, parameter, kemudian function body. Cara ini biasa disebut Function Declaration.

Ternyata, JavaScript juga menyediakan cara lain untuk membuat function. Cara lain tersebut sering dikenal dengan function expression yaitu menyimpan function ke dalam sebuah variabel. Seperti apa itu?

Apa Itu Function Expression?

Pada function expression, function tidak langsung diberi nama sebagai sebuah deklarasi. Function justru disimpan ke dalam suatu variabel, mirip seperti saat kamu menyimpan angka atau teks ke dalam variable.

Biasanya kan kamu membuat variabel angka seperti ini;

const angka = 10;

Atau buat variable untuk menyimpan teks seperti;

const nama = 'Budi Susilo';

Maksud di modul ini, kami ingin memberitahu kamu bahwa function juga bisa dimasukkan dalam suatu variabel. Bentuk sederhananya seperti ini:

const namaFunction = function () {
  // kode yang akan dijalankan
};

Ingat tadi kami sebut bahwa function dibuat sebagai variable, sehingga namaFunction ini tentu diakhiri dengan tanda titik koma ( ; ). 

Sekarang, mari ubah contoh `hitungBeratIdeal()` sebelumnya menjadi Function Expression. Berikut ini perubahannya.

const hitungBeratIdeal = function (tinggiBadan) {
  return tinggiBadan - 100;
};

const beratIdeal = hitungBeratIdeal(170);

console.log('Berat badan ideal:', beratIdeal);

/* Output:
Berat badan ideal: 70
*/

Saat kamu eksekusi, hasilnya tetap sama seperti sebelumnya. Yang berubah hanya cara function tersebut dibuat. Variabel `hitungBeratIdeal` sekarang memiliki sebuah function di dalamnya.

Cara Menjalankan Function Expression

Cara menjalankan function expression masih sama persis dengan function declaration. Kamu cukup menuliskan nama variabel yang menyimpan function tersebut, lalu diikuti tanda kurung `()`.

const hitungBeratIdeal = function (tinggiBadan) {
  return tinggiBadan - 100;
};

console.log(hitungBeratIdeal(170));
console.log(hitungBeratIdeal(175));
console.log(hitungBeratIdeal(180));

/* Output:
70
75
80
*/

Saat kamu menulis `hitungBeratIdeal(170)`, JavaScript akan menjalankan function yang tersimpan di variabel tersebut dan memberikan nilai 170 sebagai argument untuk parameter `tinggiBadan`.

Jadi meskipun cara membuatnya berbeda, cara memanggilnya tetap sama seperti function yang sudah kamu kenal sebelumnya dan hasilnya pun juga sama.

Function Expression vs Function Declaration

Supaya lebih mudah membedakannya, mari lihat perbandingan keduanya di table berikut.

Perbedaan utamanya ada pada cara function tersebut dibuat dan kapan function itu bisa digunakan. Coba perhatikan contoh berikut.

console.log(hitungBeratIdeal(170));

const hitungBeratIdeal = function (tinggiBadan) {
  return tinggiBadan - 100;
};

Kode di atas akan menghasilkan error karena `hitungBeratIdeal` belum bisa digunakan pada saat dipanggil. Variabel yang dibuat dengan `const` atau `let` memang tidak dapat diakses sebelum baris deklarasinya dieksekusi.

Karena itu, biasakan selalu membuat Function Expression terlebih dahulu sebelum menjalankannya, jangan sampai terbalik urutannya.

Penutup

Pada materi ini, kita sudah memahami bahwa function expression digunakan untuk membuat function dan menyimpannya ke dalam variabel. Meskipun penulisannya berbeda dari function declaration, cara memanggil dan hasilnya tetap sama.

Hal penting yang perlu diingat, function expression baru dapat dipanggil setelah kode deklarasinya dijalankan. Memahami konsep ini akan membantu kamu dalam belajar JavaScript dan saat mulai membuat program yang lebih kompleks.

Jika project JavaScript kamu sudah siap di-online-kan, Rumahweb menyediakan layanan hosting untuk berbagai kebutuhan pengembangan website, mulai dari project pribadi hingga bisnis.

Quiz

Yuk, coba kuis belajar JavaScript dasar Part 8 tentang Function Expression JavaScript: Cara Baru Bikin Function berikut untuk menguji pemahaman kamu!

function hitungBeratIdeal(tinggiBadan) {
  return tinggiBadan - 100;
}

console.log(hitungBeratIdeal(170));

const hitungBeratIdeal = function (tinggiBadan) {
  return tinggiBadan - 100;
};

const hitungBeratIdeal = function (tinggiBadan) {
  return tinggiBadan - 100;
}