Tutorial Belajar JavaScript Bagian 33 : Cara Menggunakan Function di JavaScript

Pada tutorial sebelumnya, kita sudah mempelajari tentang Tutorial Belajar JavaScript Bagian 32 : Cara Menggunakan Continue di JavaScript.

Dalam tutorial ini, kita akan belajar tentang function JavaScript dan cara menggunakannya untuk menyusun kode menjadi unit yang lebih kecil dan lebih dapat digunakan kembali.

Pengantar function JavaScript

Saat mengembangkan aplikasi, Anda seringkali perlu melakukan tindakan yang sama di banyak tempat. Misalnya, Anda mungkin ingin menampilkan pesan setiap kali terjadi kesalahan.

Untuk menghindari pengulangan kode yang sama di semua tempat, Anda dapat menggunakan function untuk membungkus kode tersebut dan menggunakannya return.

JavaScript menyediakan banyak function bawaan seperti parseInt() dan parseFloat(). Dalam tutorial ini, Anda akan belajar cara mengembangkan function kustom.

Mendeklarasikan sebuah function

Untuk mendeklarasikan sebuah function, Anda menggunakan kata kunci function, diikuti dengan nama function, daftar parameter, dan isi function sebagai berikut :

function functionName(parameters) {

     // function body

     // ...

}

functionName harus berupa pengidentifikasi JavaScript yang valid. Secara umum, functionName ditulis dalam model camelCase dan dimulai dengan kata kerja seperti getData(), fetchContents(), dan isValid().

Suatu function dapat menerima nol, satu, atau beberapa parameter. Dalam kasus beberapa parameter, Anda perlu menggunakan koma untuk memisahkan dua parameter.

Berikut ini mendeklarasikan function say() yang tidak memiliki parameter :

function say() {

}

Berikut ini mendeklarasikan function bernama square() yang memiliki satu parameter :

function square(a) {

}

Dan berikut ini mendeklarasikan function bernama add() yang memiliki dua parameter :

function add(a, b) {

}

Di dalam function body, Anda dapat menulis kode untuk mengimplementasikan suatu tindakan. Misalnya, function say() berikut akan menampilkan pesan ke console :

function say(pesan) {

     console.log(pesan);

}

Di badan function say() , kita memanggil function console.log() untuk menampilkan pesan ke console.

Memanggil function

Untuk menggunakan suatu function, Anda perlu memanggilnya. Memanggil function juga dikenal denngan invoking the functio. Untuk memanggil suatu function, Anda menggunakan namanya diikuti dengan argumen yang diapit oleh tanda kurung seperti ini:

functionName(arguments);

Saat memanggil suatu function, JavaScript mengeksekusi kode di dalam function body. Misalnya, berikut ini menunjukkan cara memanggil function say() :

say('halo');

Dalam contoh ini, kita memanggil function say() dan meneruskan string literal ‘halo’ ke dalamnya.

Parameter vs. Argumen

Istilah parameter dan argumen sering digunakan secara bergantian. Namun, kedua hal ini dasarnya berbeda.

Saat mendeklarasikan suatu function, Anda menentukan parameternya. Namun, saat memanggil function, Anda meneruskan argumen yang sesuai dengan parameter.

Misalnya, dalam function say(), pesan adalah parameternya dan string ‘halo’ adalah argumen yang sesuai dengan parameter pesan.

Mengembalikan nilai function

Setiap function dalam JavaScript secara implisit mengembalikan undefined kecuali jika Anda secara eksplisit menentukan nilai return. Sebagai contoh :

function say(pesan) {

     console.log(pesan);

}

let hasil = say('Halo');

console.log('Hasil:', hasil);

Hasil :

Halo

Hasil: undefined

Untuk menentukan nilai pengembalian suatu function, Anda menggunakan pernyataan return diikuti dengan ekspresi atau nilai, seperti ini :

return expression;

