Fungsi dalam JavaScript

Artikel ini menjelaskan fungsi dalam JavaScript.

YouTube Video

Fungsi dalam JavaScript

Fungsi dalam JavaScript adalah blok kode yang dapat digunakan kembali untuk menjalankan tugas-tugas tertentu. Menggunakan fungsi meningkatkan keterbacaan kode dan mempermudah perawatan. Fungsi dapat didefinisikan dalam berbagai cara dan dimanipulasi secara fleksibel menggunakan argumen dan nilai kembali.

Cara Mendefinisikan Fungsi

Deklarasi Fungsi

Fungsi dapat didefinisikan menggunakan kata kunci function. Deklarasi fungsi diangkat (hoisted) sebelum kode dijalankan, sehingga bisa dipanggil sebelum didefinisikan.

1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4    return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice

Pada contoh ini, karena fungsi greet dipanggil sebelum dideklarasikan, Hello, Everyone dan Hello, Alice akan ditampilkan.

Ekspresi Fungsi

Fungsi juga dapat didefinisikan dengan menetapkannya ke dalam variabel. Dalam hal ini, fungsi tidak diangkat (hoisted) dan hanya dapat dipanggil setelah didefinisikan.

1const greet = function(name) {
2    return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob

Pada contoh ini, Hello, Bob akan ditampilkan.

Fungsi Panah (Arrow Function)

Fungsi panah adalah cara mendefinisikan fungsi dengan sintaks yang lebih singkat. Fungsi ini sangat berguna ketika menggunakan fungsi anonim (fungsi tanpa nama). Fungsi panah juga memiliki perilaku yang berbeda terkait kata kunci this.

 1const greet = (name) => {
 2    return "Hello, " + name;
 3};
 4
 5// When it can be expressed in a single line,
 6// `return` and curly braces can be omitted
 7const greetShort = name => "Hello, " + name;
 8
 9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave

Fungsi dapat dideklarasikan sebagai greet dan greetShort pada contoh ini. Jika fungsi hanya satu baris, Anda dapat menghilangkan {} (kurung kurawal) seperti pada greetShort.

Elemen dari Fungsi

Argumen

Nilai yang dilewatkan ke fungsi disebut argumen. Dengan menentukan argumen saat mendefinisikan fungsi, Anda dapat melewatkan nilai saat memanggil fungsi.

1function add(a, b) {
2    return a + b;
3}
4
5console.log(add(2, 3)); // 5

Argumen Bawaan

Anda dapat menentukan nilai bawaan jika tidak ada nilai yang diteruskan ke argumen.

1function greet(name = "Guest") {
2    return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice

Dalam contoh ini, jika greet() dipanggil, nilai bawaan Guest akan digunakan.

Nilai Kembalian

Anda dapat mengembalikan nilai kembalian dari sebuah fungsi menggunakan pernyataan return. Jika tidak ada pernyataan return, fungsi akan mengembalikan undefined.

1function greet(name) {
2    console.log('Hello, ' + name + '!');
3}
4function square(num) {
5    return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined

Dalam contoh ini, karena greet tidak mengembalikan nilai, nilai kembaliannya adalah undefined.

Fungsi Anonim

Fungsi tanpa nama disebut sebagai fungsi anonim. Fungsi ini sering digunakan sebagai ekspresi fungsi atau fungsi panah.

1const double = function(num) {
2    return num * 2;
3};
4
5console.log(double(5)); // 10

Ekspresi Fungsi yang Langsung Dipanggil (IIFE)

Ekspresi Fungsi yang Langsung Dipanggil (IIFE) adalah fungsi yang dieksekusi segera setelah didefinisikan. Fungsi ini biasanya digunakan untuk mengontrol lingkup (scope).

1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3    console.log("This is an IIFE");
4})(); // This is an IIFE

Fungsi ini akan dieksekusi segera setelah dideklarasikan.

Fungsi Callback

Memberikan fungsi sebagai argumen untuk fungsi lain, untuk dieksekusi kemudian, disebut sebagai fungsi callback. Fungsi ini sering digunakan dalam pemrosesan asinkron dan penanganan event.

1function processData(callback) {
2    let data = "Processed Data";
3    callback(data);
4}
5
6processData(function(result) {
7    console.log(result); // Processed Data
8});

Dalam contoh ini, sebuah fungsi yang mencetak nilai ke konsol diberikan sebagai fungsi callback.

Fungsi Rekursif

Memanggil fungsi itu sendiri disebut rekursi, dan fungsi yang melakukan pemrosesan berulang dengan cara ini disebut fungsi rekursif. Sebagai contoh, sebuah fungsi untuk menghitung faktorial dapat diimplementasikan menggunakan rekursi seperti berikut.

 1function factorial(n) {
 2    if (n === 0) {
 3        return 1;
 4    } else {
 5        return n * factorial(n - 1);
 6    }
 7}
 8
 9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)

Dalam contoh ini, faktorial dari 5, yaitu 120, akan ditampilkan.

Kata Kunci this

this yang digunakan di dalam fungsi menunjukkan objek mana yang dirujuk oleh fungsi tersebut. Dalam fungsi biasa, ini merujuk pada objek pemanggil, tetapi dalam fungsi panah, this mempertahankan lingkup (scope) di mana fungsi tersebut didefinisikan.

 1const obj = {
 2    name: "Alice",
 3    greet: function() {
 4        console.log(this.name); // Refers to "Alice"
 5    }
 6};
 7
 8obj.greet(); // Alice
 9
10const obj2 = {
11    name: "Bob",
12    greet: () => {
13        // Arrow function refers to the outer scope (undefined here)
14        console.log(this.name);
15    }
16};
17
18obj2.greet(); // undefined

greet dari variabel obj dideklarasikan menggunakan kata kunci function. Oleh karena itu, kata kunci this mengacu pada objek dari variabel obj. Di sisi lain, greet dari variabel obj2 dideklarasikan menggunakan fungsi panah. Oleh karena itu, kata kunci this mengacu pada objek dalam lingkup luar dan bernilai undefined dalam contoh ini.

Lingkup Fungsi dan Penutupan (Closures)

Variabel yang didefinisikan di dalam fungsi tidak dapat diakses dari luar fungsi. Hal ini disebut sebagai lingkup fungsi. Ada juga fitur yang disebut closure yang mempertahankan lingkup saat fungsi didefinisikan.

 1function outer() {
 2    let outerVar = "I am outer!";
 3
 4    function inner() {
 5        console.log(outerVar); // Can access outerVar
 6    }
 7
 8    return inner;
 9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!

Pada contoh ini, fungsi inner dapat mengakses variabel outerVar karena mempertahankan lingkup tempat ia didefinisikan.

Ringkasan

• Ada berbagai cara untuk mendefinisikan fungsi, termasuk deklarasi fungsi, ekspresi fungsi, dan fungsi panah.
• Fungsi dapat menerima argumen dan mengembalikan nilai.
• Ada penggunaan khusus seperti fungsi callback dan fungsi rekursif.
• Penggunaan this harus diperhatikan, karena fungsi panah dan fungsi biasa memiliki perilaku yang berbeda.
• Closures dapat digunakan untuk mengakses variabel internal dari luar lingkup.

Fungsi adalah salah satu konsep penting dalam JavaScript, yang memanfaatkan strukturnya yang fleksibel.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video