author Ahmad Muhardian

Belajar Javascript: Memahami Fungsi di Javascript dan Contoh Programnya


Javascript Fungsi

Dalam pemrograman, fungsi sering digunakan untuk membungkus program menjadi bagian-bagian kecil.

Logika program yang ada di dalam fungsi dapat kita gunakan kembali dengan memanggilnya.

Sehingga tidak perlu menulis ulang.

Pada kesempatan ini, kita akan belajar tentang fungsi di Javascript.

Mulai dari cara membuat, memanggil, hingga membuat program CRUD sederhana dengan fungsi.

Mari kita mulai…

Apa itu Fungsi?

Fungsi adalah sub-program yang bisa digunakan kembali baik di dalam program itu sendiri, maupun di program yang lain.

Fungsi di dalam Javascript adalah sebuah objek. Karena memiliki properti dan juga method.

Bagi pemula konsep ini cukup membingungkan. Apalagi yang belum mengenal konsep OOP.

Tapi tentang saja…

Kita pelajari dulu tentang fungsi, nanti saya akan bahas tentang objek di kesempatan yang berbeda.

4 Cara Membuat Fungsi di Javascript

Ada 4 cara yang bisa kita lakukan untuk membuat fungsi di Javascript:

  1. Menggunakan cara biasa;
  2. Menggunakan ekspresi;
  3. Menggunakan tanda panah (=>);
  4. dan menggunakan Constructor.

Mari kita coba semuanya…

1. Membuat Fungsi dengan Cara Biasa

Cara ini paling sering digunakan, terutama buat yang baru belajar Javascript.

function namaFungsi(){
    console.log("Hello World!");
}

2. Membuat Fungsi dengan Ekspresi

Cara membuat fungsi dengan ekspresi:

var namaFungsi = function(){
    console.log("Hello World!");
}

Kita menggunakan variabel, lalu diisi dengan fungsi. Fungsi ini sebenarnya adalah fungsi anonim (anonymous function) atau fungsi tanpa nama.

3. Membuat Fungsi dengan Tanda Panah

Cara ini sering digunakan di kode Javascript masa kini, karena lebih sederhana. Akan tetapi sulit dipahami bagi pemula. Fungsi ini mulai muncul pada standar ES6.

Contoh:

var namaFungsi = () => {
    console.log("Hello World!");
}

// atau seperti ini (jika isi fungsi hanya satu baris):
var namaFungsi = () => console.log("Hello World!");

Sebenarnya hampir sama dengan yang menggunakan ekspresi. Bedanya, kita menggunakan tanda panah (=>) sebagai ganti function.

Pembuatan fungsi dengan cara ini disebut arrow function.

4. Membuat Fungsi dengan Kostruktor

Cara ini sebenarnya tidak direkomendasikan oleh Developer Mozilla, karena terlihat kurang bagus. Soalnya body fungsinya dibuat dalam bentuk string yang dapat mempengaruhi kinerja engine javascript.

Contoh:

var namaFungsi = new Function('console.log("Hello World!");');

Untuk yang masih pemula, saya rekomendasikan gunakan cara yang pertama dulu. Nanti kalau sudah terbiasa baru coba gunakan cara ke-2 dan ke-3.

View this post on Instagram

A post shared by Petani Kode | Coding & Growing (@petanikode)

Cara Memanggil/Eksekusi Fungsi

Setelah mengetahui cara membuat fungsi, lalu bagaimana cara memanggilnya?

Kita bisa memanggil fungsi di dalam kode Javascript dengan menuliskan nama fungsinya seperti ini:

namaFungsi();

Contoh:

// membuat fungsi
function sayHello(){
    console.log("Hello World!");
}

// memanggil fungsi
sayHello() // maka akan menghasilkan -> Hello World!

Selain dengan cara di atas, kita juga bisa memanggil fungsi melalui atribut event pada HTML.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <script>
    // membuat fungsi
    var sayHello = () => alert("Hello World!");
    </script>
</head>
<body>
    <!-- Memanggil fungsi saat link diklik -->
    <a href="#" onclick="sayHello()">Klik Aku!</a>
</body>
</html>

Hasilnya:

Eksekusi Fungsi

Fungsi dengan Parameter

Parameter adalah variabel yang menyimpan nilai untuk diproses di dalam fungsi.

Contoh:

function kali(a, b){
    hasilKali = a * b;
    console.log("Hasil kali a*b = " + hasilKali);
}

Pada contoh di atas, a dan b adalah sebuah parameter.

Lalu cara memanggil fungsi yang memiliki parameter adalah seperti ini:

kali(3, 2); // -> Hasil kali a*b = 6

Kita memberikan 3 untuk parameter a dan 2 untuk parameter b.

Fungsi yang Mengembalikan Nilai

Agar hasil pengolahan nilai di dalam fungsi dapat digunakan untuk proses berikutnya, maka fungsi harus mengembalikan nilai.

Pengembalian nilai pada fungsi menggunakan kata kunci return kemudian diikuti dengan nilai atau variabel yang akan dikembalikan. Contoh:

function bagi(a,b){
    hasilBagi = a / b;
    return hasilBagi;
}

// memanggil fungsi
var nilai1 = 20;
var nilai2 = 5;
var hasilPembagian = bagi(nilai1, nilai2);

console.log(hasilPembagian); //-> 4

Contoh Program Javascript dengan Fungsi

Setelah kita paham dasar-dasar pembuatan fungsi dan jenis-jenisnya, sekarang mari kita coba membuat program sederhana.

Program ini berisi CRUD (Crete, Read, Update, Delete) data barang yang tersimpan dalam sebuah array.

Silahkan buat dua file baru:

js-fungsi/
├── fungsi.js
└── index.html

