Lecture ini membahas Function (fungsi), dan ini adalah salah satu konsep paling penting dalam JavaScript maupun programming secara umum.

Kalau sebelumnya kita belajar if, switch, operator, dan sebagainya, sekarang kita mulai belajar cara membuat kode yang bisa dipakai berulang kali.

Saya akan jelaskan dari paling dasar, lalu masuk ke:

1. Apa itu function
2. Membuat dan memanggil function
3. Function declaration
4. Parameter vs argument
5. Banyak parameter
6. return
7. Menyimpan hasil return
8. Multiple return
9. return tanpa nilai
10. Function memanggil function lain
11. undefined sebagai default return
12. Jebakan return + line break
13. Ringkasan dan mental model

1. Apa itu Function?

Sederhananya:

Function adalah blok kode yang kita beri nama sehingga bisa dijalankan kembali kapan pun kita membutuhkannya.

Misalnya kita punya kode:

console.log("Good morning John");

Lalu kita ingin melakukan hal yang sama 10 kali.

Tanpa function, kita mungkin menulis:

console.log("Good morning John");
console.log("Good morning John");
console.log("Good morning John");
console.log("Good morning John");
console.log("Good morning John");

Ini tidak efisien.

Dengan function:

function greetings() {
    console.log("Good morning John");
}

Kita cukup menulis:

greetings();
greetings();
greetings();
greetings();
greetings();

Jadi kode di dalam function bisa digunakan berkali-kali.

2. Analogi Function

Bayangkan function seperti mesin.

Misalnya kamu punya mesin bernama:

greetings

Kamu masukkan sesuatu:

nama

Mesinnya bekerja:

John
  ↓
[ greetings ]
  ↓
"Good morning John, welcome back"

Kemudian kamu bisa menggunakan mesin yang sama lagi:

Mary
  ↓
[ greetings ]
  ↓
"Good morning Mary, welcome back"

Dan:

Mark
  ↓
[ greetings ]
  ↓
"Good morning Mark, welcome back"

Jadi function membantu kita:

menulis logika sekali, kemudian menggunakannya berkali-kali.

3. Function Built-in vs User-defined Function

Sebelumnya kamu sudah menggunakan function seperti:

console.log();
alert();
prompt();
confirm();

Function-function tersebut sudah disediakan oleh JavaScript atau lingkungan tempat JavaScript berjalan.

Ini disebut built-in function/API.

Contohnya:

console.log("Hello");

Kita tidak membuat isi console.log() sendiri.

Kita hanya menggunakannya.

Sedangkan kita juga bisa membuat function sendiri:

function greetings() {
    console.log("Good morning");
}

Ini disebut:

User-defined function

Artinya function yang dibuat oleh programmer/developer.

4. Cara Membuat Function

Bentuk dasar function:

function functionName() {
    // code
}

Contoh:

function greetings() {
    console.log("Good morning");
}

Mari kita pecah:

function

adalah keyword untuk membuat function.

Kemudian:

greetings

adalah nama function.

Kemudian:

()

adalah tempat untuk parameter.

Nanti kita bahas lebih lanjut.

Kemudian:

{}

adalah function body, yaitu tempat kita menulis kode yang akan dijalankan oleh function.

5. Function Tidak Langsung Dijalankan

Ini konsep yang sangat penting.

Kalau kita hanya menulis:

function greetings() {
    console.log("Good morning");
}

maka "Good morning" belum ditampilkan.

Kenapa?

Karena kita baru membuat function.

Kita belum menjalankannya.

Analogi:

Membuat function = membuat mesin.

Memanggil function = menyalakan mesin.

6. Cara Memanggil Function

Untuk menjalankan function:

greetings();

Nama function:

greetings

ditambah:

()

Jadi:

greetings();

Sekarang kode di dalam function akan dijalankan.

Contoh:

function greetings() {
    console.log("Good morning");
}

greetings();

Output:

Good morning

7. Function Bisa Dipanggil Berkali-kali

Misalnya:

function greetings() {
    console.log("Good morning");
}

greetings();
greetings();
greetings();

Output:

Good morning
Good morning
Good morning

Kode di dalam function hanya kita tulis satu kali.

