Days
Hours
Minutes
Seconds

Promo Grand Opening

15% OFF

Khusus Pelanggan Baru

Tutorial #6: Function—Jantungnya Logika dalam JavaScript

Selamat datang di tutorial JavaScript #6! 🚀

Dalam bagian ini, kita akan membahas salah satu fondasi terpenting dalam pemrograman JavaScript: Function. Memahami function akan membuat kode Anda lebih rapi, terstruktur, dan efisien. Mari kita mulai!


 

 

Bayangkan function sebagai sebuah “mesin” atau “kotak ajaib” yang dirancang untuk melakukan tugas tertentu. Anda bisa memberikannya beberapa input (disebut parameter), dan mesin ini akan menjalankan instruksi di dalamnya untuk menghasilkan output.

Tujuan utama dari function adalah:

  • Reusability (Dapat Digunakan Kembali): Anda tidak perlu menulis kode yang sama berulang kali. Cukup definisikan sekali, lalu panggil function tersebut kapan pun Anda butuhkan.
  • Organization (Organisasi): Memecah kode menjadi blok-blok yang lebih kecil dan mudah dikelola, sehingga kode Anda menjadi lebih mudah dibaca dan dipahami.

 

Deklarasi dan Memanggil Function

 

Ada dua langkah utama dalam menggunakan function:

  1. Deklarasi (Declaration): Mendefinisikan function dan instruksi di dalamnya.
  2. Memanggil (Calling): Menjalankan function tersebut.

Berikut adalah sintaks dasar untuk mendeklarasikan function:

JavaScript

function namaFunction() {
  // Kode yang akan dieksekusi saat function dipanggil
}

Dan ini cara memanggilnya:

JavaScript

namaFunction();

Mari kita lihat contoh sederhana:

JavaScript

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

// Memanggil function sapa()
sapa(); // Output: "Halo, selamat datang di JavaScript!"

Ketika sapa() dipanggil, kode di dalam kurung kurawal {} akan dieksekusi.


 

Parameter dan Argumen

 

Sebuah function bisa menerima data dari luar. Data yang diberikan saat deklarasi disebut parameter, dan data yang kita kirimkan saat memanggil function disebut argumen.

JavaScript

// Function dengan parameter 'nama'
function sapaNama(nama) {
  console.log("Halo, " + nama + "!");
}

// Memanggil function dan memberikan argumen "Budi"
sapaNama("Budi"); // Output: "Halo, Budi!"

// Memanggil lagi dengan argumen berbeda
sapaNama("Siti"); // Output: "Halo, Siti!"

Dalam contoh di atas, nama adalah parameter. Saat kita memanggil sapaNama("Budi"), string "Budi" menjadi argumen yang nilainya akan digunakan oleh parameter nama.

Sebuah function bisa memiliki lebih dari satu parameter.

JavaScript

function tambah(angka1, angka2) {
  console.log(angka1 + angka2);
}

tambah(5, 10); // Output: 15
tambah(20, 30); // Output: 50

 

Mengembalikan Nilai (Return)

 

Terkadang, Anda tidak hanya ingin function melakukan sesuatu (seperti mencetak ke konsol), tetapi juga ingin function tersebut mengembalikan nilai yang bisa Anda gunakan di bagian lain kode Anda. Di sinilah keyword return berperan.

JavaScript

function kali(angkaA, angkaB) {
  return angkaA * angkaB; // Mengembalikan hasil perkalian
}

// Memanggil function dan menyimpan nilai yang dikembalikan
let hasilPerkalian = kali(4, 5);

console.log(hasilPerkalian); // Output: 20

Dalam contoh ini, function kali() tidak mencetak apapun ke konsol. Sebaliknya, ia mengembalikan hasil perkalian, yang kemudian kita simpan dalam variabel hasilPerkalian untuk digunakan di lain waktu.


 

Jenis Function Lainnya (Function Expression & Arrow Function)

 

Selain cara di atas, ada juga cara lain untuk membuat function di JavaScript.

1. Function Expression

Ini adalah function yang disimpan dalam sebuah variabel.

JavaScript

const kurangi = function(a, b) {
  return a - b;
};

let hasilKurang = kurangi(10, 3

Wawasan Terbaru

Gemini_Generated_Image_wfw5uwwfw5uwwfw5
Mengenal Dunia Grafis: Dari Piksel Hingga Vektor, Kekuatan Visual di Era Digital
Gemini_Generated_Image_b6dimfb6dimfb6di
Mengenal Foundation: Kerangka Kerja Front-End Profesional untuk Web Responsif
Gemini_Generated_Image_sx3ztpsx3ztpsx3z
CSS
Mempercantik Website dengan CSS: Seniman di Balik Tampilan Web 🎨
Gemini_Generated_Image_e013qke013qke013
Mengenal HTML: Fondasi dari Setiap Halaman Website 🌐
Gemini_Generated_Image_ldki4nldki4nldki
Menyelami Dunia Coding: Seni Berbicara dengan Komputer
Gemini_Generated_Image_dpvliydpvliydpvl
Menguasai GIT: Fondasi Penting dalam Dunia Pengembangan Perangkat Lunak
Gemini_Generated_Image_sqcib9sqcib9sqci
Tutorial Python #12: Mengenal Jenis-jenis Operator dalam Python
Gemini_Generated_Image_o1bw3do1bw3do1bw
Memahami Tipe Data Dictionary dalam Python
Gemini_Generated_Image_ko4ixfko4ixfko4i
Mengenal Tipe Data Set dalam Python
Gemini_Generated_Image_1xop7m1xop7m1xop
Tuple dalam Python: Pengenalan dan Tutorial

Wawasan Serupa

Gemini_Generated_Image_jqzcx1jqzcx1jqzc
Gemini_Generated_Image_4y7hx34y7hx34y7h
Gemini_Generated_Image_8u3is88u3is88u3i
Gemini_Generated_Image_sif5j6sif5j6sif5

Ceritakan Detail Proyekmu

Mulai dari 30K aja, solusi IT kamu langsung jalan tanpa drama.

Kata Mereka Tentang Solusi Coding

Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek