Lecture ini membahas Arrow Function, salah satu syntax JavaScript modern yang sangat sering kamu temui nanti, terutama ketika masuk ke array methods, callback, map(), filter(), reduce(), event listener, dan lain-lain.

Yang paling penting: jangan menganggap arrow function sebagai function yang sepenuhnya berbeda. Untuk sekarang, anggap dulu bahwa arrow function adalah cara menulis function dengan syntax yang lebih ringkas, tetapi nanti ada perbedaan penting terutama pada this.

1. Apa Itu Arrow Function?

Arrow function diperkenalkan di ES6 / ES2015.

Sebelumnya kita bisa membuat function expression seperti:

let greet = function () {
    console.log("Greeting function called");
};

Ini disebut function expression.

Sekarang kita bisa menuliskannya dengan arrow function:

let greet = () => {
    console.log("Arrow function called");
};

Perhatikan perbedaannya:

Function expression

let greet = function () {
    console.log("Hello");
};

Arrow function

let greet = () => {
    console.log("Hello");
};

Bagian:

() =>

adalah arrow syntax.

Kenapa disebut arrow?

Karena bentuknya seperti panah:

=>

2. Hubungkan dengan Function Expression

Kamu sebelumnya sudah belajar bahwa function adalah value.

Contoh:

let greet = function () {
    console.log("Hello");
};

Yang terjadi:

function
   ↓
function object
   ↓
disimpan ke variable greet

Kemudian:

greet();

memanggil function tersebut.

Arrow function juga sama secara konsep:

let greet = () => {
    console.log("Hello");
};

arrow function
      ↓
function value
      ↓
disimpan di greet
      ↓
greet()
      ↓
function dijalankan

Jadi jangan berpikir greet adalah hasil dari function.

greet menyimpan function itu sendiri.

3. Struktur Dasar Arrow Function

Bentuk paling umum:

const functionName = (parameter) => {
    // function body
};

Contoh:

const greet = (name) => {
    console.log("Hello " + name);
};

Kita bisa membaginya:

const greet = (name) => {
    console.log("Hello " + name);
};
│       │       │      │
│       │       │      └── function body
│       │       └───────── arrow
│       └───────────────── parameter
└───────────────────────── variable

4. Arrow Function Tanpa Parameter

Kalau function tidak membutuhkan parameter:

const greet = () => {
    console.log("Hello");
};

Perhatikan:

()

Tetap harus ada.

Jadi:

() => {}

berarti:

“Saya membuat function yang tidak mempunyai parameter.”

Contoh:

const sayHello = () => {
    console.log("Hello World");
};

sayHello();

Output:

Hello World

5. Arrow Function dengan Satu Parameter

Misalnya:

const greet = (name) => {
    console.log("Hello " + name);
};

Kita punya satu parameter:

name

Karena hanya ada satu parameter, JavaScript mengizinkan kita menghilangkan tanda kurung:

const greet = name => {
    console.log("Hello " + name);
};

Ini valid.

Jadi kedua bentuk berikut sama-sama valid:

const greet = (name) => {
    console.log("Hello " + name);
};

dan:

const greet = name => {
    console.log("Hello " + name);
};

Tapi kalau beginner?

Saya sarankan tetap terbiasa membaca:

(name) =>

karena lebih jelas bahwa name adalah parameter.

6. Kalau Lebih dari Satu Parameter?

Misalnya:

const greet = (name, time) => {
    console.log("Hello " + name);
    console.log("Good " + time);
};

Karena ada dua parameter:

name, time

maka tanda kurung wajib.

Tidak boleh:

const greet = name, time => {
};

Itu syntax error.

Jadi aturan sederhananya:

Mental model:

0 parameter
     ↓
()

1 parameter
     ↓
name
atau
(name)

2+ parameter
     ↓
(name, age)

7. Contoh dari Lecture

Misalnya:

const greet = (name, timeOfDay) => {
    console.log(`Hello ${name}, good ${timeOfDay}`);
};

Kita panggil:

greet("John", "morning");

JavaScript memasangkan argument dengan parameter berdasarkan posisi:

name        ← "John"
timeOfDay   ← "morning"

Kemudian:

console.log(`Hello ${name}, good ${timeOfDay}`);

menjadi:

Hello John, good morning

