React.js
  • Roadmap belajar React.js
  • Tahap 1: Dasar-dasar JavaScript
    • Apa itu JavaScript dan kegunaannya
    • Sejarah dan perkembangan JavaScript
    • Apa itu Node.js dan hubungannya dengan JavaScript
    • Cara instal Node.js
    • Cara menjalankan JavaScript di Node.js
    • Variabel dalam JavaScript
    • Tipe data dalam JavaScript
    • Operator dalam JavaScript
    • Truly dan Falsy dalam JavaScript
    • Kondisional dalam JavaScript
    • Looping dalam JavaScript
    • Fungsi dalam JavaScript
    • Parameter dan Return Value dalam JavaScript
    • DOM di JavaScript dan Cara manipulasinya
    • Event Handling dalam JavaScript
    • Try, catch, dan finally dalam JavaScript
    • Callback dalam JavaScript
    • Promise dalam JavaScript
    • Async dan Await dalam JavaScript
  • Tahap 2: JavaScript Lanjutan
    • OOP dalam JavaScript
    • ES6
    • LocalStorage dalam JavaScript
    • FetchAPI dalam JavaScript
  • Tahap 3: Memulai dengan React.js
    • Apa itu React?
    • Konsep Virtual DOM
    • Apa itu JSX?
    • Langkah-langkah Setup Project React.js
    • Apa itu Komponen dalam React?
    • Apa itu Props dan State dalam React?
    • Apa itu Event Handling dalam React?
    • Apa itu Component Lifecycle dalam React?
    • Apa itu Hooks dalam React?
    • Apa itu Custom Hooks dalam React?
  • Tahap 4: React Lanjutan
    • Apa itu Context API dalam React?
    • Apa itu State Management (Redux)?
    • Apa itu Routing di React?
    • Apa itu Dynamic Routing, Private Routing, dan Nested Routing?
    • Cara menulis CSS di React
    • Cara Menggunakan Bootstrap di React
    • Cara Menggunakan Tailwind CSS di React
    • Cara Fetching data dari API di React
    • Cara Menampilkan data dinamis di React
    • Error handling dalam pengambilan data
    • Cara Testing komponen di React
    • End-to-end testing dengan Cypress atau Selenium
Powered by GitBook
On this page
  1. Tahap 1: Dasar-dasar JavaScript

Fungsi dalam JavaScript

PreviousLooping dalam JavaScriptNextParameter dan Return Value dalam JavaScript

Last updated 10 months ago

Fungsi dalam JavaScript

Fungsi adalah blok kode yang dirancang untuk melakukan tugas tertentu. Fungsi dapat dipanggil dan digunakan kembali di seluruh program, yang membantu membuat kode lebih modular dan terstruktur.

Jenis Fungsi dalam JavaScript

Jenis Fungsi
Deskripsi
Sintaks
Contoh

Fungsi Deklarasi

Fungsi yang didefinisikan menggunakan kata kunci function.

function name(params) { /* code */ }

function greet() { console.log('Hello'); }

Fungsi Ekspresi

Fungsi yang disimpan dalam variabel.

let name = function(params) { /* code */ }

let greet = function() { console.log('Hello'); }

Fungsi Panah

Sintaks fungsi yang lebih ringkas menggunakan =>.

let name = (params) => { /* code */ }

let greet = () => { console.log('Hello'); }

Fungsi Anonim

Fungsi tanpa nama yang sering digunakan sebagai argumen.

function(params) { /* code */ }

setTimeout(function() { console.log('Hello'); }, 1000);

Fungsi Callback

Fungsi yang diteruskan sebagai argumen ke fungsi lain.

function process(callback) { callback(); } process(() => { console.log('Hello'); });

Fungsi Generator

Fungsi yang dapat menghentikan dan melanjutkan eksekusi.

function* name(params) { /* code */ }

function* generator() { yield 1; yield 2; yield 3; }

Fungsi Rekursif

Fungsi yang memanggil dirinya sendiri.

function name(params) { if (condition) { name(params); } }

function factorial(n) { if (n === 0) { return 1; } return n * factorial(n - 1); }

Penjelasan dan Contoh

  1. Fungsi Deklarasi:

    function greet() {
        console.log('Hello');
    }
    greet();  // Output: Hello
    • Penjelasan: Fungsi greet didefinisikan menggunakan kata kunci function. Fungsi ini tidak memiliki parameter dan hanya mencetak "Hello" ke konsol saat dipanggil.

  2. Fungsi Ekspresi:

    let greet = function() {
        console.log('Hello');
    };
    greet();  // Output: Hello
    • Penjelasan: Fungsi ini disimpan dalam variabel greet. Fungsi ini juga tidak memiliki parameter dan mencetak "Hello" ke konsol saat dipanggil.

  3. Fungsi Panah:

    let greet = () => {
        console.log('Hello');
    };
    greet();  // Output: Hello
    • Penjelasan: Fungsi panah adalah sintaks yang lebih ringkas untuk mendefinisikan fungsi. Fungsi ini tidak memiliki parameter dan mencetak "Hello" ke konsol saat dipanggil.

  4. Fungsi Anonim:

    setTimeout(function() {
        console.log('Hello');
    }, 1000);
    • Penjelasan: Fungsi anonim tidak memiliki nama dan sering digunakan sebagai argumen untuk fungsi lain, seperti setTimeout. Fungsi ini akan mencetak "Hello" ke konsol setelah 1 detik.

  5. Fungsi Callback:

    function process(callback) {
        callback();
    }
    process(() => {
        console.log('Hello');
    });  // Output: Hello
    • Penjelasan: Fungsi process menerima fungsi lain sebagai argumen (callback). Saat process dipanggil, ia menjalankan callback, yang dalam contoh ini mencetak "Hello" ke konsol.

  6. Fungsi Generator:

    function* generator() {
        yield 1;
        yield 2;
        yield 3;
    }
    const gen = generator();
    console.log(gen.next().value);  // Output: 1
    console.log(gen.next().value);  // Output: 2
    console.log(gen.next().value);  // Output: 3
    • Penjelasan: Fungsi generator menggunakan function* dan yield untuk menghasilkan nilai satu per satu. Fungsi ini dapat menghentikan dan melanjutkan eksekusi, yang berguna untuk iterasi yang kompleks.

  7. Fungsi Rekursif:

    function factorial(n) {
        if (n === 0) {
            return 1;
        }
        return n * factorial(n - 1);
    }
    console.log(factorial(5));  // Output: 120
    • Penjelasan: Fungsi factorial memanggil dirinya sendiri untuk menghitung faktorial dari angka n. Jika n adalah 0, fungsi mengembalikan 1 (basis kasus). Jika tidak, fungsi mengembalikan n dikalikan dengan hasil pemanggilan fungsi factorial dengan n - 1.

Sumber

Fungsi dalam JavaScript memungkinkan Anda untuk membuat kode yang lebih modular, dapat digunakan kembali, dan mudah dibaca. Dengan memahami berbagai jenis fungsi, Anda dapat memilih pendekatan yang paling sesuai untuk kebutuhan spesifik dalam pengembangan aplikasi Anda.

MDN Web Docs - Functions
W3Schools - JavaScript Functions
MDN Web Docs - Arrow Functions
MDN Web Docs - Generator Functions
MDN Web Docs - Recursive Functions