JavaScript Definisikan & Panggil Fungsi dengan Contoh

Oleh: James Hartman James Hartman
Hours Updated

⚡ Ringkasan Cerdas

JavaFungsi skrip mengelompokkan blok kode yang dapat digunakan kembali dan hanya berjalan saat dipanggil. Panduan ini menunjukkan cara mendeklarasikan fungsi skrip, memberikan argumen ke dalamnya, dan mengembalikan nilai ke pemanggil.

  • 🔘 sintaks: Kata kunci `function`, sebuah nama, tanda kurung, dan tanda kurung kurawal mendefinisikan setiap fungsi klasik.
  • ☑️ Panggilan: Code Kode di dalam sebuah fungsi hanya akan dieksekusi ketika nama fungsi tersebut dipanggil dengan tanda kurung.
  • ✅ Argumen: Nilai yang ditempatkan di dalam tanda kurung meneruskan data dari pemanggil ke dalam isi fungsi.
  • 🧪 Kembali: Kata kunci return mengirimkan nilai kembali ke pemanggil dan menghentikan eksekusi pada titik tersebut.
  • ️ Varian: Deklarasi, ekspresi, fungsi panah, IIFE, dan callback masing-masing cocok untuk situasi yang berbeda.
  • 📊 Cakupan: Deklarasi fungsi diangkat (hoisted), sedangkan ekspresi fungsi dan fungsi panah tidak.
Baca Selengkapnya

JavaSkrip Mendefinisikan dan Memanggil Fungsi

Apa Fungsi di dalamnya JavaNaskah?

Fungsi sangat penting dan berguna dalam bahasa pemrograman apa pun karena membuat kode dapat digunakan kembali. Fungsi adalah blok kode yang hanya akan dieksekusi jika dipanggil. Jika Anda memiliki beberapa baris kode yang perlu digunakan beberapa kali, Anda dapat membuat fungsi yang mencakup baris kode yang berulang dan kemudian memanggil fungsi tersebut di mana pun Anda inginkan.

Tidak ada bagian di dalam tanda kurung yang berjalan sendiri. Browser menyimpan blok kode tersebut dengan nama yang Anda berikan, dan kode hanya akan dieksekusi ketika nama tersebut ditulis dengan tanda kurung setelahnya, seperti myFunction()Oleh karena itu, fungsi berada di pusat setiap hal. JavaNaskah program, apakah skrip tersebut masih ada di dalam halaman atau di dalam file eksternal.

Cara Membuat Fungsi di JavaNaskah

  1. Gunakan kata kunci fungsi diikuti dengan nama fungsinya.
  2. Setelah nama fungsi, buka dan tutup kurung.
  3. Setelah kurung, buka dan tutup kurung kurawal.
  4. Di dalam kurung kurawal, tulis baris kode Anda.

sintaks:

function functionname()
{

  lines of code to be executed

}

Contoh di bawah ini mendefinisikan myFunction() lalu memanggilnya di baris berikutnya, sehingga pesan muncul segera setelah halaman dimuat. Cobalah sendiri:

<html>
<head>
	<title>Functions!!!</title>
	<script type="text/javascript">
      function myFunction()
      {
      	document.write("This is a simple function.<br />");
      }
		myFunction();
	</script>
</head>
<body>
</body>
</html>

Fungsi dengan Argumen

Anda juga dapat membuat fungsi dengan argumen. Argumen harus ditentukan di dalam tanda kurung.

sintaks:

function functionname(arg1, arg2)

{

  lines of code to be executed

}

Sini countVowels() Menerima nama apa pun yang diketik pengunjung ke dalam kolom input, mengulang setiap karakter, dan melaporkan berapa banyak huruf vokal yang terkandung dalam nama tersebut. Cobalah sendiri:

<html>
<head>
	<script type="text/javascript">
		var count = 0;
		function countVowels(name)
		{
			for (var i=0;i<name.length;i++)
			{
              if(name[i] == "a" || name[i] == "e" || name[i] == "i" || name[i] == "o" || name[i] == "u")
              count = count + 1;
			}
		document.write("Hello " + name + "!!! Your name has " + count + " vowels.");
		}
   	 	var myName = prompt("Please enter your name");
    	countVowels(myName);
	</script>
</head>
<body>
</body>
</html>

JavaNilai Pengembalian Skrip

Anda juga dapat membuat fungsi JS yang mengembalikan nilai. Di dalam fungsinya, Anda perlu menggunakan kata kunci kembali diikuti dengan nilai yang akan dikembalikan.

sintaks:

function functionname(arg1, arg2)

{

  lines of code to be executed

  return val1;

}

Pada contoh terakhir ini returnSum() Mengembalikan total ke baris yang memanggilnya, sehingga hasilnya dapat digabungkan menjadi sebuah kalimat alih-alih dicetak di dalam fungsi. Cobalah sendiri:

<html>
<head>
	<script type="text/javascript">
		function returnSum(first, second)
        {
          var sum = first + second;
          return sum;
        }
      var firstNo = 78;
      var secondNo = 22;
      document.write(firstNo + " + " + secondNo + " = " + returnSum(firstNo,secondNo));
	</script>
</head>
<body>
</body>
</html>

ARTIKEL TERKAIT

Jenis-jenis Fungsi dalam JavaNaskah

Ketiga contoh di atas semuanya menggunakan deklarasi fungsi klasik, namun modern. JavaScript menawarkan beberapa bentuk lain. Perbedaan utamanya terletak pada apakah mesin mengangkatnya atau tidak, dan bagaimana masing-masing memperlakukannya. this kata kunci.

Jenis fungsi Sintaks umum Saat digunakan
Deklarasi fungsi fungsi greet() { } Logika yang diberi nama dan dapat digunakan kembali; diangkat ke bagian atas cakupannya.
Ekspresi fungsi const greet = function () { }; Menyimpan fungsi dalam sebuah variabel; tidak di-hoisting.
Fungsi panah (ES6) const greet = () => { }; Fungsi callback singkat; mewarisi ini dari cakupan sekitarnya.
Fungsi anonim setTimeout(function () { }, 100); Logika sekali jalan langsung diteruskan ke fungsi lain.
IIFE (fungsi () { })(); Berjalan seketika dan menjaga variabelnya tetap privat.
Callback item.forEach(showItem); Sebuah fungsi yang diberikan kepada fungsi lain dan dipanggil kemudian.

Catatan mengenai contoh-contoh di atas: sampel historis yang digunakan var ke document.write(), dan keduanya masih berjalan di setiap browser. Praktik saat ini mendeklarasikan variabel dengan let or const dan mencetak output melalui console.log() atau dengan mengatur textContent pada suatu elemen, karena document.write() Menghapus halaman yang sudah selesai dimuat. type="text/javascript" Atribut ini juga opsional di HTML5.

Parameter Fungsi, Argumen, dan Nilai Default

Parameter adalah nama sementara yang tercantum dalam definisi, sedangkan argumen adalah nilai sebenarnya yang diberikan saat fungsi dipanggil. Dalam countVowels(name) atas, name adalah parameter dan teks yang diketikkan ke dalam prompt adalah argumen.

function greet(user, greeting = "Hello")
{
  return greeting + ", " + user;
}

greet("Ann");
greet("Ann", "Welcome");
  • Parameter tanpa argumen yang cocok menjadi undefined kecuali jika nilai default diberikan, karena greeting di sini.
  • Argumen tambahan diabaikan oleh daftar parameter tetapi tetap dapat diakses melalui arguments objek di dalam fungsi non-panah apa pun.
  • Parameter istirahat yang ditulis sebagai ...values mengumpulkan setiap argumen yang tersisa menjadi satu kesatuan yang tulus. susunan.

Lingkup Fungsi dan Pengangkatan dalam JavaNaskah

