• Apa Itu Arrow Function?
• Contoh Function Biasa dan Arrow Function
  • Penulisan biasa
  • Penulisan arrow function
• Arrow Function dengan Parameter
• Arrow Function Tanpa Parameter
• Arrow Function Satu Parameter
• Arrow Function dengan Return Otomatis
• Arrow Function Mengembalikan Object
• Perbedaan Arrow Function dengan Function Biasa
• Kesimpulan

Halo teman-teman, semuanya, setelah di artikel sebelumnya kita belajar tentang Function biasa, sekarang kita akan lanjut ke topik yang lebih modern, yaitu Arrow Function.

Arrow Function diperkenalkan di ES6 (ECMAScript 2015) sebagai cara penulisan function yang lebih singkat dan fleksibel.

Apa Itu Arrow Function?

Arrow Function adalah alternatif penulisan function di JavaScript dengan sintaksis yang lebih pendek.

Bentuk dasarnya seperti ini:

const namaFunction = (parameter) => {
  // kode yang dijalankan
};

Contoh Function Biasa dan Arrow Function

• Penulisan biasa

  function sayHello() {
    console.log("Halo, Dunia!");
  }
  

• Penulisan arrow function

  const sayHello = () => {
    console.log("Halo, Dunia!");
  };
  
  

  Lebih singkat, kan?

Arrow Function dengan Parameter

Kalau function menerima parameter, kita tuliskan di dalam tanda kurung ().

const greet = (nama) => {
  console.log("Halo, " + nama + "!");
};

greet("Budi"); // Output: Halo, Budi!

Arrow Function Tanpa Parameter

Kalau tidak ada parameter, tetap wajib pakai ().

const helloWorld = () => {
  console.log("Hello, World!");
};

helloWorld();

Arrow Function Satu Parameter

Kalau hanya satu parameter, kita boleh menghilangkan tanda kurung ().

const sapa = nama => {
  console.log("Hai, " + nama);
};

sapa("Andi"); // Output: Hai, Andi

Arrow Function dengan Return Otomatis

Jika isi function hanya satu baris dan langsung ingin return, kita bisa menghilangkan {} dan ****kata return**.

Contoh:

const tambah = (a, b) => a + b;

console.log(tambah(3, 5)); // Output: 8

Catatan:

• Kalau pakai {} - harus manual pakai return.
• Kalau tidak pakai {}, JavaScript otomatis menganggap hasil dari ekspresi itu sebagai nilai return.

Arrow Function Mengembalikan Object

Kalau mau return object, bungkus object dengan tanda kurung () supaya tidak bingung antara {} block dan {} object.

const buatUser = (nama, umur) => ({
  nama: nama,
  umur: umur
});

console.log(buatUser("Rina", 20));
/* Output:
{ nama: 'Rina', umur: 20 }
*/

Perbedaan Arrow Function dengan Function Biasa

Penjelasan tentang this:

• Function biasa: this tergantung siapa yang memanggil function itu.
• Arrow function: this mengikuti lingkungan di mana function dibuat (lexical scoping).

Ini sangat penting ketika kita bekerja dengan OOP atau event handler.

Kesimpulan

Hari ini kita sudah belajar mengenal apa itu Arrow Function, kemudian cara menulis Arrow Function dari sederhana sampai kompleks dan memahami perbedaan antara function biasa dan arrow function.

Pada artikel berikutnya, kita akan masuk ke Belajar Tentang Array di dalam JavaScript.

Terima Kaish