File index.html adalah file yang menampilkan halaman web. Sedangkan file fungsi.js adalah programnya.

Berikut ini isi file index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar Fungsi di Javascript</title>
</head>
<body>
    
    <fieldset>
        <legend>Input Form</legend>
        <input type="text" name="barang" placeholder="input nama barang..." />
        <input type="button" onclick="addBarang()" value="Tambah" />
    </fieldset>

    <div>
        <ul id="list-barang">
        </ul>
    </div>

    <script src="fungsi.js"></script>
</body>
</html>

Berikutnya kita akan buat kode di file fungsi.js. Silahkan gunakan gaya pembuatan fungsi yang kamu sukai.

Pada contoh ini, kita akan menggunakan cara yang pertama. Karena lebih mudah.

Berikut ini isi file fungsi.js:

var dataBarang = [
    "Buku Tulis",
    "Pensil",
    "Spidol"
];


function showBarang(){
    var listBarang = document.getElementById("list-barang");
    // clear list barang
    listBarang.innerHTML = "";

    // cetak semua barang
    for(let i = 0; i < dataBarang.length; i++){
        var btnEdit = "<a href='#' onclick='editBarang("+i+")'>Edit</a>";
        var btnHapus = "<a href='#' onclick='deleteBarang("+i+")'>Hapus</a>";

        listBarang.innerHTML += "<li>" + dataBarang[i] + " ["+btnEdit + " | "+ btnHapus +"]</li>";        
    }
}

function addBarang(){
    var input = document.querySelector("input[name=barang]");
    dataBarang.push(input.value);
    showBarang();
}

function editBarang(id){
    var newBarang = prompt("Nama baru", dataBarang[id]);
    dataBarang[id] = newBarang;
    showBarang();
}

function deleteBarang(id){
    dataBarang.splice(id, 1);
    showBarang();
}

showBarang();

Hasilnya:

Program fungsi dengan javascript

Live demo: petanikode.github.io/js-fungsi/

Akhir Kata…

Fungsi merupakan hal yang wajib dipahami di dalam Javascript, karena kedepan kita akan banyak bekerja dengan fungsi baik dalam membuat objek, manipulasi HTML, melakukan ajax dan sebagainya.

Tulisan ini hanya mengajari dasar-dasar saja. Sebenarnya masih banyak lagi hal yang harus dibahas tentang fungsi.

Kerena itu…

Tunggu saja update berikutnya, 😏.

Baca Juga ini

Belajar Nodejs #02: Mengenal NPM untuk Manajemen Project Javascript

Belajar Nodejs #02: Mengenal NPM untuk Manajemen Project Javascript

Salah satu tool yang sering digunakan dalam Nodejs adalah NPM. Apa peran dan fungsi NPM dalam project Nodejs?

Belajar Nodejs #01: Pengenalan Dasar Nodejs (untuk Pemula)

Belajar Nodejs #01: Pengenalan Dasar Nodejs (untuk Pemula)

Tutorial Nodejs dari Nol untuk pemula. Dimulai dari cara install Nodejs di Linux hingga Membuat webserver dan aplikasi lainnya

Menggambar Objek dengan Perulangan dan Fungsi Random di HTML5 Canvas

Menggambar Objek dengan Perulangan dan Fungsi Random di HTML5 Canvas

Pada artikel pengenalan HTML5 Canvas sebelumnya, kita sudah belajar cara menggamabar objek-objek dasar seperti titik, garis, persegi, lingkaran, dan segitiga. Obejek digambar hanya sekali saja. Bagaiaman kalau kita ingin menggambar banyak objek dan digambar secara acak? Untuk menjawab pertanyaan ini, kita harus menggunakan perulangan dan fungsi random(). Lebih jelasnya, mari kita bahas… Menggambar Objek dengan PerulanganPada contoh di artikel sebelumnya, kita sudah pernah menggamabar persegi dua kali. <script type="text/javascript"> var canvas = document.

JSON itu Apa Sih? dan Apa Gunanya dalam Pemrograman?

JSON itu Apa Sih? dan Apa Gunanya dalam Pemrograman?

Segala hal yang perlu kamu ketahui tentang JSON. Apa itu JSON, dan apa gunanya dalam pemrograman?

Mengenal HTML5 Canvas untuk Pemrograman Grafis dan Game

Mengenal HTML5 Canvas untuk Pemrograman Grafis dan Game

Sebelum kedatangan HTML5, Game dan elemen multimedia lainnya disajikan dalam browser menggunakan Flash. Banyak game berbasis Flash yang bisa dimainkan melalui browser. Bahkan Flash juga digunakan untuk memutar video. Seingat saya dulu…tanpa Flash Player, kita tidak bisa memutar video di Youtube. Namun semuanya berubah setelah kedatangan HTML5… 1 HTML5 membawa banyak elemen baru yang menggantikan tugas Flash dalam browser. Salah satunya adalah canvas. Apa itu Canvas?Dalam dunia nyata, canvas sering digunakan untuk menggambar dan melukis.

Cara Menggunakan Plug-in Data Tables untuk Membuat Tabel Dinamis

Cara Menggunakan Plug-in Data Tables untuk Membuat Tabel Dinamis

Data Tables merupakan sebuah plug-in jQuery untuk memanipulasi data dalam tabel HTML. Data Tables memungkinkan kita melakukan membuat tabel dengan fitur pencarian, membuat pagination, menampilkan data sebanyak yang kita mau, mengambil data dari ajax, dsb. 1. Menyisipkan Data TablesPlug-in Data Tables yang saya gunakan pada tulisan ini adalah versi online melalui CDN. Bila anda ingin menggunakan versi offline, silahkan di-download dulu Data Tables-nya di https://datatables.net/download/index . Berikut ini cara menyisipkan Data Tables melalui CDN.