Function JavaScript: Membuat Kode Lebih Rapi dan Bisa Digunakan Ulang

1. Apa Itu Function?#

Function adalah blok kode yang dirancang untuk menjalankan tugas tertentu.

Kita dapat membuat function satu kali, kemudian memanggilnya ketika diperlukan.

Contohnya:

1
function tampilkanSalam() {
2
  console.log("Halo, Gabuters!");
3
  console.log("Selamat datang di BapakGabut.");
4
}

Kode tersebut membuat function bernama tampilkanSalam.

Namun, ketika kode itu dijalankan, pesan belum otomatis muncul.

Kenapa?

Karena kita baru mendefinisikan function, belum memanggilnya.

Untuk menjalankannya, gunakan:

1
tampilkanSalam();

Hasilnya:

1
Halo, Gabuters!
2
Selamat datang di BapakGabut.

Kita bisa memanggil function yang sama beberapa kali:

1
tampilkanSalam();
2
tampilkanSalam();

Hasilnya:

1
Halo, Gabuters!
2
Selamat datang di BapakGabut.
3
Halo, Gabuters!
4
Selamat datang di BapakGabut.

Jadi, kita tidak perlu menyalin isi function setiap kali ingin menjalankannya.

2. Struktur Dasar Function#

Mari perhatikan bentuk function declaration berikut:

1
function namaFunction() {
2
  // Instruksi yang dijalankan
3
}

Ada beberapa bagian penting:

• function merupakan kata kunci untuk mendeklarasikan function.
• namaFunction adalah nama yang kita berikan.
• () digunakan untuk menempatkan parameter jika diperlukan.
• {} membungkus blok kode function.

Contohnya:

1
function tampilkanJudul() {
2
  console.log("Belajar JavaScript");
3
}

Untuk menjalankannya:

1
tampilkanJudul();

Perhatikan perbedaan antara:

1
tampilkanJudul

Dan:

1
tampilkanJudul()

Penulisan pertama merujuk pada function tersebut tanpa langsung menjalankannya.

Sedangkan penulisan kedua memanggil function.

Perbedaan ini akan semakin penting ketika kita mulai menggunakan event pada browser.

3. Function dengan Parameter#

Function menjadi lebih berguna ketika dapat menerima input.

Bayangkan kita ingin menampilkan pesan sambutan untuk beberapa pengunjung.

Kalau tanpa parameter, kita mungkin membuat function berbeda untuk setiap nama.

1
function salamBudi() {
2
  console.log("Halo, Budi!");
3
}
4

5
function salamAni() {
6
  console.log("Halo, Ani!");
7
}

Cara tersebut tidak praktis.

Kita bisa membuat satu function yang menerima nama sebagai parameter.

1
function tampilkanSalam(nama) {
2
  console.log(`Halo, ${nama}!`);
3
}

Kemudian memanggilnya:

1
tampilkanSalam("Budi");
2
tampilkanSalam("Ani");
3
tampilkanSalam("Gabuters");

Hasilnya:

1
Halo, Budi!
2
Halo, Ani!
3
Halo, Gabuters!

Pada contoh tersebut, nama adalah parameter.

Parameter merupakan nama variabel yang didefinisikan dalam deklarasi function untuk menerima input.

Sedangkan "Budi", "Ani", dan "Gabuters" adalah argument.

Argument merupakan nilai yang kita berikan ketika memanggil function.

Mudahnya:

• Parameter disiapkan ketika function dibuat.
• Argument diberikan ketika function dipanggil.

4. Function dengan Beberapa Parameter#

Sebuah function dapat memiliki lebih dari satu parameter.

Contohnya, kita ingin menghitung total artikel dari dua kategori.

1
function hitungTotalArtikel(html, css) {
2
  const total = html + css;
3

4
  console.log(`Total artikel: ${total}`);
5
}

Pemanggilannya:

1
hitungTotalArtikel(5, 6);

Hasilnya:

1
Total artikel: 11

Kita juga bisa menggunakan nilai yang berbeda:

1
hitungTotalArtikel(10, 8);

Hasilnya:

1
Total artikel: 18

