14 KiB

Raw Blame History Unescape Escape

Dasar-Dasar JavaScript: Metode dan Fungsi

Sketchnote oleh Tomomi Imura

Kuis Sebelum Pelajaran

Menulis kode yang sama berulang kali adalah salah satu frustrasi paling umum dalam pemrograman. Fungsi menyelesaikan masalah ini dengan memungkinkan Anda mengemas kode ke dalam blok yang dapat digunakan kembali. Pikirkan fungsi seperti komponen standar yang membuat jalur perakitan Henry Ford menjadi revolusioner – setelah Anda membuat komponen yang andal, Anda dapat menggunakannya di mana saja tanpa harus membangunnya dari awal.

Fungsi memungkinkan Anda menggabungkan potongan kode sehingga Anda dapat menggunakannya kembali di seluruh program Anda. Alih-alih menyalin dan menempelkan logika yang sama di mana-mana, Anda dapat membuat fungsi sekali dan memanggilnya kapan pun diperlukan. Pendekatan ini menjaga kode Anda tetap terorganisir dan membuat pembaruan jauh lebih mudah.

Dalam pelajaran ini, Anda akan belajar cara membuat fungsi Anda sendiri, mengirimkan informasi ke dalamnya, dan mendapatkan hasil yang berguna kembali. Anda akan menemukan perbedaan antara fungsi dan metode, mempelajari pendekatan sintaks modern, dan melihat bagaimana fungsi dapat bekerja dengan fungsi lainnya. Kita akan membangun konsep-konsep ini langkah demi langkah.

🎥 Klik gambar di atas untuk video tentang metode dan fungsi.

Anda dapat mengikuti pelajaran ini di Microsoft Learn!

Fungsi

Fungsi adalah blok kode mandiri yang melakukan tugas tertentu. Fungsi mengenkapsulasi logika yang dapat Anda jalankan kapan pun diperlukan.

Alih-alih menulis kode yang sama beberapa kali di seluruh program Anda, Anda dapat mengemasnya dalam fungsi dan memanggil fungsi itu kapan pun Anda membutuhkannya. Pendekatan ini menjaga kode Anda tetap bersih dan membuat pembaruan jauh lebih mudah. Bayangkan tantangan pemeliharaan jika Anda perlu mengubah logika yang tersebar di 20 lokasi berbeda dalam kode Anda.

Memberi nama fungsi Anda secara deskriptif sangat penting. Fungsi yang diberi nama dengan baik mengkomunikasikan tujuannya dengan jelas – ketika Anda melihat cancelTimer(), Anda langsung memahami apa yang dilakukannya, seperti tombol yang diberi label dengan jelas memberi tahu Anda apa yang akan terjadi saat Anda mengkliknya.

Membuat dan Memanggil Fungsi

Mari kita lihat bagaimana cara membuat fungsi. Sintaksnya mengikuti pola yang konsisten:

function nameOfFunction() { // function definition
 // function definition/body
}

Mari kita uraikan:

Kata kunci function memberi tahu JavaScript "Hei, saya sedang membuat fungsi!"
nameOfFunction adalah tempat Anda memberikan nama deskriptif untuk fungsi Anda
Tanda kurung () adalah tempat Anda dapat menambahkan parameter (kita akan membahasnya segera)
Kurung kurawal {} berisi kode sebenarnya yang dijalankan saat Anda memanggil fungsi

Mari kita buat fungsi salam sederhana untuk melihat ini dalam aksi:

function displayGreeting() {
  console.log('Hello, world!');
}

Fungsi ini mencetak "Hello, world!" ke konsol. Setelah Anda mendefinisikannya, Anda dapat menggunakannya sebanyak yang diperlukan.

Untuk menjalankan (atau "memanggil") fungsi Anda, tulis namanya diikuti oleh tanda kurung. JavaScript memungkinkan Anda mendefinisikan fungsi Anda sebelum atau setelah Anda memanggilnya – mesin JavaScript akan menangani urutan eksekusi.

// calling our function
displayGreeting();

Saat Anda menjalankan baris ini, itu mengeksekusi semua kode di dalam fungsi displayGreeting Anda, menampilkan "Hello, world!" di konsol browser Anda. Anda dapat memanggil fungsi ini berulang kali.

Catatan: Anda telah menggunakan metode sepanjang pelajaran ini. console.log() adalah metode – pada dasarnya fungsi yang dimiliki oleh objek console. Perbedaan utama adalah bahwa metode terlampir pada objek, sedangkan fungsi berdiri sendiri. Banyak pengembang menggunakan istilah ini secara bergantian dalam percakapan santai.

