Pengantar Bermain dengan Function

Sebuah program komputer dapat melakukan pemecahan masalah secara efektif dan efisien. Begitulah tujuan developer belajar bahasa pemrograman JavaScript. Jika sudah memahami penulisan sintaksisnya, seharusnya kini Anda dapat membuat berbagai macam program meskipun terbilang sederhana. Itu telah kita lalui pada modul sebelumnya.

Selamat datang dalam materi Bermain dengan Function! Berdasarkan namanya, Anda dapat menebak bahwa kita akan membahas fitur lain pada JavaScript, yaitu function atau bisa disebut fungsi dalam bahasa Indonesia.

Di akhir modul, Anda diharapkan dapat melaksanakan hal-hal berikut.

Menentukan waktu yang cocok untuk melibatkan function dalam program.
Menerangkan struktur atau anatomi dari sintaksis function.
Menjelaskan maksud dari function sebagai first-class citizen dalam JavaScript.
Mampu membuat dan memanggil sebuah function tanpa serta dengan parameter.
Mampu membuat function yang mengembalikan nilai dan menangkap nilai yang dikembalikan.

Pengertian Function

Apa itu function dan masalah yang dapat dipecahkan oleh function? Mari kita cari tahu bersama-sama!

Apakah Anda cukup familier dengan skala suhu, seperti celsius, fahrenheit, kelvin, dan reaumur? Dalam masa belajar di sekolah, kita pasti pernah diajarkan cara melakukan konversi skala suhu. Misalnya, angka suhu berskala celsius diubah menjadi suhu berskala fahrenheit, diubah menjadi suhu berskala reaumur, atau lainnya. Ada rumus yang menjadi panduan perubahannya. Kita ambil satu contoh rumus mengubah skala suhu celsius ke fahrenheit.

Bagaimana jika kita buat implementasi dalam JavaScript berdasarkan rumus di atas? Anda pasti sudah jago membuatnya. Berikut hasilnya.

9 / 5 * {angka_suhu_celsius} + 32;

Sederhana, bukan? Bisa jadi itu hal yang super sederhana.

Kita tinggal terapkan saja rumus di atas dalam program JavaScript. Misalnya, kita memiliki angka suhu 90 derajat celsius dan ingin diubah ke skala suhu fahrenheit.

Jika program di atas dijalankan, kita akan mendapat nilai 194 sebagai angka suhu berskala fahrenheit. Keren!

Nah, tidak berhenti sampai di sana saja. Kita punya tugas untuk mengubah beberapa angka suhu celsius lainnya ke fahrenheit juga. Misalnya, kita memiliki angka 50 °C, 70 °C, dan 100 °C yang perlu dikonversi. Apa yang akan kita lakukan? Copas atau copy-paste menjadi opsi solusi. Artinya, kita akan punya lima statement atau baris kode untuk memproses perhitungan.

main.js

let temperatureInCelsius;
let temperatureInFahrenheit;
​
temperatureInCelsius = 50;
temperatureInFahrenheit = 9 / 5 * temperatureInCelsius + 32;
console.log('Hasil konversi:', temperatureInFahrenheit); // output -> Hasil konversi: 122
​
temperatureInCelsius = 70;
temperatureInFahrenheit = 9 / 5 * temperatureInCelsius + 32;
console.log('Hasil konversi:', temperatureInFahrenheit); // output -> Hasil konversi: 158
​
temperatureInCelsius = 100;
temperatureInFahrenheit = 9 / 5 * temperatureInCelsius + 32;
console.log('Hasil konversi:', temperatureInFahrenheit); // output -> Hasil konversi: 212

Hasil konversi: 122
Hasil konversi: 158
Hasil konversi: 212

Yap, hal itu adalah pekerjaan yang redundan (repetitif). Tentunya, ini tidak efisien dan tidak sebaiknya kita lakukan. Ketimbang menuliskan kode berulang kali, kita dapat membungkus kodenya dan memanggilnya kapan pun dibutuhkan. Ini dapat dicapai dengan function dan di sinilah ia datang.

