Di lecture ini kita recap Arrow Function di JavaScript/TypeScript. Materinya terlihat panjang karena membahas beberapa bentuk penulisan function sekaligus, tetapi kalau kita pecah, sebenarnya ada 4 hal utama:

1. Function Declaration
2. Function Expression
3. Arrow Function
4. Variasi Arrow Function: body {}, implicit return, parameter tunggal, dan callback

Kita bahas satu per satu dengan contoh yang mudah.

1. Apa itu Function?

Sebelum masuk Arrow Function, pahami dulu konsep dasarnya.

Function adalah blok kode yang bisa kita panggil untuk melakukan suatu pekerjaan.

Misalnya:

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

Kemudian kita bisa menjalankannya:

greet();

Hasil:

Hello

Kalau function menerima data:

function greet(name: string) {
    console.log("Hello " + name);
}

Kita bisa:

greet("John");

Hasil:

Hello John

Jadi secara sederhana:

INPUT
  ↓
FUNCTION
  ↓
PROCESS
  ↓
OUTPUT

2. Cara pertama: Function Declaration

Bentuk pertama adalah:

function print(message: string) {
    console.log(message);
}

Ini disebut:

Function Declaration

Strukturnya:

function namaFunction(parameter: type) {
    // function body
}

Contoh:

function print(message: string) {
    console.log(message);
}

Mari kita pecah:

function
   ↓
print
   ↓
(message: string)
   ↓
{ ... }

• function → keyword untuk membuat function
• print → nama function
• message → parameter
• string → tipe parameter
• { ... } → isi function

Kemudian:

print("Hello World");

3. TypeScript menambahkan type

Di JavaScript kita biasanya menulis:

function print(message) {
    console.log(message);
}

Di TypeScript kita bisa menulis:

function print(message: string) {
    console.log(message);
}

Sekarang TypeScript tahu:

message harus berupa string.

Jadi:

print("Hello");

✅ valid.

Tetapi:

print(123);

❌ error.

Karena 123 adalah number, bukan string.

4. Cara kedua: Function Expression

Cara kedua disebut:

Function Expression

Contohnya:

const sum = function(num1: number, num2: number) {
    return num1 + num2;
};

Perhatikan bahwa sekarang kita tidak memberi nama pada function:

function(num1: number, num2: number) {
    return num1 + num2;
}

Function tersebut kemudian disimpan ke variable:

const sum = ...

Jadi:

        function
           ↓
┌───────────────────────┐
│ function(num1, num2)  │
│ {                     │
│   return num1 + num2  │
│ }                     │
└───────────────────────┘
           ↓
        disimpan
           ↓
         sum

Kemudian kita bisa memanggil:

sum(10, 20);

hasil:

30

5. Kenapa disebut Function Expression?

Karena function tersebut merupakan sebuah expression/value yang disimpan ke variable.

Contoh sederhana:

const number = 10;

Kita menyimpan value 10 ke variable number.

Sama halnya:

const sum = function() {
    // ...
};

Kita menyimpan sebuah function ke variable sum.

Jadi variable juga bisa menyimpan function.

Ini konsep yang sangat penting dalam JavaScript.

6. Cara ketiga: Arrow Function

Nah, sekarang masuk ke inti lecture.

Arrow Function adalah cara yang lebih singkat untuk menulis function.

Contoh function expression biasa:

const sum = function(num1: number, num2: number) {
    return num1 + num2;
};

Dengan Arrow Function:

const sum = (num1: number, num2: number) => {
    return num1 + num2;
};

Perhatikan perbedaannya.

Function expression

const sum = function(num1: number, num2: number) {
    return num1 + num2;
};

Arrow function

const sum = (num1: number, num2: number) => {
    return num1 + num2;
};

Kita menghilangkan:

function

dan menggantinya dengan:

=>

Itulah yang disebut arrow syntax.

7. Kenapa namanya Arrow Function?

Karena ada simbol:

=>

yang bentuknya seperti panah:

========>

Contoh:

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

Kita bisa membacanya secara sederhana:

“sum adalah sebuah function yang menerima a dan b, lalu melakukan sesuatu.”

8. Struktur Arrow Function

Bentuk lengkapnya:

const namaFunction = (parameter) => {
    // body
};

Contoh:

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

Strukturnya:

const greet
    │
    ▼
(parameter)
    │
    ▼
   =>
    │
    ▼
{ function body }

Jadi ada tiga bagian utama:

(name: string) => {
    console.log("Hello " + name);
}