Praktik Terbaik Fungsi

Berikut beberapa tips untuk membantu Anda menulis fungsi yang hebat:

Berikan nama fungsi Anda yang jelas dan deskriptif – diri Anda di masa depan akan berterima kasih!
Gunakan camelCasing untuk nama yang terdiri dari beberapa kata (seperti calculateTotal daripada calculate_total)
Jaga agar setiap fungsi fokus pada satu hal dengan baik

Mengirimkan Informasi ke Fungsi

Fungsi displayGreeting kita terbatas – hanya dapat menampilkan "Hello, world!" untuk semua orang. Parameter memungkinkan kita membuat fungsi lebih fleksibel dan berguna.

Parameter bertindak seperti placeholder di mana Anda dapat memasukkan nilai yang berbeda setiap kali Anda menggunakan fungsi. Dengan cara ini, fungsi yang sama dapat bekerja dengan informasi yang berbeda pada setiap pemanggilan.

Anda mencantumkan parameter di dalam tanda kurung saat Anda mendefinisikan fungsi Anda, memisahkan beberapa parameter dengan koma:

function name(param, param2, param3) {

}

Setiap parameter bertindak seperti placeholder – saat seseorang memanggil fungsi Anda, mereka akan memberikan nilai sebenarnya yang dimasukkan ke dalam tempat-tempat ini.

Mari kita perbarui fungsi salam kita untuk menerima nama seseorang:

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

