{"id":67972,"date":"2026-09-17T08:20:00","date_gmt":"2026-09-17T01:20:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=67972"},"modified":"2026-09-15T16:00:05","modified_gmt":"2026-09-15T09:00:05","slug":"belajar-javascript-dasar-part-8","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-javascript-dasar-part-8\/","title":{"rendered":"Belajar Javascript Dasar Part 8 \u2013 Function Expression JavaScript"},"content":{"rendered":"\n

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

Memahami function expression<\/em> 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.<\/p>\n\n\n\n

Yuk, ikuti pembahasannya sampai selesai untuk memahami konsep, sintaks, dan contoh penggunaan function expression<\/em> dalam JavaScript.<\/p>\n\n\n\n

Mengenal Kembali Function yang Sudah dibuat Sebelumnya<\/strong><\/h2>\n\n\n\n

Sebelum masuk ke materi function expression<\/em>, mari kita flashback<\/em> mengingat kembali function <\/em>yang sudah kita buat pada materi sebelumnya.<\/p>\n\n\n\n

function hitungBeratIdeal(tinggiBadan) {\n  return tinggiBadan - 100;\n}\n\nconst beratIdeal = hitungBeratIdeal(170);\n\nconsole.log('Berat badan ideal:', beratIdeal);<\/code><\/pre>\n\n\n\n
Function tersebut dibuat menggunakan keyword `function<\/em>`, kemudian diikuti nama function<\/strong>, parameter<\/strong>, kemudian function body<\/strong>. Cara ini biasa disebut Function Declaration<\/strong>.<\/p>\n\n\n\n
Ternyata, JavaScript juga menyediakan cara lain untuk membuat function. Cara lain tersebut sering dikenal dengan function expression<\/em>\u00a0yaitu menyimpan function <\/em>ke dalam sebuah variabel. Seperti apa itu?<\/p>\n\n\n\n
Apa Itu Function Expression?<\/strong><\/h2>\n\n\n\n
Pada function expression<\/em>, function tidak langsung diberi nama sebagai sebuah deklarasi. Function <\/em>justru disimpan ke dalam suatu variabel, mirip seperti saat kamu menyimpan angka atau teks ke dalam variable.<\/p>\n\n\n\n
Biasanya kan kamu membuat variabel angka seperti ini;<\/p>\n\n\n\n
const angka = 10;<\/code><\/pre>\n\n\n\n
Atau buat variable untuk menyimpan teks seperti;<\/p>\n\n\n\n
const nama = 'Budi Susilo';<\/code><\/pre>\n\n\n\n
Maksud di modul ini, kami ingin memberitahu kamu bahwa function juga bisa dimasukkan dalam suatu variabel. Bentuk sederhananya seperti ini:<\/p>\n\n\n\n
const namaFunction = function () {\n  \/\/ kode yang akan dijalankan\n};<\/code><\/pre>\n\n\n\n
Ingat tadi kami sebut bahwa function dibuat sebagai variable, sehingga namaFunction<\/em> ini tentu diakhiri dengan tanda titik koma ( ; ). <\/p>\n\n\n\n
Sekarang, mari ubah contoh `hitungBeratIdeal()<\/strong>` sebelumnya menjadi Function Expression. Berikut ini perubahannya.<\/p>\n\n\n\n
const hitungBeratIdeal = function (tinggiBadan) {\n  return tinggiBadan - 100;\n};\n\nconst beratIdeal = hitungBeratIdeal(170);\n\nconsole.log('Berat badan ideal:', beratIdeal);\n\n\/* Output:\nBerat badan ideal: 70\n*\/<\/code><\/pre>\n\n\n\n
Saat kamu eksekusi, hasilnya tetap sama seperti sebelumnya. Yang berubah hanya cara function tersebut dibuat. Variabel `hitungBeratIdeal<\/strong>` sekarang memiliki sebuah function di dalamnya.<\/p>\n\n\n\n
Cara Menjalankan Function Expression<\/strong><\/h2>\n\n\n\n
Cara menjalankan function expression<\/em> masih sama persis dengan function declaration<\/em>. Kamu cukup menuliskan nama variabel yang menyimpan function <\/em>tersebut, lalu diikuti tanda kurung `()`.<\/p>\n\n\n\n
const hitungBeratIdeal = function (tinggiBadan) {\n  return tinggiBadan - 100;\n};\n\nconsole.log(hitungBeratIdeal(170));\nconsole.log(hitungBeratIdeal(175));\nconsole.log(hitungBeratIdeal(180));\n\n\/* Output:\n70\n75\n80\n*\/<\/code><\/pre>\n\n\n\n
Saat kamu menulis `hitungBeratIdeal(170)<\/strong>`, JavaScript akan menjalankan function yang tersimpan di variabel tersebut dan memberikan nilai 170 sebagai argument<\/strong> untuk parameter `tinggiBadan<\/strong>`.<\/p>\n\n\n\n
Jadi meskipun cara membuatnya berbeda, cara memanggilnya tetap sama seperti function <\/em>yang sudah kamu kenal sebelumnya dan hasilnya pun juga sama.<\/p>\n\n\n\n
Function Expression vs Function Declaration<\/strong><\/h2>\n\n\n\n
Supaya lebih mudah membedakannya, mari lihat perbandingan keduanya di table berikut.<\/p>\n\n\n\n
<\/td>Function Declaration<\/td>Function Expression<\/td><\/tr>
Penulisan 
Cara membuat<\/td>		function nama() {
}
<\/td>		const nama = function() {
};
<\/td><\/tr>
Penulisan<\/td>Dideklarasikan langsung dengan
menggunakan nama function<\/strong>
diikuti namafunction<\/strong> nya<\/td>		Disimpan ke variabel, kemudian
tanpa perlu menulis namafunction<\/strong><\/td><\/tr>
Tanda titik koma <\/td>Tidak wajib<\/td>Wajib di akhir, karena berupa
penugasan nilai<\/td><\/tr>
Bisa dipanggil sebelum
dideklarasikan<\/td>		Bisa, karena mengalami hosting
penuh<\/td>		Tidak bisa dipanggil sebelum baris
deklarasinya<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Perbedaan utamanya ada pada cara function <\/em>tersebut dibuat dan kapan function <\/em>itu bisa digunakan. Coba perhatikan contoh berikut.<\/p>\n\n\n\n
console.log(hitungBeratIdeal(170));\n\nconst hitungBeratIdeal = function (tinggiBadan) {\n  return tinggiBadan - 100;\n};<\/code><\/pre>\n\n\n\n
Kode di atas akan menghasilkan error karena `hitungBeratIdeal<\/strong>` belum bisa digunakan pada saat dipanggil. Variabel yang dibuat dengan `const<\/strong>` atau `let<\/strong>` memang tidak dapat diakses sebelum baris deklarasinya dieksekusi.<\/p>\n\n\n\n
Karena itu, biasakan selalu membuat Function Expression terlebih dahulu sebelum menjalankannya, jangan sampai terbalik urutannya.<\/p>\n\n\n\n
Penutup<\/h2>\n\n\n\n
Pada materi ini, kita sudah memahami bahwa function expression<\/em> digunakan untuk membuat function<\/em> dan menyimpannya ke dalam variabel. Meskipun penulisannya berbeda dari function declaration<\/em>, cara memanggil dan hasilnya tetap sama.<\/p>\n\n\n\n
Hal penting yang perlu diingat, function expression<\/em> baru dapat dipanggil setelah kode deklarasinya dijalankan. Memahami konsep ini akan membantu kamu dalam belajar JavaScript dan saat mulai membuat program yang lebih kompleks.<\/p>\n\n\n\n
Jika project JavaScript kamu sudah siap di-online<\/em>-kan, Rumahweb menyediakan layanan hosting untuk berbagai kebutuhan pengembangan website, mulai dari project pribadi hingga bisnis.<\/p>\n\n\n\n
Quiz<\/h2>\n\n\n\n
Yuk, coba kuis belajar JavaScript dasar Part 8 tentang Function Expression JavaScript: Cara Baru Bikin Function berikut untuk menguji pemahaman kamu!<\/p>\n\n\n\n
\n\n  
Progress: 0 \/ 3<\/div>\n\n  \n  
\n    
Quiz 1:<\/strong> Manakah kode berikut yang merupakan contoh Function Expression<\/strong>?<\/p>\n\n
function hitungBeratIdeal(tinggiBadan) {\n  return tinggiBadan - 100;\n}<\/code><\/pre>\n\n