Di lecture ini kamu masuk ke konsep yang sangat penting dalam JavaScript, yaitu Function Expression.

Kalau lecture sebelumnya membahas:

“Bagaimana cara membuat dan menggunakan function?”

Sekarang pertanyaannya menjadi:

“Ternyata function di JavaScript juga bisa diperlakukan sebagai sebuah value. Maksudnya apa?”

Mari kita bedah pelan-pelan.

1. Konsep utama: Function adalah sebuah value

Sebelumnya kamu sudah belajar bahwa variable bisa menyimpan berbagai macam value.

Misalnya:

let name = "John";
let age = 25;
let isLogin = true;

Kita bisa gambarkan:

name    → "John"
age     → 25
isLogin → true

Nah, di JavaScript, function juga bisa menjadi value.

Jadi kita bisa melakukan:

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

Sekarang:

greetings → function

Artinya variable greetings menyimpan sebuah function.

Inilah ide utama dari Function Expression.

2. Ada dua cara utama membuat function

Untuk sekarang kamu akan melihat dua syntax:

Function Declaration

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

Function Expression

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

Keduanya sama-sama membuat function yang bisa dipanggil:

greetings();

Output:

Good morning

Tetapi cara JavaScript memperlakukan keduanya sedikit berbeda.

3. Function Declaration

Ini adalah syntax yang sudah kamu pelajari sebelumnya:

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

Strukturnya:

function
   ↓
nama function
   ↓
greetings
   ↓
()
   ↓
parameter
   ↓
{}
   ↓
function body

Contoh:

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

Di sini:

• function → keyword
• greetings → nama function
• () → tempat parameter
• {} → body function

Untuk menjalankannya:

greetings();

4. Function Expression

Sekarang kita menggunakan variable:

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

Perhatikan perbedaannya.

Pada Function Declaration:

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

Nama function adalah:

greetings

Sedangkan pada Function Expression:

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

Yang terjadi adalah:

let greetings = function() {...}
     ↑                 ↑
  variable           function

Jadi kita sebenarnya mengatakan:

“Buat sebuah function, lalu simpan function tersebut ke variable greetings.”

5. Kenapa disebut Function Expression?

Karena function tersebut merupakan bagian dari sebuah expression yang menghasilkan sebuah value.

Contohnya:

let x = 10;

Di sini:

10

adalah value yang disimpan ke x.

Sekarang:

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

Di sini value yang disimpan ke x adalah:

function

Jadi:

x → function

Inilah yang disebut Function Expression.

6. Function expression biasanya tidak punya nama setelah function

Perhatikan:

Declaration

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

Ada nama:

greetings

Expression

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

Tidak ada nama setelah function.

Bukan:

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

Untuk materi dasar ini, cukup pahami pola:

let namaVariable = function() {
    // body
};

7. Jangan bingung: greetings dan greetings() berbeda

Ini bagian yang sangat penting.

Misalnya:

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

Kalau kita melakukan:

console.log(greetings);

kita tidak menjalankan function.

Kita hanya meminta JavaScript:

“Tampilkan value yang disimpan oleh greetings.”

Karena greetings menyimpan function, console akan menampilkan representasi function tersebut.

Secara konsep:

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

Sedangkan:

greetings();

Ini berarti:

“Jalankan function yang disimpan di dalam greetings.”

Jadi:

greetings;

→ mengambil function

Sedangkan:

greetings();

→ menjalankan function

8. Analogi sederhana

Bayangkan greetings adalah sebuah remote control.

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

Variable:

greetings

memegang “alat” function.

Kalau kamu hanya melihat remote:

greetings

kamu hanya memiliki alatnya.

Tapi kalau kamu menekan tombol:

greetings();

function dijalankan.

Jadi:

greetings
   ↓
"function yang disimpan"

greetings()
   ↓
"jalankan function"

Ini konsep yang harus benar-benar kamu ingat.

9. Kenapa muncul undefined?

Lecture memberikan contoh seperti:

console.log(greetings());

Misalnya:

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

console.log(greetings());

Hasilnya kira-kira:

Good morning
undefined

Kenapa?

Mari kita urutkan.

Pertama:

greetings()

menjalankan function:

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

Function tersebut melakukan:

console.log("Good morning");

