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)

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.

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

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

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

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

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

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

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

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

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

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

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

  
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).

  
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