Perhatikan urutan argument.

Ketika kita memanggil:

1
hitungTotalArtikel(5, 6);

Nilai 5 diberikan kepada parameter html, sedangkan 6 diberikan kepada css.

Karena itu, urutan argument perlu diperhatikan.

1
function tampilkanSalam(nama = "Gabuters") {
2
  console.log(`Halo, ${nama}!`);
3
}

1
tampilkanSalam();
2
tampilkanSalam("Budi");

1
Halo, Gabuters!
2
Halo, Budi!

1
tampilkanSalam(null);

1
Halo, null!

5. Mengenal return#

Sejauh ini, function kita langsung menampilkan hasil menggunakan console.log().

Tetapi bagaimana jika hasil perhitungannya ingin digunakan lagi?

Misalnya, kita ingin menghitung total artikel, kemudian menggunakan hasilnya untuk perhitungan lain.

Untuk itu, kita membutuhkan return.

Contohnya:

1
function hitungTotalArtikel(html, css) {
2
  return html + css;
3
}

Sekarang kita bisa menyimpan hasil function ke dalam variabel.

1
const total = hitungTotalArtikel(5, 6);
2

3
console.log(total);

Hasilnya:

1
11

Perhatikan bahwa function tidak langsung mencetak hasil.

Function mengembalikan nilai kepada kode yang memanggilnya.

Nilai tersebut kemudian dapat digunakan untuk kebutuhan lain.

Contohnya:

1
function hitungTotalArtikel(html, css) {
2
  return html + css;
3
}
4

5
const totalArtikel = hitungTotalArtikel(5, 6);
6
const targetArtikel = 20;
7

8
const sisaTarget = targetArtikel - totalArtikel;
9

10
console.log(`Total artikel: ${totalArtikel}`);
11
console.log(`Sisa target: ${sisaTarget}`);

Hasilnya:

1
Total artikel: 11
2
Sisa target: 9

Dengan return, function menjadi lebih fleksibel karena hasilnya tidak hanya digunakan untuk ditampilkan.

6. Perbedaan console.log dan return#

Ini salah satu hal yang sering membingungkan ketika pertama belajar function.

Perhatikan:

1
function tambah(a, b) {
2
  console.log(a + b);
3
}

Kemudian:

1
const hasil = tambah(5, 3);
2

3
console.log(hasil);

Hasilnya:

1
8
2
undefined

Kenapa muncul undefined?

Karena function tambah() hanya menampilkan hasil menggunakan console.log().

Function tersebut tidak mengembalikan nilai secara eksplisit.

Dalam JavaScript, function yang selesai tanpa mengembalikan nilai akan menghasilkan undefined.

Sekarang bandingkan:

1
function tambah(a, b) {
2
  return a + b;
3
}
4

5
const hasil = tambah(5, 3);
6

7
console.log(hasil);

Hasilnya:

1
8

Perbedaannya:

Sebuah function juga boleh menggunakan keduanya jika memang diperlukan.

Namun, untuk function yang tugas utamanya menghitung atau menghasilkan nilai, penggunaan return biasanya lebih fleksibel.

7. return Juga Menghentikan Eksekusi Function#

Selain mengembalikan nilai, return menghentikan eksekusi function saat itu.

Contohnya:

1
function periksaNilai(nilai) {
2
  if (nilai < 0) {
3
    return "Nilai tidak boleh negatif";
4
  }
5

6
  return "Nilai diterima";
7
}

Pemanggilannya:

1
console.log(periksaNilai(-5));
2
console.log(periksaNilai(80));

Hasilnya:

1
Nilai tidak boleh negatif
2
Nilai diterima

Ketika nilai kurang dari 0, function langsung mengembalikan pesan kesalahan.

Instruksi setelah return tidak dijalankan pada pemanggilan tersebut.

Pola seperti ini sering disebut early return.

Early return dapat membantu menyederhanakan function ketika kita perlu memeriksa kondisi yang membuat proses tidak bisa dilanjutkan.

8. Mengenal Scope Variabel#

Sekarang kita bahas konsep penting lainnya, yaitu scope.

