Memahami Function di JavaScript: Konsep, Contoh, dan Latihan

 1. Apa Itu Function?

Function adalah blok kode yang dirancang untuk menjalankan tugas tertentu. Fungsi hanya dieksekusi ketika dipanggil (invoked).

function deklaration

2. Cara Membuat Function di JavaScript

Ada beberapa cara untuk mendeklarasikan function di JavaScript:

1. Function Declaration (Deklarasi Fungsi)
2. Function Expression (Ekspresi Fungsi)
3. Arrow Function (Fungsi Panah)

A. Function Declaration (Deklarasi Fungsi)

 function salam(nama) {
    return "Halo, " + nama + "!";
}

// Memanggil fungsi
console.log(salam("Mukhlis")); // Output: Halo, Mukhlis! 

Ciri khas function declaration:

• Menggunakan kata kunci function
• Bisa dipanggil sebelum deklarasi (hoisting)

B. Function Expression (Ekspresi Fungsi)

const salam = function(nama) {
    return "Halo, " + nama + "!";
};

console.log(salam("Mukhlis"));

Ciri khas function expression:

• Disimpan dalam variabel
• Tidak memiliki nama/ anonymous function
• Tidak bisa dipanggil sebelum dideklarasikan (tidak hoisted)

C. Arrow Function (Fungsi Panah)

const salam = (nama) => {
    return "Halo, " + nama + "!";
};

console.log(salam("Mukhlis"));

jika hanya satu baris kode, bisa disingkat:

const salam = nama => "Halo, " + nama + "!";
console.log(salam("Mukhlis"));

Ciri khas arrow function:

• Sintaks lebih ringkas
• Tidak memiliki this sendiri (bergantung pada konteks luar)

3. Parameter dan Argumen

Function dapat menerima input (parameter) dan mengembalikan output.

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

console.log(tambah(3, 5)); // Output: 8

• a dan b adalah parameter.
• 3 dan 5 adalah argumen yang diberikan saat fungsi dipanggil.

4. Default Parameter

Kita bisa memberikan nilai default untuk parameter jika tidak ada argumen yang dikirim.

function salam(nama = "User") {
    return "Halo, " + nama + "!";
}

console.log(salam());       // Output: Halo, User!
console.log(salam("Mukhlis")); // Output: Halo, Mukhlis!

5. Function dengan Return dan Tanpa Return

• Dengan return → Mengembalikan nilai ke pemanggil.
• Tanpa return → Hanya menjalankan aksi tanpa mengembalikan nilai.

Tanpa return:

function cetakNama(nama) {
    console.log("Halo, " + nama + "!");
}

cetakNama("Mukhlis"); // Output: Halo, Mukhlis!

Dengan return:

function kali(a, b) {
    return a * b;
}

let hasil = kali(4, 5);
console.log(hasil); // Output: 20

6. Function di dalam Function

Fungsi bisa berada di dalam fungsi lain.

  
function hitungLuasPersegi(sisi) {
    function kali(a, b) {
        return a * b;
    }
    
    return kali(sisi, sisi);
}

console.log(hitungLuasPersegi(4)); // Output: 16

7. IIFE (Immediately Invoked Function Expression)

IIFE adalah fungsi yang langsung dipanggil setelah dideklarasikan.

(function() {
    console.log("Halo, ini IIFE!");
})(); // Output: Halo, ini IIFE!

8. Callback Function

Function bisa menerima function lain sebagai parameter.

  
function proses(angka, callback) {
    let hasil = angka * 2;
    callback(hasil);
}

proses(5, function(hasil) {
    console.log("Hasilnya adalah: " + hasil);
});
// Output: Hasilnya adalah: 10

9. Perbedaan this pada Function Biasa vs. Arrow Function

Di JavaScript, this adalah konteks yang merujuk pada objek yang memanggil fungsi. Namun, arrow function memiliki perilaku this yang berbeda dibanding function biasa.

A. Function Biasa dan this

Function biasa memiliki this yang bergantung pada bagaimana fungsi dipanggil.

  
const obj = {
    nama: "Mukhlis",
    salam: function() {
        console.log("Halo, " + this.nama);
    }
};

obj.salam(); // Output: Halo, Mukhlis

Penjelasan:

• this.nama mengacu pada obj.nama, karena fungsi salam dipanggil dari obj.

---

B. Arrow Function dan this

Arrow function tidak memiliki this sendiri. Ia akan mengambil this dari konteks terdekat (lexical scope).

  
const obj = {
    nama: "Mukhlis",
    salam: () => {
        console.log("Halo, " + this.nama);
    }
};

