1. Beranda
  2. JavaScript
  3. Tutorial Coding

Tips Menulis Kode JavaScript Bersih dengan Arrow Function Modern

30 April 2026

Kalau kamu sedang belajar JavaScript atau baru saja terjun ke dunia Modern Web Development, kamu pasti sering melihat penulisan fungsi yang menggunakan simbol panah seperti =>. Yup, itulah yang disebut dengan Arrow Function.

Diperkenalkan sejak versi ES6 (ECMAScript 2015), arrow function bukan cuma soal gaya-gayaan agar kode terlihat keren. Fitur ini benar-benar mengubah cara kita menulis logika program, membuatnya lebih ringkas, dan yang paling penting: menyelesaikan masalah klasik seputar keyword this yang sering bikin pusing developer JavaScript pemula maupun senior.

Di artikel ini, kita akan bedah tuntas mulai dari dasar, perbandingannya dengan fungsi tradisional, hingga kapan kamu sebaiknya menggunakan (atau menghindari) arrow function. Mari kita mulai!

1. Apa Itu Arrow Function?

Secara sederhana, arrow function adalah cara alternatif untuk menulis fungsi di JavaScript dengan sintaks yang lebih pendek. Jika biasanya kamu menggunakan kata kunci function, dengan arrow function kamu bisa menghilangkannya dan menggantinya dengan tanda panah fat arrow (=>).

Bayangkan kamu punya fungsi sederhana untuk menyapa seseorang. Secara tradisional, kamu mungkin menulisnya seperti ini:

function sapa(nama) {
  return "Halo, " + nama;
}

Dengan arrow function, kamu bisa menyulapnya menjadi jauh lebih ringkas:

const sapa = (nama) => {
  return `Halo, ${nama}`;
};

Bahkan, jika fungsinya hanya terdiri dari satu baris, kamu bisa membuang kurung kurawal dan kata kunci return-nya. Sangat efisien, bukan?

2. Variasi Sintaks Arrow Function yang Wajib Kamu Tahu

Salah satu alasan kenapa arrow function begitu populer adalah fleksibilitasnya. Tergantung dari jumlah parameter dan isi logikanya, kamu bisa menyesuaikan penulisannya agar tetap bersih.

A. Tanpa Parameter

Jika fungsi kamu tidak membutuhkan input sama sekali, kamu cukup menuliskan tanda kurung kosong.

const katakanHalo = () => console.log("Halo Dunia!");

B. Satu Parameter

Khusus untuk fungsi dengan tepat satu parameter, kamu bahkan boleh menghilangkan tanda kurung pembungkus parameternya.

const kuadrat = x => x * x;

C. Banyak Parameter

Jika parameternya lebih dari satu, kamu wajib menggunakan tanda kurung.

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

D. Implicit Return (Kembalian Otomatis)

Ini adalah fitur favorit banyak orang. Jika isi fungsi kamu hanya satu baris ekspresi, JavaScript secara otomatis akan mengembalikan (return) nilai tersebut tanpa perlu kamu tulis kata return secara eksplisit.

// Tanpa kurung kurawal = Implicit Return
const kaliDua = n => n * 2;

3. Perbedaan Arrow Function vs Regular Function

Kamu mungkin bertanya, Kalau cuma soal ngetik lebih sedikit, kenapa heboh banget?. Nah, perbedaan sebenarnya ada di bawah tenda (under the hood), terutama soal Scope dan Context.

1. Keyword 'this' yang Konsisten

Dalam fungsi biasa, nilai this bersifat dinamis. Ia bergantung pada siapa yang memanggil fungsi tersebut. Ini sering menyebabkan masalah saat kita bekerja dengan setTimeout atau EventListener di dalam sebuah objek.

Sebaliknya, arrow function tidak memiliki this sendiri. Ia meminjam (lexical binding) nilai this dari lingkup (scope) di luarnya. Jadi, kamu tidak perlu lagi melakukan trik konyol seperti var self = this; atau menggunakan .bind(this) di mana-mana.

2. Tidak Memiliki Objek 'arguments'

Fungsi biasa punya objek ajaib bernama arguments yang berisi semua parameter yang dikirim. Arrow function tidak punya ini. Jika kamu butuh akses ke banyak parameter sekaligus, gunakan Rest Parameters (...args).

3. Tidak Bisa Digunakan Sebagai Constructor