Perhatikan bagaimana kita menggunakan backticks (`) dan ${} untuk memasukkan nama langsung ke dalam pesan kita – ini disebut template literal, dan ini adalah cara yang sangat praktis untuk membangun string dengan variabel yang dicampur.

Sekarang saat kita memanggil fungsi kita, kita dapat memasukkan nama apa pun:

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

JavaScript mengambil string 'Christopher', menetapkannya ke parameter name, dan membuat pesan yang dipersonalisasi "Hello, Christopher!"

Nilai Default

Bagaimana jika kita ingin membuat beberapa parameter bersifat opsional? Di sinilah nilai default berguna!

Misalnya kita ingin orang dapat menyesuaikan kata salam, tetapi jika mereka tidak menentukan satu, kita akan menggunakan "Hello" sebagai cadangan. Anda dapat mengatur nilai default dengan menggunakan tanda sama dengan, seperti mengatur variabel:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

Di sini, name masih diperlukan, tetapi salutation memiliki nilai cadangan 'Hello' jika tidak ada yang memberikan salam yang berbeda.

Sekarang kita dapat memanggil fungsi ini dengan dua cara berbeda:

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

Pada pemanggilan pertama, JavaScript menggunakan "Hello" default karena kita tidak menentukan salam. Pada pemanggilan kedua, ia menggunakan "Hi" kustom kita. Fleksibilitas ini membuat fungsi dapat beradaptasi dengan berbagai skenario.

Nilai Kembali

Fungsi kita sejauh ini hanya mencetak pesan ke konsol, tetapi bagaimana jika Anda ingin fungsi menghitung sesuatu dan memberikan hasilnya kembali kepada Anda?

Di sinilah nilai kembali masuk. Alih-alih hanya menampilkan sesuatu, fungsi dapat memberikan nilai yang dapat Anda simpan dalam variabel atau gunakan di bagian lain kode Anda.

Untuk mengirimkan nilai kembali, Anda menggunakan kata kunci return diikuti oleh apa pun yang ingin Anda kembalikan:

return myVariable;

Ini penting: saat fungsi mencapai pernyataan return, ia langsung berhenti berjalan dan mengirimkan nilai itu kembali kepada siapa pun yang memanggilnya.

Mari kita modifikasi fungsi salam kita untuk mengembalikan pesan daripada mencetaknya:

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

Sekarang alih-alih mencetak salam, fungsi ini membuat pesan dan memberikannya kembali kepada kita.

Untuk menggunakan nilai yang dikembalikan, kita dapat menyimpannya dalam variabel seperti nilai lainnya:

const greetingMessage = createGreetingMessage('Christopher');

Sekarang greetingMessage berisi "Hello, Christopher" dan kita dapat menggunakannya di mana saja dalam kode kita – untuk menampilkannya di halaman web, menyertakannya dalam email, atau meneruskannya ke fungsi lain.

Fungsi sebagai Parameter untuk Fungsi

Fungsi dapat diteruskan sebagai parameter ke fungsi lain. Meskipun konsep ini mungkin tampak rumit pada awalnya, ini adalah fitur yang kuat yang memungkinkan pola pemrograman yang fleksibel.

Pola ini sangat umum ketika Anda ingin mengatakan "ketika sesuatu terjadi, lakukan hal lain." Misalnya, "ketika timer selesai, jalankan kode ini" atau "ketika pengguna mengklik tombol, panggil fungsi ini."

Mari kita lihat setTimeout, yang merupakan fungsi bawaan yang menunggu waktu tertentu dan kemudian menjalankan beberapa kode. Kita perlu memberi tahu apa kode yang akan dijalankan – kasus penggunaan yang sempurna untuk meneruskan fungsi!

Coba kode ini – setelah 3 detik, Anda akan melihat pesan:

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

Perhatikan bagaimana kita meneruskan displayDone (tanpa tanda kurung) ke setTimeout. Kita tidak memanggil fungsi itu sendiri – kita menyerahkannya ke setTimeout dan mengatakan "panggil ini dalam 3 detik."

Fungsi Anonim

Kadang-kadang Anda membutuhkan fungsi hanya untuk satu hal dan tidak ingin memberinya nama. Pikirkan – jika Anda hanya menggunakan fungsi sekali, mengapa memperumit kode Anda dengan nama tambahan?

JavaScript memungkinkan Anda membuat fungsi anonim – fungsi tanpa nama yang dapat Anda definisikan langsung di tempat Anda membutuhkannya.

Berikut cara kita dapat menulis ulang contoh timer kita menggunakan fungsi anonim:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

Ini mencapai hasil yang sama, tetapi fungsi didefinisikan langsung dalam pemanggilan setTimeout, menghilangkan kebutuhan untuk deklarasi fungsi terpisah.

Fungsi Panah

JavaScript modern memiliki cara yang lebih singkat untuk menulis fungsi yang disebut fungsi panah. Mereka menggunakan => (yang terlihat seperti panah – mengerti?) dan sangat populer di kalangan pengembang.

Fungsi panah memungkinkan Anda melewati kata kunci function dan menulis kode yang lebih ringkas.

Berikut contoh timer kita menggunakan fungsi panah:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

Tanda () adalah tempat parameter akan masuk (kosong dalam kasus ini), kemudian muncul panah =>, dan akhirnya tubuh fungsi dalam kurung kurawal. Ini memberikan fungsi yang sama dengan sintaks yang lebih ringkas.

Kapan Menggunakan Setiap Strategi

Kapan Anda harus menggunakan setiap pendekatan? Panduan praktis: jika Anda akan menggunakan fungsi beberapa kali, beri nama dan definisikan secara terpisah. Jika hanya untuk satu penggunaan spesifik, pertimbangkan fungsi anonim. Baik fungsi panah maupun sintaks tradisional adalah pilihan yang valid, meskipun fungsi panah sangat umum dalam basis kode JavaScript modern.

🚀 Tantangan

Bisakah Anda menjelaskan dalam satu kalimat perbedaan antara fungsi dan metode? Coba!

Tantangan Agen GitHub Copilot 🚀

Gunakan mode Agen untuk menyelesaikan tantangan berikut:

Deskripsi: Buat pustaka utilitas fungsi matematika yang menunjukkan berbagai konsep fungsi yang dibahas dalam pelajaran ini, termasuk parameter, nilai default, nilai kembali, dan fungsi panah.

Prompt: Buat file JavaScript bernama mathUtils.js yang berisi fungsi-fungsi berikut:

Fungsi add yang menerima dua parameter dan mengembalikan jumlahnya
Fungsi multiply dengan nilai parameter default (parameter kedua default ke 1)
Fungsi panah square yang menerima angka dan mengembalikan kuadratnya
Fungsi calculate yang menerima fungsi lain sebagai parameter dan dua angka, lalu menerapkan fungsi tersebut pada angka-angka tersebut
Demonstrasikan pemanggilan setiap fungsi dengan kasus uji yang sesuai

Pelajari lebih lanjut tentang mode agen di sini.

Kuis Setelah Pelajaran

Kuis setelah pelajaran

Tinjauan & Studi Mandiri

Ada baiknya membaca lebih lanjut tentang fungsi panah, karena mereka semakin banyak digunakan dalam basis kode. Latih menulis fungsi, lalu tulis ulang dengan sintaks ini.

Tugas

Seru dengan Fungsi

Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI Co-op Translator. Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang penting, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang keliru yang timbul dari penggunaan terjemahan ini.

14 KiB Raw Blame History Unescape Escape