JavaScript : Function

Apa Itu Function?

Fungsi adalah sekelompok pernyataan yang melakukan tugas tertentu dan dapat disimpan dan dikelola secara terpisah dari program utama. Fungsi menyediakan cara untuk membuat code package yang dapat digunakan kembali yang lebih ringkas (portabel) dan lebih mudah untuk di-debug. Berikut ini beberapa keuntungan menggunakan fungsi:

  • Fungsi mengurangi pengulangan kode dalam suatu program – Fungsi memungkinkan kalian untuk mengekstrak blok kode yang biasa digunakan menjadi satu komponen. Sekarang kalian dapat melakukan tugas yang sama dengan memanggil fungsi ini di mana pun kalian inginkan pada skrip kalian tanpa harus menyalin dan menempel blok kode yang sama berulang kali.
  • Fungsi membuat kode lebih mudah untuk dipelihara – Karena fungsi yang dibuat satu kali dapat digunakan berkali-kali, sehingga setiap perubahan yang dibuat di dalam fungsi secara otomatis diimplementasikan di semua tempat tanpa menyentuh beberapa file.
  • Fungsi membuatnya lebih mudah untuk menghilangkan error – Ketika program ini dibagi menjadi beberapa fungsi, jika ada kesalahan yang terjadi kalian tahu persis fungsi apa yang menyebabkan kesalahan dan di mana menemukannya. Karena itulah, memperbaiki kesalahan menjadi lebih mudah.
Menentukan dan Memanggil suatu Fungsi

Deklarasi fungsi dimulai dengan kata kunci function, diikuti dengan nama fungsi yang ingin kalian buat, diikuti oleh tanda kurung yaitu () dan akhirnya menempatkan function  code kalian di antara kurung kurawal {}. Berikut sintaks dasar untuk mendeklarasikan suatu fungsi:

function functionName() {
    // Code to be executed
}

Berikut adalah contoh sederhana dari suatu function, yang akan menampilkan pesan hello:

// Defining function
function sayHello() {
    alert("Hello, welcome to this website!");
}
 
// Calling function
sayHello(); // 0utputs: Hello, welcome to this website!

Setelah suatu fungsi didefinisikan, maka fungsi tersebut dapat dipanggil dari mana saja di dalam dokumen tersebut, dengan mengetikkan namanya diikuti oleh seperangkat tanda kurung, seperti sayHello() pada contoh di atas.

Catatan: Nama fungsi harus dimulai dengan huruf atau karakter garis bawah bukan dengan angka, opsional diikuti oleh lebih banyak huruf, angka, atau karakter garis bawah. Nama fungsi peka terhadap huruf besar kecil, seperti halnya nama variabel.

Menambahkan Parameter ke Function

Kalian dapat menentukan parameter saat kalian menentukan function kalian untuk menerima nilai input pada saat dijalankan. Parameter berfungsi seperti variabel placeholder dalam suatu fungsi; mereka diganti pada saat dijalankan oleh nilai-nilai (dikenal sebagai argumen) yang disediakan untuk fungsi pada saat dipanggil.

Parameter ditetapkan pada baris pertama function di dalam set tanda kurung, seperti ini:

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

Fungsi displaySum() dalam contoh berikut mengambil dua angka sebagai argumen, cukup tambahkan bersama-sama dan kemudian tampilkan hasilnya di browser.

// Defining function
function displaySum(num1, num2) {
    var total = num1 + num2;
    alert(total);
}
 
// Calling function
displaySum(6, 20); // 0utputs: 26
displaySum(-5, 17); // 0utputs: 12

Kalian dapat menentukan sebanyak mungkin parameter yang kalian inginkan. Namun untuk setiap parameter yang kalian tentukan, argumen yang sesuai perlu diteruskan ke fungsi ketika dipanggil, jika nilainya menjadi undefined. Mari kita perhatikan contoh berikut:

// Defining function
function showFullname(firstName, lastName) {
    alert(firstName + " " + lastName);
}
 
// Calling function
showFullname("Clark", "Kent"); // 0utputs: Clark Kent
showFullname("John"); // 0utputs: John undefined

Nilai Default untuk Parameter Fungsi ES6

Dengan ES6, sekarang kalian dapat menentukan nilai default ke parameter fungsi (function). Ini berarti bahwa jika tidak ada argumen yang berfungsi ketika dipanggil, maka nilai-nilai parameter default ini yang akan digunakan. Ini adalah salah satu fitur yang paling ditunggu dalam JavaScript. Berikut contohnya:

function sayHello(name = 'Guest') {
    alert('Hello, ' + name);
}

sayHello(); // 0utputs: Hello, Guest
sayHello('John'); // 0utputs: Hello, John

Sebelum ada ES6, untuk mendapatkan hal yang sama kita harus menulis sesuatu seperti ini:

function sayHello(name) {
    var name = name || 'Guest'; 
    alert('Hello, ' + name);
}

