Regular Function vs Arrow Function JavaScript: Perbedaan Lengkap

Halo, para developer JavaScript! Dalam perjalanan coding sehari-hari, kita sering dihadapkan pada dua jenis fungsi: function biasa (regular function) dan arrow function (fungsi panah). Membedakan kapan harus menggunakan masing-masing adalah keterampilan penting yang akan menyelamatkan Anda dari bug misterius dan kode yang sulit di-debug. Artikel ini akan mengupas tuntas perbandingan regular function vs arrow function JavaScript dari berbagai aspek: sintaksis, hoisting, binding this, object arguments, hingga penggunaan sebagai constructor. Dengan memahami perbedaan fundamental ini, Anda bisa menulis kode yang lebih bersih, efisien, dan sesuai konteks. Mari kita mulai dengan sintaksis dasar keduanya. Artikel ini merangkum kapan memakai masing-masing agar kode tetap konsisten, mudah di-maintain, dan optimal di berbagai lingkungan runtime modern termasuk browser dan Node.js.

Sintaksis Dasar Regular Function vs Arrow Function JavaScript

Regular function hadir dalam dua bentuk: function declaration dan function expression. Function declaration menggunakan kata kunci function diikuti nama fungsi, parameter, dan blok kode. Contoh:

// Function declaration
function greet(name) {
 return "Hello, " + name;
}

// Function expression
const greet = function(name) {
 return "Hello, " + name;
};

Arrow function, diperkenalkan di ES6, memiliki sintaksis yang lebih ringkas. Bentuk dasarnya menghilangkan kata kunci function dan menggunakan panah =>. Untuk fungsi dengan satu parameter dan satu baris return, kurung dan return bisa dihilangkan:

// Arrow function – multi baris
const greet = (name) => {
 return "Hello, " + name;
};

// Arrow function – satu baris, implicit return
const greet = name => "Hello, " + name;

Jika tidak ada parameter, gunakan kurung kosong: () =>.... Perbedaan sintaksis ini hanyalah permukaan; perbedaan substansial lainnya jauh lebih krusial.

Hoisting: Siapa yang Bisa Dipanggil Duluan

Hoisting adalah mekanisme JavaScript yang memindahkan deklarasi ke puncak lingkupnya. Dalam konteks regular function vs arrow function JavaScript, function declaration di-hoisting sepenuhnya, baik nama maupun body fungsi. Artinya, Anda bisa memanggil fungsi sebelum baris deklarasinya. Contoh:

console.log(add(2, 3)); // 5 – berhasil

function add(a, b) {
 return a + b;
}

Sebaliknya, function expression dan arrow function adalah assignment ke variabel (biasanya dengan const, let, atau var). Hanya deklarasi variabelnya yang di-hoisting (jika menggunakan var), namun nilainya tidak. Jika menggunakan const atau let, Anda akan mendapatkan ReferenceError jika mengakses sebelum inisialisasi (temporal dead zone).

// Function expression dengan var
console.log(multiply(2, 3)); // TypeError: multiply is not a function
var multiply = function(a, b) { return a * b; };

// Arrow function dengan const
console.log(divide(6, 2)); // ReferenceError: Cannot access 'divide' before initialization
const divide = (a, b) => a / b;

Jadi, function declaration unggul dalam hal hoisting: Anda bisa mendefinisikan fungsi di mana pun dalam scope, dan memanggilnya dari mana pun setelah eksekusi dimulai. Ini berguna untuk organisasi kode yang lebih fleksibel.

Keyword this: Perbedaan Terbesar Regular Function vs Arrow Function JavaScript

Perilaku this adalah perbedaan paling kritis antara regular function dan arrow function. Regular function memiliki this yang dinamis – nilainya ditentukan oleh bagaimana fungsi dipanggil (calling context). Sebagai contoh, dalam method objek:

const person = {
 name: "Alice",
 greetRegular: function() {
 console.log("Halo, saya " + this.name);
 }
};

person.greetRegular(); // Halo, saya Alice

Jika fungsi regular dipanggil tanpa konteks objek (misalnya, disimpan ke variabel lalu dipanggil), this akan merujuk ke global object (atau undefined di strict mode).

