skip to Main Content
Tutorial Javascript Dasar #07 – Mengenal Function Pada Javascript

Tutorial Javascript Dasar #07 – Mengenal Function Pada Javascript

Function Pada Javascript

Saat membuat suatu aplikasi, biasanya kita akan menemukan beberapa statement atau ekspresi yang sama dan digunakan secara berulang. Jika kita memiliki baris coding yang sangat panjang dan kita menuliskan manual ini tentunya bisa jadi merepotkan, oleh karena itu kita membutuhkan function.

Untuk mengetahui kapan, dan mengapa kita perlu menggunakan function mari kita lihat contoh berikut ini:

// di bagian lain kode kita
const welcomeFebry = "Hi, Febry. Selamat Datang.";
console.log(welcomeFebry); // Hi, Febry. Selamat Datang.  
// di bagian lain kode kita
const welcomeAngga = "Hi, Angga. Selamat Datang.";
console.log(welcomeAngga); // Hi, Angga. Selamat Datang.
// di bagian lain kode kita
const welcomeRhea = "Hi, Rhea. Selamat Datang.";
console.log(welcomeRhea); // Hi, Rhea. Selamat Datang.

Perhatikan kode di atas, kita menggunakan string yang sama secara berulang kali dan yang berubah hanya nama saja (febry, angga, dan rhea).

Coba bayangkan jika string atau variabel tersebut berada di bagian lain suatu kode kita, atau berbeda file. Jika kita ingin mengubah tulisan Hi menjadi Hello apa yang kita lakukan? Tentu saja kita harus merubah satu persatu. Bayangkan jika kode kita memiliki line yang banyak pasti ini akan lebih merepotkan.

Sekarang, kita coba menggunakan fungsi untuk menyelesaikan masalah tersebut menggunakan cara berikut ini:

const welcome = (nama) => 'Hi, ' + nama + '. Selamat Datang.';
console.log(welcome('Febry')); // Hi, Febry. Selamat Datang.
console.log(welcome('Angga')); // Hi, Angga. Selamat Datang.
console.log(welcome('Rhea')); // Hi, Rhea. Selamat Datang.

Hasil dari kode di atas sama dengan yang sebelumnya. Tetapi sekarang menggunakan fungsi, kode menjadi lebih ringkas, dan juga lebih mudah dikelola.

Jika kita ingin mengubah output tulisan Hi menjadi Hello kita hanya perlu mengubah string yang ada di dalam fungsi.

Apa Itu Function?

Function atau fungsi adalah “subprogram” yang dapat dipanggil di bagian lain kode kita atau di dalam fungsi itu sendiri (rekursi). Fungsi dapat memiliki serangkaian pernyataan di badan atau blok fungsi.

Pada JavaScript, fungsi dapat menerima dan selalu mengembalikan nilai. Jika kita membuat fungsi yang tidak mengembalikan nilai, maka fungsi akan tetap mengembalikan nilai dalam bentuk nilai undefined. Materi mengenai fungsi cukup banyak dan kompleks, namun saat ini kita akan mempelajari dasar-dasarnya saja.

Parameter dan Argumen pada Function

Dalam sebuah function ada parameter dan juga argumen. Parameter adalah nama variabel atau nama alias dari argumen atau nilai yang akan diteruskan ke badan fungsi. Parameter ditulis di dalam kurung lengkung function. Sedangkan argumen adalah nilai yang diteruskan saat function dipanggil.

Parameter akan diinisialisasi dengan nilai argumen yang diteruskan. Kita bisa meneruskan nilai tipe data apa pun, entah itu primitif, non-primitif, hingga function.

Dari kode di atas, karena kita meneruskan nilai 1 saat memanggil fungsi, maka nilai parameter num saat fungsi dipanggil adalah 1.

3 Cara Membuat Function

Ada banyak cara untuk membuat function yang bisa kita gunakan di JavaScript dan kali ini kita akan mempelajari cara membuat function yang sering digunakan di javascript, diantaranya cara membuat function declaration, function expression, dan arrow function. Ketiga function memiliki perbedaan masing-masing yang bisa disimak pada table di bawah:

Untuk kalian yang masih asing dengan istilah Hoisting atau diangkat, maksud hoisting pada javascript adalah kita dapat menggunakan variabel atau function tersebut sebelum dideklarasi atau ditulis. Pembahasan terkait hoisting sudah pernah kita bahas sebelumnya pada artikel variabel pada javascript dan silahkan kunjungi artikel tersebut untuk membaca lebih lengkap.

1. Function Declaration

Cara membuat function dengan function Declaration atau mendeklarasi fungsi dapat menggunakan kata kunci function diikuti dengan nama fungsi (wajib), lalu parameter di dalam sepasang kurung lengkung (parameter1, parameter2, …, parameterN), diakhiri dengan kurung kurawal {…} untuk membatasi badan fungsi. Ini adalah cara paling umum dan biasa yang digunakan untuk membuat fungsi.

Berikut ini sintaks-nya:

function name(param) {
    statements;
  }

Keterangan:

  • name: nama fungsi.
  • param (opsional): parameter atau nama untuk nilai argumen yang diteruskan ke fungsi, batas parameter bergantung pada mesin, jika parameter lebih dari satu dipisahkan dengan koma.
  • statements (opsional): statement atau pernyataan termasuk ekspresi, logika, perulangan dan sebagainya.

Berikut ini contoh penggunaannya:

function apakahGanjil(num) {
  let cekNumber = num % 2 !== 0;
  console.log(cekNumber);
}
 
apakahGanjil(1); // true
apakahGanjil(2); // false

Di atas adalah contoh cara membuat function dengan mendeklarasikan function bernama “apakahGanjil” untuk menentukan apakah suatu bilangan ganjil atau bukan.

Membuat fungsi dengan cara function Declaration itu berarti kita bisa memanggil fungsi sebelum deklarasi (Hoisting) dan ini yang membuat cara ini paling sering digunakan dan menjadi cara yang paling umum. Jadi kita bisa memanggil seperti contoh berikut ini:

apakahGanjil(1); // true
apakahGanjil(2); // false
function apakahGanjil(num) {
  let cekNumber = num % 2 !== 0;
  return console.log(cekNumber);
}

2. Function Expression

Membuat function dengan expression atau function expression ini kita menggunakan variabel, lalu diisi dengan function. Jadi penamaan function itu menggunakan variabel.

Berikut ini sintaksnya : 

const name = function (param) {
  statements;
};
  • name: nama fungsi.
  • param (opsional): parameter atau nama untuk nilai argumen yang diteruskan ke fungsi, batas parameter bergantung pada mesin, jika parameter lebih dari satu dipisahkan dengan koma.
  • statements (opsional): statement atau pernyataan termasuk ekspresi, logika, perulangan dan sebagainya.

Berikut ini contoh penggunaannya: 

const apakahGanjil = function (num) {
  let cekNumber = num % 2 !== 0;
  console.log(cekNumber);
};
apakahGanjil(1); // true
apakahGanjil(2); // false

Contoh di atas adalah membuat fungsi seperti sebelumnya dimana bisa kita pakai jika kita ingin membuat function sebagai arguments dalam method atau function lain. Contohnya adalah sebagai berikut:

setTimeout(function() {
  console.log('Execute later after 1 second')
}, 1000);

Contoh di atas adalah function Expression tanpa nama atau anonymous function expression dan biasanya digunakan sebagai callback. Pada contoh di atas kita menggunakan function ke dalam setTimeout() function. Dimana fungsi yang ditulis tersebut adalah sebagai argumen yang akan dijalankan setelah 1 detik.

Selain menggunakan function expression sebagai argument kita bisa langsung memanggil function expression ini dinamakan Immediately Invoked Function Expression (IIFE). Jika kalian ingin membuat function dan langsung menjalankannya. Kalian dapat menggunakan sintaks berikut ini: 

(function (param) {
  statements;
})(param);
  • param (opsional): parameter atau nama untuk nilai argumen yang diteruskan ke fungsi, batas parameter bergantung pada mesin, jika parameter lebih dari satu maka dipisahkan dengan koma.
  • statements (opsional): statement atau pernyataan termasuk ekspresi, logika, perulangan dan sebagainya.

Berikut contoh penggunaannya: 

let person = {
  firstName: "John",
  lastName: "Doe",
};
 
(function () {
  console.log(person.firstName + " " + person.lastName); //John Doe
})(person);

2. Arrow Function

Membuat function dengan arrow atau Arrow Function ini kita menggunakan variabel, lalu diisi dengan function. Jadi penamaan function itu menggunakan variabel, yang berbeda disini kita tidak perlu menggunakan keyword function.

Berikut ini sintaks:

const name = (param) => {
  statements;
};
  • name: nama fungsi.
  • param (opsional): parameter atau nama untuk nilai argumen yang diteruskan ke fungsi, batas parameter bergantung pada mesin, jika parameter lebih dari satu dipisahkan dengan koma.
  • statements (opsional): statement atau pernyataan termasuk ekspresi, logika, perulangan dan sebagainya.

Berikut ini contoh penggunaanya:

const apakahGanjil = (num) => {
  let cekNumber = num % 2 !== 0;
  console.log(cekNumber);
};
apakahGanjil(1); // true
apakahGanjil(2); // false

