Frontend Academy · Pelajaran

Fungsi: Deklarasi, Ekspresi, Fungsi Panah

Definisikan fungsi dengan tiga cara, pahami hoisting, gunakan parameter dan nilai kembalian, serta tuliskan fungsi panah yang ringkas.

Fungsi: Deklarasi, Ekspresi, Fungsi Panah adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu Fungsi?

Fungsi adalah blok kode yang dapat digunakan kembali. Fungsi menerima masukan (parameter), menjalankan logika, dan secara opsional mengembalikan keluaran. Fungsi merupakan nilai kelas satu dalam JavaScript — fungsi dapat ditetapkan ke variabel, diteruskan sebagai argumen, dan dikembalikan dari fungsi lain.

Deklarasi Fungsi

Deklarasi fungsi membuat fungsi bernama menggunakan kata kunci function. Deklarasi akan diangkat — Anda dapat memanggilnya sebelum deklarasi tersebut muncul dalam kode.

function greet(name) {
  return `Hello, ${name}!`;
}

// Can call before declaration due to hoisting:
console.log(greet('Alice')); // 'Hello, Alice!'

Ekspresi Fungsi

Ekspresi fungsi menetapkan sebuah fungsi ke variabel. Ekspresi ini tidak diangkat (variabelnya diangkat sebagai undefined). Ekspresi fungsi dapat tidak bernama atau memiliki nama.

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(3, 4)); // 12

// Named function expression (name useful in stack traces):
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

Fungsi Panah

Fungsi panah adalah sintaks ringkas yang diperkenalkan dalam ES6. Fungsi ini tidak memiliki this sendiri — fungsi ini mewarisi this dari cakupan yang membungkusnya. Sangat cocok untuk fungsi panggilan balik dan fungsi singkat.

// Standard arrow:
const add = (a, b) => a + b;

// Single parameter (no parens needed):
const double = n => n * 2;

// No parameters:
const greet = () => 'Hello!';

// Multi-line body needs {} and return:
const process = (x) => {
  const result = x * 2;
  return result + 1;
};

Parameter dan Argumen

Parameter adalah nama yang tercantum dalam definisi fungsi. Argumen adalah nilai yang diteruskan saat memanggil fungsi. Argumen tambahan diabaikan; argumen yang tidak ada bernilai undefined.

function info(name, age) {
  console.log(`${name} is ${age}`);
}
info('Alice', 30); // 'Alice is 30'
info('Bob');       // 'Bob is undefined'

Parameter Bawaan

ES6 memungkinkan Anda menetapkan nilai bawaan untuk parameter. Nilai bawaan digunakan ketika argumennya undefined (termasuk ketika argumen sama sekali tidak diberikan).

function greet(name = 'World') {
  return `Hello, ${name}!`;
}
console.log(greet());        // 'Hello, World!'
console.log(greet('Alice')); // 'Hello, Alice!'

Pernyataan return

Fungsi secara bawaan mengembalikan undefined. Gunakan return untuk mengeluarkan nilai. Fungsi berhenti pada return pertama yang ditemuinya — kode setelahnya tidak dijalankan.

function divide(a, b) {
  if (b === 0) return null; // early return
  return a / b;
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // null

Parameter Rest

Parameter rest ...args mengumpulkan semua argumen yang tersisa ke dalam larik. Parameter ini harus menjadi parameter terakhir. Parameter ini menggantikan objek arguments lama dalam kode modern.

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

Fungsi sebagai Nilai (Kelas Satu)

Fungsi dapat disimpan dalam variabel, diteruskan ke fungsi lain sebagai argumen (fungsi panggilan balik), dan dikembalikan dari fungsi. Hal ini memungkinkan pola yang kuat seperti metode larik dan pendengar peristiwa.

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b); // callback
console.log(sorted); // [1, 1, 3, 4, 5]

Fungsi Murni

Fungsi murni mengembalikan keluaran yang sama untuk masukan yang sama dan tidak memiliki efek samping (tidak ada perubahan DOM, panggilan jaringan, atau perubahan global). Fungsi murni mudah diuji, ditelusuri kesalahannya, dan dipahami.

// Pure:
const add = (a, b) => a + b;

// Impure (side effect: mutates external state):
let total = 0;
function addToTotal(n) { total += n; }

Ekspresi Fungsi yang Segera Dipanggil (IIFE)

IIFE langsung dijalankan ketika didefinisikan. Dahulu, IIFE digunakan untuk membuat cakupan privat. Saat ini IIFE lebih jarang diperlukan karena adanya modul dan cakupan blok, tetapi masih dapat ditemukan dalam basis kode lama.

(function () {
  const secret = 'hidden';
  console.log('IIFE ran');
})();
// secret is not accessible here

Pemeriksaan Singkat

Manakah dari pernyataan berikut yang benar tentang fungsi panah?

Ringkasan: Fungsi JavaScript

Deklarasi fungsi diangkat. Ekspresi fungsi dan fungsi panah tidak diangkat. Fungsi panah ringkas dan tidak memiliki this sendiri. Gunakan parameter bawaan untuk menangani argumen yang tidak ada. Fungsi adalah nilai kelas satu — teruskan fungsi dengan leluasa.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Fungsi: Deklarasi, Ekspresi, Fungsi Panah” gratis?

Ya — teks lengkap “Fungsi: Deklarasi, Ekspresi, Fungsi Panah” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Fungsi: Deklarasi, Ekspresi, Fungsi Panah”?

Definisikan fungsi dengan tiga cara, pahami hoisting, gunakan parameter dan nilai kembalian, serta tuliskan fungsi panah yang ringkas. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Fungsi: Deklarasi, Ekspresi, Fungsi Panah” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Variabel: let, const, var, dan Cakupan
Tipe Data: string, number, boolean, null, undefined
Fungsi: Deklarasi, Ekspresi, Fungsi Panah
Alur Kontrol: if, else, switch, for, while

← Kembali ke Frontend Academy