Robert Whitney
Fungsi JavaScript – daftar isi:
Sampai sekarang, kita telah melihat aspek-aspek penting dari JavaScript bersama dengan beberapa praktik terbaik pengkodean yang paling umum yang harus kita ikuti. Praktik yang disebutkan ini ada untuk suatu alasan dan saat kita menggunakannya, mereka akan menghemat banyak kesalahan dan frustrasi yang sebaliknya akan kita hadapi. Salah satu praktik terbaik yang telah kita lihat adalah mengikuti prinsip DRY, yang pada dasarnya mengatakan: Jangan Ulangi Diri Sendiri. Salah satu cara kita menerapkan prinsip ini adalah dengan menggunakan loop dalam program kita, lebih spesifiknya “for loops” yang menghemat banyak waktu dan kode. Dalam tutorial ini, kita akan melihat blok bangunan utama lainnya dalam pemrograman, dan itu disebut “fungsi”.
Jenis fungsi JavaScript
Fungsi sangat umum dalam pemrograman, dan ini termasuk JavaScript juga. Faktanya, mereka begitu umum sehingga beberapa kerangka kerja JavaScript seperti React, dibangun dengan memanfaatkan fungsi JavaScript sebagai blok bangunan dasar untuk membuat antarmuka depan situs web. Dan mereka melakukan ini dengan alasan yang baik. Fungsi JavaScript memberikan fleksibilitas tinggi, sambil menyediakan kode yang sangat dapat diprediksi dan modular. Dan itu menghasilkan kode yang lebih jelas dengan lebih sedikit pengulangan dan jauh lebih sedikit kesalahan. Salah satu hal pertama yang harus Anda ketahui tentang fungsi adalah bahwa ada dua jenis utama fungsi. Mereka adalah “fungsi murni” dan “fungsi tidak murni”. Secara umum, kita ingin menggunakan fungsi murni di mana pun kita bisa, sebanyak mungkin. Fungsi murni memberikan banyak keuntungan yang membuatnya jauh lebih mudah untuk bekerja dibandingkan dengan fungsi tidak murni. Mari kita lihat fungsi JavaScript murni terlebih dahulu dan kemudian menyelami fungsi tidak murni juga.
Fungsi murni dalam JavaScript
Fungsi murni pada dasarnya adalah fungsi yang mengikuti aturan tertentu. Dan karena mereka mengikuti aturan tersebut, mereka sangat dapat diprediksi, lebih mudah untuk debug dalam sistem yang lebih besar, modular bersama dengan beberapa keuntungan lainnya.
Fungsi murni menerima beberapa input dan mengembalikan beberapa output. Itu tidak memodifikasi input secara langsung atau tidak berinteraksi dengan lingkungan dengan cara lain. Dengan kata lain, itu tidak mengirimkan peringatan kepada Anda, tidak memberikan pernyataan saat melakukan sesuatu yang lain, atau tidak berinteraksi dengan lingkungannya dengan cara lain.
Dengan cara ini, ketika Anda bekerja dengan fungsi murni, Anda tahu bahwa tidak peduli di mana Anda menjalankan kode Anda atau kapan Anda menjalankan kode Anda, selama Anda memberikan input yang sama, Anda akan mendapatkan output yang sama. Mari kita lihat itu dengan beberapa contoh.
// gandakan angka awal
function double(num){
return num * 2;
}
// tripel angka awal
function triple(num){
return num * 3;
}
// tambahkan 100 ke angka awal
function add100(num){
return num + 100;
}
// tambahkan dua angka
function addTwoNums(num1, num2){
const sum = num1 + num2;
return sum;
}
// kalikan dua angka
function multiplyTwoNums(num1, num2){
const total = num1 * num2;
return total;
}
Semua fungsi JavaScript di atas adalah fungsi murni. Dengan melihat lebih dekat, Anda mungkin telah melihat pola yang kita gunakan saat membuat fungsi murni. Langkah pertama adalah kita menulis kata kunci “function” untuk memberi tahu JavaScript bahwa kita ingin mendefinisikan sebuah fungsi.
Selanjutnya, kita memberi nama fungsi, sebaiknya nama ini singkat, namun cukup deskriptif agar seseorang yang datang memahami apa yang dilakukan fungsi tersebut. Misalnya, jika kita menambahkan 100 ke sebuah angka, kita bisa memberi nama fungsi tersebut “add100”, jika kita menggandakan sebuah angka, kita bisa memberi nama fungsi tersebut “double” dan seterusnya.
Setelah kita memberi nama fungsi dengan tepat, langkah selanjutnya adalah memberikan beberapa input. Kita menyediakan input di dalam tanda kurung dan jika kita memiliki beberapa input, kita memisahkannya dengan koma. Sama seperti yang kita lakukan pada fungsi “multiplyTwoNums”. (Juga, sebagai catatan sampingan, angka biasanya disebut sebagai “nums” untuk singkatnya dalam pemrograman, jadi jika ketika kita memberi nama fungsi kita bisa menggunakan pengetahuan umum itu untuk memiliki nama fungsi yang singkat namun deskriptif.)
Input yang kita berikan kepada fungsi juga biasanya disebut sebagai “parameter”, ketika kita membuat fungsi JavaScript kita memutuskan berapa banyak parameter yang akan dimiliki fungsi tersebut. Ketika kita memutuskan untuk menggunakan fungsi tersebut, kita memberikan parameter tersebut dengan “nilai”. Nilai-nilai yang kita berikan saat menggunakan fungsi juga biasanya disebut sebagai “argumen”. Jadi ketika kita memberikan input untuk fungsi, proses ini juga disebut sebagai “memberikan argumen” kepada fungsi. Mari kita lihat beberapa contoh dari itu.
// pertama kita mendefinisikan fungsi yang mengambil sebuah angka
// dan mengalikannya dengan 10
function multiplyBy10(num1){
return num1 * 10;
}
// sekarang kita panggil fungsi tersebut // simpan hasilnya ke dalam sebuah konstanta // dan tampilkan hasilnya const bigNum = multiplyBy10(3); alert(bigNum); // num1 di sini adalah parameter. // kita memberikan nilai 3 sebagai argumen untuk fungsi. // kita menyimpan hasil dari fungsi // ke dalam konstanta yang disebut bigNum. // kita menampilkan konstanta yang disebut bigNum kepada pengguna.
Seperti yang Anda lihat di kode di atas, bahkan ketika kita ingin menampilkan sesuatu kepada pengguna, kita menjaga fungsi terpisah dari fungsi alert. Jika kita menampilkan hasil kepada pengguna di dalam fungsi, ini akan mengharuskan fungsi untuk berinteraksi dengan bagian lain dari komputer dan akan membuat fungsi kita tidak murni. Jadi secara umum, kita ingin menggunakan fungsi untuk memberikan input dan mengharapkan nilai yang dikembalikan. Ketika kita mendapatkan nilai yang dikembalikan itu, maka kita dapat benar-benar menampilkannya atau melakukan fungsi JavaScript lainnya dengan itu tergantung pada kebutuhan kita, tetapi intinya adalah menjaga kepentingan menampilkan hasil dan menghitung hasil secara terpisah.
Jadi sampai sekarang kita telah melihat bahwa kita dapat menggunakan kata kunci “function” untuk mulai mendeklarasikan fungsi, kemudian kita memberi nama fungsi dengan tepat, kemudian kita membuka dan menutup tanda kurung dan memberi tahu fungsi parameter yang akan dibutuhkannya, kemudian kita membuka kurung kurawal dan memberi tahu fungsi apa yang ingin kita lakukan, setelah kita sampai pada hasil kita mengembalikan hasil itu dengan kata kunci “return”. Dan kemudian kita menutup kurung kurawal. Semua langkah ini diperlukan untuk mendefinisikan fungsi murni. Sekarang kita memiliki fungsi, kita dapat menggunakan fungsi di bagian lain dari program kita. Menggunakan fungsi biasanya disebut sebagai “memanggil fungsi”.
Memanggil fungsi jauh lebih sederhana daripada mendeklarasikan fungsi. Untuk memanggil fungsi kita dapat menggunakan namanya, membuka tanda kurung, memberikan beberapa argumen, dan menutup tanda kurung. Ketika kita melakukan ini, fungsi akan mengembalikan nilai yang kita definisikan. Tergantung pada apa yang ingin kita lakukan dengan nilai yang dikembalikan itu, kita dapat menetapkannya ke variabel atau konstanta, kita bahkan dapat melakukan lebih banyak perhitungan dengan itu, kita dapat mengirimnya ke komputer lain, atau kita dapat langsung menampilkan hasilnya juga. Mari kita lihat beberapa contoh dari itu.
// mari kita mulai dengan fungsi yang mengambil dua argumen
// mengalikannya dan mengembalikan hasilnya.
// kita bisa langsung mengembalikan hasilnya,
// atau kita bisa sementara membuat sebuah konstanta
// dan mengembalikan konstanta itu juga.
function multiplyTwoNums(num1, num2) {
const total = num1 * num2;
return total;
}
function multiplyTwoNumsSecondVersion(num1, num2){
return num1 * num2;
// dua fungsi di atas akan memberikan hasil yang sama persis
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// kita bisa memeriksa kesetaraan hasil fungsi
// dengan fungsi lain
function checkEquality(number1, number2){
return number1 === number2;
// jika hasil dari kedua fungsi sama,
// fungsi checkEquality akan mengembalikan "true"
// sebagai tipe data boolean
const isEqual = checkEquality(result1, result2);
// sekarang kita bisa menggunakan nilai boolean itu untuk menampilkan pesan
if (isEqual){
alert("Keduanya memberikan hasil yang sama!");
} else {
alert("Mereka bukan hal yang sama!");
}
Menjalankan kode di atas di Chrome Snippets akan memberikan kita hasil berikut:
Sampai sekarang kita telah bekerja dengan fungsi murni, dan ini biasanya adalah apa yang kita tuju untuk dikodekan sebagian besar waktu. Tetapi itu tidak berarti bahwa Anda hanya akan bekerja dengan fungsi murni. Setelah Anda memahami fungsi murni, fungsi tidak murni relatif lebih mudah. Ketika kita mendefinisikan fungsi, atau mendeklarasikan fungsi, setelah menggunakan nama fungsi, kita sebenarnya tidak perlu memberikan parameter apa pun. Dalam hal ini, kita akan membiarkan tanda kurung kosong, kita juga tidak perlu mengembalikan sesuatu dari fungsi.
Lebih jauh lagi, karena kita dapat menulis kode apa pun di dalam kurung kurawal fungsi, kita dapat berinteraksi dengan dunia luar, mengirim dan menerima data, memodifikasi data yang ada, menampilkan peringatan, dan sebagainya. Melakukan semua ini tidak dilarang, dan menambahkan pernyataan console.log selama proses pengembangan kode bisa sangat membantu. Itulah sebabnya kita tidak langsung menjauh dari fungsi tidak murni, tetapi karena mereka dapat menyebabkan banyak gesekan dan kesalahan dalam kode, termasuk membuat kode Anda lebih sulit untuk diuji, kita akan berusaha memisahkan tugas menjadi fungsi JavaScript murni sebanyak mungkin. Bahkan ketika kita menggunakan untuk membuat fungsi kita tidak murni dengan menambahkan pernyataan alert atau console.log, kita biasanya ingin menghapusnya dari kode kita baik dengan menghapusnya atau mengomentarinya.
Mari kita lihat beberapa contoh dari itu.
// sapa pengguna dengan fungsi tidak murni
// tidak mengambil argumen dan tidak memberikan pengembalian
// juga berinteraksi dengan dunia luar dengan
// menampilkan peringatan
function greet(){
alert("Halo Pengguna!");
}
// catat bahwa hasilnya tidak akan ditampilkan
// kecuali kita memanggil fungsi
greet();
// lakukan beberapa perhitungan dan log ke konsol
function squareNum(num1){
const result = num1 * num1;
console.log(result);
}
// ini akan menampilkan hasil di konsol JavaScript yang kita miliki di bawah
// Konsol yang baru saja kita gunakan sangat digunakan dalam pemrograman
// termasuk dalam JavaScript.
// pernyataan console.log bisa sangat membantu
// dalam memberi tahu Anda apa yang terjadi di dalam program Anda
// dengan cara ini jika sesuatu yang tidak terduga terjadi
// Anda dapat melihat dengan tepat di mana dan kapan itu terjadi
squareNum(7);
function multiplyTwoNums(num1, num2){
console.log("Angka pertama adalah " + num1);
console.log("Angka kedua adalah " + num2);
const result = num1 * num2;
console.log("Hasil perkalian adalah " + result);
}
// mari kita panggil fungsi di atas dengan dua angka yang kita pilih // dan periksa konsol JavaScript kita untuk log konsol multiplyTwoNums(5, 7);
Menjalankan kode di atas akan menghasilkan:
Seperti yang Anda lihat dari output, kita memiliki pernyataan alert yang ditampilkan dari dalam fungsi pertama yang kita jalankan. Kita memiliki angka hasil 49 yang dicatat di konsol JavaScript. Tepat setelah itu, kita memiliki output yang lebih rinci di konsol tentang fungsi ketiga. Membuat pernyataan console.log cukup umum dalam pemrograman, tergantung pada bahasa pemrograman yang Anda gunakan, nama yang tepat mungkin berubah, tetapi idenya tetap sama. Dengan pernyataan console.log, kita dapat melihat ke dalam program kita dan memahami kode kita dengan lebih baik. Ini adalah alat yang sangat berguna ketika sesuatu yang salah dalam program Anda dan Anda mencoba mencari tahu di mana tepatnya Anda membuat kesalahan.
Dalam tutorial berikutnya kita akan melihat topik penting lainnya dalam JavaScript yang disebut objek. Sebelum melanjutkan ke tutorial berikutnya, adalah ide yang baik untuk meninjau bagian ini sekali lagi agar konsepnya dapat dipahami. Saya juga sangat merekomendasikan untuk mengetik contoh-contoh yang kita kerjakan dan mengalaminya secara langsung. Ketika Anda siap, kita akan melanjutkan dengan objek dalam JavaScript di tutorial berikutnya.
Robert Whitney
Ahli JavaScript dan instruktur yang melatih departemen TI. Tujuan utamanya adalah untuk meningkatkan produktivitas tim dengan mengajarkan orang lain bagaimana berkolaborasi secara efektif saat melakukan pengkodean.