Ini sebenarnya sama dengan function biasa.

8. Arrow Function dengan Body Satu Baris

Sekarang masuk ke bagian yang sangat penting.

Misalnya:

const greet = (name) => {
    console.log(`Hello ${name}`);
};

Function body hanya mempunyai satu statement:

console.log(`Hello ${name}`);

Kita bisa menulisnya menjadi:

const greet = name => console.log(`Hello ${name}`);

Curly braces:

{
}

bisa dihilangkan.

Jadi:

Dengan curly braces

const greet = name => {
    console.log(`Hello ${name}`);
};

Tanpa curly braces

const greet = name => console.log(`Hello ${name}`);

Keduanya bisa bekerja.

9. Hati-Hati: Curly Braces Berkaitan dengan return

Nah, ini bagian paling penting dari lecture ini.

Misalnya kita punya function untuk menjumlahkan dua angka.

Function biasa:

function add(x, y) {
    return x + y;
}

Arrow function:

const add = (x, y) => {
    return x + y;
};

Ini valid.

Tapi karena body-nya cuma satu expression:

x + y

kita bisa menulis lebih pendek:

const add = (x, y) => x + y;

Dan ini otomatis me-return:

x + y

10. Apa Itu Implicit Return?

Ketika kita menulis:

const add = (x, y) => x + y;

kita tidak menulis:

return

Tetapi JavaScript secara otomatis mengembalikan hasil expression tersebut.

Ini disebut:

implicit return

Jadi:

const add = (x, y) => x + y;

secara konsep mirip:

const add = (x, y) => {
    return x + y;
};

Bedanya, yang pertama menggunakan implicit return, sedangkan yang kedua menggunakan explicit return.

11. Ini Kesalahan yang Sering Dilakukan Pemula

Perhatikan:

const add = (x, y) => {
    x + y;
};

Apakah ini me-return hasil x + y?

Tidak.

Karena kita menggunakan {}.

Ketika menggunakan block body:

{
    x + y;
}

kita harus menulis:

return

Jadi:

const add = (x, y) => {
    return x + y;
};

Baru menghasilkan nilai.

12. Bandingkan Tiga Bentuk Ini

Bentuk 1 — Explicit return

const add = (x, y) => {
    return x + y;
};

Hasil:

add(20, 30); // 50

Bentuk 2 — Implicit return

const add = (x, y) => x + y;

Hasil:

add(20, 30); // 50

Bentuk 3 — Tidak ada return

const add = (x, y) => {
    x + y;
};

Hasil:

add(20, 30); // undefined

Karena:

ada {} 
   ↓
block body
   ↓
tidak ada return
   ↓
undefined

Ini salah satu hal yang wajib kamu kuasai.

13. Cara Mengingat {} vs Tanpa {}

Gunakan mental model ini:

Arrow function
      │
      ├── ada { }
      │      ↓
      │   perlu return
      │   jika ingin mengembalikan nilai
      │
      └── tidak ada { }
             ↓
          expression
             ↓
        implicit return

Contoh:

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

→ otomatis return.

Sedangkan:

const add = (a, b) => {
    return a + b;
};

→ harus menulis return.

14. Kalau Function Punya Banyak Statement?

Misalnya:

const calculate = (a, b) => {
    let result = a + b;
    console.log(result);
    return result;
};

Ada beberapa statement:

let result = ...
console.log(...)
return ...

Maka kita menggunakan:

{
    ...
}

Tidak bisa dibuat menjadi satu expression sederhana.

Jadi:

Satu expression

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

Banyak statement

const add = (a, b) => {
    let result = a + b;
    console.log(result);
    return result;
};

15. Jangan Salah Memahami “Satu Baris”

Lecture mengatakan kalau function body hanya satu line, curly braces bisa dihilangkan.

Yang lebih tepat secara konsep adalah:

Curly braces bisa dihilangkan ketika arrow function menggunakan satu expression sebagai concise body.

Jadi bukan sekadar:

“Kalau satu baris pasti boleh.”

Misalnya:

const test = () => {
    console.log("Hello");
};

Bisa ditulis:

const test = () => console.log("Hello");

Tetapi kalau kita butuh beberapa statement:

const test = () => {
    let x = 10;
    console.log(x);
};

maka kita membutuhkan block body.