Bagian 1 — Parameter

(name: string)

Bagian 2 — Arrow

=>

Bagian 3 — Body

{
    console.log("Hello " + name);
}

9. Arrow Function sebenarnya adalah Function Expression versi singkat

Ini mental model yang bagus.

Jangan menganggap:

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

sebagai sesuatu yang benar-benar berbeda dari function.

Secara konsep:

const sum = function(a, b) {
    return a + b;
};

dan:

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

sama-sama membuat function yang disimpan dalam variable.

Arrow Function hanya menyediakan syntax yang lebih ringkas.

10. Arrow Function dengan {}

Misalnya:

const sum = (num1: number, num2: number) => {
    return num1 + num2;
};

Di sini kita menggunakan:

{
    return num1 + num2;
}

Karena menggunakan {}, kita mempunyai function body biasa.

Maka kita harus menulis:

return

kalau ingin mengembalikan value.

11. Arrow Function bisa dibuat lebih pendek

Perhatikan function ini:

const sum = (num1: number, num2: number) => {
    return num1 + num2;
};

Function body hanya mempunyai satu statement:

return num1 + num2;

Maka Arrow Function memungkinkan kita menyingkatnya menjadi:

const sum = (num1: number, num2: number) => num1 + num2;

Kita menghapus:

{
    return
}

Ini disebut:

Implicit Return

12. Apa itu Implicit Return?

Implicit berarti:

dilakukan secara otomatis/tidak ditulis secara eksplisit.

Jadi:

const sum = (a: number, b: number) => a + b;

secara konsep berarti:

const sum = (a: number, b: number) => {
    return a + b;
};

JavaScript otomatis menganggap expression setelah => sebagai value yang dikembalikan.

Visual:

(a, b) => a + b
          ↑
          │
      otomatis return

Jadi:

sum(10, 20);

menghasilkan:

30

13. {} vs tanpa {}

Ini bagian yang sangat penting.

Menggunakan {}

const sum = (a: number, b: number) => {
    return a + b;
};

Kita harus menulis:

return

Tanpa {}

const sum = (a: number, b: number) => a + b;

Tidak perlu:

return

Karena return dilakukan secara implicit.

Ingat pola ini:

=> { ... }
   ↓
function body
   ↓
return harus ditulis jika ingin return


=> expression
   ↓
implicit return
   ↓
return otomatis

14. Bagaimana kalau menggunakan parentheses ()?

Misalnya:

const sum = (a: number, b: number) => (
    a + b
);

Ini tetap menggunakan implicit return.

Artinya:

const sum = (a: number, b: number) => (
    a + b
);

sama konsepnya dengan:

const sum = (a: number, b: number) => a + b;

Tidak perlu menulis:

return

Jadi hati-hati dengan pernyataan di lecture yang mengatakan jika menggunakan parentheses maka perlu return. Yang menentukan implicit return adalah apakah setelah => kita menggunakan block {} atau expression langsung.

Contoh yang benar:

const sum = (a: number, b: number) => (a + b);

→ implicit return.

Sedangkan:

const sum = (a: number, b: number) => {
    return a + b;
};

→ explicit return.

15. Arrow Function dengan satu parameter

Sekarang kasus lain.

Misalnya function hanya menerima satu parameter:

const addTen = (number: number) => number + 10;

Kita punya:

(number: number)

Karena hanya ada satu parameter, JavaScript mengizinkan kita menghilangkan parentheses:

const addTen = (number: number) => number + 10;

menjadi:

const addTen = number => number + 10;

Ini valid di JavaScript.

16. Tapi ada masalah di TypeScript

Perhatikan:

const addTen = number => number + 10;

Dalam TypeScript dengan strict checking, TypeScript bisa mengatakan:

Parameter 'number' implicitly has an 'any' type.

Kenapa?

Karena TypeScript tidak tahu:

number ini sebenarnya tipe apa?

Apakah:

number: number

atau:

number: string

atau yang lain?

17. Cara memberikan type pada single parameter

Kalau kita ingin menggunakan syntax:

(number) => ...

kita punya masalah karena:

number: number

tidak bisa ditulis begitu saja tanpa parentheses.

Yang lebih aman dan umum di TypeScript:

const addTen = (number: number) => number + 10;

Jadi jangan terlalu memaksakan menghilangkan parentheses ketika sedang membutuhkan type annotation.

18. Function Type sebagai solusi lain

Lecture juga menunjukkan konsep yang sebelumnya sudah kita pelajari:

Function Type

Misalnya:

let sum: (n: number) => number;

Artinya variable sum harus menyimpan function yang:

menerima 1 parameter
       ↓
     number
       ↓
mengembalikan number

Kemudian:

sum = n => n + 10;

TypeScript sekarang bisa menggunakan type dari sum untuk mengetahui bahwa:

n

adalah:

number

Jadi kita bisa:

sum = n => n + 10;

dan TypeScript memahami:

n: number
return: number

19. Hubungkan dengan Function Type yang kita pelajari

Sebelumnya kita belajar:

let addNumbers: (num1: number, num2: number) => number;

Artinya:

addNumbers harus berupa function
       ↓
menerima number
       ↓
menerima number
       ↓
return number

Kemudian:

addNumbers = (num1, num2) => num1 + num2;

TypeScript bisa mengetahui:

num1: number
num2: number

karena variable addNumbers sudah mempunyai Function Type.

Ini disebut contextual typing.

20. Arrow Function sebagai Callback

Nah, bagian terakhir lecture juga sangat penting.

Arrow Function sering digunakan sebagai callback function.

Contohnya:

document.getElementById("btn")?.addEventListener(
    "click",
    () => {
        console.log("Button clicked");
    }
);

Di sini:

() => {
    console.log("Button clicked");
}

adalah Arrow Function.

Function tersebut diberikan kepada:

addEventListener()

sebagai argument.

21. Apa itu Callback?

Callback adalah:

Function yang diberikan kepada function lain untuk dijalankan nanti.

Contoh sederhana:

function process(callback: () => void) {
    callback();
}

Kita bisa memberikan Arrow Function:

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

Visual:

Arrow Function
      ↓
      ↓ dikirim ke
      ↓
process()
      ↓
process menjalankannya
      ↓
console.log("Hello")

22. Contoh callback dengan parameter

Misalnya:

function calculate(
    a: number,
    b: number,
    callback: (result: number) => void
) {
    const result = a + b;

    callback(result);
}

Kita bisa memanggil:

calculate(10, 20, (result) => {
    console.log(result);
});

Hasil:

30

Di sini:

(result) => {
    console.log(result);
}

adalah Arrow Function yang menjadi callback.

23. Kenapa Arrow Function sangat populer?

Karena syntax-nya singkat dan nyaman, terutama untuk function kecil.

Bandingkan:

Function biasa

const numbers = [1, 2, 3];

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

Arrow Function

const numbers = [1, 2, 3];

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

Versi Arrow Function jauh lebih ringkas.

Hasilnya tetap:

[2, 4, 6]

Karena itu Arrow Function sangat sering digunakan untuk:

• callback
• .map()
• .filter()
• .reduce()
• event handler
• asynchronous code
• React
• TypeScript
• dan banyak pola JavaScript modern lainnya.

24. Beberapa bentuk Arrow Function

Sekarang kita rangkum bentuk-bentuknya.

A. Tidak punya parameter

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

Atau kalau satu expression:

const greet = () => "Hello";

B. Satu parameter

const square = (number: number) => number * number;

Secara JavaScript bisa juga:

const square = number => number * number;

Tetapi dalam TypeScript, jika type tidak bisa diinfer dari context, gunakan:

(number: number)

C. Banyak parameter

const sum = (a: number, b: number) => a + b;

Parentheses wajib digunakan.

D. Menggunakan block body

const sum = (a: number, b: number) => {
    const result = a + b;

    return result;
};

Karena menggunakan {}, kita menulis return secara eksplisit.

E. Implicit return

const sum = (a: number, b: number) => a + b;

Tidak perlu return.

25. Cara membedakan {} dan () pada return

Ini sering membingungkan pemula.

Ini:

const getUser = () => ({
    name: "John",
    age: 30
});

mengembalikan object.

Kenapa menggunakan:

({
    ...
})

?

Karena kalau kita menulis:

const getUser = () => {
    name: "John",
    age: 30
};

{} dianggap sebagai function body, bukan object yang ingin dikembalikan.

Jadi untuk implicit return object, kita biasanya menggunakan:

() => ({
    ...
})

Contoh:

const getUser = () => ({
    name: "John",
    age: 30
});

26. Jangan bingung antara => dan >=

Ini terlihat mirip tetapi berbeda.

=>

adalah:

Arrow Function

Sedangkan:

>=

adalah:

Greater than or equal to

Contoh:

const sum = (a: number, b: number) => a + b;

Arrow:

=>

Sedangkan:

if (age >= 18) {
    // ...
}

adalah operator perbandingan:

>=

27. Hal penting: Arrow Function dan this

Ada satu karakteristik Arrow Function yang sangat penting untuk kamu ketahui.

Arrow Function berbeda dari function biasa dalam cara menangani:

this

Contoh:

const user = {
    name: "John",

    greet() {
        console.log(this.name);
    }
};

Method biasa seperti di atas memiliki perilaku this yang berbeda dengan Arrow Function.

Arrow Function tidak memiliki this sendiri; ia menggunakan this dari lexical scope di sekitarnya.

Contoh:

const user = {
    name: "John",

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

Ini tidak setara dengan method biasa di atas.

Jadi jangan berpikir:

“Arrow Function hanya function biasa yang syntax-nya dipendekkan.”

Untuk penggunaan dasar, memang terasa seperti itu, tetapi secara perilaku ada perbedaan penting, terutama pada this, arguments, dan penggunaan sebagai constructor.

Untuk sekarang, cukup ingat:

Arrow Function punya perilaku this yang berbeda dari regular function.

Nanti ketika belajar this, konsep ini akan menjadi jauh lebih jelas.

28. Function Declaration vs Function Expression vs Arrow Function

Sekarang kita bandingkan.

Ketiganya sama-sama dapat digunakan untuk membuat function.

Yang berbeda terutama adalah syntax dan beberapa perilakunya.

29. Evolusi syntax function

Kamu bisa membayangkannya seperti ini:

Function Declaration

function sum(a: number, b: number) {
    return a + b;
}

↓

Function Expression

const sum = function(a: number, b: number) {
    return a + b;
};

↓

Arrow Function

const sum = (a: number, b: number) => {
    return a + b;
};

↓

Arrow Function + implicit return

const sum = (a: number, b: number) => a + b;

Semakin ke bawah, syntax-nya semakin ringkas.

30. Mental model paling mudah

Anggap function sebagai mesin.

Misalnya:

        10       20
         │        │
         ▼        ▼
       ┌─────────────┐
       │     SUM     │
       └─────────────┘
              │
              ▼
             30

Dengan Arrow Function:

const sum = (a: number, b: number) => a + b;

Bacanya:

“sum adalah mesin yang menerima a dan b, lalu menghasilkan a + b.”

31. Cheat Sheet Arrow Function

Function biasa

function greet(name: string) {
    return "Hello " + name;
}

Function expression

const greet = function(name: string) {
    return "Hello " + name;
};

Arrow function

const greet = (name: string) => {
    return "Hello " + name;
};

Arrow + implicit return

const greet = (name: string) => "Hello " + name;

Tidak ada parameter

const greet = () => "Hello";

Satu parameter

const square = (n: number) => n * n;

Dua parameter

const sum = (a: number, b: number) => a + b;

Multiple statements

const sum = (a: number, b: number) => {
    const result = a + b;

    console.log(result);

    return result;
};

Callback

button?.addEventListener("click", () => {
    console.log("Clicked");
});

🧠 Ringkasan paling penting

Kalau dari lecture ini kamu hanya ingin mengingat beberapa hal, ingat urutan berikut:

FUNCTION DECLARATION
        ↓
function sum(a, b) {
    return a + b;
}


FUNCTION EXPRESSION
        ↓
const sum = function(a, b) {
    return a + b;
};


ARROW FUNCTION
        ↓
const sum = (a, b) => {
    return a + b;
};


IMPLICIT RETURN
        ↓
const sum = (a, b) => a + b;

Dan aturan sederhananya:

() => { ... }
      ↑
  pakai body
  return ditulis manual


() => expression
     ↑
  implicit return
  return otomatis

Untuk parameter:

0 parameter
    ↓
() => ...


1 parameter
    ↓
(n: number) => ...


2+ parameter
    ↓
(a: number, b: number) => ...

Dan penggunaan yang akan sangat sering kamu lihat:

array.map(item => ...)
array.filter(item => ...)
array.reduce((total, item) => ...)
button.addEventListener("click", () => ...)

Jadi inti Arrow Function bukan sekadar menghafal tanda =>. Yang paling penting adalah memahami bahwa:

Arrow Function adalah cara ringkas untuk membuat function, dan bentuknya sangat cocok untuk function kecil serta callback.

Kalau sudah nyaman dengan pola (parameter) => expression, kamu akan mulai merasa banyak kode JavaScript/TypeScript modern jauh lebih mudah dibaca.