Fungsi dalam JavaScript

Artikel ini menerangkan fungsi dalam JavaScript.

YouTube Video

Fungsi dalam JavaScript

Fungsi dalam JavaScript adalah blok kod yang boleh digunakan semula untuk melaksanakan tugas tertentu. Penggunaan fungsi meningkatkan kebolehbacaan kod dan memudahkan penyelenggaraan. Fungsi boleh ditakrif dalam beberapa cara dan dimanipulasi secara fleksibel menggunakan argumen dan nilai pemulangan.

Cara untuk Menakrifkan Fungsi

Deklarasi Fungsi

Fungsi boleh ditakrifkan menggunakan kata kunci function. Deklarasi fungsi akan dialih atas (hoisted) sebelum kod dijalankan, jadi ia boleh dipanggil sebelum ia ditakrifkan.

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

Dalam contoh ini, kerana fungsi greet dipanggil sebelum deklarasinya, Hello, Everyone dan Hello, Alice akan dipaparkan.

Ekspresi Fungsi

Fungsi juga boleh ditakrifkan dengan menetapkan fungsi tersebut kepada pembolehubah. Dalam kes ini, fungsi tidak akan dialih atas dan hanya boleh dipanggil selepas ia ditakrifkan.

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

Dalam contoh ini, Hello, Bob akan dipaparkan.

Fungsi Arrow

Fungsi arrow adalah satu cara untuk menakrifkan fungsi dengan sintaks yang lebih ringkas. Fungsi ini sangat berguna apabila menggunakan fungsi anonim (fungsi tanpa nama). Fungsi arrow juga mempunyai tingkah laku yang berbeza berkaitan dengan 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 boleh ditakrifkan sebagai greet dan greetShort dalam contoh ini. Jika fungsi dalam satu baris, anda boleh mengabaikan {} (kurungan kerinting) seperti greetShort.

Elemen dalam Fungsi

Argumen

Nilai yang dipindahkan ke fungsi disebut sebagai argumen. Dengan menentukan argumen semasa menakrifkan fungsi, anda boleh memindahkan nilai semasa memanggil fungsi.

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

Argumen Lalai

Anda boleh menentukan nilai lalai jika tiada nilai diberikan kepada 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 lalai Guest akan digunakan.

Nilai Pulangan

Anda boleh mengembalikan nilai pulangan daripada fungsi menggunakan penyataan return. Jika tiada penyataan 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, kerana greet tidak mengembalikan nilai, nilai pulangan adalah undefined.

Fungsi Tanpa Nama

Fungsi tanpa nama dipanggil sebagai fungsi tanpa nama. Ia 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 Terus Dipanggil (IIFE)

Ekspresi Fungsi yang Terus Dipanggil (IIFE) ialah fungsi yang dijalankan sebaik sahaja ia ditakrifkan. Ia biasanya digunakan untuk mengawal skop.

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

Ia dilaksanakan sebaik sahaja ia diisytiharkan.

Fungsi Callback

Memberikan fungsi sebagai argumen kepada fungsi lain, untuk dilaksanakan kemudian, dipanggil sebagai fungsi callback. Ia sering digunakan dalam pemprosesan tidak segerak dan pengendalian acara.

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, fungsi yang mengeluarkan nilai ke konsol diberikan sebagai fungsi callback.

Fungsi Rekursif

Memanggil fungsi itu sendiri dipanggil sebagai rekursi, dan fungsi yang melakukan pemprosesan berulang menggunakan ini dipanggil fungsi rekursif. Sebagai contoh, fungsi untuk mengira faktorial boleh dilaksanakan 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 bagi 5, iaitu 120, akan dipaparkan.

Kata Kunci this

this yang digunakan di dalam fungsi menunjukkan objek mana yang dirujuk oleh fungsi. Dalam fungsi biasa, ia merujuk kepada objek pemanggil, tetapi dalam fungsi panah, ia mengekalkan this daripada skop di mana ia ditakrifkan.

 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 bagi pemboleh ubah obj diisytiharkan menggunakan kata kunci function. Oleh itu, kata kunci this merujuk kepada objek bagi pemboleh ubah obj. Sebaliknya, greet bagi pemboleh ubah obj2 diisytiharkan menggunakan fungsi arrow. Oleh itu, kata kunci this merujuk kepada objek dalam skop luar dan ia adalah undefined dalam contoh ini.

Skop Fungsi dan Penutupan

Pemboleh ubah yang ditakrifkan dalam fungsi tidak dapat diakses dari luar fungsi. Ini dipanggil sebagai skop fungsi. Terdapat juga ciri yang dipanggil penutupan yang mengekalkan skop di titik apabila fungsi tersebut ditakrifkan.

 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!

Dalam contoh ini, fungsi inner boleh mengakses pemboleh ubah outerVar kerana ia mengekalkan skop di mana fungsi tersebut ditakrifkan.

Ringkasan

• Terdapat pelbagai cara untuk mentakrifkan fungsi, termasuk deklarasi fungsi, ekspresi fungsi, dan fungsi arrow.
• Fungsi boleh menerima argumen dan mengembalikan nilai.
• Terdapat kegunaan khas seperti fungsi callback dan fungsi rekursif.
• Perhatian mesti diberikan dalam pengendalian this, kerana fungsi arrow dan fungsi biasa bertindak secara berbeza.
• Penutupan boleh digunakan untuk mengakses pemboleh ubah dalaman dari luar skop.

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

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video