Jika diilustrasikan, function bekerja seperti berikut.

Menarik sekali, ya? Pada materi sebelumnya, kita sudah menjumpai function ini. Contohnya String, Number, parseInt, parseFloat, dsb. Ini adalah implementasi nyata meskipun kita tidak bisa melihat pembuatan function ini karena sudah tersedia secara bawaan JavaScript.

Pada materi selanjutnya, kita akan mempelajari function dalam JavaScript, mulai dari pembuatannya, pemanggilannya, dst. hingga dapat mencapai kode yang simpel dan bersih.

Deklarasi Function

Pembuatan function sebetulnya mirip dengan pembuatan variabel. Dalam variabel, nilai dapat kita akses dengan menyebutkan nama variabelnya. Hal ini karena memang kita menyimpan atau mengikat nilai dalam variabel tersebut. Sebuah function juga diikat dalam sebuah nama function. Dengan kata lain, nama function tersebut adalah identifier.

Dalam mendefinisikan function, kita perlu memahami anatominya lebih dahulu. Silakan perhatikan ilustrasi notasi berikut.

Keyword “function” harus selalu disertakan ketika mendeklarasikan function. Berikutnya, keyword tersebut diikuti dengan identifier. Ini mirip seperti variabel, kita dapat memberi nama sesuai dengan kebutuhan. Setelah itu, kita tuliskan parentheses (tanda kurung) untuk mendefinisikan parameter-parameter yang diperlukan dan function body. Apa itu parameter? Sebelum itu, kami jelaskan function body dahulu.

Function body berisi sekumpulan statement atau perintah yang akan dieksekusi oleh interpreter. Ia dibungkus dengan tanda kurung kurawal buka-tutup (curly braces). Di sinilah kita dapat mengelompokkan kode-kode untuk melakukan penyederhanaan dan dapat dipanggil kapan pun developer butuhkan. Dengan kata lain, kelompok kode ini adalah tugas yang perlu dieksekusi dan diselesaikan oleh function ketika dipanggil.

Ada kalanya tugas function memerlukan input data agar dapat diproses, bukan? Ini mirip seperti function console.log ketika menampilkan data ke console karena ada data input yang diberikan. Nah, input data itulah yang disebut dengan parameter. Kita akan mengupas lebih lanjut tentang penanganan parameter ini pada materi berikutnya.

Mari kita ambil kasus sebelumnya. Kita tahu bahwa implementasi rumus untuk konversi angka suhu berskala celsius ke fahrenheit seperti berikut.

9 / 5 * {angka_suhu_celsius} + 32;

Untuk mencapai kode yang lebih simpel dan bersih karena akan digunakan berulang kali, kita dapat membungkusnya dengan function.

function convertCelsiusToFahrenheit(temperature) {
  const temperatureInFahrenheit = 9 / 5 * temperature + 32;
 
  console.log('Hasil konversi:', temperatureInFahrenheit);
}

Membuat function dalam JavaScript sangat mudah, kan? Kali ini, kita tinggal memanggil function tersebut saja untuk mendapatkan angka hasil konversi suhu. Namun, jika program di atas dijalankan, tidak ada hasil apa pun yang akan tampak. Apakah ada yang tahu alasannya? Ya, sebabnya adalah belum kita jalankan.

Ingin tahu caranya? Masuk saja langsung ke materi berikutnya!

Pemanggilan Function

Pada materi sebelumnya, kita sudah belajar cara membuat function dalam JavaScript. Teknik yang sangat menarik untuk meningkatkan keterbacaan kode. Kita juga sudah berhasil membuatkan function untuk melakukan konversi skala suhu dari celsius ke fahrenheit. Namun, bagaimana menjalankannya? Ayo, mari kita bahas.

Melakukan deklarasi function tidak meminta JavaScript untuk menjalankannya. Lagi-lagi ini mirip dengan variabel, kita perlu menyebutkan identifier untuk memanggilnya. Itu artinya kita tinggal sebut namanya saja, dong? Benarkah? Markicob (mari kita coba).

