Sign in Subscribe
Javascript

Menuliskan Function di JavaScript dengan Mudah

Menuliskan Function di JavaScript dengan Mudah
Photo by Emile Perron / Unsplash

Kalau kamu sering ngoding di JavaScript, pasti gak asing lagi sama function. Function itu ibarat dapur dalam rumah kamu. Di dapur, kamu bisa bikin berbagai jenis makanan, dari nasi goreng sampai steak wagyu. Nah, function di JavaScript juga sama, dia bisa dipakai buat bikin kode lebih rapi, lebih reusable, dan gampang dikelola.

Jadi, function itu adalah blok kode yang bisa dieksekusi berulang kali tanpa harus nulis ulang. Cukup buat sekali, terus panggil kapan pun dibutuhkan. Keren kan?

Cara Menulis Function di JavaScript

Di JavaScript, ada beberapa cara buat nulis function. Yuk, kita bahas satu per satu biar kamu makin jago!

1. Function Declaration (Cara Biasa, Paling Dasar)

Cara ini yang paling sering dipakai buat nulis function.

function sapa(nama) {
    return `Halo, ${nama}! Selamat datang di dunia JavaScript!`;
}

console.log(sapa("Andi")); // Output: Halo, Andi! Selamat datang di dunia JavaScript!

Kenapa Function Declaration itu Keren?

✅ Bisa dipanggil sebelum dideklarasikan (hoisting).
✅ Struktur kode lebih jelas dan mudah dibaca.
✅ Bisa dipakai di mana saja dalam file JavaScript.

Tapi ingat, karena dia kena hoisting, function ini bisa dipanggil sebelum dideklarasikan. Misalnya gini:

console.log(sapa("Dika")); // Output: Halo, Dika! Selamat datang di dunia JavaScript!

function sapa(nama) {
    return `Halo, ${nama}!`;
}

2. Function Expression (Function dalam Variabel)

Ini adalah cara nulis function dengan nyimpen function ke dalam variabel.

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

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

Kelebihan Function Expression

✅ Bisa fleksibel karena bisa disimpan dalam variabel.
✅ Lebih aman karena gak kena hoisting.

Tapi kelemahannya, function ini harus dideklarasikan dulu sebelum dipanggil. Kalau coba manggil sebelum dideklarasikan, bakal error!

console.log(kali(3, 2)); // Error: Cannot access 'kali' before initialization

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

3. Arrow Function (Lebih Singkat dan Simpel)

Kalau mau nulis function dengan cara paling singkat dan simpel, pakai arrow function. Ini adalah fitur baru di ES6 yang bikin kode kita lebih clean.

const tambah = (a, b) => a + b;

console.log(tambah(10, 7)); // Output: 17

Kalau function cuma punya satu parameter, tanda kurungnya bisa dihilangkan:

const sapa = nama => `Halo, ${nama}!`;
console.log(sapa("Budi")); // Output: Halo, Budi!

Dan kalau function gak punya parameter, pakai tanda kurung kosong:

const salam = () => `Halo dunia!`;
console.log(salam()); // Output: Halo dunia!

Kelebihan Arrow Function

✅ Lebih singkat, cocok buat function sederhana.
✅ Otomatis return, jadi gak perlu nulis return lagi kalau satu baris.

Tapi hati-hati, arrow function tidak punya this sendiri. Kalau butuh this, lebih baik pakai function biasa.

Parameter dan Return dalam Function

Function bisa menerima parameter buat diproses. Contohnya, kita bikin function buat hitung luas persegi panjang:

function luasPersegiPanjang(panjang, lebar) {
    return panjang * lebar;
}

console.log(luasPersegiPanjang(10, 5)); // Output: 50

Kalau function tidak pakai return, hasilnya undefined.

function tanpaReturn() {
    console.log("Ini function tanpa return");
}

console.log(tanpaReturn()); // Output: undefined

Default Parameter di Function

Kalau kita bikin function dengan parameter, tapi user gak kasih nilai saat memanggilnya, kita bisa set nilai default biar gak error.

function sapa(nama = "Pengunjung") {
    return `Halo, ${nama}!`;
}

console.log(sapa()); // Output: Halo, Pengunjung!
console.log(sapa("Ayu")); // Output: Halo, Ayu!

Function di dalam Function (Nested Function)

Kadang kita butuh function di dalam function. Ini disebut nested function.

function luar() {
    console.log("Function luar");

    function dalam() {
        console.log("Function dalam");
    }

    dalam();
}

luar();

Function Sebagai Parameter (Higher-Order Function)

Di JavaScript, function bisa dipakai sebagai parameter function lain. Ini disebut higher-order function.

function hitung(operasi, a, b) {
    return operasi(a, b);
}

const tambah = (a, b) => a + b;
const kali = (a, b) => a * b;

console.log(hitung(tambah, 5, 3)); // Output: 8
console.log(hitung(kali, 4, 2)); // Output: 8

Kesimpulan

  • Function declaration bisa dipanggil sebelum dideklarasikan (hoisting).
  • Function expression disimpan dalam variabel, lebih fleksibel tapi gak kena hoisting.
  • Arrow function lebih singkat dan modern, tapi tidak punya this sendiri.
  • Default parameter bisa digunakan biar function tetap jalan walaupun gak ada input.
  • Higher-order function memungkinkan kita memakai function sebagai parameter function lain.

Dengan memahami berbagai cara menulis function di JavaScript, kamu bisa bikin kode yang lebih efisien, clean, dan gampang di-maintain. Yuk, langsung coba di proyek kamu dan eksplor lebih banyak lagi!

Read next