Maka muncul:

Good morning

Tetapi function tersebut tidak melakukan return.

Sehingga hasil function:

greetings()

adalah:

undefined

Kemudian:

console.log(greetings());

berarti:

console.log(undefined)

Maka muncul:

undefined

10. Ingat perbedaan console.log() dan return

Ini melanjutkan materi function sebelumnya.

Contoh:

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

Function ini menampilkan sesuatu, tetapi tidak mengembalikan value.

Sedangkan:

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

Function ini mengembalikan value.

Contoh:

let result = addition(10, 20);

Maka:

result → 30

Jadi:

console.log()

“Tampilkan sesuatu.”

return

“Kembalikan sesuatu ke tempat function dipanggil.”

11. Function expression juga bisa menerima parameter

Tidak hanya function declaration yang bisa memiliki parameter.

Misalnya:

let greetings = function(name, timeOfDay) {
    let message = `Good ${timeOfDay} ${name}, welcome back`;

    console.log(message);
};

Sekarang function punya dua parameter:

name
timeOfDay

Kita bisa memanggil:

greetings("John", "morning");

Output:

Good morning John, welcome back

Cara kerjanya:

greetings("John", "morning")
          ↓        ↓
        name    timeOfDay
          ↓        ↓
       "John"   "morning"

Sehingga function secara efektif bekerja seperti:

let message = `Good morning John, welcome back`;

12. Parameter vs Argument

Ini mengulang konsep lecture sebelumnya, tetapi sekarang diterapkan pada Function Expression.

let greetings = function(name, timeOfDay) {
    ...
};

name dan timeOfDay disebut:

parameter

Sedangkan:

greetings("John", "morning");

"John" dan "morning" disebut:

argument

Sederhananya:

13. Function Expression juga bisa menggunakan return

Misalnya kita ingin membuat function penjumlahan.

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

Sekarang:

let result = addition(10, 25);

console.log(result);

Output:

35

Alurnya:

addition(10, 25)
       ↓
num1 = 10
num2 = 25
       ↓
10 + 25
       ↓
return 35
       ↓
result = 35

Jadi Function Expression memiliki kemampuan yang sama seperti function declaration dalam hal:

• parameter
• argument
• return
• local variable
• if
• loop
• memanggil function lain
• dan sebagainya.

14. Jadi Function Declaration dan Function Expression hampir sama

Contohnya:

Declaration

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

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

Expression

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

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

Output keduanya:

30

Untuk sekarang, kamu bisa menganggap:

Kebanyakan kemampuan function-nya sama. Yang berbeda terutama cara function dibuat dan beberapa behavior JavaScript.

15. Perbedaan pertama: semicolon

Ini salah satu poin yang ditekankan lecture.

Function Declaration

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

Tidak perlu:

;

setelah }.

Kenapa?

Karena Function Declaration merupakan sebuah declaration/code block, bukan assignment statement seperti berikut.

Function Expression

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

Di sini ada:

let greetings = ...

Ini adalah sebuah assignment/declaration statement.

Maka kita menutup statement dengan:

;

Jadi pola yang baik:

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

vs

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

Perhatikan ; pada Function Expression.

16. Tapi kalau lupa ;, apakah error?

Tidak selalu.

JavaScript memiliki mekanisme bernama Automatic Semicolon Insertion (ASI).

Jadi kode:

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

biasanya tetap berjalan.

Tetapi untuk konsistensi dan menghindari potensi masalah, biasakan:

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

17. Perbedaan kedua: Function Declaration bisa dipanggil sebelum deklarasinya

Ini adalah perbedaan yang sangat penting.

Misalnya:

greetings();

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

Walaupun greetings() ditulis sebelum deklarasi function, kode tersebut bisa berjalan.

Output:

Hello

Kenapa?

Karena Function Declaration memiliki behavior yang disebut hoisting.

Untuk sekarang, jangan terlalu pusing dengan mekanisme internalnya. Cukup ingat:

Function Declaration bisa dipanggil sebelum posisi deklarasinya dalam kode.

18. Function Expression tidak seperti itu

Sekarang:

greetings();

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

Ini akan menghasilkan error.

Kurang lebih:

Cannot access 'greetings' before initialization

Kenapa?