Scope menentukan di bagian mana sebuah variabel dapat diakses.

Perhatikan contoh berikut:

1
function tampilkanArtikel() {
2
  const judul = "Belajar JavaScript";
3

4
  console.log(judul);
5
}
6

7
tampilkanArtikel();

Hasilnya:

1
Belajar JavaScript

Variabel judul dibuat di dalam function.

Sekarang coba mengaksesnya dari luar function:

1
console.log(judul);

Kode tersebut menghasilkan ReferenceError karena judul tidak tersedia di luar scope function.

1
const namaWebsite = "BapakGabut";
2

3
function tampilkanWebsite() {
4
  console.log(namaWebsite);
5
}
6

7
tampilkanWebsite();

1
BapakGabut

1
if (true) {
2
  const status = "published";
3

4
  console.log(status);
5
}

9. Function Declaration dan Function Expression#

Sampai sekarang, kita membuat function menggunakan bentuk berikut:

1
function tampilkanSalam() {
2
  console.log("Halo, Gabuters!");
3
}

Bentuk ini disebut function declaration.

JavaScript juga mendukung function expression, yaitu function yang digunakan sebagai bagian dari sebuah ekspresi.

Contohnya:

1
const tampilkanSalam = function () {
2
  console.log("Halo, Gabuters!");
3
};

Pemanggilannya tetap sama:

1
tampilkanSalam();

Hasilnya:

1
Halo, Gabuters!

1
tampilkanSalam();
2

3
function tampilkanSalam() {
4
  console.log("Halo, Gabuters!");
5
}

1
tampilkanSalam();
2

3
const tampilkanSalam = function () {
4
  console.log("Halo, Gabuters!");
5
};

10. Mengenal Arrow Function#

JavaScript modern menyediakan cara lain untuk menulis function, yaitu arrow function.

Contohnya:

1
const tampilkanSalam = (nama) => {
2
  console.log(`Halo, ${nama}!`);
3
};

Pemanggilannya:

1
tampilkanSalam("Gabuters");

Hasilnya:

1
Halo, Gabuters!

Sekilas, arrow function mirip dengan function expression.

Namun, cara penulisannya lebih ringkas.

Bandingkan:

1
const tambah = function (a, b) {
2
  return a + b;
3
};

Dengan:

1
const tambah = (a, b) => {
2
  return a + b;
3
};

Keduanya menghasilkan nilai yang sama ketika dipanggil dengan argument yang sama.

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

3
console.log(tambah(5, 3));

1
8

1
const tambah = (a, b) => {
2
  return a + b;
3
};

11. Function sebagai Nilai#

Ada satu karakteristik JavaScript yang menarik.

Function dapat disimpan dalam variabel dan diberikan sebagai argument kepada function lain.

Contohnya:

1
function tampilkanPesan() {
2
  console.log("Halo, Gabuters!");
3
}
4

5
const jalankan = tampilkanPesan;
6

7
jalankan();

Hasilnya:

1
Halo, Gabuters!

Perhatikan bahwa kita menulis:

1
const jalankan = tampilkanPesan;

Bukan:

1
const jalankan = tampilkanPesan();

Penulisan pertama menyimpan referensi function ke dalam variabel jalankan.

Sedangkan penulisan kedua menjalankan function terlebih dahulu, lalu menyimpan nilai hasilnya.

Konsep function sebagai nilai akan sangat berguna ketika kita mempelajari callback, metode array, dan event.

12. Praktik: Membuat Function Pengelola Artikel#

Sekarang kita gabungkan materi function dengan variabel, percabangan, dan perulangan yang sudah dipelajari.

Bayangkan kita ingin membuat beberapa function sederhana untuk membantu mengelola informasi artikel BapakGabut.

Kita mulai dengan function untuk menghitung total artikel.

1
function hitungTotalArtikel(terbit, draft) {
2
  return terbit + draft;
3
}

Kemudian kita buat function untuk menentukan status artikel.

1
function tentukanStatusArtikel(sudahTerbit) {
2
  if (sudahTerbit) {
3
    return "Published";
4
  }
5

6
  return "Draft";
7
}

