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

Dalam tutorial ini, kita akan belajar bahwa function JavaScript adalah first class citizen. Ini berarti Anda dapat menyimpan function dalam variabel, meneruskannya ke function lain sebagai argumen, dan mengembalikannya dari function lain sebagai nilai.

Menyimpan function dalam variabel

Function adalah first class citizen dalam JavaScript. Dengan kata lain, Anda dapat memperlakukan function seperti nilai dari jenis lainnya.

Berikut ini kita mendefinisikan function tambah() dan menetapkan nama function ke jumlah variabel :

function tambah(a, b) {
     return a + b;
}

Dalam pernyataan penugasan, kita tidak menyertakan tanda kurung buka dan tutup di akhir pengidentifikasi penambahan. Kita juga tidak menjalankan function tetapi mereferensikan function.

Dengan melakukan ini, kita dapat memiliki dua cara untuk menjalankan function yang sama. Misalnya, kita dapat memanggilnya secara normal sebagai berikut :

let hasil = tambah(10, 20);

Sebagai alternatif, kita dapat menggunakan semua function tambah() melalui variabel sum seperti ini :

let hasil = jumlah(10,20);

Melewati function ke function lain

Karena function adalah nilai, Anda dapat meneruskan function sebagai argumen ke function lain.

Berikut ini mendeklarasikan function rataRata() yang membutuhkan 3 argumen. Argumen ketiga adalah function :

function rataRata(a, b, fn) {
     return fn(a, b) / 2;
}

Sekarang, Anda dapat meneruskan function jumlah ke function rataRata () sebagai berikut :

let hasil = rataRata(10, 20, jumlah);

Gabungkan semuanya :

function tambah(a, b) {
     return a + b;
}

let jumlah = tambah;

function rata-rata(a, b, fn) {
     return fn(a, b) / 2;
}

let hasil = rata-rata(10, 20, jumlah);

console.log(hasil);

Hasil :

15

Return function dari function

Karena function adalah nilai, Anda dapat return function dari function lain.

Function compareBy() berikut return function yang membandingkan 2 objek dengan sebuah properti :

function compareBy(propertyName) {
   return function (a, b) {
     let x = a[propertyName],
       y = b[propertyName];

     if (x > y) {
       return 1;
     } else if (x < y) {
       return -1;
     } else {
       return 0;
     }
   };
}

Perhatikan bahwa a[propertyName] mengembalikan nilai propertyName dari objek a. Ini setara dengan a.propertyName. Namun, jika propertyName berisi spasi seperti ‘Harga Diskon’, Anda perlu menggunakan notasi tanda kurung siku untuk mengaksesnya.

Anda memiliki array objek produk di mana setiap objek produk memiliki 2 properti: nama dan harga.

let produk = [
     {nama: 'iPhone', harga: 900},
     {nama: 'Samsung Galaxy', harga: 850},
     {nama: 'Sony Xperia', harga: 700}
];

Anda dapat mengurutkan array dengan memanggil metode sort(). Metode sort() menerima function yang membandingkan dua elemen array sebagai argumen.

Misalnya, Anda dapat mengurutkan objek produk berdasarkan nama dengan meneruskan function yang dikembalikan dari function compareBy() sebagai berikut :

console.log('Produk diurutkan berdasarkan nama:');

produk.sort(compareBy('nama'));

console.table(produk);

Hasil :

Demikian pula, Anda dapat mengurutkan objek produk berdasarkan harga :

// mengurutkan produk berdasarkan harga

console.log('Produk diurutkan berdasarkan harga:');
produk.sort(compareBy('harga'));
console.table(produk);

Hasil :

Gabungkan semuanya.

function compareBy(propertyName) {
   return function (a, b) {
     let x = a[propertyName],
       y = b[propertyName];

     if (x > y) {
       return 1;
     } else if (x < y) {
       return -1;
     } else {
       return 0;
     }
   };
}
let produk = [
   { nama: 'iPhone', harga: 900 },
   { nama: 'Samsung Galaxy', harga: 850 },
   { nama: 'Sony Xperia', harga: 700 },
];

// urutkan produk berdasarkan nama
console.log('Produk diurutkan berdasarkan nama:');
produk.sort(compareBy('nama'));

console.table(produk);

// mengurutkan produk berdasarkan harga
console.log('Produk diurutkan berdasarkan harga:');
produk.sort(compareBy('harga'));
console.table(produk);

Berikut contoh function JavaScript lainnya

Contoh berikut mendefinisikan dua function yang mengubah length dalam sentimeter menjadi inci dan sebaliknya :

function cmToIn(length) {
     return length/ 2,54;
}

function inToCm(length) {
     return length* 2,54;
}

Function convert() berikut memiliki dua parameter. Parameter pertama adalah function dan yang kedua adalah length yang akan dikonversi berdasarkan argumen pertama :

function convert(fn, length) {
     return fn (length);
}

Untuk mengonversi cm menjadi in, Anda dapat memanggil function convert() dan meneruskan function cmToIn ke dalam function convert() sebagai argumen pertama :

let inci = convert(cmToIn, 10);

console.log(inci);

Hasil :

3.937007874015748

Demikian pula, untuk mengonversi length dari inci ke sentimeter, Anda dapat meneruskan function inToCm ke dalam function convert() , seperti ini :

let cm = convert (inToCm, 10);

console.log(cm);

Hasil :

25.4

Gabungkan semuanya.

function cmToIn(length) {
   length return / 2,54;
}

function inToCm(length) {
   length return * 2,54;
}

konversi function (fn, length) {
   return fn (length);
}

let inci = convert(cmToIn, 10);
console.log(inci);

let cm = convert(inToCm, 10);
console.log(cm);

Hasil :

3.937007874015748

25.4

Kesimpulan

• Function adalah first class citizendalam JavaScript.
• Anda dapat meneruskan function ke function lain sebagai argumen, mengembalikannya dari function lain sebagai nilai, dan menyimpannya dalam variabel.

Itu dia penjelasan tentang function sebagai first class citizens, semoga tutorial ini bisa membantu Anda memahami cara menggunakan function di JavaScript.