Karena greetings adalah variable yang dideklarasikan menggunakan let, dan function tersebut baru diberikan ke variable pada baris setelahnya.

Urutannya:

1. greetings();
       ↓
   belum bisa digunakan

2. let greetings = function() {...};
       ↓
   baru variable diinisialisasi

Jadi untuk Function Expression:

Pastikan function expression sudah dibuat sebelum dipanggil.

19. Bandingkan keduanya

Function Declaration

greetings();

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

✅ Bisa.

Function Expression

greetings();

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

❌ Error.

Kenapa ini penting?

Karena ini bisa memengaruhi struktur kode.

Dengan Function Declaration, kamu bisa melakukan:

startApp();

function startApp() {
    console.log("Application started");
}

Sedangkan dengan Function Expression:

let startApp = function() {
    console.log("Application started");
};

startApp();

Function harus sudah di-assign terlebih dahulu sebelum digunakan.

20. Function bisa dipindahkan ke variable lain

Ini bagian yang menarik dari lecture.

Misalnya:

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

Sekarang:

let x = greetings;

Apa yang terjadi?

Kita tidak membuat function baru.

Kita hanya memberikan value yang sama ke x.

Secara konsep:

greetings ────────┐
                  ↓
               FUNCTION
                  ↑
                  │
x ────────────────┘

Jadi sekarang baik greetings maupun x bisa digunakan untuk memanggil function tersebut.

greetings();

dan:

x();

keduanya menjalankan function yang sama.

21. Ini berbeda dengan menulis greetings()

Perhatikan:

let x = greetings;

Ini berarti:

“Ambil function yang disimpan di greetings, lalu simpan value function tersebut di x.”

Sedangkan:

let x = greetings();

Ini berarti:

“Jalankan function greetings, kemudian simpan hasil return-nya ke x.”

Ini perbedaan yang sangat penting.

Contoh

let greetings = function() {
    return "Hello";
};

Kalau:

let x = greetings;

maka:

x → function

Tetapi kalau:

let x = greetings();

maka function dijalankan dan:

x → "Hello"

Jadi:

greetings
   ↓
function

greetings()
   ↓
hasil dari function

Ini salah satu konsep paling penting dalam Function Expression.

22. Kenapa JavaScript membuat function sebagai value?

Karena ini membuat JavaScript menjadi sangat fleksibel.

Kalau function adalah value, berarti function bisa:

• disimpan dalam variable
• dipindahkan ke variable lain
• dikirim sebagai argument
• dikembalikan dari function lain
• disimpan dalam object
• digunakan dalam array

Contoh sederhana:

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

Function sekarang diperlakukan seperti value biasa.

Inilah salah satu fondasi penting JavaScript modern.

Nanti ketika kamu belajar:

• callback function
• array methods seperti map(), filter(), forEach()
• event handling
• asynchronous JavaScript

konsep ini akan muncul terus-menerus.

23. Analogi paling mudah: Function seperti barang

Bayangkan JavaScript punya sebuah barang bernama function.

Kamu bisa memasukkan barang tersebut ke sebuah kotak:

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

Kotaknya adalah:

greetings

Isinya:

FUNCTION

Kemudian kamu bisa memindahkan isi kotak ke kotak lain:

let x = greetings;

Sekarang:

greetings → FUNCTION
x        → FUNCTION

Keduanya menunjuk ke function yang sama.

Dan kamu bisa menjalankannya:

greetings();

atau:

x();

24. Function Expression bukan function jenis baru

Ini juga penting.

Jangan berpikir:

“Function Declaration dan Function Expression adalah dua jenis function yang benar-benar berbeda.”

Lebih tepatnya:

Keduanya adalah cara berbeda untuk membuat function.

Contoh:

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

dan:

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

Function-nya sama-sama bisa:

addition(10, 20);

Perbedaan utamanya ada pada bagaimana function tersebut didefinisikan dan bagaimana JavaScript memperlakukannya sebelum deklarasi.

25. Ringkasan perbedaan

26. Pola yang perlu kamu hafalkan

Function Declaration

function namaFunction(parameter) {
    // code
}

Pemanggilan:

namaFunction(argument);

Function Expression

let namaVariable = function(parameter) {
    // code
};

Pemanggilan:

namaVariable(argument);