Catatan:
Ada satu buah parameter dalam function di atas, yakni temperature. Kita akan membahas hal ini dalam materi selanjutnya. Singkatnya, kita dapat mengirimkan input data ke function body agar dapat diproses.

Jika kita jalankan kode di atas, hasil konversi tidak akan tampak pada console, tetapi yang tampil hanyalah teks [Function: convertCelciusToFahrenheit].

Hasilnya tidak sesuai dengan ekspektasi, ya? Memang ada cara tersendiri dalam memanggil function. Berikut notasi pemanggilannya.

Untuk menjalankan tugas function, sebutkan function identifier dan diikuti dengan parentheses. Pemanggilan function ini akan menjalankan seluruh kode dalam function body atau semua statement di antara curly braces ketika mendeklarasikan function.

main.js

function convertCelsiusToFahrenheit(temperature) {
    const temperatureInFahrenheit = (9 / 5) * temperature + 32;
  
    console.log('Hasil konversi:', temperatureInFahrenheit);
  }
  
  const temperatureInCelsius = 90;
  
  // Hanya menampilkan nilai function
  console.log(convertCelsiusToFahrenheit);
  // Output => [Function: convertCelciusToFahrenheit]
  
  // Akan menjalankan isi function
  convertCelsiusToFahrenheit(temperatureInCelsius);
  // Output => Hasil konversi: 194

[Function: convertCelsiusToFahrenheit]
Hasil konversi: 194

Mantap! Kini, program kita sudah berjalan dengan baik. Hasil konversi sudah kita terima dan sesuai dengan ekspektasi. Tentunya, ini berjalan dengan bantuan function. Namun, jika diperhatikan, kodenya seakan-akan seperti membalik ke baris-baris sebelumnya. Padahal, kita tahu sebuah program berjalan secara sekuensial.

Oke, mari kita telaah bersama-sama. Perhatikan ilustrasi berikut.

Dari sini kita bisa tahu bahwa memanggil function convertCelsiusToFahrenheit dapat dilakukan sebanyak dan sesering apa pun. Tentu juga tak perlu menulis rumusnya berulang-ulang. Keren!

Sebelum mengakhiri materi ini, ada hal yang perlu kita ketahui. Ia adalah fitur hoisting dalam JavaScript. Fitur ini memungkinkan kita menulis kode pemanggilan sebelum kode pendeklarasian function. Berikut contohnya.

Lihat! Kita menjalankan function greetWorld sebelum kode function declaration. Sebetulnya, ini bukanlah praktik yang baik, tetapi kami ingin Anda mengetahui bahwa JavaScript mampu melakukan ini. Jika ingin lebih dalam memahami fitur hoisting, Anda dapat menyimak artikel Hoisting dari MDN.

Demikian materi cara pembuatan function. Pembelajaran berikutnya adalah parameter dan argument untuk function. Langsung saja beranjak ke materi berikutnya.

Parameter dan Argument

Sejauh ini, kita sudah belajar membuat dan menjalankan function dengan baik dalam JavaScript. Pada materi sebelumnya, kami sudah memperlihatkan penggunaan parameter function, tetapi kita tidak berkenalan secara resmi. Nah, kita akan mendalami parameter dan argument pada function di sini.

Sebagaimana telah dijelaskan pada materi Deklarasi Function, sekumpulan kode dalam function body bisa saja membutuhkan data agar tugas diproses dengan baik. Salah satu contoh nyatanya adalah convertCelsiusToFahrenheit. Perhatikan kembali kode berikut.

function convertCelsiusToFahrenheit(temperature) {
  const temperatureInFahrenheit = 9 / 5 * temperature + 32;
 
  console.log('Hasil konversi:', temperatureInFahrenheit);
}

Ada teks temperature dalam parentheses di atas. Itulah parameter function. Jika kita amati, notasinya akan seperti berikut.