sayHello(); // 0utputs: Hello, Guest
sayHello('John'); // 0utputs: Hello, John
Mengembalikan Nilai dari suatu Function

Function dapat mengembalikan nilai kembali ke skrip yang disebut fungsi sebagai hasil dari menggunakan pernyataan return. Nilai bisa dari jenis apa pun, termasuk array dan objek.

Pernyataan return biasanya ditempatkan pada baris terakhir dari fungsi sebelum penutup kurung kurawal dan mengakhirinya dengan tanda titik koma, seperti yang ditunjukkan pada contoh berikut.

// Defining function
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Displaying returned value
alert(getSum(6, 20)); // 0utputs: 26
alert(getSum(-5, 17)); // 0utputs: 12

Suatu fungsi tidak dapat mengembalikan beberapa nilai sekaligus. Namun, kalian dapat memperoleh hasil yang serupa dengan mengembalikan nilai array, seperti yang ditunjukkan pada contoh berikut.

// Defining function
function divideNumbers(dividend, divisor){
    var quotient = dividend / divisor;
    var arr = [dividend, divisor, quotient];
    return arr;
}
 
// Store returned value in a variable
var all = divideNumbers(10, 2);
 
// Displaying individual values
alert(all[0]); // 0utputs: 10
alert(all[1]); // 0utputs: 2
alert(all[2]); // 0utputs: 5
Bekerja dengan Function Expressions

Sintaks yang kita gunakan sebelumnya untuk membuat fungsi disebut deklarasi fungsi. Ada sintaks lain untuk membuat fungsi yang disebut function expression.

// Function Declaration
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Function Expression
var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};

Setelah function expression disimpan dalam variabel, variabel tersebut dapat digunakan sebagai fungsi:

var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};
 
alert(getSum(5, 10)); // 0utputs: 15
 
var sum = getSum(7, 25);
alert(sum); // 0utputs: 32

Catatan: Tidak perlu untuk meletakkan titik koma setelah tanda kurung kurawal tutup dalam deklarasi fungsi. Tapi function expression, harus selalu diakhiri dengan tanda titik koma.

Tip: Dalam JavaScript fungsi dapat disimpan dalam variabel, diteruskan ke fungsi lain sebagai argumen, keluar dari fungsi sebagai nilai return, dan dibuat pada saat sedang berjalan saat itu jg.

Sintaks dari function declaration dan function expression terlihat sangat mirip, tetapi mereka berbeda dalam cara mereka dievaluasi, lihat contoh berikut:

declaration(); // Outputs: Hi, I'm a function declaration!
function declaration() {
    alert("Hi, I'm a function declaration!");
}
 
expression(); // Uncaught TypeError: undefined is not a function
var expression = function() {
    alert("Hi, I'm a function expression!");
};

Seperti yang kalian lihat pada contoh di atas, function expression melemparkan pengecualian ketika dipanggil sebelum didefinisikan, tetapi deklarasi fungsi dapat dieksekusi dengan sukses.

JavaScript mendeklarasikan fungsi deklarasi sebelum program dijalankan. Oleh karena itu, tidak masalah jika program memanggil fungsi tersebut sebelum fungsi tersebut ditentukan karena JavaScript telah mengangkat fungsi tersebut ke lingkup bagian atas saat ini. Function expression tidak dievaluasi sampai ditugaskan ke dalam variabel; oleh karena itu, masih tidak terdefinisi saat dipanggil.

ES6 telah memperkenalkan sintaks yang bahkan lebih pendek untuk menulis function expression yang disebut arrow function.

Memahami Lingkup Variabel

Bagaimanapun, kalian dapat mendeklarasikan variabel di mana saja pada JavaScript. Namun, lokasi deklarasi menentukan sejauh mana ketersediaan variabel dalam program JavaScript yaitu di mana variabel dapat digunakan atau diakses. Aksesibilitas ini dikenal sebagai ruang lingkup variabel.

Secara default, variabel yang dideklarasikan dalam suatu fungsi memiliki cakupan lokal yang berarti mereka tidak dapat dilihat atau dimanipulasi dari luar fungsi tersebut, seperti yang ditunjukkan pada contoh di bawah ini:

// Defining function
function greetWorld() {
    var greet = "Hello World!";
    alert(greet);
}
 
greetWorld(); // Outputs: Hello World!
 
alert(greet); // Uncaught ReferenceError: greet is not defined

Namun, variabel apa pun yang dideklarasikan dalam program di luar fungsi memiliki cakupan global (global scope), mis., hal tersebut akan tersedia untuk semua skrip, apakah skrip itu ada di dalam fungsi atau di luar. Berikut contohnya:

var greet = "Hello World!";
 
// Defining function
function greetWorld() {
    alert(greet);
}
 
greetWorld();  // Outputs: Hello World!
 
alert(greet); // Outputs: Hello World!