Belajar Function JavaScript: Memahami Fungsi dan Jenisnya
Saat membuat aplikasi biasanya kita akan menemukan beberapa statement atau ekspresi yang sama yang dibuat secara berulang, jika ini dilakukan bisa jadi merepotkan, oleh karena itu function di JavaScript hadir.
Tidak hanya JavaScript, sebagian besar bahasa pemrograman juga memiliki fungsi, secara umum perilakunya sama, hanya cara penulisannya yang berbeda.
Mari kita gunakan studi kasus, untuk mengetahui kapan dan mengapa kita perlu menggunakan fungsi.
// dibagian lain kode kita
const sapaReza = 'Hi, Reza. Semoga harimu menyenangkan.';
// dibagian lain kode kita
const sapaUcup = 'Hi, Ucup. Semoga harimu menyenangkan';
// dibagian lain kode kita
const sapaBambang = 'Hi, Bambang. Semoga harimu menyenangkan';
Perhatikan kode di atas, kita menggunakan string yang sama secara berulang-ulang yang berubah hanya nama (Reza, Ucup, Bambang).
Bayangkan jika string atau variabel tersebut berada dibagian lain kode kita, apalagi beda file.
Jika kita ingin mengubah tulisan Hi menjadi Hello apa yang kita lakukan? tentu kita harus mengubah satu per satu bukan? ini baru tiga bagaimana jika lebih, merepotkan!.
Mari kita gunakan fungsi untuk mengatasi masalah tersebut.
const sapa = (nama) => 'Hi, ' + nama + '. semoga harimu menyenangkan.';
const sapaReza = sapa('Reza'); // Hi, Reza. Semoga harimu menyenangkan.
const sapaUcup = sapa('Ucup'); // Hi, Ucup. Semoga harimu menyenangkan.
const sapaBambang = sapa('Bambang'); // Hi, Bambang. Semoga harimu menyenangkan.
Kode di atas sama dengan yang sebelumnya. Dengan menggunakan fungsi, kode tidak hanya menjadi ringkas, namun juga lebih mudah dikelola.
Jika kita ingin mengubah tulisan Hi menjadi Hello kita hanya perlu mengubah string yang ada di dalam fungsi.
Nilai variabel yang diinisialisasi dengan fungsi tersebut akan secara otomatis berubah.
Untuk nilai dinamis atau berubah-ubah seperti nama, bisa dijadikan sebagai parameter, ini akan berubah secara otomatis tergantung dengan nilai atau argumen yang kita masukkan saat saat fungsi dipanggil.
Mari kita pelajari lebih lanjut...
- Apa Itu Function
- Jenis-jenis Function
- Function Mengembalikan Nilai
- Function Scope
- Memanggil Function
- Function Parameter dan Argumen
Apa Itu Function?
Function atau fungsi adalah "subprogram" yang dapat dipanggil di bagian lain kode kita atau di dalam fungsi itu sendiri (rekursi). Fungsi dapat memiliki serangkaian pernyataan atau statement di badan atau blok fungsi.
Di JavaScript, fungsi dapat menerima dan selalu mengembalikan nilai. Jika kita membuat fungsi yang tidak mengembalikan, fungsi akan tetap mengembalikan nilai undefined.
Jangan bingung antara fungsi dan method, fungsi biasanya disebut method jika menjadi properti objek.
Materi mengenai fungsi sebetulnya cukup banyak dan kompleks, namun di sini kita akan mempelajari dasar-dasarnya saja.
Jenis-jenis Function
Ada banyak jenis fungsi yang bisa kita gunakan di JavaScript, kali ini kita akan mempelajari fungsi dasar dan paling sering digunakan.
Kita akan mempelajari function declaration, function expression, dan arrow function atau fungsi panah, masing-masing memiliki perilaku berbeda.
Function Declaration
Function Declaration dibuat menggunakan kata kunci function diikuti dengan nama fungsi (wajib), lalu parameter di dalam sepasang kurung lengkung (parameter1, parameter2, ..., parameterN), diakhiri dengan kurung kurawal {...} untuk membatasi badan fungsi.
Sintaks:
function name(param) {
statements;
}
Keterangan:
- name: nama fungsi.
- param (opsional): parameter atau nama untuk nilai argumen yang diteruskan ke fungsi, batas parameter bergantung pada mesin, jika parameter lebih dari satu dipisahkan dengan koma.
- statements (opsional): statement atau pernyataan termasuk ekspresi, logika, perulangan dan sebagainya.
Contoh:
function apakahGenap(num) {
return num % 2 === 0;
}
apakahGenap(1); // false
apakahGenap(2); // true
function apakahGenap(num) { ... } adalah Function Declaration, kita mendeklarasikan fungsi bernama apakahGenap untuk menentukan apakah suatu bilangan genap.
Function Declaration di-hoisting atau diangkat, itu berarti kita bisa memanggil fungsi sebelum deklarasi.
hello();
function hello() {
console.log('hello world');
}
Perbedaan antara Function Declaration dengan fungsi yang lainnya, Function Declaration selalu diawali dengan kata kunci function, memiliki nama tepat setelah kata kunci, tidak ada deklarasi variabel di belakangnya, dan diangkat (hoisting).
Function Expression
Mirip seperti Function Declaration, Function Expression dibuat menggunakan kata kunci function, diikuti dengan nama fungsi (opsional), lalu parameter di dalam kurung lengkung (param1, param2, ..., paramN), diakhiri dengan kurung kurawan { ... } sebagai pembatas badan fungsi.
Sintaks:
function name(param) {
statements;
}
Keterangan:
- name (opsional): nama fungsi, biasanya dibuat tanpa nama.
- param (opsional): parameter atau nama untuk nilai argumen yang diteruskan ke fungsi, batas parameter bergantung pada mesin, jika parameter lebih dari satu dipisahkan dengan koma.
- statements (opsional): statement atau pernyataan termasuk ekspresi, logika, perulangan dan sebagainya.
Named Function Expression
Named Function Expression adalah Function Expression yang memiliki nama.
Nama variabel akan selalu digunakan sebagai nama fungsi, oleh karena itu nama tepat setelah kata kunci function biasanya tidak ditulis.
Contoh:
const apakahGenap = function (num) {
return num % 2 === 0;
};
apakahGenap(1); // false
apakahGenap(2); // true
Anonymous Function Expression
Anonymous Function Expression adalah Function Expression tanpa nama, biasanya digunakan sebagai callback, tidak diinisialisasi ke variabel.
Contoh di bawah ini kita mengulang elemen array menggunakan method forEach.
Method forEach membutuhkan parameter fungsi atau callback yang menerima parameter elemen, index, dan array. Kita bisa memasukkan Anonymous Function Expression sebagai callback.
const arr = [1, 2, 3, 4, 5];
arr.forEach(function (elemen, index, arr) {
console.log('elemen = ' + elemen + ' index = ' + index);
});
/* output:
elemen = 1 index = 0
elemen = 2 index = 1
elemen = 3 index = 2
elemen = 4 index = 3
elemen = 5 index = 4
*/
Kode di atas sama seperti di bawah jika menggunakan Named Function Expression.
const arr = [1, 2, 3, 4, 5];
const logElementAndIndex = function (elemen, index, arr) {
console.log('elemen = ' + elemen + ' index = ' + index);
};
arr.forEach(logElementAndIndex);
/* output:
elemen = 1 index = 0
elemen = 2 index = 1
elemen = 3 index = 2
elemen = 4 index = 3
elemen = 5 index = 4
*/
Immediately Invoked Function Expression (IIFE)
Sesuai dengan namanya, Immediately Invoked Function Expression adalah Function Expression yang langsung dipanggil.
Untuk membuat IIFE kita bisa menggunakan dua pasang kurung buka dan tutup berdampingan (function)(param).
Kurung pertama tempat untuk mendeklarasikan Anonymous Function Expression.
Kurung kedua digunakan untuk memanggil fungsi tersebut, jika fungsi memiliki parameter kita bisa meneruskan nilai atau argumen ke dalam kurung kedua.
Contoh IIFE tanpa parameter:
(function () {
console.log('hello world');
})();
// Output: hello world
Contoh IIFE dengan parameter:
(function (nama) {
console.log('hello ' + nama);
})('reza');
// Output: hello reza
Arrow Function
Arrow Function atau fungsi panah mirip seperti Function Expression, namun tidak memerlukan kata kunci function, yang diperlukan adalah tanda panah diantara kurung lengkung dan kurung kurawal.
Fungsi panah diawali dengan sepasang kurung lengkung parameter (param1, param2, ..., paramN), diikuti oleh tanda sama dengan lebih besar atau tanda panah (=>), lalu diakhiri dengan kurung kurawal { ... } sebagai batas badan fungsi.
Sintaks:
(param) => {
statements;
};
Keterangan:
- param (opsional): parameter fungsi, jika lebih dari satu dipisahkan dengan koma, jika hanya ada satu parameter kurung lengkung dapat dihilangkan.
- statements (opsional): statement atau pernyataan termasuk ekspresi, logika, perulangan dan sebagainya.
Named Arrow Function
Named Arrow Function adalah fungsi panah bernama, biasanya diinisialisasi ke dalam variabel, nama variabel tersebut digunakan sebagai nama fungsi.
Contoh:
const apakahGenap = (num) => {
return num % 2 === 0;
};
apakahGenap(1); // false
apakahGenap(2); // true
Karena fungsi di atas hanya menerima satu parameter, kita bisa menghilangkan tanda kurung.
const apakahGenap = (num) => {
return num % 2 === 0;
};
apakahGenap(1); // false
apakahGenap(2); // true
Karena fungsi di atas hanya memiliki satu ekspresi dan mengembalikan niali yang dihasilkan ekspresi tersebut, kita bisa mengubahnya menjadi satu baris dengan menghapus kata kunci return dan kurung kurawal {}.
const apakahGenap = (num) => num % 2 === 0;
apakahGenap(1); // false
apakahGenap(2); // true
Ketiga contoh Named Arrow Function di atas memiliki perilaku yang sama meskipun ditulis dengan cara yang berbeda.
Anonymous Arrow Function
Anonymous Arrow Function adalah fungsi panah tanpa nama, biasanya digunakan sebagai callback.
Mari kita gunakan contoh yang sama dengan Anonymous Function Expression, tapi kita ubah callback-nya dengan Anonymous Arrow Function.
const arr = [1, 2, 3, 4, 5];
arr.forEach((elemen, index, arr) => {
console.log('elemen = ' + elemen + ' index = ' + index);
});
/* output:
elemen = 1 index = 0
elemen = 2 index = 1
elemen = 3 index = 2
elemen = 4 index = 3
elemen = 5 index = 4
*/
Kode di atas sama seperti di bawah ini jika menggunakan Named Arrow Function:
const arr = [1, 2, 3, 4, 5];
const logElementAndIndex = (elemen, index, arr) => {
console.log('elemen = ' + elemen + ' index = ' + index);
};
arr.forEach(logElementAndIndex);
/* output:
elemen = 1 index = 0
elemen = 2 index = 1
elemen = 3 index = 2
elemen = 4 index = 3
elemen = 5 index = 4
*/
Immediately Invoked Arrow Function (IIAF)
Immediately Invoked Arrow Function (IIAF) adalah fungsi panah yang akan langsung dipanggil seperti IIFE.
Contoh tanpa parameter:
(() => {
console.log('hello world');
})();
Contoh dengan parameter:
((nama) => {
console.log('hello ' + nama);
})('renova');
Function Mengembalikan Nilai
Di JavaScript, sebuah fungsi akan selalu mengembalikan nilai, jika fungsi yang dibuat tidak mengembalikan nilai, maka nilai yang dikembalikan adalah undefined.
Jika kita ingin membuat fungsi yang mengembalikan nilai tertentu, kita harus menggunakan kata kunci return diikuti oleh nilai yang ingin kembalikan, kecuali fungsi panah sebaris.
Mari kita lihat perbedaannya.
Contoh fungsi yang mengembalikan nilai:
Karena num % 2 === 0 adalah ekspresi atau menghasilkan nilai kita bisa langsung me-return ekspresi tersebut.
function apakahGenap(num) {
return num % 2 === 0;
}
const hasil = apakahGenap(2);
console.log(hasil); // true
Contoh fungsi yang tidak mengembalikan nilai:
Perhatikan bahwa tidak ada kata kunci return di dalam fungsi (tidak ada nilai yang dikembalikan), tapi fungsi ini tetap mengembalikan nilai default, undefined.
function apakahGenap(num) {
const hitung = num % 2 === 0;
}
const hasil = apakahGenap();
console.log(hasil); // undefined
Function Scope
Di JavaScript setiap fungsi membuat lingkup baru, ini ada kaitannya dengan istilah closure, namun tidak akan dibahas detail di sini.
Untuk memudahkan pemahaman, mari kita langsung gunakan studi kasus.
Lihat kode dibawah, kita mendeklarasikan variabel bernama nama di dalam fungsi sapa, kita menggunakan variabel tersebut di luar fungsi.
Coba tebak, apakah kita bisa melakukannya?
function sapa() {
const nama = 'reza'; // function scope
}
console.log(nama);
Jawabannya tidak. Kode di atas mengembalikan kesalah Uncaught ReferenceError: nama is not defined.
Bagaimana jika variabel yang dideklarasikan di luar fungsi digunakan di dalam fungsi?
let nama = 'reza';
function sapa() {
console.log(nama); // reza
}
sapa();
Nah ini bisa.
Jadi kesimpulannya, variabel yang dideklarasikan di dalam fungsi atau function scope tidak dapat diakses di luar fungsi, sedangkan variabel yang dideklarasikan di luar fungsi dapat diakses di dalam fungsi.
Seperti kaca mobil, dia bisa melihat keluar tapi yang diluar tidak bisa melihat ke dalam.
Apa pun kata kunci variabel dan jenis fungsi yang digunakan, soal function scope mereka memiliki perilaku yang sama.
Memanggil Function
Sebuah fungsi tidak akan dijalankan selama kita tidak memanggilnya.
Saat membuat fungsi itu artinya kita baru mendeklarasikan fungsi tersebut belum digunakan atau dipanggil, apa pun jenis fungsi yang dideklarasikan, kecuali Anonymous Function, IIFE, dan IIFA.
Untuk memanggil fungsi kita bisa menulis nama fungsi yang ingin dipanggil diikuti dengan kurung lengkung. Jika fungsi memiliki parameter kita bisa meneruskan nilai atau argumen, namaFungsi(arg).
Contoh kode di bawah tidak akan menjalankan fungsi karena kita baru mendeklarasikan atau membuat.
Statement di dalam fungsi tidak akan dieksekusi, sehingga tidak akan mempengaruhi atau menghasilkan nilai apa pun, namun ini akan disimpan di memori.
function adalahGenap(num) {
return num % 2 === 0;
}
Contoh memanggil fungsi.
function adalahGenap(num) {
return num % 2 === 0;
}
const hasil = adalahGenap(2); // memanggil fungsi
Jika fungsi dipanggilan tanpa kurung lengkup () hanya nama, statement di dalam badan fungsi tidak akan dieksekusi, nilai yang dikembalikan adalah kode fungsi.
function adalahGenap(num) {
return num % 2 === 0;
}
const hasil = adalahGenap; // memanggil fungsi tanpa ()
console.log(hasil);
/*
adalahGenap(num) {
return num % 2 === 0;
}
*/
Function Parameter dan Argumen
Parameter adalah nama variabel atau nama alias argumen atau nilai yang diteruskan ke badan fungsi. Parameter ditulis di dalam kurung lengkung fungsi.
Sedangkan argumen adalah nilai yang diteruskan saat fungsi dipanggil.
Parameter akan diinisialisasi dengan nilai argumen yang diteruskan. Kita bisa meneruskan nilai tipe data apa pun, entah itu primitif, non-primitif, hingga fungsi.
Perhatikan kode di bawah, karena kita meneruskan nilai 2 saat memanggil fungsi, maka nilai parameter num saat fungsi dipanggil dengan nilai tersebut adalah 2.
function adalahGenap(num) {
// num adalah parameter
return num % 2 === 0;
}
adalahGenap(2); // 2 adalah argumen
Urutan Parameter dan Argumen
Urutan argumen harus sesuai dengan parameter fungsi.
Jika kita ingin menginisialisasi parameter pertama, kita harus memasukkan nilai tersebut sebagai argumen pertama, begitu pula dengan parameter berikutnya.
Contoh ini sesuai dengan yang kita harapkan, karena kita memasukkan nilai nama reza ke argumen pertama dan masa hari siang ke argumen kedua.
Argumen sesuai dengan urutan parameter, sehingga menampilkan pesan sesuai harapan.
function sapa(nama, masaHari) {
const pesan = 'Hi, ' + nama + '. Selamat ' + masaHari + '.';
console.log(pesan); // Hi, reza. Selamat siang.
}
sapa('reza', 'siang');
Lihat kode di bawah, ini menghasilkan pesan yang salah karena argumen pertama siang akan diinsialisasi ke parameter pertama nama, sedangkan reza diinisialisasi ke parameter kedua masaHari.
function sapa(nama, masaHari) {
const pesan = 'Hi, ' + nama + '. Selamat ' + masaHari + '.';
console.log(pesan); // Hi, siang. Selamat reza.
}
sapa('siang', 'reza');
Nilai Default Parameter
Di JavaScript, nilai default parameter fungsi adalah undefined.
Jika kita tidak meneruskan argumen atau nilai saat pemanggilan fungsi, maka parameter fungsi akan diinisialisasi dengan nilai undefined.
Contoh, fungsi hi di bawah memiliki satu parameter nama, namun saat dipanggil tidak ada nilai atau argumen yang diteruskan. Maka nama akan diinisialisasi dengan nilai undefined.
function hi(nama) {
const pesan = 'Hi, ' + nama;
console.log(pesan); // Hi, undefined
}
hi(); // tanpa argumen
Bagaimana jika kita ingin menentukan nilai default parameter sendiri?
Jadi, jika fungsi dipanggil tanpa argumen atau nilai maka nilai yang kita tentukan yang digunakan, bukan undefined.
Parameter dapat diinisialisasi secara langsung di dalam kurung lengkung menggunakan nilai yang kita tentukan.
Mari kita gunakan contoh kode yang sama seperti di atas, sekarang nama akan selalu memiliki nilai yang ditentukan (bro) jika fungsi dipanggil tanpa nilai atau argumen.
function hi(nama = 'bro') {
const pesan = 'Hi, ' + nama;
console.log(pesan); // Hi, bro
}
hi(); // tanpa argumen