16. Function Expression vs Arrow Function

Sekarang bandingkan secara langsung.

Function expression

const add = function (x, y) {
    return x + y;
};

Arrow function

const add = (x, y) => {
    return x + y;
};

Arrow + implicit return

const add = (x, y) => x + y;

Kita bisa melihat evolusinya:

Function expression
        ↓
const add = function (x, y) {
    return x + y;
};

        ↓ lebih ringkas

Arrow function
        ↓
const add = (x, y) => {
    return x + y;
};

        ↓ lebih ringkas lagi

const add = (x, y) => x + y;

17. Kenapa Arrow Function Sangat Populer?

Karena JavaScript modern sering menggunakan function sebagai callback.

Misalnya nanti kamu belajar:

numbers.map(...)

Kamu akan sering melihat:

numbers.map(number => number * 2);

Daripada:

numbers.map(function(number) {
    return number * 2;
});

Arrow function membuat kode callback jauh lebih pendek.

18. Contoh dengan Array

Misalnya:

const numbers = [1, 2, 3, 4];

Kita ingin mengalikan setiap angka dengan 2.

Nanti dengan map():

const result = numbers.map(number => number * 2);

Perhatikan:

number => number * 2

Ini arrow function.

Kita tidak perlu menulis:

function(number) {
    return number * 2;
}

Karena arrow function memiliki implicit return.

19. Arrow Function dan Callback

Ini sangat berhubungan dengan lecture sebelumnya tentang callback.

Misalnya:

setTimeout(function () {
    console.log("Hello");
}, 1000);

Kita bisa menulis:

setTimeout(() => {
    console.log("Hello");
}, 1000);

Atau kalau satu expression:

setTimeout(() => console.log("Hello"), 1000);

Jadi:

callback biasa
    ↓
function () {
    ...
}

        ↓

arrow callback
    ↓
() => {
    ...
}

Makanya kamu akan sering melihat arrow function di JavaScript modern.

20. Arrow Function Bukan Sekadar “Menghapus function”

Untuk tahap lecture ini, memang kita belajar:

Arrow function adalah syntax yang lebih pendek.

Itu benar sebagai pengantar.

Tetapi ada hal penting yang sengaja belum dibahas secara mendalam oleh lecture:

Arrow function mempunyai perilaku berbeda terhadap this.

Lecture sendiri sudah memberi warning tentang ini.

Misalnya function biasa:

function test() {
    console.log(this);
}

dan:

const test = () => {
    console.log(this);
};

Tidak selalu menghasilkan perilaku this yang sama.

Kenapa?

Karena arrow function tidak memiliki this sendiri seperti function biasa.

Ini nanti akan menjadi topik khusus.

Untuk sekarang:

Jangan dulu menyamakan arrow function dan regular function 100%.

Lebih aman mengatakan:

“Arrow function adalah syntax function yang lebih ringkas, tetapi mempunyai beberapa perbedaan perilaku penting.”

21. Hubungkan dengan Function yang Sudah Kamu Pelajari

Sebelumnya kamu belajar:

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

Sekarang bisa ditulis:

const addition = (a, b) => {
    return a + b;
};

Dan bisa dipersingkat lagi:

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

Jadi bukan konsep baru sepenuhnya.

Konsep lama:

function
parameter
argument
return

tetap berlaku.

Yang berubah terutama adalah syntax penulisannya dan beberapa perilaku khusus.

22. Default Parameter + Arrow Function

Ini juga bagus untuk menghubungkan dengan lecture sebelumnya.

Kamu baru saja belajar:

function greet(name = "Guest") {
    console.log("Hello " + name);
}

Dengan arrow function:

const greet = (name = "Guest") => {
    console.log("Hello " + name);
};

Atau:

const greet = (name = "Guest") => console.log("Hello " + name);

Jadi default parameter tetap bisa digunakan.

23. Arrow Function dengan Banyak Parameter + Default

Misalnya:

const calculate = (price, tax = 10) => {
    return price + (price * tax / 100);
};

Pemanggilan:

calculate(100);

→ tax = 10

Sedangkan:

calculate(100, 20);

→ tax = 20

Jadi konsep default parameter tidak berubah.

24. Arrow Function Bisa Mengembalikan Object

Ini sedikit lebih advanced, tetapi penting nanti.

