Techstart news

Berita Informasi Teknologi Mancanegara Terbaru dan Terupdate

Javascript

Regular function vs Arrow Function Javascript

ByTechStartNews

Apr 27, 2022 #ai, #anda, #Arrow function JavaScript, #dan, #ini, #JavaScript function tutorial, #Kapan menggunakan arrow function, #Kapan menggunakan regular function, #Regular function JavaScript, #yang

Introduction

Di JavaScript, regular function (fungsi biasa) dan arrow function adalah dua cara yang paling umum digunakan untuk mendefinisikan fungsi. Meskipun keduanya memiliki tujuan yang sama, yaitu untuk mengeksekusi sebuah blok kode, terdapat perbedaan signifikan antara keduanya. Artikel ini akan membahas perbedaan utama antara regular function dan arrow function serta kapan sebaiknya menggunakan masing-masing jenis fungsi tersebut.

1. Sintaksis: Perbedaan Antara Regular Function dan Arrow Function

Regular Function:

Regular function atau fungsi biasa memiliki sintaks tradisional yang kita gunakan di JavaScript.

javascript
function tambah(a, b) {
return a + b;
}

Arrow Function:

Arrow function diperkenalkan di ES6 dan memiliki sintaks yang lebih ringkas. Berikut adalah contoh penulisan arrow function:

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

Perbedaan Sintaksis:

  • Regular function menggunakan kata kunci function di awal.
  • Arrow function menggunakan tanda panah => setelah parameter.

2. Perbedaan Dalam Penanganan this

Salah satu perbedaan paling penting antara regular function dan arrow function adalah cara keduanya menangani konteks this.

Regular Function:

Pada fungsi biasa, this merujuk ke objek yang memanggil fungsi tersebut, yang dapat bervariasi tergantung pada bagaimana fungsi tersebut dipanggil.

javascript
const person = {
name: "John",
greet: function() {
console.log(`Hello, ${this.name}`);
}
};

person.greet(); // Output: Hello, John

Namun, jika kita memanggil fungsi biasa dalam konteks global atau dalam fungsi lainnya, this dapat berubah.

javascript
const greet = person.greet;
greet(); // Output: undefined, karena this mengacu pada objek global (window)

Arrow Function:

Arrow function tidak memiliki this-nya sendiri. Sebaliknya, this akan “dibawa” atau dipertahankan dari konteks di luar fungsi, yaitu dari tempat fungsi itu didefinisikan (lexical scoping).

javascript
const person = {
name: "John",
greet: () => {
console.log(`Hello, ${this.name}`);
}
};

person.greet(); // Output: Hello, undefined

Karena this pada arrow function merujuk pada konteks di luar fungsi (bukan objek yang memanggilnya), di sini this.name menjadi undefined.

3. Penggunaan dengan Fungsi Callback

Arrow function sangat berguna dalam situasi di mana Anda ingin menggunakan this yang terikat dengan konteks tempat fungsi tersebut didefinisikan, terutama dalam callback functions.

Contoh dengan Regular Function (masalah this):

javascript
function Timer() {
this.time = 0;
setInterval(function() {
this.time++; // `this` mengacu pada window, bukan objek Timer
console.log(this.time);
}, 1000);
}

const timer = new Timer(); // Output: NaN, karena `this` tidak mengacu pada objek Timer

Contoh dengan Arrow Function (memperbaiki masalah this):

javascript
function Timer() {
this.time = 0;
setInterval(() => {
this.time++; // `this` mengacu pada objek Timer
console.log(this.time);
}, 1000);
}

const timer = new Timer(); // Output: 1, 2, 3, ... karena `this` mengacu pada objek Timer

Dengan menggunakan arrow function, this tetap merujuk pada objek Timer, bukan pada objek global.