Selanjutnya, buat function untuk menampilkan ringkasan.

1
function tampilkanRingkasan(terbit, draft) {
2
  const total = hitungTotalArtikel(terbit, draft);
3

4
  console.log("=== Ringkasan Artikel BapakGabut ===");
5
  console.log(`Artikel terbit: ${terbit}`);
6
  console.log(`Artikel draft: ${draft}`);
7
  console.log(`Total artikel: ${total}`);
8
}

Sekarang gabungkan semuanya dalam satu file script.js:

1
function hitungTotalArtikel(terbit, draft) {
2
  return terbit + draft;
3
}
4

5
function tentukanStatusArtikel(sudahTerbit) {
6
  if (sudahTerbit) {
7
    return "Published";
8
  }
9

10
  return "Draft";
11
}
12

13
function tampilkanRingkasan(terbit, draft) {
14
  const total = hitungTotalArtikel(terbit, draft);
15

16
  console.log("=== Ringkasan Artikel BapakGabut ===");
17
  console.log(`Artikel terbit: ${terbit}`);
18
  console.log(`Artikel draft: ${draft}`);
19
  console.log(`Total artikel: ${total}`);
20
}
21

22
const jumlahTerbit = 8;
23
const jumlahDraft = 3;
24

25
tampilkanRingkasan(jumlahTerbit, jumlahDraft);
26

27
console.log(
28
  `Status artikel baru: ${tentukanStatusArtikel(false)}`
29
);

Hasilnya:

1
=== Ringkasan Artikel BapakGabut ===
2
Artikel terbit: 8
3
Artikel draft: 3
4
Total artikel: 11
5
Status artikel baru: Draft

Dari contoh ini, kita mulai melihat manfaat memecah program menjadi beberapa function.

Setiap function memiliki tanggung jawab yang jelas.

hitungTotalArtikel() bertugas menghitung total.

tentukanStatusArtikel() menentukan label status.

tampilkanRingkasan() menyusun informasi yang ditampilkan.

Jika suatu saat aturan status berubah, kita bisa memperbaiki function yang berkaitan tanpa harus menulis ulang seluruh program.

Perlu diingat bahwa angka pada contoh tersebut hanya data latihan.

13. Kesalahan Umum Saat Menggunakan Function#

1
function tampilkanSalam() {
2
  console.log("Halo!");
3
}

1
tampilkanSalam();

1
function tambah(a, b) {
2
  console.log(a + b);
3
}
4

5
const hasil = tambah(2, 3);

1
function tambah(a, b) {
2
  return a + b;
3
}
4

5
console.log(tambah(5));

1
NaN

1
function contoh() {
2
  const pesan = "Halo!";
3
}
4

5
console.log(pesan);

14. Latihan Mandiri#

Sekarang giliran Gabuters mencoba.

1
Halo, Budi! Selamat datang di BapakGabut.

1
function kali(a, b) {
2
  return a * b;
3
}

1
Artikel #1
2
Artikel #2
3
Artikel #3

1
tampilkanNomorArtikel(3);

15. Penutup#

Pada artikel ini, kita sudah belajar membuat dan menggunakan function dalam JavaScript.

Kita memahami perbedaan parameter dan argument, menggunakan return untuk mengembalikan nilai, serta mengenal scope variabel.

Kita juga mempelajari function declaration, function expression, dan arrow function.

Yang paling penting, kita mulai memahami bahwa function membantu mengorganisasi kode menjadi bagian-bagian yang dapat digunakan kembali.

Namun, sejauh ini contoh kita masih banyak menggunakan variabel terpisah.

Bagaimana jika kita mempunyai puluhan artikel dengan judul, kategori, dan status masing-masing?

Apakah kita harus membuat variabel berbeda untuk setiap artikel?

Tentu ada cara yang lebih praktis.

Pada artikel berikutnya, kita akan membahas Array dan Object JavaScript: Mengelola Sekumpulan Data.

Kita akan belajar menyimpan kumpulan data, mengaksesnya, dan mengolahnya menggunakan metode seperti forEach(), map(), dan filter().

Sampai jumpa di artikel berikutnya, Gabuters!