Membuat function menggunakan arrow juga bisa kita gunakan jika kita ingin menggunakan function sebagai arguments dalam method atau function lain. Contoh sintaknya adalah sebagai berikut:

setTimeout(() => {
  console.log("Execute later after 1 second");
}, 1000);

Contoh di atas adalah arrow function tanpa nama atau anonymous arrow function, biasanya digunakan sebagai callback dan tidak diinisialisasi ke variabel. Pada contoh di atas kita menggunakan function ke dalam setTimeout() function. Fungsi yang ditulis sebagai argument akan dijalankan setelah 1 detik.

Selain menggunakan arrow function sebagai argument kita bisa langsung memanggil arrow function ini dinamakan Immediately Invoked Arrow Function (IIAE). Jika kalian ingin membuat function dan langsung menjalankannya maka kalian dapat menggunakan sintak sebagai berikut: 

((param) => {
  statements;
})(param);
  • aram (opsional): parameter atau nama untuk nilai argumen yang diteruskan ke fungsi, batas parameter bergantung pada mesin, jika parameter lebih dari satu dipisahkan dengan koma.
  • statements (opsional): statement atau pernyataan termasuk ekspresi, logika, perulangan dan sebagainya.

Berikut ini contoh penggunaannya: 

let person = {
  firstName: "John",
  lastName: "Doe",
};
 
( () => {
  console.log(person.firstName + " " + person.lastName); //John Doe

Return dalam Function (mengembalikan nilai dengan function)

Pada JavaScript, sebuah fungsi akan selalu mengembalikan nilai, jika fungsi yang dibuat tidak mengembalikan nilai, maka nilai yang dikembalikan adalah undefined. Jika kita ingin membuat fungsi yang mengembalikan nilai tertentu, kita harus menggunakan keyword return diikuti oleh nilai yang ingin dikembalikan.

Contoh fungsi yang mengembalikan nilai:

function apakahGanjil(num) {
  let cekNumber = num % 2 !== 0;
  return cekNumber;
}
console.log(apakahGanjil(1)); // true

Tidak ada keyword return di dalam function, tetapi secara default function tetap mengembalikan nilai undefined.

Cara Memanggil Function

Terakhir kita akan membahas tentang cara memanggil function, karena sebuah function tidak akan dijalankan selama kita tidak memanggilnya. Saat membuat function itu artinya kita baru mendeklarasi function tersebut belum digunakan atau dipanggil, kecuali kita mendeklarasi menggunakan anonymous function, IIFE, dan IIFA.

Untuk memanggil function kita bisa menulis nama function yang ingin dipanggil diikuti dengan kurung lengkung. Jika fungsi memiliki parameter kita bisa meneruskan nilai atau argumen, namaFungsi(arg).

Contoh kode di bawah tidak akan menjalankan fungsi karena kita baru mendeklarasikan atau membuat. Statement di dalam fungsi tidak akan dieksekusi, sehingga tidak akan mempengaruhi atau menghasilkan nilai apa pun, namun ini akan disimpan di memori.

const apakahGanjil = (num) => {
  let cekNumber = num % 2 !== 0;
  console.log(cekNumber);
};

Contoh memanggil fungsi:

function apakahGanjil(num) {
  let cekNumber = num % 2 !== 0;
  console.log(cekNumber);
}
 
apakahGanjil(1); // true

Jika fungsi dipanggil tanpa kurung lengkung () dan hanya nama, statement di dalam badan fungsi tidak akan dieksekusi, dan nilai yang dikembalikan adalah kode fungsi sebagai contoh berikut:

function apakahGanjil(num) {
  let cekNumber = num % 2 !== 0;
  console.log(cekNumber);
}
 
apakahGanjil;
/*
apakahGanjil(num) {
  let cekNumber = num % 2 !== 0;
  console.log(cekNumber);
}
*/

Demikian pembahasan kita kali ini tentang function dalam JavaScript, jangan khawatir kita akan kembali melanjutkan pembahasan tentang JavaScript lainnya pada artikel selanjutnya. Jadi,  jangan lupa untuk subscribe artikel kami dengan memasukan email kalian pada kolom di samping, agar kalian tidak tertinggal artikel terbaru dari kami.

Dan untuk kalian yang berminat belajar lebih lanjut tentang pemrograman javascript dan bahasa pemrograman lainnya, silahkan kunjungi social media Xsis Academy untuk info lebih lanjut mengenai Bootcamp Xsis Academy atau instagram Xsis Academy.

 

Selain itu, temukan juga video tutorial ngoding dari Tim Trainer Xsis Academy pada channel ETG berikut ini Youtube Equine Technologies Group

 

——–

Penulis : Aulia Brahmantio Diaz – Webmaster Xsis Mitra Utama

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top