Arrow function, sebaliknya, tidak memiliki this sendiri. Ia mewarisi this dari lingkup leksikal sekitarnya (lexical scoping). Dengan kata lain, this dalam arrow function adalah this dari kode di luar fungsi arrow tersebut saat ia didefinisikan. Coba lihat contoh berikut:

const person = {
 name: "Alice",
 greetArrow: () => {
 console.log("Halo, saya " + this.name);
 }
};

person.greetArrow(); // Halo, saya undefined (this = global/window)

Mengapa this menjadi global? Karena arrow function tidak mengikat this dari objek person, melainkan mengambil this dari scope di luar objek – yaitu global scope. Inilah mengapa arrow function tidak cocok digunakan sebagai method objek jika Anda ingin mengakses properti objek melalui this. Namun, kelebihan lexical this sangat berguna dalam callback, misalnya di dalam event handler atau timer, seperti:

function Timer() {
 this.seconds = 0;
 setInterval(() => {
 this.seconds++; // this mengacu pada instance Timer
 console.log(this.seconds);
 }, 1000);
}

const timer = new Timer(); // this.seconds akan bertambah tiap detik

Jika Anda menggunakan regular function di dalam setInterval, this akan menjadi global, sehingga Anda perlu menyimpan referensi this ke variabel lain (misal var self = this) atau menggunakan .bind(this). Arrow function menyederhanakan masalah ini.

Memilih antara regular function vs arrow function JavaScript sangat menentukan bagaimana nilai this diikat di dalam callback dan event handler.

Arguments Object dan Rest Parameters

Regular function memiliki akses ke object arguments – array-like object yang berisi seluruh argumen yang dilewatkan saat pemanggilan, termasuk yang tidak dideklarasikan di parameter. Contoh:

function sum() {
 let total = 0;
 for (let i = 0; i < arguments.length; i++) {
 total += arguments[i];
 }
 return total;
}

console.log(sum(1, 2, 3, 4)); // 10

Arrow function tidak memiliki object arguments. Jika Anda mencoba mengakses arguments di dalam arrow function, Anda akan mendapat ReferenceError (karena arguments tidak didefinisikan dalam scope arrow). Sebagai gantinya, gunakan rest parameters (...args) yang merupakan array sejati:

const sum = (...args) => {
 return args.reduce((acc, val) => acc + val, 0);
};

console.log(sum(1, 2, 3, 4)); // 10

Rest parameters lebih modern dan lebih fleksibel karena Anda bisa memberi nama parameter, misalnya (first,...rest). Jadi, ketika Anda membutuhkan akses ke semua argumen, arrow function tetap bisa melakukannya dengan rest parameters, hanya saja tidak bisa menggunakan object arguments yang sudah usang.

Dalam pembahasan regular function vs arrow function JavaScript, perbedaan pada arguments object dan kemampuan constructor sering menjadi sumber bug.

Constructor dan Prototype pada Regular Function vs Arrow Function JavaScript

Regular function dapat digunakan sebagai constructor dengan kata kunci new. Saat dipanggil dengan new, JavaScript akan membuat objek baru, mengikatkan this ke objek tersebut, dan secara otomatis mengembalikannya (kecuali Anda mengembalikan objek lain). Contoh:

function Person(name) {
 this.name = name;
}

Person.prototype.sayHello = function() {
 console.log("Halo, nama saya " + this.name);
};

const alice = new Person("Alice");
alice.sayHello(); // Halo, nama saya Alice

Arrow function tidak bisa digunakan sebagai constructor. Jika Anda mencoba memanggil arrow function dengan new, JavaScript akan melempar TypeError karena arrow function tidak memiliki internal method [[Construct]]. Selain itu, arrow function juga tidak memiliki properti prototype secara default (karena tidak dirancang untuk inheritance). Jadi, jika Anda membutuhkan class atau pola constructor dengan prototipe, regular function (atau class syntax) adalah pilihan tepat.

const Person = (name) => {
 this.name = name;
};