obj.salam(); // Output: Halo, undefined

Penjelasan:

• this.nama bukan obj.nama, karena arrow function tidak memiliki this sendiri.
• this dalam arrow function akan mengacu ke lingkungan luar (global object di browser atau undefined di mode strict).

---

10. Contoh Kasus di Dalam Method

Misalnya, kita ingin menggunakan setTimeout di dalam objek.

Function Biasa dalam setTimeout

  
const user = {
    nama: "Mukhlis",
    salam: function() {
        setTimeout(function() {
            console.log("Halo, " + this.nama);
        }, 1000);
    }
};

user.salam(); // Output: Halo, undefined (karena `this` mengacu ke global object)

Kenapa this.nama jadi undefined?

• Karena dalam function biasa, this di dalam setTimeout tidak mengacu ke user, melainkan ke global object.

Solusi dengan Arrow Funtion

  
const user = {
    nama: "Mukhlis",
    salam: function() {
        setTimeout(() => {
            console.log("Halo, " + this.nama);
        }, 1000);
    }
};

user.salam(); // Output: Halo, Mukhlis

Penjelasan:

• Arrow function tidak memiliki this sendiri → this tetap mengacu ke user, bukan ke global object.

---

3. Arrow Function di Dalam Class

Dalam class, arrow function juga berguna untuk menjaga this.

Tanpa arrow function:

  
class User {
    constructor(nama) {
        this.nama = nama;
    }

    salam() {
        setTimeout(function() {
            console.log("Halo, " + this.nama);
        }, 1000);
    }
}

const mukhlis = new User("Mukhlis");
mukhlis.salam(); // Output: Halo, undefined

Solusi dengan arrow function:

  
class User {
    constructor(nama) {
        this.nama = nama;
    }

    salam() {
        setTimeout(() => {
            console.log("Halo, " + this.nama);
        }, 1000);
    }
}

const mukhlis = new User("Mukhlis");
mukhlis.salam(); // Output: Halo, Mukhlis

---

Kesimpulan

1. Function biasa: this bergantung pada bagaimana fungsi dipanggil.
2. Arrow function: this tidak berubah, mengambil dari konteks luar.
3. Gunakan arrow function jika ingin this tetap mengacu ke objek terdekat, terutama dalam callback seperti setTimeout.

garis pembatas

Nah!, itulah materi dasar mengenai function pada javascript. untuk mempertajam pengetahuan teman-teman saya punya beberapa latihan tentang materi function ini, ini berguna untuk melatih kita dalam memahami function itu sendiri.

Latihan

Berikut latihan function:

1. Function Dasar

Buat function bernama sapaUser yang menerima satu parameter nama dan mengembalikan teks:
"Halo, [nama]! Selamat datang!"

Contoh:

console.log(sapaUser("Mukhlis"));

Output:

Halo, Mukhlis! Selamat datang!

---

2. Function Menghitung Luas Persegi

Buat function bernama luasPersegi yang menerima satu parameter sisi dan mengembalikan luasnya.

Rumus:

Luas = sisi × sisi

Contoh:

console.log(luasPersegi(5));

Output:

25

---

3. Function dengan Default Parameter

Buat function greet yang menerima dua parameter: nama dan ucapan (default "Selamat datang").

Contoh:

console.log(greet("Mukhlis"));
console.log(greet("Mukhlis", "Selamat pagi"));

Output:

Selamat datang, Mukhlis!
Selamat pagi, Mukhlis!

---

4. Function Menghitung Total Harga dengan Pajak

Buat function hitungTotal yang menerima dua parameter: harga dan pajak (dalam persen), lalu mengembalikan total harga setelah pajak ditambahkan.

Rumus:

Total = harga + (harga × pajak / 100)

Contoh:

console.log(hitungTotal(100000, 10));

Output:

110000

---

5. Arrow Function: Perkalian

Buat arrow function bernama kali yang menerima dua angka dan mengembalikan hasil perkaliannya.

Contoh:

console.log(kali(4, 5));

Output:

20

---

6. Function Mengembalikan Angka Terbesar

Buat function angkaTerbesar yang menerima tiga angka dan mengembalikan angka terbesar di antara mereka.

Contoh:

console.log(angkaTerbesar(10, 25, 15));

Output:

25

---

7. Function dengan Callback

Buat function prosesAngka yang menerima dua angka dan satu callback function untuk operasi matematika (misalnya tambah atau kali).

Contoh:

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

console.log(prosesAngka(3, 4, tambah));

Output:

7

---

silakan dicoba, hasilnya boleh teman-teman share aja di kolom komentar dibawah ini. thank you