Fungsi-Fungsi di JavaScript

Mengenal Fungsi (Function) JavaScript

Apa yang dimaksud dengan fungsi (function) di JavaScript?

Di konsep JavaScript, fungsi bisa diilustrasikan sebagai berikut:

Seandainya kita mempunyai sebuah mesin pembuat kue. Kita bisa memasukkan bahan baku seperti tepung terigu, telur, gula, air, dan bahan lainnya ke dalam mesin tersebut, kemudian mesin itu akan mengolah bahan-bahan tersebut yang akhirnya akan menghasilkan kue.

Nah, dari gambaran tersebut, mesin pembuat kue adalah ** fungsi (function)**. Tepung terigu, telur, gula, air, dan bahan-bahan lain untuk membuat kue adalah input (parameter) dari sebuah fungsi. Kemudian kue yang dihasilkan dari proses pengolahan mesin kue adalah hasil (return value).

Mendeklarasikan Fungsi

Fungsi dapat berdiri sendiri atau disimpan di dalam sebuah variabel.

Cara mendeklarasikannya seperti ini:

// Fungsi yang berdiri sendiri
function namaFungsi(){
  // Kode yang akan dijalankan
}

// Fungsi yang disimpan di dalam variabel
let namaVariabelFungsi = function(){
  // Kode yang akan dijalankan
}

Fungsi dapat dipanggil cukup dengan menambahkan tanda kurung () setelah nama fungsi tersebut. Dalam dua contoh di atas, pemanggilan fungsinya adalah sebagai berikut:

namaFungsi();

namaVariabelFungsi();

Contoh:

// Fungsi yang berdiri sendiri
function sapa() {
  return "Selamat Pagi!";
}

console.log(sapa()); // Output: Selamat Pagi!

// Fungsi disimpan di dalam variabel

let berkenalan = function() {
  return "Hallo, nama saya Sarah.";
};

console.log(berkenalan()); // Output: Hallo, nama saya Sarah.

Pada contoh kedua di atas, return value-nya adalah "Hallo, nama saya Sarah.". Bedakan return dengan console.log() ya.

console.log() hanya menampilkan informasi ke dalam tab console JavaScript, sedangkan return akan mengembalikan sebuah nilai ke tempat di mana fungsi itu dipanggil.

Kalau bingung coba lihat contoh kode berikut:

console.log(berkenalan() + " nama kamu siapa?")

Kalau kita lihat fungsi berkenalan() tadi, return valuenya adalah "Hallo, nama saya Sarah.". Nilai dari return ini akan dikembalikan ke tempat pemanggilan fungsi tersebut, sehingga kode di atas saat dijalankan sebenarnya akan menjadi:

console.log("Hallo, nama saya Sarah." + " nama kamu siapa?")

Lalu bagaimana jika kita tidak menulis perintah return?

Misalnya seperti contoh di bawah ini:

let umur = 21;

function ulangTahun() {
    umur += 1;
}

console.log(ulangTahun()); // Output: undefined

Fungsi tersebut tidak memiliki perintah return. Di JavaScript, apabila tidak ada perintah return, secara default (standar) fungsi tersebut akan mengembalikan nilai undefined.

Parameter & Argument

Hati-hati, istilah parameter dan argument suka dianggap sama, jadi pemakaian kedua kata ini suka terbalik-balik.

Parameter adalah syarat input yang harus dimasukkan ke dalam suatu fungsi dan dideklarasikan bersama dengan deklarasi fungsi. Sementara argument adalah nilai yang dimasukan ke dalam suatu fungsi, sesuai dengan persyaratan parameter, di mana argument dituliskan bersamaan dengan pemanggilan fungsi.

Bisa digambarkan seperti ini:

function operasiPerkalian(angka1, angka2){
  return angka1 * angka2;
}

console.log(operasiPerkalian(2, 6)) // Output: 12

Penjelasan kode di atas:

• angka1 & angka2 adalah parameter. Pada contoh di atas, parameter harus bertipe number, agar bisa diolah oleh fungsi, yaitu perkalian kedua parameter.