const alice = new Person("Alice"); // TypeError: Person is not a constructor

Kapan Harus Pakai Arrow Function dalam Regular Function vs Arrow Function JavaScript

Arrow function unggul dalam beberapa skenario berkat sintaksis ringkas dan lexical this yang stabil. Berikut adalah situasi yang paling cocok:

• Callback pada method array seperti map, filter, reduce. Contoh:
JavaScript Snippet JavaScript

⎘ Salin

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]

• Promise chaining atau async/await – arrow function membuat kode lebih pendek.
• Event handler pada class React (tanpa perlu bind manual).
• Fungsi yang membutuhkan lexical this seperti di dalam method timer, interval, atau nested function.

Namun, hindari arrow function sebagai method objek (kecuali Anda sengaja ingin this global), atau sebagai constructor. Juga jangan gunakan arrow function di tempat Anda membutuhkan objek arguments tradisional (gunakan rest parameters sebagai gantinya).

Tabel Perbandingan Lengkap Regular Function vs Arrow Function JavaScript

Common Mistakes Regular Function vs Arrow Function JavaScript

Berikut beberapa kesalahan umum yang sering terjadi saat mencampur kedua jenis fungsi:

1. Menggunakan arrow function sebagai method objek – this tidak mengacu ke objek, melainkan global. Solusi: gunakan regular function atau method shorthand.
2. Memanggil arrow function dengan new – menyebabkan TypeError. Pastikan fungsi yang dipanggil dengan new adalah regular function atau class.
3. Mengakses arguments di dalam arrow function – akan error. Ganti dengan rest parameters.
4. Mengira arrow function bisa di-hoisting seperti function declaration – tidak. Selalu deklarasikan arrow function sebelum digunakan.
5. Menggunakan arrow function di prototipe – tidak disarankan karena tidak memiliki prototype dan this-nya leksikal, yang bisa membingungkan.

Studi kasus regular function vs arrow function JavaScript di React menunjukkan kapan arrow function lebih aman untuk menjaga konteks this.

Studi Kasus: React, Event Handler, dan Closures

Dalam pengembangan React, arrow function sering digunakan untuk event handler di dalam komponen class agar this selalu mengacu ke instance komponen. Contoh:

class Counter extends React.Component {
 constructor(props) {
 super(props);
 this.state = { count: 0 };
 }

 // Arrow function sebagai class property – lexical this
 handleClick = () => {
 this.setState(prev => ({ count: prev.count + 1 }));
 };

 render() {
 return <button onClick={this.handleClick}>Klik</button>;
 }
}

Tanpa arrow function, Anda perlu .bind(this) di constructor atau menggunakan callback function expression. Arrow function juga membantu closures – misalnya dalam loop for dengan setTimeout, arrow function menangkap variabel loop dengan benar sesuai lexical scope (tidak seperti var yang bermasalah).

for (let i = 0; i < 3; i++) {
 setTimeout(() => console.log(i), 1000); // 0,1,2 – benar
}

Jika menggunakan var atau regular function, Anda akan mendapatkan nilai terakhir (3,3,3). Jadi, arrow function bersama let membantu menghindari masalah closures klasik.

Rangkuman Regular Function vs Arrow Function JavaScript

• Regular function memiliki this dinamis, bisa jadi constructor, memiliki object arguments, dan function declaration di-hoisting.
• Arrow function memiliki this leksikal (mengikuti scope luar), tidak bisa jadi constructor, tidak punya arguments, dan tidak di-hoisting.
• Gunakan arrow function untuk callback, method array, dan situasi yang membutuhkan lexical this.
• Gunakan regular function untuk method objek, constructor, dan ketika membutuhkan object arguments tradisional.
• Keduanya bisa menggunakan rest parameters sebagai alternatif arguments yang lebih modern.

Referensi

• MDN – Arrow functions
• MDN – Function expressions
• MDN – Hoisting
• Artikel terkait Default Parameters JavaScript dan infanthree.com – pelajari lebih lanjut tentang JavaScript modern.

Hal yang sering ditanyakan seputar Regular Function vs Arrow Function JavaScript: Perbedaan Lengkap