Kamu tidak bisa menggunakan kata kunci new pada arrow function. Jika kamu mencoba membuat instansi objek darinya, JavaScript akan protes dan melempar error. Jadi, untuk urusan Class atau OOP tradisional, tetap gunakan fungsi biasa atau sintaks class.

4. Kapan Harus Menggunakan Arrow Function?

Gunakan arrow function saat kamu ingin menulis kode yang fungsional dan deklaratif. Berikut adalah beberapa skenario terbaiknya:

  • Array Methods: Sangat powerfull saat digunakan bersama .map(), .filter(), dan .reduce().
  • Callback Functions: Ideal untuk event listener atau timer (setTimeout/setInterval) karena menjaga konteks this tetap aman.
  • Short Utility Functions: Fungsi kecil yang melakukan satu tugas spesifik.

Contoh penggunaan pada manipulasi array:

const angka = [1, 2, 3, 4, 5];
const kuadratAngka = angka.map(n => n * n);
console.log(kuadratAngka); // [1, 4, 9, 16, 25]

5. Kapan Sebaiknya Menghindari Arrow Function?

Meskipun modern, bukan berarti kamu harus mengganti semua fungsi lama kamu menjadi arrow function. Ada tempat di mana fungsi tradisional jauh lebih unggul:

  • Object Methods: Jika kamu mendefinisikan fungsi di dalam objek yang perlu mengakses properti lain di objek tersebut menggunakan this, gunakan fungsi biasa.
  • Fungsi Global yang Kompleks: Jika fungsinya sangat panjang dan membutuhkan hoisting (dipanggil sebelum didefinisikan), fungsi deklaratif biasa lebih aman.
  • Event Listeners (Kadang-kadang): Jika kamu butuh this untuk merujuk pada elemen HTML yang diklik, arrow function akan membuat this merujuk ke objek window, yang mana bukan itu yang kamu mau.

6. Mengapa Arrow Function Penting untuk SEO dan Performa?

Mungkin terdengar berlebihan menghubungkan sintaks kode dengan SEO, tapi dengarkan ini: Efisiensi Kode = Kecepatan Load. Dengan menggunakan arrow function, ukuran file JavaScript kamu (sebelum di-minify) bisa menjadi lebih kecil. Kode yang lebih bersih juga memudahkan mesin pencari (melalui bot yang menjalankan JS) untuk memproses logika situs kamu dengan lebih cepat.

Selain itu, menggunakan standar modern menunjukkan bahwa situs kamu dikelola dengan baik, yang secara tidak langsung berdampak pada user experience yang lebih lancar.

7. Best Practice Penulisan Arrow Function

Agar kode kamu tidak hanya jalan tapi juga enak dibaca oleh rekan tim (atau kamu sendiri di masa depan), ikuti tips ini:

  • Konsistensi: Gunakan arrow function untuk fungsi anonim dan callback, tapi tetap gunakan function atau metode kelas untuk logika utama aplikasi.
  • Jangan Terlalu Singkat: Implicit return memang keren, tapi kalau logikanya sudah melibatkan ternary operator yang bertumpuk, lebih baik gunakan kurung kurawal demi keterbacaan.
  • Gunakan Nama yang Deskriptif: Karena arrow function sering disimpan dalam variabel, pastikan nama variabelnya mencerminkan apa yang dilakukan fungsi tersebut.

Kesimpulan

Menguasai Arrow Function adalah langkah besar dalam perjalananmu menjadi developer JavaScript yang handal. Ia menawarkan kesederhanaan, menghilangkan bug seputar this, dan membuat kode kamu terlihat lebih profesional.

Ingat, teknologi terus berkembang. Menggunakan fitur-fitur ES6+ bukan lagi sekadar pilihan, tapi sudah menjadi standar industri. Jadi, mulailah berlatih mengganti fungsi-fungsi sederhana kamu dengan arrow function hari ini!

Semoga panduan ini membantu kamu memahami cara menggunakan arrow function di JS dengan lebih dalam. Jika kamu punya pertanyaan, jangan ragu untuk bereksperimen langsung di konsol browser kamu. Selamat ngoding!

Aurealisa ID
Fakta Gambar (Science Fact), Kutipan (Quote Of The Day), Ulasan (Science Review), Tips, Artikel.
Profil

Komentar