Fungsi JavaScript ditentukan dengan kata kunci function.
Anda dapat menggunakan deklarasi fungsi atau ekspresi fungsi.
Section Artikel
Deklarasi Fungsi
Di awal tutorial ini, Anda telah mempelajari bahwa fungsi dideklarasikan dengan sintaks berikut:
| function functionName(parameters) { // code to be executed } |
Fungsi yang dideklarasikan tidak langsung dijalankan. Fungsi akan”disimpan untuk digunakan nanti”, dan akan dijalankan nanti, ketika dipanggil (dipanggil).
Contoh:
<!DOCTYPE html> <html> <body> <h2>JavaScript Function</h2> <p> Contoh ini memanggil fungsi yang melakukan kalkulasi dan mengembalikan hasilnya: </p> <p id="demo"></p> <script> var x = myFunction(4, 3); document.getElementById("demo").innerHTML = x; function myFunction(a, b) { return a * b; } </script> </body> </html>
Titik koma digunakan untuk memisahkan pernyataan JavaScript yang dapat dieksekusi.
Karena deklarasi fungsi bukanlah pernyataan yang dapat dieksekusi, tidak umum untuk mengakhirinya dengan titik koma.
Ekspresi Fungsi
Fungsi JavaScript juga dapat ditentukan menggunakan ekspresi.
Ekspresi fungsi dapat disimpan dalam variabel.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p> Suatu fungsi dapat disimpan dalam variabel: </p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Setelah ekspresi disimpan dalam variabel, variabel tersebut dapat digunakan sebagai fungsi.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p>Setelah ekspresi disimpan dalam variabel, variabel tersebut dapat digunakan sebagai fungsi.</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>
Fungsi di atas sebenarnya adalah fungsi anonim (fungsi tanpa nama).
Fungsi yang disimpan dalam variabel tidak membutuhkan nama fungsi. Mereka selalu dipanggil menggunakan nama variabel.
Fungsi di atas diakhiri dengan titik koma karena merupakan bagian dari pernyataan yang dapat dieksekusi.
Konstruktor Function()
Seperti yang dapat dilihat pada contoh sebelumnya, fungsi JavaScript ditentukan dengan kata kunci function.
Fungsi juga dapat didefinisikan dengan konstruktor fungsi JavaScript bawaan yang disebut Function().
Contoh:
<!DOCTYPE html> <html> <body> <p> JavaScript memiliki konstruktor fungsi bawaan. </p> <p id="demo"></p> <script> var myFunction = new Function("a", "b", "return a * b"); document.getElementById("demo").innerHTML = myFunction(4, 3); </script> </body> </html>
Anda sebenarnya tidak harus menggunakan konstruktor fungsi.
Contoh diatas sama dengan penulisan kode berikut:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Sering kali, sebenarnya kita dapat menghindari penggunaan kata kunci new di JavaScript.
Function Hoisting
Di awal tutorial ini, Anda telah mempelajari tentang “hoisting” (JavaScript Hoisting).
Hoisting adalah perilaku default JavaScript untuk memindahkan deklarasi ke atas cakupan saat ini.
Hoisting berlaku untuk deklarasi variabel dan deklarasi fungsi.
Karena itu, fungsi JavaScript dapat dipanggil sebelum dideklarasikan.
Contoh:
myFunction(5);
function myFunction(y) {
return y * y;
}Fungsi yang ditentukan menggunakan ekspresi tidak akan diangkat.
Fungsi Memanggil Sendiri
Ekspresi fungsi dapat dibuat “memanggil sendiri”.
Ekspresi self-invoking dipanggil (dimulai) secara otomatis, tanpa dipanggil.
Ekspresi fungsi akan dijalankan secara otomatis jika ekspresi tersebut diikuti oleh ().
Kiya tidak dapat memanggil fungsi sendiri tanpa deklarasi fungsi.
Anda harus menambahkan tanda kurung di sekitar fungsi untuk menunjukkan bahwa itu adalah ekspresi fungsi.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p> Fungsi dapat dipanggil secara otomatis tanpa dipanggil: </p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! I called myself";
})();
</script>
</body>
</html>
Fungsi di atas sebenarnya adalah fungsi pemanggilan otomatis anonim (fungsi tanpa nama).
Fungsi Dapat Digunakan sebagai Nilai
Fungsi JavaScript dapat digunakan sebagai nilai.
Contoh:
<!DOCTYPE html> <html> <body> <p> Fungsi dapat diperlakukan sebagai nilai: </p> <p>x = myFunction(4,3) or x = 12</p> <p> Dalam kedua kasus, x menjadi angka dengan nilai 12. </p> <p id="demo"></p> <script> function myFunction(a, b) { return a * b; } var x = myFunction(4, 3); document.getElementById("demo").innerHTML = x; </script> </body> </html>
Fungsi JavaScript dapat digunakan dalam ekspresi:
<!DOCTYPE html>
<html>
<body>
<p>Fungsi JavaScript dapat digunakan dalam ekspresi.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Fungsi adalah Objek
Operator typeof di JavaScript mengembalikan “fungsi” untuk fungsi.
Namun, fungsi JavaScript paling baik dideskripsikan sebagai objek.
Fungsi JavaScript memiliki properti dan metode.
Properti arguments.length mengembalikan jumlah argumen yang diterima ketika fungsi tersebut dipanggil.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p> Properti arguments.length mengembalikan jumlah argumen yang diterima oleh fungsi: </p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Metode toString() mengembalikan fungsi sebagai string.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p>Metode toString() mengembalikan fungsi sebagai string.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>
Suatu fungsi yang didefinisikan sebagai properti suatu objek, disebut metode ke objek.
Fungsi yang dirancang untuk membuat objek baru, disebut konstruktor objek.
Fungsi Panah
Fungsi panah memungkinkan sintaks pendek untuk menulis ekspresi fungsi.
Anda tidak memerlukan kata kunci function, kata kunci return, dan tanda kurung kurawal.
Contoh:
<!DOCTYPE html> <html> <body> <h2> Fungsi Panah JavaScript </h2> <p> Dengan fungsi panah, Anda tidak perlu mengetikkan kata kunci fungsi, kata kunci return, dan tanda kurung kurawal. </p> <p> Fungsi panah tidak didukung di IE11 atau sebelumnya. </p> <p id="demo"></p> <script> const x = (x, y) => x * y; document.getElementById("demo").innerHTML = x(5, 5); </script> </body> </html>
Fungsi panah sendiri ini tidak ada. Mereka tidak cocok untuk mendefinisikan metode objek.
Fungsi panah tidak diangkat. Mereka harus ditentukan sebelum digunakan.
Menggunakan const lebih aman daripada menggunakan var, karena ekspresi fungsi selalu bernilai konstan.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2> Fungsi Panah JavaScript </h2>
<p> Fungsi panah tidak didukung di IE11 atau sebelumnya. </p>
<p id="demo"></p>
<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Fungsi panah tidak didukung di IE11 atau versi sebelumnya.