Misalnya, function add() berikut mengembalikan jumlah dari dua argumen :

function add(a, b) {

     return a + b;

}

Berikut ini menunjukkan cara memanggil function add() :

let jumlah = add(10, 20);

console.log('Jumlah:', jumlah);

Hasil :

Jumlah: 30

Contoh berikut menggunakan beberapa pernyataan return dalam suatu function untuk mengembalikan nilai yang berbeda berdasarkan kondisi :

function bandingkan(a, b) {

     if (a > b) {

         return -1;

     } else (a < b) {

         return 1;

     }

     return 0;

}

Function bandingkan() membandingkan dua nilai. Ini mengembalikan:

  • -1 jika argumen pertama lebih besar dari argumen kedua.
  • 1 jika argumen pertama kurang dari yang kedua.
  • 0 jika argumen pertama sama dengan argumen kedua.

Function segera berhenti mengeksekusi segera setelah mencapai pernyataan return. Oleh karena itu, Anda dapat menggunakan pernyataan return tanpa nilai untuk keluar dari function sebelum waktunya, seperti ini :

function say(pesan) {

     // tidak menampilkan apa-apa jika pesannya kosong

     if (! pesan ) {

         return;

     }

     console.log(pesan);

}

Dalam contoh ini, jika pesannya kosong (atau tidak terdefinisi), function say() tidak akan menampilkan apa pun.

Function dapat mengembalikan nilai tunggal. Jika Anda ingin mengembalikan beberapa nilai dari suatu function, Anda perlu mengemas nilai-nilai ini dalam array atau objek.

Objek argumen

Di dalam suatu function, Anda dapat mengakses objek yang disebut argumen yang mewakili argumen bernama dari function tersebut.

Objek argumen berperilaku seperti array meskipun bukan turunan dari tipe Array.

Misalnya, Anda dapat menggunakan tanda kurung siku [] untuk mengakses argumen: argumen[0] mengembalikan argumen pertama, argumen[1] mengembalikan argumen kedua, dan seterusnya.

Selain itu, Anda dapat menggunakan properti panjang dari objek argumen untuk menentukan jumlah argumen.

Contoh berikut mengimplementasikan function add() generik yang menghitung jumlah argumen berapa pun.

function add () {

     let jumlah = 0;

     for (let i = 0; i < arguments.length; i++) {

         jumlah += arguments[i];

     }

     return jumlah;

}

Oleh karena itu, Anda dapat meneruskan sejumlah argumen ke function add(), seperti ini :

console.log(add(1, 2)); // 3

console.log(add(1, 2, 3, 4, 5)); // 15

Function Hoisting

Dalam JavaScript, Anda dapat menggunakan function sebelum mendeklarasikannya. Sebagai contoh :

showMe; // contoh hoisting

function showMe(){

     console.log('contoh hoisting');

}

Teknik ini disebut dengan function hoisting.

Function hoisting adalah mekanisme di mana mesin JavaScript secara fisik memindahkan deklarasi function ke bagian atas kode sebelum mengeksekusinya.

Berikut ini menunjukkan versi kode sebelum mesin JavaScript menjalankannya :

function showMe(){

     console.log('contoh hoisting');

}

showMe(); // contoh hoisting

Kesimpulan :

  • Gunakan kata kunci function untuk mendeklarasikan sebuah function.
  • Gunakan functionName() untuk memanggil function.
  • Semua function mengembalikan nilai undefined secara implisit jika tidak secara eksplisit mengembalikan nilai.
  • Gunakan pernyataan return untuk mengembalikan nilai dari function secara eksplisit.
  • Variabel argumen adalah objek mirip array di dalam function, yang mewakili argumen function.
  • Function hoisting memungkinkan Anda memanggil function sebelum mendeklarasikannya.

Itu dia tutorial cara menggunakan function di JavaScript untuk menyusun serangkaian kode yang bisa dipakai berulangkali.

Artikel Lainnya

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

0