27. Contoh lengkap

Mari kita gabungkan semuanya:

let greetings = function(name, timeOfDay) {
    return `Good ${timeOfDay} ${name}, welcome back`;
};

let message = greetings("John", "morning");

console.log(message);

Alurnya:

Step 1

JavaScript membuat variable:

greetings

Step 2

Function disimpan di dalamnya:

greetings → function

Step 3

Kita memanggil:

greetings("John", "morning")

Step 4

Parameter menerima argument:

name       = "John"
timeOfDay  = "morning"

Step 5

Function menjalankan:

return `Good morning John, welcome back`;

Step 6

Hasilnya disimpan:

message = "Good morning John, welcome back";

Step 7

Kemudian:

console.log(message);

Output:

Good morning John, welcome back

28. Jebakan yang sering terjadi

Jebakan 1 — Lupa ()

console.log(greetings);

Ini menampilkan function/value.

Sedangkan:

console.log(greetings());

menjalankan function dan menampilkan hasil return-nya.

Jebakan 2 — Mengira function expression bisa dipanggil sebelum deklarasi

❌:

greetings();

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

Gunakan:

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

greetings();

Jebakan 3 — Mengira console.log() sama dengan return

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

let result = greetings();

console.log(result);

Output:

Hello
undefined

Karena:

console.log("Hello");

hanya menampilkan sesuatu.

Tidak ada:

return "Hello";

Jebakan 4 — Bingung dengan x = greetings vs x = greetings()

let x = greetings;

→ x menyimpan function.

Sedangkan:

let x = greetings();

→ x menyimpan hasil dari function.

Ini beda besar.

29. Hubungannya dengan materi sebelumnya

Kalau kita rangkai materi dari lecture-lecture sebelumnya:

Variable
   ↓
bisa menyimpan value
   ↓
String
Number
Boolean
...
Function
   ↓
Function juga merupakan value
   ↓
bisa disimpan dalam variable
   ↓
Function Expression

Jadi Function Expression sebenarnya merupakan kelanjutan langsung dari konsep:

“Variable menyimpan value.”

Sebelumnya:

let age = 25;

Sekarang:

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

Bedanya cuma value yang disimpan.

age       → 25
name      → "John"
isLogin   → true
greetings → function

30. Gambaran besar

Coba tanamkan mental model ini:

FUNCTION DECLARATION

function greetings() {
    ...
}
       ↓
Function dibuat langsung

Sedangkan:

FUNCTION EXPRESSION

let greetings = function() {
    ...
};
       ↓
Function dibuat
       ↓
Function menjadi sebuah value
       ↓
Value disimpan ke variable greetings

Kemudian:

greetings();

berarti:

Ambil function dari greetings
        ↓
Jalankan function

31. Cheat sheet

Function Declaration

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

greetings();

Function Expression

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

greetings();

Dengan parameter

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

greetings("John");

Dengan return

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

let result = addition(10, 20);

console.log(result); // 30

Function bisa dipindahkan ke variable lain

let x = addition;

console.log(x(10, 20)); // 30

Jangan tertukar

let x = addition;   // x menyimpan function
let y = addition(); // y menyimpan hasil function

Declaration bisa dipanggil lebih dulu

greetings();

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

Expression harus dibuat dulu

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

greetings();

🎯 Inti lecture ini

Kalau hanya ingin mengingat 5 hal, ingat ini:

1. Function di JavaScript adalah sebuah value.

2. Karena function adalah value, function bisa disimpan dalam variable:

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

3. Ini disebut Function Expression.

4. greetings dan greetings() berbeda:

   greetings   // function/value
   greetings() // menjalankan function
   

5. Perbedaan penting dengan Function Declaration:

   function greetings() {}
   

   bisa dipanggil sebelum deklarasinya, sedangkan:

   let greetings = function() {};
   

   tidak bisa dipanggil sebelum inisialisasi.

Kalau lecture sebelumnya mengajarkan “function adalah mesin yang bisa menerima input dan menghasilkan output”, maka lecture ini menambahkan satu kemampuan baru: mesin function itu sendiri ternyata bisa disimpan di dalam variable dan dipindah-pindahkan seperti sebuah value. Ini nantinya menjadi fondasi penting untuk memahami callback function.