Lokasi penulisan suatu fungsi menentukan apa yang dapat dilihatnya dan kapan fungsi tersebut dapat dipanggil. Dua aturan menjelaskan hampir setiap kejutan yang dihadapi pemula.

  • Mengangkat: Deklarasi fungsi dipindahkan ke bagian atas cakupannya sebelum skrip dijalankan, sehingga dapat dipanggil pada baris di atas definisinya. Ekspresi fungsi dan fungsi panah tidak di-hoisting dan akan menimbulkan kesalahan jika dipanggil terlalu awal.
  • Cakupan: variabel yang dideklarasikan dengan var Di dalam suatu fungsi, informasi tersebut terlihat di seluruh fungsi tersebut, sedangkan let ke const Terbatas pada blok tempat mereka berada. Apa pun yang dideklarasikan di luar setiap fungsi bersifat global.

Penghitung vokal menunjukkan hal ini dalam praktiknya. count Variabel dideklarasikan di luar fungsi, sehingga pemanggilan countVowels() Jika diulang untuk kedua kalinya pada halaman yang sama, penambahan akan berlanjut ke total sebelumnya, bukan dimulai dari nol. Memindahkan deklarasi ke dalam fungsi akan meresetnya setiap kali dipanggil.

Sco iniping Aturan tersebut berlaku juga untuk kode sisi server, itulah sebabnya alasan yang sama berlaku ketika fungsi ditulis untuk Node.js, dan mengapa perilaku fungsi sering muncul di JavaNaskah pertanyaan wawancara.

Pertanyaan Umum Demo Slot

Fungsi tersebut masih berjalan, tetapi mengembalikan nilai undefined. Menugaskan panggilan tersebut ke sebuah variabel akan menyimpan undefinedOleh karena itu, contoh penjumlahan menggunakan return daripada mencetak total di dalam badan fungsi.

Asisten AI dapat menyarankan isi fungsi dari komentar, menjelaskan baris demi baris fungsi callback yang tidak dikenal, dan mengusulkan input pengujian. Selalu jalankan saran tersebut, karena kode yang dihasilkan dapat secara diam-diam mengasumsikan variabel atau API browser yang tidak disediakan oleh halaman tersebut.

Biasanya ya. Kopilot GitHub Melengkapi sintaks panah dan pola callback umum dari konteks. Periksa nilai dari this Hasilnya, karena fungsi panah mewarisinya sedangkan ekspresi fungsi klasik tidak.

Closure adalah fungsi yang digabungkan dengan variabel luar yang dirujuknya saat dibuat. Fungsi dalam terus membaca variabel-variabel tersebut bahkan setelah fungsi luar selesai, yang merupakan cara kerja penghitung privat dan fungsi pabrik.

Ya, dan itu disebut rekursi. Fungsi tersebut harus berisi kasus dasar yang menghentikan rantai, jika tidak, browser akan menampilkan kesalahan rentang setelah tumpukan panggilan habis. Rekursi cocok untuk penelusuran pohon dan masalah bergaya faktorial.

Fungsi async selalu mengembalikan promise. Di dalamnya, await menghentikan sementara fungsi tersebut hingga promise yang ditunggu selesai, memungkinkan kode asynchronous membaca dari atas ke bawah. Bagian halaman lainnya tetap merespons sementara fungsi tersebut menunggu.

Lampirkan dengan event listener: pilih tombol, lalu panggil addEventListener dengan nama event dan referensi fungsi. Atribut onclick inline yang lebih lama juga berfungsi, meskipun memisahkan markup dari perilaku sekarang lebih disukai.

Tanda kurung langsung memanggilnya dan menghasilkan hasilnya. Menulis namanya saja akan meneruskan fungsi itu sendiri, yang dibutuhkan oleh callback. Menambahkan tanda kurung secara tidak sengaja di dalam `setTimeout` akan menjalankan kode langsung, bukan nanti.

Ringkaslah postingan ini dengan: