Function di JavaScript: Membuat Kode yang Bisa Digunakan Ulang

Belajar function di JavaScript untuk membuat kode yang bisa digunakan ulang. Panduan lengkap tentang deklarasi, parameter, return value, function expression, dan arrow function.

Keywords: function javascript, belajar function js, cara membuat function, arrow function js, function expression, reusable code

Bayangkan kamu sedang membuat aplikasi toko online. Setiap kali ada pembelian, kamu harus menghitung total harga dengan rumus yang sama. Kalau kamu tulis kode berulang kali, akan ribet dan rawan error.

👉 Solusinya adalah function di JavaScript.
Dengan function, kamu bisa menulis kode sekali, lalu memanggilnya berkali-kali.

Apa Itu Function di JavaScript?

Function adalah blok kode yang dirancang untuk melakukan tugas tertentu dan dapat digunakan berulang kali.

• Bisa menerima parameter (input).
• Bisa menghasilkan return value (output).
• Membantu membuat kode lebih rapi, reusable, dan mudah dipelihara.

Cara Membuat Function

Ada beberapa cara membuat function di JavaScript:

1. Function Declaration

function sapa() {
  console.log("Halo, selamat datang di JavaScript!");
}

sapa(); // Memanggil function

function sapa() {
  console.log("Halo, selamat datang di JavaScript!");
}

sapa(); // Memanggil function

2. Function dengan Parameter

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

console.log(tambah(5, 3)); // Output: 8

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

console.log(tambah(5, 3)); // Output: 8

3. Function Expression (Disimpan dalam variabel)

let kali = function(x, y) {
  return x * y;
};

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

let kali = function(x, y) {
  return x * y;
};

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

4. Arrow Function (ES6)

let bagi = (x, y) => x / y;

console.log(bagi(10, 2)); // Output: 5

let bagi = (x, y) => x / y;

console.log(bagi(10, 2)); // Output: 5

Parameter dan Return Value

Parameter Default

function salam(nama = "Pengunjung") {
  return "Halo, " + nama;
}

console.log(salam());        // Halo, Pengunjung
console.log(salam("Budi"));  // Halo, Budi

function salam(nama = "Pengunjung") {
  return "Halo, " + nama;
}

console.log(salam());        // Halo, Pengunjung
console.log(salam("Budi"));  // Halo, Budi

Return Value

function luasPersegi(sisi) {
  return sisi * sisi;
}

let hasil = luasPersegi(4);
console.log("Luas persegi: " + hasil); // Output: Luas persegi: 16

function luasPersegi(sisi) {
  return sisi * sisi;
}

let hasil = luasPersegi(4);
console.log("Luas persegi: " + hasil); // Output: Luas persegi: 16

Function Bersarang (Nested Function)

Function bisa dibuat di dalam function lain.

function hitungDiskon(harga) {
  function diskon(persen) {
    return harga * persen / 100;
  }
  return harga - diskon(10);
}

console.log(hitungDiskon(100000)); // Output: 90000

function hitungDiskon(harga) {
  function diskon(persen) {
    return harga * persen / 100;
  }
  return harga - diskon(10);
}

console.log(hitungDiskon(100000)); // Output: 90000

Anonymous Function

Function tanpa nama, biasanya digunakan sebagai callback.

setTimeout(function() {
  console.log("Ini anonymous function");
}, 2000);

setTimeout(function() {
  console.log("Ini anonymous function");
}, 2000);

Arrow Function vs Function Biasa

Studi Kasus 1: Menghitung Total Belanja

function hitungTotal(harga, jumlah) {
  return harga * jumlah;
}

console.log("Total: Rp" + hitungTotal(20000, 3));
// Output: Total: Rp60000

function hitungTotal(harga, jumlah) {
  return harga * jumlah;
}

console.log("Total: Rp" + hitungTotal(20000, 3));
// Output: Total: Rp60000

Studi Kasus 2: Validasi Password

function cekPassword(password) {
  if (password.length >= 8) {
    return "Password valid";
  } else {
    return "Password terlalu pendek";
  }
}

console.log(cekPassword("12345"));       // Password terlalu pendek
console.log(cekPassword("coding123"));   // Password valid

function cekPassword(password) {
  if (password.length >= 8) {
    return "Password valid";
  } else {
    return "Password terlalu pendek";
  }
}

console.log(cekPassword("12345"));       // Password terlalu pendek
console.log(cekPassword("coding123"));   // Password valid

Studi Kasus 3: Arrow Function untuk Event

let tombol = document.getElementById("klikSaya");

tombol.addEventListener("click", () => {
  alert("Tombol diklik!");
});

let tombol = document.getElementById("klikSaya");

tombol.addEventListener("click", () => {
  alert("Tombol diklik!");
});

FAQ

1. Apa perbedaan function declaration dan expression?

• Declaration bisa dipanggil sebelum didefinisikan.
• Expression hanya bisa dipanggil setelah didefinisikan.

2. Kapan sebaiknya menggunakan arrow function?
Arrow function cocok untuk kode singkat dan callback, tapi hindari untuk method object yang butuh this.

3. Bisakah function tidak mengembalikan nilai?
Bisa. Jika tidak ada return, function akan mengembalikan undefined.

Kesimpulan

• Function = blok kode reusable.
• Bisa punya parameter (input) dan return value (output).
• Bentuk function: declaration, expression, arrow function.
• Membuat kode lebih efisien, terstruktur, dan mudah dipelihara.

👉 Lanjut ke [Hari 12: Scope dan Hoisting di JavaScript] agar kamu bisa memahami bagaimana variabel bekerja di dalam function dan global scope!

JavaScript #Function #BelajarCoding #Pemrograman