Belajar Fungsi Pada Javascript dan Contoh Penerapannya

Belajar Fungsi Pada Javascript dan Contoh Penerapannya

Pada artikel kali ini kita akan belajar fungsi pada bahasa pemrograman javascript dimana fungsi pada javascript merupakan salah satu blok bangunan mendasar dalam bahasa pemrograman javascript. Fungsi pada javascript mirip dengan prosedur-satu set pernyataan yang melakukan tugas atau perhitungan nilai, tetapi agar suatu prosedur memenuhi syarat sebagai fungsi, ia harus dapat mengambil beberapa input dan mengembalikan output dimana terdapat beberapa hubungan yang jelas antara masukan dan juga keluaran.

Untuk dapat menggunakan suatu fungsi, kalian harus mendefinisikan pada suatu tempat dalam lingkup dimana anda ingin memanggilnya. Selanjutnya jika akan lanjut pada pembahasan Parameter Fungsi Pada Javascript

Baca Juga: Belajar Pemrograman Javascript Lengkap

Mendefinisikan Fungsi Pada Javascript

Sebuah definisi dari fungsi (juga dapat kita sebut sebagai deklarasi fungsi, atau pernyataan fungsi yang terdiri dari function kata kunci, diikuti oleh:

  • Nama fungsi.
  • Daftar parameter dari fungsi, diapit dalam tanda kurung dan selanjutnya dipisahkan dengan koma.
  • Pernyataan javascript yang mendefinisikan fungsi, diapit didalam kurung kurawal seperti berikut {….}.

Misalnya pada kode berikut ini mendefinisikan fungsi sederhana bernama square, untuk contoh penerapannya seperti berikut:

function square(number){
      return number * number;
}

Dalam fungsi square mengambil satu parameter, yang disebut dengan number. Fungsi terdiri dari satu pernyataan yang mengatakan untuk mengembalikan parameter fungsi (yaitu, number) dikalikan dengan dirinya sendiri. Pernyataan tersebut yaitu return bertugas sebagai mengembalikan nilai yang dikembalikan oleh fungsi:

return number * number;

Parameter primitif (seperti halnya angka) diteruskan kedalam fungsi dengan nilai, nilai selanjutnya diteruskan ke fungsi, tetapi jika dalam fungsi tersebut merubah nilai suatu parameter, perubahan ini tidak tercermin secara global atau dalam fungsi pemanggilan.

Jika kalian meneruskan suatu objek (yaitu, nilai non-primitif, seperti array ataupun objek yang ditentukan oleh pengguna) sebagai parameter dan juga fungsi merubah properti objek, perubahan tersebut terlihat diluar fungsi, seperti yang ditunjukan dalam contoh berikut:

function namaFunc(theObject) {
  theObject.make = 'Yamaha';
}

var mycar = {make: 'Suzuki', model: 'Accord', year: 1998};
var x, y;

x = mycar.make; // x mendapatkan nilai "Suzuki"

myFunc(mycar);
y = mycar.make; // y Mendapatkan nilai "Yamaha"
                

Selanjutnya kita akan belajar mengenai cara-cara untuk membuat fungsi, silhakan simak kembali pembahasan berikut ini.

4 Cara Penulisan Fungsi di Javascript

Terdapat 4 cara yang dapat kita lakukan untuk membuat fungsi dalam pemrograman javascript:

  • Dengan menggunakan cara biasa.
  • Dengan menggunakan ekspresi.
  • Menggunakan tanda panah seperti (=>);
  • dan kita juga dapat menggunakan Construktor.

Selanjutnya kita akan mencoba mengimplementasikan dari keempat cara yang sudah admin sebuatkan diatas

1. Membuat Fungsi Javascript dengan Cara Biasa

Dengan menggunakan cara yang biasa ini, tentunya cara yang paling sering digunakan, terutama buat yang baru belajar bahasa pemrograman javascript. Untuk contoh scriptnya silahkan perhatikan kode dibawah ini.

function namaFungsi(){
    console.log("Welcome to Serverkoding");
}

Selanjutnya kita akan mencoba membuat fungsi dengan menggunakan ekspresi.

2. Membuat Fungsi Javascript dengan menggunakan Ekspresi

Untuk caranya penggunakan ekspresi pada fungsi javascript tentunya berbeda dengan sebelumnya, dimana kita harus membuat suatu variable dulu dan diikuti oleh function(). Untuk contoh penerapannya seperti berikut:

var namaFungsi = function(){
    console.log("Welcome to Serverkoding");
}

Pada script diatas, kita menggunakan variable, lalu variable tersebut diisi dengan fungsi. Fungsi tersebut sebenarna merupakan fungsi anonim atau dapat kita kenal sebagai fungsi tanpa nama (anonymous function).

3. Membuat Fungsi Javascript dengan Tanda Panah

Membuat fungsi pada javascript dengan menggunakan tanda panah tentunya sering digunakan pada kode javascript sekarang ini. Karena penulisannya lebih sederhana. Akan tetapi akan sangat sulit untuk dipahami bagi seorang pemula yang baru belajar javascript. Fungsi ini mulai muncul pada saat munculnya stadar ES6.

Untuk Contoh penerapan fungsi javascript dengan tanda panah seperti berikut ini:

var namaFungsi = () => {
    console.log("Welcome to Serverkoding");
}

// ini merupakan contoh lainnya dari penggunaan fungsi dengan tanda panah
var namaFungsi = () => console.log("Welcome to Serverkoding");

Sebenarnya untuk sintak penulisan program hampir sama dengan yang menggunakan ekspresi. Hanya saja, kita menggunakan tanda panah (=>) sebagai gantinya yaitu untuk mengganti function.

Pembuatan fungsi dengan cara tersebut disebut dengan arrow function.

4. Membuat Fungsi Javascript dengan Konstruktor

Pembuatan fungsi javascript dengan menggunakan konstruktor tentunya sangat tidak direkomendasikan oleh Developer Mozilla. Karena terlihat lebih rumit dan kurang bagus. DIkarenakan fungsinya dibuat dalam bentuk string yang dapat mengganggu kinerja dari engine javascript.

Contoh penerapan dengan menggunakan fungsi javascript konstrukto seperti berikut:

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

Berikut merupakan 4 cara pembuatan function pada javascript, bagi kalian yang baru berkenalan dengan javascript, admin rekomendasikan untuk menggunakan cara yang pertama terlebih dahulu. Selanjutnya jika teman-teman sudah terbiasa maka cobalah menggunakan cara yang ke 2 dan juga 3.

Selanjutnya kita akan belajar cara untuk memanggil atau mengeksekusi fungsi, Silahkan simak kembali pembahasan berikut.

Cara Memanggil atau Eksekusi Fungsi Javascript

Setelah kita belajar mengenai cara membuat fungsi pada bahasa pemrograman javascript, Lalu tentunya kita harus mengetahui juga cara untuk memanggilnya.

Kita dapat memanggil fungsi didalam script javascript dengan menuliskan nama fungsinya seperti ini:

namaFungsi();

Contoh penerapan dalam program seperti berikut:

// membuat fungsi
function sayHello(){
    console.log("Hello Kawan Serverkoding");
}

// memanggil fungsi
sayHello() // maka akan menghasilkan -> Hello Kawan Serverkoding

Selain dengan menggunakan cara yang diatas, kita juga dapat memanggil fungsi dengan melalui atribut event pada kerangka HTML.

Contoh penerapannya:

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

Selanjutnya kita akan belajar mengenai function parameter pada Javascript.

Parameter Fungsi dan Argumen Pada Javascript

Pada pembahasan sebelumnya, kalian sudah mempelajari bahwa pada javascript fungsi dapat memiliki parameter, contoh penulisan dari parameter fungsi seperti berikut:

function functionName( parameter1, parameter2, parameter3) {
  // code to be executed
}

Parameter fungsi merupakan nama yang tercantum dalam definisi fungsi. Fungsi argumen merupakan nilai-nilai dilewatkan ke (dan diterima oleh suatu fungsi).

Aturan Dalam Parameter

Definisi fungsi dari javascript tidak menentukan tipe data untuk suatu parameter. Fungsi dalam javascript tidak melakukan pemeriksaan tipe pada argumen yang diteruskan.

Fungsi javascript juga tidak memeriksa jumlah argumen yang diterima.

Parameter Default Function Javascript

Jika suatu fungsi dipanggil dengan argumen yang sudah hilang (dapat dikatakan kurang dari yang dideklarasikan), nilai yang hilang diatur kedalam undefined.

Terkadang hal tersebut dapat diterima, tetapi terkarang juga lebih baik untuk menerapkan nilai secara default kedalam parameter, berikut merupakan beberapa contoh penerapan dari Parameter default function javascript.

function myFunction(x, y) {
  if (y === undefined) {
    y = 2;
  }
}

Dalam ECMAScript 2015 dapat memungkinkan nilai parameter secara default dalam deklarasi fungsi:

function (x, y = 2) {
  // function code
}

Silahkan lanjutkan ke:

Kesimpulan

Fungsi yang didefinisikan oleh user sangatlah penting untuk dipelajarikarena dengan menggunakan fungsi tentunya dapat mempersingkat penulisan script saat kita membuat suatu program, terimakasih telah berkunjung dan membaca artikel ini semoga artikel ini dapat menambah pengetahuan teman-teman mengenyai Belajar Fungsi Pada Javascript.

Semoga Bermanfaat, salam Success 🙂

By: Muhammad Rizal Supriadi

Leave a Comment

Your email address will not be published. Required fields are marked *