Fungsi dalam JavaScript

Fungsi merupakan salah satu blok bangunan dasar dalam JavaScript, sebuah bahasa pemrograman skrip yang tingkat tinggi dan diinterpretasikan. Mereka pada dasarnya adalah blok kode yang dapat digunakan kembali untuk melakukan tugas tertentu. Dalam JavaScript, fungsi merupakan objek, yang berarti mereka memiliki properti dan dapat dimanipulasi seperti objek lainnya.

Deklarasi Fungsi

Deklarasi fungsi dalam JavaScript melibatkan mendefinisikan sebuah fungsi dengan kata kunci function, diikuti oleh nama fungsi yang unik, sepasang tanda kurung () yang mungkin berisi nama-nama parameter, dan sepasang kurung kurawal {} yang mengelilingi blok kode fungsi. Berikut adalah sintaks umum dari deklarasi fungsi:

function functionName(parameters) {
    // Code to be executed
}

Sebagai contoh, deklarasi fungsi sederhana untuk menambahkan dua angka dapat terlihat seperti ini:

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

Parameter dan Argumen

Dalam deklarasi fungsi, nama fungsi diikuti oleh tanda kurung yang dapat berisi nol atau lebih parameter. Parameter adalah placeholder yang mewakili input yang diharapkan oleh fungsi saat dipanggil. Ketika Anda memanggil fungsi, Anda memberikan nilai untuk parameter-parameter ini. Nilai-nilai ini disebut argumen.

Dalam fungsi tambahAngka di atas, a dan b adalah parameter. Jika kita memanggil fungsi ini dengan dua angka seperti tambahAngka(2, 3), 2 dan 3 akan menjadi argumen.

Pernyataan Return

Pernyataan return digunakan untuk menentukan nilai yang harus dikeluarkan oleh sebuah fungsi. Setelah pernyataan return dieksekusi, fungsi berhenti berjalan dan nilai yang ditentukan dikembalikan ke lokasi tempat fungsi dipanggil. Jika sebuah fungsi tidak memiliki pernyataan return, maka akan mengembalikan undefined.

Pada fungsi tambahAngka kita, pernyataan return a + b; akan menjumlahkan parameter a dan b lalu mengembalikan hasilnya.

Hoisting Fungsi

Dalam JavaScript, deklarasi fungsi akan di-"hoisting". Ini berarti interpreter JavaScript akan memindahkan semua deklarasi fungsi ke bagian atas cakupan tempat mereka berada sebelum kode lainnya dieksekusi. Oleh karena itu, sebuah fungsi yang dideklarasikan dengan cara ini dapat digunakan sebelum fungsi tersebut didefinisikan dalam kode.

Sebagai contoh, kode berikut akan berfungsi tanpa error, meskipun pemanggilan fungsi muncul sebelum deklarasi fungsi:

console.log(addNumbers(5, 3)); // Outputs: 8

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

Ekspresi Fungsi

Ekspresi fungsi adalah cara untuk mendefinisikan fungsi dalam JavaScript dengan mengassignnya ke sebuah variabel. Fungsi itu sendiri dapat diacu dengan menggunakan nama variabelnya. Berikut adalah sintaks umum dari ekspresi fungsi:

let variableName = function(parameters) {
    // Code to be executed
}

Sebagai contoh, fungsi tambahAngka dapat didefinisikan sebagai ekspresi fungsi seperti berikut:

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

Fungsi Tanpa Nama (Anonymous Functions)

Fungsi dalam ekspresi fungsi biasanya tidak memiliki nama, yang berarti fungsi tersebut tidak memiliki nama sendiri. Namun, Anda juga dapat menggunakan ekspresi fungsi yang diberi nama. Nama tersebut dapat berguna untuk debugging (karena muncul dalam jejak stack), namun fungsi tersebut tidak dapat dipanggil dengan nama tersebut dari luar fungsi itu sendiri.

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

Dalam kode di atas, `tambah tidak dapat diakses di dalam cakupan global. Itu hanya dapat digunakan di dalam tubuh fungsi.

IIFE: Immediately Invoked Function Expressions

Immediately Invoked Function Expression (IIFE) adalah fungsi yang dideklarasikan dan dijalankan pada saat yang sama. Sintaksnya melibatkan melingkupi ekspresi fungsi dalam tanda kurung untuk membuat pernyataan ekspresi fungsi, dan kemudian menggunakan sepasang tanda kurung kedua untuk segera memanggil fungsi tersebut. Hal ini berguna ketika Anda ingin membuat lingkup baru, karena variabel yang dideklarasikan dengan var di dalam IIFE tidak dapat diakses dari luar.

(function() {
    let message = "Hello, world!";
    console.log(message);  // Outputs: "Hello, world!"
})();

console.log(message);  // Outputs: ReferenceError: message is not defined

Fungsi Panah (Arrow Functions)

Fungsi panah menyediakan cara ringkas untuk menulis ekspresi fungsi dalam JavaScript. Fungsi panah diperkenalkan dengan ES6 (ECMAScript 2015) dan populer karena kekompakan dan penanganan mereka terhadap kata kunci this. Sintaks untuk fungsi panah terlihat seperti ini:

let variableName = (parameters) => {
    // Code to be executed
}

Sebuah fungsi panah sederhana yang menambahkan dua angka dapat terlihat seperti ini:

let addNumbers = (a, b) => {
    return a + b;
};

Jika tubuh fungsi hanya terdiri dari satu ekspresi, Anda dapat menghilangkan kurung kurawal dan kata kunci return, membuat fungsi tersebut menjadi lebih singkat:

let addNumbers = (a, b) => a + b;

Fungsi Panah dan Konteks 'this'

Salah satu fitur penting dari fungsi panah adalah bahwa mereka tidak memiliki nilai this sendiri. Sebagai gantinya, mereka mewarisi this dari konteks kode di sekitarnya. Hal ini membuat fungsi panah ideal digunakan dalam callback dan metode di mana Anda ingin this memiliki nilai yang sama dengan konteks kode di sekitarnya.

Misalnya, dalam penangan acara (event handler), fungsi panah memungkinkan this merujuk pada objek yang memicu acara, bukan pada fungsi itu sendiri:

let button = document.getElementById('myButton');
button.addEventListener('click', () => {
    // `this` refers to `button`, not the function
    this.classList.toggle('active');
});