• 2 & 6 adalah argument. Sesuai kan dengan syarat parameter? Yap, mereka bertipe number.

Function Hoisting

Ada hal keren yang dimiliki oleh fungsi JavaScript, yaitu kita bisa memanggilnya terlebih dahulu, padahal deklarasi fungsi ada di baris setelahnya.

"Apa kerennya? Perasaan biasa saja" mungkin kalian akan berpikir seperti itu.

Contoh:

console.log(operasiPerkalian(5, 5)); // Output: 25

function operasiPerkalian(angka1, angka2) {
  return angka1 * angka2;
}

Secara logika, harusnya kita mendeklarasikan fungsi terlebih dahulu, setelah itu barulah kita menggunakan fungsi tersebut (pada contoh di atas, fungsi operasiPerkalian dipanggil di dalam console.log padahal deklarasinya ditulis setelah console.log). Nah, keistimewaan inilah yang disebut dengan Function Hoisting.

Tapi, ini tidak berlaku jika fungsi tersebut dideklarasi di dalam sebuah variabel.

Contoh:

console.log(operasiPerkalian(5, 5)); // Output: Uncaught ReferenceError: Cannot access 'operasiPerkalian' before initialization

const operasiPerkalian = function(angka1, angka2) {
  return angka1 * angka2;
};

Lingkup Global vs Lingkup Lokal

Sekarang kita akan belajar tentang lingkup dari sebuah variabel. Di JavaScript, ada istilah lingkup global (global scope) dan lingkup lokal (local scope), apakah perbedaannya? Mari kita pelajari bersama di bawah ini.

Lingkup Global

Lingkup global adalah ketika sebuah variabel bisa diakses dari mana saja, baik di dalam maupun di luar dari suatu fungsi atau blok (grup) kode.

Contoh:

const olahraga = 'basketball';

function namaAtlet() {
  let atlet = 'Lionel Messi';
  const noMessi = 10;
  console.log(olahraga); // Output: basketball
  if (olahraga === 'basketball') {
     atlet = 'Kobe Bryant';
     const noKobe = 24;
     console.log(olahraga); // Output: basketball
  }
  return atlet;
}

console.log(namaAtlet()); // Output: Kobe Bryant
console.log(olahraga); // Output: basketball

Pada contoh di atas, fungsi variabel olahraga bisa diakses di dalam fungsi namaAtlet dan bahkan di dalam blok if walaupun variabel olahraga tidak dideklarasikan di dalam fungsi/blok tersebut. Ini dikarenakan variabel olahraga yang dideklarasikan di luar fungsi namaAtlet memiliki lingkup global, jadi bisa diakses dari mana saja selama ada di dalam lingkup variabel tersebut.

Lingkup Lokal

Sebaliknya, lingkup lokal adalah ketika sebuah variabel hanya bisa diakses di dalam sebuah fungsi atau blok kode. Semua variabel yang dideklarasikan di dalam sebuah fungsi/blok hanya bisa di dalam fungsi/blok tersebut saja.

Jadi, lingkup lokal bisa dibagi lagi menjadi dua tipe:

• lingkup fungsi (function scope)
• lingkup blok (block scope)

Mari kita gunakan contoh sebelumnya dan ubah perintah console.log menjadi:

const olahraga = 'basketball';

function namaAtlet() {
  let atlet = 'Lionel Messi'; // lingkup fungsi
  const noMessi = 10; // lingkup fungsi
  if (olahraga === 'basketball') { 
     atlet = 'Kobe Bryant';
     const noKobe = 24; // lingkup blok
     console.log(noMessi); // Output: 10  
  }
  console.log(noKobe); // Output: Uncaught ReferenceError: noKobe is not defined
  return atlet;
}

namaAtlet();

Pada contoh di atas, perintah console.log(noKobe) akan mengembalikan nilai error karena kita mencoba mengakses variabel noKobe di luar lingkup di mana dia dideklarasikan (yaitu di dalam blok if saja). Sedangkan perintah console.log(noMessi) akan menghasilkan output 10 karena variabel noMessi dideklarasikan di luar blok if jadi semua kode di dalam blok if tersebut mempunyai akses ke variabel itu.