Tetapi kita bisa menjalankannya berkali-kali.

Inilah salah satu manfaat terbesar function:

Code reuse — menggunakan kembali kode.

8. Function Declaration vs Function Call

Perhatikan dua bagian ini:

function greetings() {
    console.log("Good morning");
}

Ini adalah function declaration.

Kita sedang mengatakan:

“Saya ingin membuat function bernama greetings.”

Sedangkan:

greetings();

adalah function call / function invocation.

Artinya:

“Jalankan function greetings sekarang.”

Jadi:

function greetings() {...}
        ↓
   membuat function

greetings();
        ↓
   menjalankan function

Ini wajib bisa dibedakan.

9. Function Bisa Menerima Data

Sekarang function kita sebelumnya:

function greetings() {
    console.log("Good morning");
}

Masih kurang fleksibel.

Bagaimana kalau kita ingin:

Good morning John
Good morning Mary
Good morning Mark

Kita tentu tidak ingin membuat:

function greetingsJohn() {}
function greetingsMary() {}
function greetingsMark() {}

Itu malah merusak tujuan function.

Kita ingin satu function yang bisa menerima nama berbeda.

Di sinilah kita membutuhkan parameter.

10. Apa itu Parameter?

Kita bisa membuat:

function greetings(name) {
    console.log("Good morning " + name + ", welcome back");
}

Perhatikan:

(name)

name disebut parameter.

Parameter adalah semacam variabel yang disiapkan oleh function untuk menerima data.

Analogi:

function greetings(name)
                    ↑
              tempat input

Function mengatakan:

“Saya punya tempat bernama name. Nanti ketika kamu memanggil saya, kamu bisa memberikan data ke tempat ini.”

11. Apa itu Argument?

Sekarang kita panggil:

greetings("John");

"John" disebut argument.

Jadi:

function greetings(name) {
    ...
}

name → parameter

Sedangkan:

greetings("John");

"John" → argument

Cara mengingatnya:

Parameter = nama tempat penampung di function.

Argument = nilai yang kita kirim ke tempat tersebut.

12. Parameter vs Argument

Contoh:

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

greetings("John");

Alurnya:

"John"
   ↓
argument
   ↓
name
   ↓
parameter
   ↓
"Hello John"

13. Contoh dengan Beberapa User

Sekarang:

function greetings(name) {
    console.log("Good morning " + name + ", welcome back");
}

Kita bisa melakukan:

greetings("John");
greetings("Mary");
greetings("Mark");

Output:

Good morning John, welcome back
Good morning Mary, welcome back
Good morning Mark, welcome back

Perhatikan bahwa kita tidak mengubah function-nya.

Yang berubah hanya argument-nya:

John
Mary
Mark

14. Kalau Tidak Mengirim Argument?

Misalnya:

function greetings(name) {
    console.log("Good morning " + name);
}

greetings();

Kita tidak memberikan argument.

Lalu apa isi name?

JavaScript akan memberikan:

undefined

Jadi hasilnya:

Good morning undefined

Ini nyambung dengan materi undefined yang sudah kamu pelajari sebelumnya.

15. Banyak Parameter

Function tidak hanya bisa mempunyai satu parameter.

Misalnya:

function greetings(name, timeOfDay) {
    console.log(
        `Good ${timeOfDay} ${name}, welcome back`
    );
}

Sekarang ada dua parameter:

name
timeOfDay

Kita bisa memanggil:

greetings("John", "morning");

Hasil:

Good morning John, welcome back

Atau:

greetings("Mary", "evening");

Hasil:

Good evening Mary, welcome back

16. Urutan Argument Sangat Penting

Ini konsep penting.

Function:

function greetings(name, timeOfDay) {
    console.log(`Good ${timeOfDay} ${name}`);
}

Kemudian:

greetings("John", "morning");

JavaScript memasangkan berdasarkan urutan:

Argument pertama
"John"
     ↓
Parameter pertama
name

Argument kedua
"morning"
     ↓
Parameter kedua
timeOfDay

Jadi:

name = "John"
timeOfDay = "morning"

17. Kalau Urutannya Dibalik?

Misalnya:

greetings("morning", "John");

Maka JavaScript tidak tahu bahwa kita salah.

Dia tetap mengikuti urutan:

name = "morning"
timeOfDay = "John"

Sehingga hasilnya bisa menjadi:

Good John morning

Jadi JavaScript menganggap:

Argument pertama → parameter pertama Argument kedua → parameter kedua Argument ketiga → parameter ketiga

dan seterusnya.

18. Template Literal

Lecture juga menghubungkan function dengan template literal.

Daripada:

console.log(
    "Good " + timeOfDay + " " + name + ", welcome back"
);

kita bisa menggunakan:

console.log(
    `Good ${timeOfDay} ${name}, welcome back`
);

Ini lebih mudah dibaca.

Ingat:

`${expression}`

memungkinkan kita memasukkan expression JavaScript ke dalam string template.

Contoh:

let name = "John";

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

Output:

Hello John

19. Sampai sini, Function Kita Seperti Ini

function greetings(name, timeOfDay) {
    console.log(`Good ${timeOfDay} ${name}, welcome back`);
}

greetings("John", "morning");
greetings("Mary", "evening");
greetings("Mark", "afternoon");

Output:

Good morning John, welcome back
Good evening Mary, welcome back
Good afternoon Mark, welcome back

Ini sudah menunjukkan tiga konsep penting:

function declaration
       ↓
function parameters
       ↓
function call + arguments

20. Function Tidak Hanya Bisa Menjalankan Kode, Tapi Juga Mengembalikan Nilai

Sekarang masuk ke konsep yang lebih penting:

return

Sebelumnya function kita melakukan:

console.log(...)

Tetapi function juga bisa menghasilkan sebuah nilai.

Misalnya kita ingin membuat function untuk menjumlahkan dua angka.

function addition(num1, num2) {
    let sum = num1 + num2;

    return sum;
}

Function ini menerima:

num1
num2

kemudian menghitung:

num1 + num2

dan mengembalikan hasilnya.

21. Apa Arti return?

Kata:

return

bisa kita pahami sebagai:

“Kembalikan nilai ini kepada tempat yang memanggil function.”

Contoh:

function addition(num1, num2) {
    return num1 + num2;
}

Kemudian:

addition(20, 30);

Function menghitung:

20 + 30
   ↓
50

Kemudian:

50
↓
return
↓
keluar dari function

22. return Berbeda dengan console.log

Ini sangat penting.

Lihat:

function addition(num1, num2) {
    console.log(num1 + num2);
}

Kemudian:

addition(20, 30);

Output:

50

Tetapi function tersebut tidak mengembalikan 50.

Dia hanya menampilkan 50 ke console.

Sedangkan:

function addition(num1, num2) {
    return num1 + num2;
}

Function menghasilkan nilai 50 yang bisa kita gunakan.

Misalnya:

let result = addition(20, 30);

Sekarang:

result

berisi:

50

23. Analogi console.log vs return

Bayangkan function seperti mesin jus.

console.log

Mesin membuat jus lalu:

“Lihat! Ini jusnya!”

Kemudian ditampilkan.

return

Mesin membuat jus lalu:

“Ini jusnya, silakan kamu bawa.”

Nilainya bisa digunakan oleh bagian program lain.

Jadi:

console.log()
    ↓
menampilkan sesuatu

return
    ↓
mengembalikan sesuatu

Jangan menyamakan keduanya.

24. Menyimpan Nilai return

Contoh:

function addition(num1, num2) {
    return num1 + num2;
}

let add = addition(20, 30);

console.log(add);

Urutannya:

1. Function dipanggil

addition(20, 30)

2. Parameter menerima argument

num1 = 20
num2 = 30

3. Function menghitung

20 + 30 = 50

4. return

return 50;

5. Nilai dikembalikan ke pemanggil

let add = 50;

6. Console

console.log(add);

Output:

50

25. Bahkan Bisa Langsung di console.log

Kita tidak selalu harus membuat variabel.

Bisa langsung:

console.log(addition(20, 30));

Prosesnya:

addition(20, 30)
       ↓
      50
       ↓
console.log(50)
       ↓
     output

Hasil:

50