Gambar di atas menunjukkan parameter function didefinisikan dalam parentheses. Parameter dapat lebih dari satu asalkan dipisah dengan tanda koma (,). Karena parameter sama dengan input data bagi function body, kita dapat memanfaatkan nilai parameter selayaknya nilai yang tersimpan dalam variabel. Mudah, kan?

Ketika memanggil function yang memiliki parameter, kita menentukan nilai dalam parentheses. Ini pernah dilakukan sebelumnya.

const temperatureInCelsius = 90;
convertCelsiusToFahrenheit(temperatureInCelsius);

Nilai yang diberikan dalam parentheses saat pemanggilan function, ia disebut sebagai argument. Argument ini bisa berasal dari nilai yang langsung dimasukkan atau nilai yang tersimpan dari variabel.

// Langsung memasukkan nilai
convertCelsiusToFahrenheit(100);
 
// Memasukkan nilai dengan variabel
const temperatureInCelsius = 90;
convertCelsiusToFahrenheit(temperatureInCelsius);

Dengan cara ini, kita dapat mencari angka suhu berskala fahrenheit dari celsius berdasarkan parameter function convertCelsiusToFahrenheit, berapa pun angka suhu celsius yang kita masukkan. Lebih fleksibel, bukan? Memang benar bahwa function adalah fitur yang sangat powerful dalam bahasa pemrograman.

Default Parameter

Tahukah Anda bahwa argument dapat bernilai undefined jika kita tidak beri nilai apa pun dalam parentheses saat function dipanggil? Lalu, apa yang akan terjadi jika function body tetap dijalankan dalam keadaan seperti itu? Mari kita lihat bersama.

Wah, hasilnya adalah NaN (Not-a-Number). Anda masih ingat dengan nilai ini, kan? Nilai tersebut hadir karena salah satu operan dalam proses kalkulasi bukan bertipe number ataupun numerik, tetapi undefined. Nah, ini adalah masalah nyata yang tidak kita inginkan dan perlu diselesaikan.

Sebetulnya, hal ini bisa kita selesaikan menggunakan conditional statement. Kita bisa periksa bahwa jika argument bernilai undefined, jangan lakukan proses kalkulasi.

function convertCelsiusToFahrenheit(temperature) {
  if (temperature !== undefined) { // <-- conditional statement (perintah kondisional)
    const temperatureInFahrenheit = 9 / 5 * temperature + 32;
 
    console.log('Hasil konversi:', temperatureInFahrenheit);
  }
}

Namun, kita akan membahas conditional statement pada materi terpisah.

JavaScript memiliki solusi lain untuk mengatasinya jika tidak ada nilai apa pun yang disertakan ketika pemanggilan function. Ia adalah default parameter. Fitur ini memungkinkan parameter function memiliki nilai yang telah ditentukan atau default value jika ia tidak diberikan argument atau nilai apa pun.

Berikut caranya.

function convertCelsiusToFahrenheit(temperature = 50) {
  const temperatureInFahrenheit = 9 / 5 * temperature + 32;
 
  console.log('Hasil konversi:', temperatureInFahrenheit);
}

Simpel saja. Kita tambahkan sintaksis assignment (=) dan diikuti dengan nilai default-nya. Dengan cara ini, parameter akan bernilai default value.

convertCelsiusToFahrenheit();
 
/* Output:
Hasil konversi: 122
*/

Bagaimana jika kita ingin mengubah nilainya? Tenang, kita dapat memberikan nilai argument seperti biasanya. Masukkan saja nilai argument dalam parentheses saat function dijalankan. Nilai tersebut akan menggantikan default value.

Jika mau, Anda dapat bermain langsung pada interactive code berikut.

Itu adalah penerapan parameter pada function sebagai input data. Berikutnya, kita akan membahas fundamental lain yang sangat penting dari function, yaitu return value. Ayo, kita belajar lagi!

Return Value

Kita sudah belajar cara memasukkan nilai ke function sebagai input data. Ini dilakukan dengan menambahkan parameter function dalam parentheses. Selain ada data yang masuk, function juga bisa mengeluarkan nilai, lo. Ini kita sebut sebagai return value.

