Penjelasan Fungsi Arrow Function di JavaScript

Dalam tutorial ini Anda akan mempelajari jawaban atas pertanyaan: "Apa fungsi panah dalam JavaScript?" dan "Apa perbedaan fungsi panah dengan fungsi biasa (keyword)?"

Fungsi panah seperti fungsi normal hanya dengan 4 perbedaan utama:

1. Mereka memiliki sintaks yang berbeda (duh).
2. Tidak ada bentuk deklarasi fungsi panah, hanya ekspresi.
3. Mereka tidak mendapatkan ini sendiri.
4. Mereka memiliki pengembalian implisit.

1. Sintaks yang berbeda
Berikut adalah sintaks fungsi panah dibandingkan dengan kata kunci fungsi biasa. Saya menggunakan Ekspresi Fungsi Segera Diminta untuk kedua fungsi.

(function() {
  console.log('function keyword');
})();

(() => {
  console.log('arrow function');
})();

Perhatikan bahwa jika fungsi panah mengambil argumen tunggal tanpa fantasi seperti merusak, Anda dapat menghilangkan tanda kurung di sekitar parameternya.

// You need brackets
const noArguments = () => {};
// You can ommit the brackets.
const oneArgument = n => {
  return n * 2;
};
// You need brackets
const defaultParameter = (name = 'Anon') => {
  return name;
};
// You need brackets.
const destructuringOneArgment = ({ name }) => {
  return name;
};
// You need brackets.
const moreThanOneArgument = (a, b) => {
  return a + b;
};

2. Hanya ekspresi
Anda juga dapat memberi nama function dengan menulis nama variabel setelah kata kunci fungsi. Ini disebut "deklarasi fungsi". Tidak ada deklarasi fungsi untuk fungsi panah, hanya ekspresi fungsi anonim.

// function declaration with keyword
function decleration() {
  console.log('function declaration with keyword');
}

// function expression with keyword
const keywordExpression = function() {
  console.log('function expression with keyword');
};

// function declaration with arrow function
// 🔴 Not a thing.

// function expression with arrow function
const arrowExpression = () => {
  console.log('function expression with keyword');
};

Perbedaan antara deklarasi fungsi dan ekspresi fungsi adalah bahwa mereka diuraikan pada waktu yang berbeda. Deklarasi didefinisikan di mana-mana dalam cakupannya, sedangkan ekspresi hanya didefinisikan ketika garisnya tercapai.

declaration(); // ✅ Okay

function decleration() {}

foo(); // 🔴 TypeError: foo is not a function
var foo = () => {};
// We could've also written var foo = function() {}
bar(); // 🔴 ReferenceError: Cannot access 'bar' before initialization
const bar = () => {};

You can also see the difference between const and var here. Since foo was declared using the var keyword, it is hoisted, and its value is undefined. foo() tries to call undefined, but its obviously not a function. Since constdoesn't hoist invoking bar throws a reference error.

Anda juga dapat melihat perbedaan antara const dan var di sini. Karena foo dideklarasikan menggunakan kata kunci var , ia diangkat, dan nilainya tidak undefined. foo() mencoba memanggil tidak undefined, tetapi jelas bukan fungsi. Karena  const tidak mengerek, memohon  barmelempar kesalahan referensi.

3. Tidak ada this

Seperti bahasa lain, JavaScript memiliki kata kunci ini. Ada beberapa cara ini terikat secara eksplisit atau implisit. Kami hanya akan fokus pada perilaku yang relevan dengan fungsi panah.

const car = {
  wheels: 'four',
  yellWheels() {
    return this.wheels.toUpperCase();
  },
  countWheels: () => {
    return this.wheels;
  },
};

car.yellWheels(); // 'FOUR'
car.countWheels(); // undefined

Menggunakan function kata kunci, ini referensi objek. Namun, fungsi panah tidak mendapatkan ini sendiri. Oleh karena itu roda tidak terdefinisi karena objek global tidak memiliki wheels properti.

4. Pengembalian implisit.

Dalam cuplikan kode sebelumnya, kami menggunakan kata kunci return untuk mengembalikan nilai dari fungsi. Namun demikian, fungsi panah tidak perlu melakukan itu. Jika fungsi tubuh Anda adalah ekspresi tunggal, Anda dapat menghilangkan kurung kurawal dan ekspresi dikembalikan secara otomatis.

// These two functions do the same
const explicitReturn = () => {
  return 'foo';
};
const implicitReturn = () => 'foo';

explicitReturn(); // 'foo'
implicitReturn(); // 'foo'

Menggunakan pengembalian implisit, kita dapat menyederhanakan contoh dari bagian sintaks.

// Can't be simplified, no expression
const noop = () => {};

// Can be simplified, return expressions
const getName = (name = 'Anon') => name;
const double = n => n * 2;
const getNameProp = ({ name }) => name;
const add = (a, b) => a + b;

Pengembalian implisit menjadi sangat berguna untuk currying, yaitu ketika suatu fungsi mengembalikan fungsi lain sampai mengembalikan nilai akhirnya.

const add = a => b => a + b; // add is a function that returns b => a + b
// Read this as const add = a => (b => a + b);
const inc = add(1); // inc is a function because b => a + b got returned
const decr = add(-1);

inc(3); // 4 because inc remembers a as 1
inc(6); // 7
decr(3); // 2 because decr remembers a as -1

add adalah fungsi yang mengambil a dan mengembalikan fungsi yang mengambil b yang mengembalikan jumlah a dan b . Fungsi yang menerima b mengingat a pada penutupannya.