26. Function Bisa Mengembalikan Boolean

Tidak harus Number atau String.

Misalnya kita membuat:

function checkEligibility(age) {
    if (age >= 18) {
        return true;
    } else {
        return false;
    }
}

Function ini mengembalikan:

true

atau:

false

tergantung umur.

27. Contoh

console.log(checkEligibility(20));

Karena:

20 >= 18

adalah:

true

maka:

true

Kalau:

console.log(checkEligibility(15));

maka:

15 >= 18

adalah:

false

Output:

false

28. Multiple return

Satu function boleh memiliki beberapa return.

Contohnya:

function checkEligibility(age) {
    if (age >= 18) {
        return true;
    } else {
        return false;
    }
}

Ada dua return:

return true;

dan:

return false;

Tetapi dalam satu kali pemanggilan function, hanya satu yang akan tercapai.

Kalau:

checkEligibility(20);

yang terjadi:

age >= 18
    ↓
true
    ↓
return true
    ↓
function selesai

return false tidak dijalankan.

29. return Menghentikan Function

Ini salah satu sifat penting return.

Misalnya:

function test() {
    console.log("A");

    return 100;

    console.log("B");
}

Kalau kita panggil:

test();

Output:

A

Bukan:

A
B

Kenapa?

Karena:

return 100;

langsung mengakhiri function.

Kode:

console.log("B");

tidak pernah dijalankan.

30. return Tanpa Nilai

return juga bisa digunakan tanpa memberikan nilai.

Contoh:

function allowVoting(age) {
    if (!checkEligibility(age)) {
        return;
    }

    console.log("Please cast your vote");
}

Perhatikan:

return;

Tidak ada nilai setelahnya.

Artinya:

“Keluar dari function sekarang.”

Bukan:

“Kembalikan data tertentu.”

31. Contoh return sebagai Early Exit

Misalnya:

function allowVoting(age) {
    if (!checkEligibility(age)) {
        return;
    }

    console.log("Please cast your vote");
}

Kalau:

allowVoting(15);

Maka:

15 >= 18
   ↓
false
   ↓
!false
   ↓
true
   ↓
return
   ↓
keluar dari function

Sehingga:

console.log("Please cast your vote");

tidak dijalankan.

Kalau:

allowVoting(20);

Maka:

20 >= 18
   ↓
true
   ↓
!true
   ↓
false

Kondisi if tidak terpenuhi.

Jadi return tidak dijalankan.

Program lanjut ke:

console.log("Please cast your vote");

Output:

Please cast your vote

32. Function Bisa Memanggil Function Lain

Ini juga sangat penting.

Di dalam:

allowVoting()

kita memanggil:

checkEligibility()

Ini diperbolehkan.

Function bisa menggunakan function lainnya.

Contoh:

function checkEligibility(age) {
    if (age >= 18) {
        return true;
    }

    return false;
}

function allowVoting(age) {
    if (!checkEligibility(age)) {
        return;
    }

    console.log("Please cast your vote");
}

Alurnya:

allowVoting(20)
       ↓
checkEligibility(20)
       ↓
     true
       ↓
!true = false
       ↓
tidak return
       ↓
"Please cast your vote"

Ini menunjukkan bagaimana function dapat dibangun di atas function lain.

33. Function yang Tidak Mengembalikan Nilai

Contoh:

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

Function ini tidak memiliki:

return ...

Jadi function tersebut tidak secara eksplisit mengembalikan nilai.

Kalau kita melakukan:

let x = greetings("John");

maka x berisi:

undefined

Kenapa?

Karena:

Jika function tidak melakukan return dengan nilai secara eksplisit, nilai hasil pemanggilannya adalah undefined.

34. return; Juga Menghasilkan undefined

Misalnya:

function test() {
    return;
}

let x = test();

console.log(x);

Output:

undefined

Jadi:

return;

secara hasil mengembalikan undefined, sekaligus menghentikan function.

35. Tidak Ada return vs return;

Keduanya menghasilkan undefined sebagai nilai hasil function.

Tidak ada return

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

Return tanpa nilai

function test() {
    console.log("Hello");
    return;
}

Keduanya jika disimpan:

let x = test();

akan membuat:

x === undefined

Perbedaannya:

tidak ada return
→ function berjalan sampai akhir

return;
→ function berhenti saat mencapai return

Ini perbedaan yang penting.

36. Jebakan Besar: return dan Line Break

Ini salah satu bagian lecture yang sangat penting.

Jangan menulis:

function test() {
    return
    true;
}

dan berharap hasilnya:

true

Bukan begitu.

JavaScript bisa memperlakukan return seperti:

return;

karena adanya Automatic Semicolon Insertion (ASI).

Secara konsep JavaScript membaca:

return;
true;

Akibatnya function mengembalikan:

undefined

37. Cara yang Benar

Tulis nilai tepat setelah return:

function test() {
    return true;
}

Atau jika expression panjang:

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

Boleh juga:

function test() {
    return (
        10 +
        20 +
        30
    );
}

Yang penting jangan memisahkan return dari expression dengan line break secara sembarangan.

38. Kenapa JavaScript Melakukan Itu?

JavaScript memiliki mekanisme Automatic Semicolon Insertion (ASI).

Kalau kita menulis:

return
true;

JavaScript bisa menganggap:

return;

kemudian:

true;

sebagai statement terpisah.

Karena return; sudah selesai, function langsung berhenti.

Jadi:

function test() {
    return
    true;
}

hasilnya:

undefined

Bukan:

true

39. Cara Aman Mengingat return

Untuk sekarang, gunakan aturan sederhana:

Kalau return mengembalikan nilai, tulis nilainya pada baris yang sama.

Benar:

return true;

Benar:

return num1 + num2;

Benar:

return "Hello";

Hindari:

return
true;

40. Satu Function Hanya Menghasilkan Satu Nilai pada Satu Pemanggilan

Lecture juga mengatakan function bisa memiliki banyak return, tetapi tidak mengembalikan banyak nilai sekaligus.

Contoh:

function check(age) {
    if (age >= 18) {
        return true;
    }

    return false;
}

Untuk satu pemanggilan:

check(20);

hasilnya hanya:

true

Bukan:

true + false

Karena ketika:

return true;

tercapai, function langsung berhenti.

41. Gambaran Besar Function

Sekarang kita bisa melihat function sebagai sebuah sistem:

              ARGUMENT
                  ↓
        ┌─────────────────┐
        │    FUNCTION     │
        │                 │
        │   parameter     │
        │       ↓         │
        │    proses       │
        │       ↓         │
        │     return      │
        └────────┬────────┘
                 ↓
              HASIL

Contoh:

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

let result = addition(20, 30);

Visual:

20 ─────┐
        ↓
      addition
        ↑
30 ─────┘
        ↓
     20 + 30
        ↓
       50
        ↓
      result

42. Empat Konsep Function yang Wajib Dipahami

Kalau masih pemula, fokus dulu pada empat hal ini:

1. Define

Membuat function:

function greetings() {
    ...
}

2. Call

Menjalankan function:

greetings();

3. Parameter & Argument

Mengirim data:

function greetings(name) {
    ...
}

greetings("John");

4. Return

Menghasilkan data:

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

43. Perbandingan Semua Contoh

44. Contoh Function yang Lengkap

Mari kita gabungkan semuanya:

function calculateTotal(price, quantity) {
    let total = price * quantity;

    return total;
}

let result = calculateTotal(100, 3);

console.log(result);

Apa yang terjadi?

Function:

function calculateTotal(price, quantity)

memiliki dua parameter:

price
quantity

Kemudian dipanggil:

calculateTotal(100, 3)

Argument:

100
3

dipasangkan:

price = 100
quantity = 3

Kemudian:

let total = price * quantity;

menjadi:

100 * 3
= 300

Kemudian:

return total;

mengembalikan:

300

Kemudian:

let result = 300;

Output:

300

45. Function Sangat Berguna untuk Menghindari Duplikasi

Bayangkan kita ingin menghitung total belanja berkali-kali.

Tanpa function:

let total1 = 100 * 3;
let total2 = 250 * 2;
let total3 = 500 * 4;

Bisa saja.

Tapi kalau logikanya kompleks:

let subtotal = price * quantity;
let discount = subtotal * 0.1;
let tax = (subtotal - discount) * 0.11;
let total = subtotal - discount + tax;

Kita tidak ingin menulis ulang semua logika tersebut setiap kali.

Kita bisa membuat:

function calculateTotal(price, quantity) {
    let subtotal = price * quantity;
    let discount = subtotal * 0.1;
    let tax = (subtotal - discount) * 0.11;

    return subtotal - discount + tax;
}

Kemudian:

let total1 = calculateTotal(100, 3);
let total2 = calculateTotal(250, 2);
let total3 = calculateTotal(500, 4);

Inilah kekuatan function.

46. Bedakan “Membuat” dan “Menggunakan”

Ini sering menjadi kebingungan pemula.

Saat kita menulis:

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

kita belum menghitung 20 + 30.

Kita baru membuat alat untuk melakukan penjumlahan.

Baru saat:

addition(20, 30);

alat tersebut digunakan.

Jadi:

function addition(...)
        ↓
"buat alat"

addition(20, 30)
        ↓
"gunakan alat"

47. Hubungan dengan Materi Sebelumnya

Lecture ini sebenarnya sangat berhubungan dengan materi-materi sebelumnya.

prompt

Kita bisa memasukkan data:

let age = Number(prompt("Enter age"));

if

Function bisa menggunakan if:

function checkEligibility(age) {
    if (age >= 18) {
        return true;
    }

    return false;
}

Operator

Function bisa menggunakan operator:

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

Boolean

Function bisa mengembalikan:

true
false

Template literal

Function bisa menggunakan:

`Hello ${name}`

Jadi function bukan konsep yang berdiri sendiri.

Function adalah wadah untuk mengorganisir dan menggunakan kembali berbagai konsep yang sudah kita pelajari.

48. Mental Model yang Paling Penting

Untuk sekarang, bayangkan function seperti ini:

        INPUT
          ↓
   ┌──────────────┐
   │   FUNCTION   │
   │              │
   │    proses    │
   │              │
   └──────┬───────┘
          ↓
        OUTPUT

Contoh:

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

INPUT
20, 30
  ↓
addition()
  ↓
20 + 30
  ↓
50
  ↓
OUTPUT

Parameter adalah tempat input.

Argument adalah input yang dikirim.

Function body adalah proses.

return adalah output.

49. Cheat Sheet

Membuat function

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

Memanggil function

greetings();

Dengan parameter

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

Dengan argument

greetings("John");

Banyak parameter

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

Menyimpan return

let result = addition(20, 30);

Langsung menggunakan return

console.log(addition(20, 30));

Return Boolean

function isAdult(age) {
    if (age >= 18) {
        return true;
    }

    return false;
}

Return tanpa nilai

function test() {
    return;
}

Artinya:

keluar dari function.

Tidak ada return

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

Hasil pemanggilannya:

undefined

Jangan lakukan ini

return
true;

Lakukan ini

return true;

50. Ringkasan Besar

Kalau diringkas, function bekerja seperti ini:

1. BUAT FUNCTION
       ↓
function name(parameter) {
    ...
}

2. PANGGIL FUNCTION
       ↓
name(argument);

3. ARGUMENT MASUK KE PARAMETER
       ↓
argument → parameter

4. FUNCTION MENJALANKAN BODY
       ↓
proses

5. JIKA ADA RETURN
       ↓
nilai dikembalikan

6. HASIL BISA DIGUNAKAN
       ↓
let result = function(...);

Dan 5 poin yang paling wajib kamu kuasai dari lecture ini adalah:

① Function = blok kode yang bisa digunakan kembali.

② Function harus dipanggil agar kode di dalamnya dijalankan.

③ Parameter = tempat menerima data, argument = data yang dikirim.

④ return mengembalikan nilai dan sekaligus menghentikan function.

⑤ Kalau function tidak mengembalikan nilai secara eksplisit, hasil pemanggilannya adalah undefined.

Kalau konsep ini sudah kuat, materi function berikutnya akan jauh lebih mudah karena kemungkinan besar mulai masuk ke scope, function expression, arrow function, callback, dan konsep function lainnya.