Saat kita menjalankan function JavaScript, mesin akan menjalankan seluruh kode dalam function body. Ada hasil yang akan dievaluasi. Secara bawaan (default), function akan mengembalikan undefined. Sudah ada contoh yang pernah kita lihat, yaitu console.log.

Kita coba simpan nilai kembalian console.log ke variabel dengan cara berikut.

Lihat! Ternyata variabel result berisi undefined. Hal ini karena memang method console.log tidak mengembalikan nilai apa pun dan JavaScript tidak menganggap ini sebagai error.

Untuk memberikan kemampuan function mengembalikan nilai (return statement), kita gunakan kata kunci return dan diikuti nilai kembaliannya. Perhatikan notasinya pada gambar berikut.

Kita memiliki function dengan identifier sumNumbers. Ia menerima dua input, yaitu a dan b untuk diproses operasi penjumlahan. Agar function ini dapat mengembalikan nilai, kita tambahkan return statement beserta nilai yang diharapkan ingin keluar.

Jika dijalankan, output pada console akan terlihat seperti berikut.

Hal berikutnya yang perlu kita ketahui sebagai developer aplikasi JavaScript adalah program dalam function akan terhenti jika eksekusi kode sudah mencapai return statement. Artinya, seluruh kode yang mengikuti statement ini tidak akan dijalankan. JavaScript akan menganggap program function sudah selesai jika statement ini sudah dibaca.

Perhatikan contoh kasus dan output yang dihasilkan berikut.

function generateGreetingWorldMessage() {
  return 'Halo, dunia!';
  console.log('Aku tidak akan tampil!');
}
 
const message = generateGreetingWorldMessage();
console.log(message);
 
/* Output:
Halo, dunia!
*/

Anda bisa bermain dengan return value dalam function pada interactive code berikut.

Return statement menjadi fitur yang sangat hebat dalam function. Kita dapat mengembalikan suatu nilai dari hasil proses yang berjalan dan menyimpannya ke variabel.

Perjalanan kita belum berakhir sampai di sini. Ada beberapa hal lainnya yang bisa kita pelajari mengenai function dalam JavaScript. Let’s go!

Function Expression

Sejauh ini, kita sudah bisa membuat function dengan baik dalam JavaScript. Capaian yang sangat bagus! Kini, kita dapat membuat banyak function untuk mencapai kode yang readable dan simple. Bahagianya, pembelajaran function kita masih berlanjut. Kita akan membahas mengenai function expression.

Function expression terdiri dari dua kata, yaitu "function" dan "expression". Kita sudah mengenal function, begitu juga dengan expression. Lantas, function expression dapat kita artikan sebagai kode yang mengembalikan nilai function. Bagaimana bentuknya, ya?

Kali ini, kita sudah mahir membuat function. Tata caranya adalah keyword function, identifier, parentheses untuk parameter, dan function body. Disadari ataupun tidak, sebetulnya kita sedang membuat, sebut saja, function statement. Artinya, kita memerintahkan JavaScript membuat function dengan statement tersebut. Tentunya, ini tidak akan mengembalikan nilai apa pun. Nah, kita dapat membuat function dengan gaya expression layaknya membuat variabel seperti kode di bawah ini.

konstanta hasil = 3 * 4;
console.log(hasil);
/* Output:
12
*/

Anda sudah penasaran, kan? Oke, mari kita mulai dengan mempelajari notasinya.

Sebetulnya, sintaksis pembuatan function expression tidak jauh berbeda dengan function statement. Bahkan, tidak ada perbedaan apa pun dari segi fiturnya. Sebagaimana Anda lihat dalam gambar di atas, kita menyimpan function pada sebuah variabel. Kini variabel menjadi identifier bagi function.

Lalu, bagaimana cara menjalankan function expression ini? Jawabannya, tidak ada yang berbeda dengan cara kita sebelumnya. Cukup sebut identifier dan diikuti dengan parentheses.

Oke, mari ubah function pengonversi suhu kita menjadi function expression.

Perbedaan lainnya dari function expression ialah tidak memiliki hoisting padanya sehingga kita tidak dapat memanggil atau menjalankan function ini sebelum dideklarasikan.

Menjadi First-Class Citizen

Jika ada bahasa pemrograman yang mengatakan bahwa function dapat diperlakukan layaknya variabel, function tersebut dinyatakan sebagai first-class citizen. Apa maksud dari diperlakukan mirip variabel?

Pada JavaScript, function dapat kita jadikan sebagai nilai dan disimpan dalam variabel, nilai argumen function lain, mengembalikan nilai function dari suatu function, dsb. Mari kita lihat contohnya.

Kita memiliki program kalkulator sederhana. Berdasarkan contoh program di atas, kita punya dua function. Function multiply untuk melakukan operasi perkalian, sedangkan calculate sebagai function utama yang perlu dijalankan jika ingin melakukan proses aritmetika dua angka.

Identifier function multiply kita jadikan sebagai nilai argumen pertama dari calculate saat pemanggilannya. Artinya, parameter operation akan bernilai function dari multiply. Oleh karena itu, kita bisa melakukan invoke (menjalankan) parameter tersebut layaknya function.

Bagaimana dengan mengembalikan nilai function dari suatu function? Mari kita lihat contohnya.

Mantap! Oke, mari coba kami rangkum mengenai function sebagai first-class citizen dalam beberapa keuntungan berikut.

Dapat disimpan sebagai nilai dalam variabel.
Dapat dikembalikan dari suatu function.
Dapat dikirimkan sebagai parameter bagi function lain.
Dapat disimpan dalam elemen array dan object literal.
Dapat memiliki method dan properties sendiri.

Itulah pelajaran kita mengenai function expression dan function sebagai first-class citizen. Hal ini dapat mengubah cara kita membuat sebuah program. Berikutnya, kita akan membahas topik yang berbeda, tetapi masih punya relevansi dengan function expression. Ayo!

Arrow Function

Function expression benar-benar bisa mengubah cara kita membuat function. Namun, ada alternatif sintaksis lain dalam JavaScript yang bisa lebih mengubah cara kita membuat function. Sintaksis tersebut bernama arrow function. Yap, ini cara baru yang bisa kita manfaatkan dalam membuat function.

Mari kita pelajari sintaksis ini.

Deklarasi

Pertanyaan utama yang perlu dipecahkan adalah bagaimana notasi arrow function? Untuk menjawabnya, mari kita langsung saja melihat perubahan function convertCelsiusToFahrenheit menjadi arrow function.

main.js

let temperatureInFahrenheit = null;
​
// Deklarasi function dengan Regular Function
const convertCelsiusToFahrenheitUsingRegularFunction = function (temperature) {
  const result = (9 / 5) * temperature + 32;
  return result;
};
​
temperatureInFahrenheit = convertCelsiusToFahrenheitUsingRegularFunction(90);
console.log('Hasil konversi:', temperatureInFahrenheit);
// Hasil ==> Hasil konversi: 194
​
// Deklarasi Function dengan Arrow Function
const convertCelsiusToFahrenheitUsingArrowFunction = (temperature) => {
  const result = (9 / 5) * temperature + 32;
  return result;
};
​
temperatureInFahrenheit = convertCelsiusToFahrenheitUsingArrowFunction(90);
console.log('Hasil konversi:', temperatureInFahrenheit);

Hasil konversi: 194
Hasil konversi: 194

Pada contoh kode di atas, kita melihat penerapan dua buah sintaksis function, yaitu regular function dan arrow function. Regular function adalah cara penulisan function yang telah kita gunakan sebelumnya, sedangkan arrow function adalah cara lain dalam membuat function. Apakah Anda melihat perbedaan di antara keduanya? Apakah Anda menyadari bahwa arrow function menunjukkan sintaksis yang lebih sederhana? Jika benar, memang itulah yang terjadi.

Arrow function ternyata menghilangkan kewajiban kita menaruh kata kunci function di sana. Sebagai gantinya, kita wajib menambahkan tanda panah (=>) setelah parameter. Ini disebut sebagai notasi fat arrow. Selain itu, arrow function juga memiliki function body sebagaimana regular function.

Sampai dengan ini Anda sudah paham notasinya, bukan? Jika diilustrasikan, berikut notasinya.

Bagus! Apakah programnya akan menghasilkan hasil yang sama bila dijalankan? Oh, tentunya.

Refactor

Apakah Anda merasa arrow function belum dikatakan sebagai sintaksis function yang sederhana? Tenang, ternyata arrow function ini bisa lebih simpel lagi!

Kita bisa menyederhanakan penulisan arrow function body agar tidak menggunakan tanda kurung kurawal sama sekali. Mari kita lihat saja implementasinya dengan mengubah contoh kasus.

main.js

let temperatureInFahrenheit;
​
// Arrow function
const convertCelsiusToFahrenheit = (temperature) => {
  const result = (9 / 5) * temperature + 32;
  return result;
};
​
temperatureInFahrenheit = convertCelsiusToFahrenheit(90);
console.log('Hasil konversi:', temperatureInFahrenheit);
​
// Arrow function versi ringkas
const convertCelsiusToFahrenheitInConciseSyntax = 
  (temperature) => (9 / 5) * temperature + 32;
​
temperatureInFahrenheit = convertCelsiusToFahrenheitInConciseSyntax(90);
console.log('Hasil konversi:', temperatureInFahrenheit);

Hasil konversi: 194
Hasil konversi: 194

Lihat! Function convertCelsiusToFahrenheitInConciseSyntax memiliki penulisan sintaksis yang sangat sederhana. Jauh lebih sederhana dari sebelumnya. Di sana kita menghilangkan beberapa hal, yaitu tanda kurung kurawal dan keyword return. Sebagai gantinya, return value langsung diletakkan setelah fat arrow. Wah, hebat sekali, ya!

Bila kita animasikan, perubahan ini akan terlihat seperti berikut.

Berikut adalah hasil dari program kita.

Hal yang perlu dicatat adalah pembuatan arrow function hanya tersedia dalam bentuk expression. Oleh karena itu, kita selalu menyimpan nilainya dalam variabel. Selain itu, arrow function dengan gaya seperti ini hanya mampu menampung satu return value. Silakan bungkus dengan tanda kurung kurawal buka-tutup jika memerlukan banyak kode.

Demikian pembahasan kita mengenai arrow function. Ini sekaligus sebagai akhir perjalanan dari modul Bermain dengan Function. Selamat, Anda sudah melewati berbagai rintangan!

Rangkuman Bermain dengan Function

Kita telah belajar banyak hal dalam materi Function dalam JavaScript. Kami siapkan rangkuman materi terhadap hal yang telah Anda pelajari selama ini. Harapannya, Anda dapat mengingat kembali setiap materi yang disampaikan.

Pengertian Function

Function adalah program kecil berisi sekumpulan perintah sehingga bisa dijalankan saat dibutuhkan. Hal tersebut sangat kita perlukan untuk mencegah aktivitas redundan dalam mencapai penyelesaian masalah.

Misalnya, daripada menuliskan formula konversi suhu sebanyak lima kali, kita dapat membungkus formula tersebut dalam function dan menjalankannya sebanyak lima kali. Ini lebih mudah ditulis dan dibaca oleh manusia.

console.log(9 / 5 * 50 + 32);
console.log(9 / 5 * 70 + 32);
console.log(9 / 5 * 100 + 32);
 
convertCelsiusToFahrenheit(50); // 122
convertCelsiusToFahrenheit(90); // 158
convertCelsiusToFahrenheit(100); // 212

Deklarasi Function

Ada tiga istilah yang perlu dipahami dalam mendefinisikan function, yakni function keyword, identifier, dan function body.

Function keyword: syarat paling utama saat membuat function.
Identifier: identitas function.
Function body: block of code yang membungkus banyak perintah.

Berikut adalah contoh dari pembuatan function.