4. Kapan Menggunakan Regular Function dan Arrow Function?

  • Gunakan Regular Function ketika Anda membutuhkan this untuk merujuk pada objek yang memanggil fungsi tersebut, seperti dalam metode objek.
  • Gunakan Arrow Function ketika Anda ingin this terikat ke konteks luar (lexical scoping) dan ketika fungsi Anda bersifat singkat dan tidak perlu mendefinisikan objek this baru. Arrow function sangat berguna dalam callback atau fungsi asinkron.

Kelebihan Arrow Function:

  • Sintaks lebih singkat dan jelas, cocok untuk fungsi satu baris.
  • Tidak mengikat this sendiri, sehingga berguna dalam callback yang membutuhkan akses ke konteks luar.

Kelebihan Regular Function:

  • this berfungsi secara dinamis sesuai dengan konteks pemanggilan, sehingga lebih fleksibel dalam pengaturan objek atau kelas.

5. Contoh Kode Lain yang Menunjukkan Perbedaan

Regular Function dalam Constructor Function (misalnya dalam kelas):

javascript
function Person(name) {
this.name = name;
this.greet = function() {
console.log(`Hello, ${this.name}`);
};
}

const person1 = new Person('Alice');
person1.greet(); // Output: Hello, Alice

Arrow Function dalam Kelas (Kelemahan terkait this):

javascript
class Person {
constructor(name) {
this.name = name;
this.greet = () => {
console.log(`Hello, ${this.name}`);
};
}
}

const person1 = new Person('Bob');
person1.greet(); // Output: Hello, Bob

Pada kode kedua, meskipun menggunakan arrow function, this tetap merujuk pada objek Person, sehingga arrow function juga bekerja dengan baik dalam konteks kelas.

6. Kesimpulan

Secara keseluruhan, baik regular function maupun arrow function memiliki kegunaan dan aplikasi yang berbeda di JavaScript:

  • Regular function sangat berguna ketika Anda membutuhkan fleksibilitas dalam konteks this, seperti saat menggunakan fungsi dalam objek atau kelas.
  • Arrow function lebih ringkas dan efisien, serta sangat berguna dalam situasi di mana Anda ingin mempertahankan this dari konteks luar, seperti dalam callback functions dan fungsi asinkron.

Dengan memahami perbedaan ini, Anda dapat memilih jenis fungsi yang paling sesuai untuk situasi Anda, meningkatkan efisiensi dan keterbacaan kode JavaScript Anda.

By TechStartNews

Related Post

Javascript

Belajar Babel Loader Javascript ES6

May 3, 2022 TechStartNews
Javascript

Contoh Implementasi API dan Fetch API dalam Web Sederhana

Apr 29, 2022 TechStartNews
Javascript

Contoh Implementasi Ajax Menggunakan Fetch API di JavaScript

Apr 29, 2022 TechStartNews

Anda Ketinggalan

AI

Why Employees Secretly Bring AI into the Workplace

February 4, 2025 TechStartNews
teknologi

Di Bawah Trump, Pertahanan Siber AS Kehilangan Arah

February 3, 2025 TechStartNews
teknologi

Masa Depan Kendaraan Otonom: Membentuk Transportasi Modern

January 25, 2025 TechStartNews
teknologi

Bisakah Robot Menyaingi Keahlian Tangan Manusia?

January 25, 2025 TechStartNews
slot gacor hari inislot gacorslot demoscatter hitamslot zeusslot gacorscatter hitamgunung388gunung388gunung388scatter hitamslot viralidncash slot onlineidncashaktortogel slotidncash slot gacoridntogel slot maxwinslot gacorslot gacorotakudesuslot gacorscatter hitamaktortogel berikan 2000 beasiswa untuk mahasiswa bali untuk pembelajaran mahjong wins3aktortogel jamin persediaan scatter hitam di pasar jakarta mencukupi untuk pedagang menjelang imlekaktortogel pastikan stok scatter hitam mahjong wins 3 di banjarmasin berlimpah dan merataradar pendeteksi scatter hitam mahjong wins 3 di jakarta menemukan banyak scatter hitam di aktortogelseorang mahasiswa di jambi temukan alat pendeteksi scatter hitam mahjong wins3 di aktortogel