Misalnya kita ingin:

const createUser = () => {
    return {
        name: "Budi",
        age: 25
    };
};

Kalau ingin menggunakan implicit return, tidak bisa langsung:

const createUser = () => {
    name: "Budi",
    age: 25
};

Itu dianggap block, bukan object.

Untuk implicit return object, gunakan:

const createUser = () => ({
    name: "Budi",
    age: 25
});

Perhatikan:

() => ({
    ...
})

Ini artinya object tersebut adalah expression yang di-return.

Catatan: bagian ini belum perlu kamu hafalkan sekarang. Yang penting tahu bahwa {} punya arti khusus dalam arrow function.

25. Kesalahan yang Sering Terjadi

Kesalahan 1 — Lupa return

❌:

const add = (a, b) => {
    a + b;
};

Hasil:

undefined

✅:

const add = (a, b) => {
    return a + b;
};

atau:

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

Kesalahan 2 — Mengira () selalu wajib

Untuk satu parameter:

const greet = name => {
};

valid.

Tetapi:

const greet = (name, age) => {
};

wajib menggunakan ().

Kesalahan 3 — Menulis function lagi

❌:

const greet = function => {
};

Arrow function tidak menggunakan function.

✅:

const greet = () => {
};

26. Perbandingan Lengkap

Untuk this, jangan terlalu dipikirkan dulu. Kita akan membahasnya nanti.

27. Cheat Sheet Syntax Arrow Function

Tidak ada parameter

const greet = () => {
    console.log("Hello");
};

Satu parameter

const greet = (name) => {
    console.log(name);
};

Bisa dipersingkat:

const greet = name => {
    console.log(name);
};

Banyak parameter

const greet = (name, age) => {
    console.log(name, age);
};

Satu expression + implicit return

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

Satu expression dengan {}

const add = (a, b) => {
    return a + b;
};

Banyak statement

const calculate = (a, b) => {
    let result = a + b;
    console.log(result);
    return result;
};

28. Visualisasi Cara Membaca Arrow Function

Misalnya:

const add = (x, y) => x + y;

Baca dari kiri:

const add
   ↓
buat variable bernama add

(x, y)
   ↓
parameter function

=>
   ↓
ini arrow function

x + y
   ↓
expression yang otomatis di-return

Jadi secara bahasa manusia:

“Buat sebuah function bernama add, yang menerima x dan y, lalu mengembalikan hasil x + y.”

29. Mental Model Paling Penting

Untuk sekarang, simpan tiga pola ini di kepala:

1. Tidak ada parameter

() => ...


2. Ada parameter

(x, y) => ...


3. Satu expression yang ingin dikembalikan

(x, y) => x + y

Dan satu aturan emas:

Ada { }
   ↓
kalau ingin return → tulis return

Tidak ada { }
   ↓
expression otomatis di-return

🎯 Inti Lecture Ini

Kalau saya sederhanakan seluruh lecture menjadi beberapa poin:

1. Arrow function adalah syntax function modern

const greet = () => {
    console.log("Hello");
};

2. Arrow function tidak menggunakan keyword function

❌:

const greet = function () => {};

✅:

const greet = () => {};

3. Parameter ditulis di depan =>

const greet = (name) => {};

Satu parameter boleh tanpa ():

const greet = name => {};

4. Lebih dari satu parameter harus menggunakan ()

const add = (a, b) => {};

5. Kalau menggunakan {}, return harus ditulis secara eksplisit

const add = (a, b) => {
    return a + b;
};

6. Kalau tidak menggunakan {}, expression otomatis di-return

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

Ini disebut implicit return.

7. Arrow function sangat sering digunakan sebagai callback

Misalnya:

setTimeout(() => {
    console.log("Hello");
}, 1000);

Dan nanti:

numbers.map(number => number * 2);

akan menjadi pola yang sangat umum.

🧠 Satu kalimat untuk mengingat lecture ini

Arrow function adalah cara modern dan ringkas untuk menulis function; bentuk () => expression memiliki implicit return, sedangkan bentuk () => { ... } membutuhkan return jika kita ingin mengembalikan nilai.

Kalau kamu benar-benar memahami perbedaan => expression vs => { return expression; }, kamu sudah menguasai bagian paling penting dari lecture ini.