function convertCelsiusToFahrenheit(temperature) {
  const temperatureInFahrenheit = 9 / 5 * temperature + 32;
 
  console.log('Hasil konversi:', temperatureInFahrenheit);
}

Pemanggilan Function

Sebagaimana sebuah variabel dipanggil setelah dibuat, dalam menjalankan function, kita cukup panggil identifier-nya. Namun, tambahkan sintaks “()” setelahnya tanpa diikuti dengan white-space (spasi).

function convertCelsiusToFahrenheit(temperature) {
  const temperatureInFahrenheit = (9 / 5) * temperature + 32;
 
  console.log('Hasil konversi:', temperatureInFahrenheit);
}
 
const temperatureInCelsius = 90;
convertCelsiusToFahrenheit(temperatureInCelsius);

Parameter dan Argument

Walaupun dapat mengeksekusi sekumpulan kode, sebuah subprogram bisa saja membutuhkan data agar tugasnya terpenuhi. Tentu ini akan meningkatkan reusability darinya. Oleh karena itu, kita membutuhkan parameter dan argumen function.

Apa perbedaan antara parameter dan argumen? Parameter function berperan sebagai input data atau variabel yang mengantarkan nilai, sedangkan argumen adalah nilai yang diberi saat function dipanggil.

Parameter function dalam JavaScript juga bisa ditetapkan nilai default jika tidak ada nilai yang diberi saat dijalankan. Cukup ikuti karakter sama dengan “=” dan nilainya setelah nama parameter.

function convertCelsiusToFahrenheit(temperature = 50) {
  const temperatureInFahrenheit = 9 / 5 * temperature + 32;
 
  console.log('Hasil konversi:', temperatureInFahrenheit);
}

Return Value

Pada dasarnya, function akan mengembalikan undefined ketika dipanggil. Ini berlaku jika function tidak mengembalikan nilai apa pun setelah dieksekusi. Ada kalanya, kita akan membutuhkan agar function bisa mengembalikan suatu nilai. Ini dicapai dengan return keyword dan diikuti nilai kembaliannya.

function convertCelsiusToFahrenheit(temperature) {
  return (9 / 5) * temperature + 32;
}

Function Expression

Anda masih ingat perbedaan antara statement dan expression, bukan? Cara deklarasi function yang kita pelajari sebelumnya adalah cara statement. Namun, ada juga versi expression-nya, lo. Ini dinamakan dengan function expression.

Perbedaannya hanya pada penentuan identifier. Tidak ada penentuan setelah function keyword. Sebagai gantinya, nilai function bisa disimpan dalam variabel dan nama variabel menjadi identifier-nya.

const convertCelsiusToFahrenheit = function (temperature) {
  return (9 / 5) * temperature + 32;
};

Salah satu keuntungan dari function expression adalah dapat disebut sebagai first-class citizen. Tidak hanya disimpan dalam variabel, function dapat dijadikan sebagai argumen dan bahkan dijadikan sebagai return value dari suatu function.

// Dijadikan sebagai argumen dari parameter 'operation'
function calculate(operation, numA, numB) {
  return operation(numA, numB);
}
 
// Dijadikan sebagai return value
function multiplier(x) {
  return function (num) {
    return x * num;
  };
}

Arrow Function

Ada gaya lain dalam membuat function dalam JavaScript, yaitu arrow function. Arrow function hanya tersedia dengan cara expression. Perbedaannya ada pada function keyword yang hilang dan penambahan notasi fat arrow sebelum body function.

Sintaks di atas mungkin sudah cukup singkat bagi kita, tetapi belum singkat lagi menurut JavaScript. Ternyata arrow function dapat dicapai tanpa kurung kurawal alias seakan-akan tidak memiliki body function.

// Arrow function
const convertCelsiusToFahrenheit = (temperature) => {
  return (9 / 5) * temperature + 32;
};
 
// Arrow function versi ringkas
const convertCelsiusToFahrenheitInConciseSyntax =
  (temperature) => (9 / 5) * temperature + 32;

Bersambung ke

: KUIS FUNCTION

Search This Blog

JavaScript Koding