Baricode LMS - Arrow Function

Arrow Function ➡️

Arrow function adalah sintaks yang lebih ringkas untuk menulis function expression, diperkenalkan di ES6 (2015). Ini adalah cara penulisan fungsi yang sangat umum di JavaScript modern.

Sintaks Arrow Function

// Function expression biasa
const sapa = function(nama) {
  return `Halo, ${nama}!`;
};

// Arrow function — lebih ringkas
const sapa = (nama) => {
  return `Halo, ${nama}!`;
};

// Jika hanya satu parameter, kurung bisa dihilangkan
const sapa = nama => {
  return `Halo, ${nama}!`;
};

// Jika body hanya satu ekspresi, kurung kurawal dan return bisa dihilangkan
const sapa = nama => `Halo, ${nama}!`;

// Semua versi menghasilkan hal yang sama:
console.log(sapa('Budi')); // "Halo, Budi!"

Berbagai Bentuk Arrow Function

// Tanpa parameter
const salam = () => 'Halo, Dunia!';

// Satu parameter (kurung opsional)
const kuadrat = x => x * x;

// Banyak parameter (kurung wajib)
const tambah = (a, b) => a + b;

// Body lebih dari satu baris (kurung kurawal wajib, return wajib)
const hitung = (a, b) => {
  let hasil = a * b;
  console.log(`${a} x ${b} = ${hasil}`);
  return hasil;
};

// Mengembalikan objek — bungkus dengan kurung!
const buatOrang = (nama, umur) => ({ nama, umur });
console.log(buatOrang('Budi', 25)); // { nama: 'Budi', umur: 25 }

Perbedaan Penting: this

Perbedaan utama arrow function dari function biasa adalah cara menangani this:

// Function biasa: this merujuk pada konteks pemanggilan
const penghitung = {
  nilai: 0,
  mulai: function() {
    setInterval(function() {
      this.nilai++; // this bukan penghitung — ini window/undefined!
      console.log(this.nilai); // NaN atau error
    }, 1000);
  }
};

// Arrow function: this mewarisi dari lingkup luar (lexical this)
const penghitung2 = {
  nilai: 0,
  mulai: function() {
    setInterval(() => {
      this.nilai++; // this = penghitung2 ✅
      console.log(this.nilai); // 1, 2, 3, ...
    }, 1000);
  }
};

Arrow Function sangat cocok untuk Callback

let angka = [1, 2, 3, 4, 5];

// Dengan function biasa
let ganda = angka.map(function(n) { return n * 2; });

// Dengan arrow function — jauh lebih ringkas
let ganda   = angka.map(n => n * 2);              // [2, 4, 6, 8, 10]
let genap   = angka.filter(n => n % 2 === 0);     // [2, 4]
let total   = angka.reduce((acc, n) => acc + n, 0); // 15

// Chaining method dengan arrow function
let hasilAkhir = [1, 2, 3, 4, 5]
  .filter(n => n > 2)       // [3, 4, 5]
  .map(n => n * 10)         // [30, 40, 50]
  .reduce((acc, n) => acc + n, 0); // 120

console.log(hasilAkhir); // 120

Kapan Gunakan Arrow vs Function Biasa

// ✅ Arrow: untuk callback dan fungsi sederhana
setTimeout(() => console.log('Selesai!'), 1000);
[1, 2, 3].forEach(n => console.log(n));

// ✅ Arrow: untuk fungsi yang tidak butuh this sendiri
const hitungLuas = (p, l) => p * l;

// ✅ Function biasa: untuk method objek yang butuh this
const mobil = {
  merk: 'Toyota',
  info: function() {
    return `Mobil: ${this.merk}`; // this = mobil ✅
  }
};

// ✅ Function biasa: untuk fungsi konstruktor atau yang butuh hoisting
function Pengguna(nama) {
  this.nama = nama;
}

💡 Tips: Arrow function adalah cara favorit untuk menulis callback di JavaScript modern karena lebih ringkas. Namun, ingat bahwa arrow function tidak memiliki this sendiri — ia mewarisi this dari lingkup di mana ia didefinisikan. Gunakan function biasa untuk method objek atau event handler yang perlu mengakses this. 🎯

Arrow Function