Arrow Function — Bentuk Singkat dan Cara Mengembalikan Object

Bahkan untuk proses pendek seperti memformat tiap element array, function expression mengharuskan kamu menulis function, kurung kurawal, dan return setiap kali, sehingga isi prosesnya tenggelam di antara sintaks.

Artikel ini membahas arrow function, yang membuat function dengan =>, dan bentuk singkatnya yang memungkinkan kamu menghapus tanda kurung dan kurung kurawal.

Menulis Proses yang Sama Lebih Singkat — Bentuk Dasar Arrow Function

Function yang hanya menerima satu value, menghitungnya sekali, lalu mengembalikan hasilnya sangat sering ditemui — misalnya menghitung poin reward dari nominal belanja. Meski begitu, setiap function tetap butuh kata function, kurung kurawal, dan return, jadi kalau function expression seperti ini menumpuk, sintaksnya lebih menonjol daripada perhitungannya.

Arrow function (cara membuat function dengan =>) ditulis const nama = (parameter) => { body };. Kata function dihapus dan => diletakkan di antara daftar parameter dan body, lalu function-nya di-assign ke variabel dan dipanggil persis seperti function expression.

// Cara yang sudah kamu pakai: function expression, yang menyimpan function ke variabel
const rewardPoints = function (price) {
  return price * 0.02;
};

// Arrow function
const rewardPointsArrow = (price) => {
  return price * 0.02;
};

console.log(rewardPoints(3200));        // 64
console.log(rewardPointsArrow(3200));   // 64
console.log(typeof rewardPointsArrow);  // function

Kedua nama itu dibedakan hanya supaya bisa dibandingkan berdampingan. typeof keduanya sama-sama function, dan cara menerima parameter maupun cara kerja return-nya persis sama. Kalau syarat tertentu terpenuhi, bentuk dasar ini bisa dipersingkat lagi dengan menghapus tanda kurung atau return.

Ubah yearlyFee, function expression yang menghitung harga langganan per tahun, menjadi arrow function. standardMonthly dan premiumMonthly juga sudah dideklarasikan.

① Ubah yearlyFee menjadi arrow function tanpa mengubah cara kerjanya.

② Tampilkan harga tahunan paket Standard dan Premium sebagai "Standard: X yen" dan "Premium: X yen".

③ Tampilkan selisih kedua harga dari ② sebagai "Selisih: X yen".

(Kalau berjalan dengan benar, penjelasan akan muncul.)

Menghapus Tanda Kurung dan return — Satu Parameter dan Implicit Return

Ada proses yang cukup ditulis dengan satu ekspresi, seperti menambahkan ongkos kirim ke sebuah nominal atau mengecek apakah totalnya 5000 yen atau lebih. Dengan bentuk dasar, perhitungan satu baris pun memakan tiga baris karena kurung kurawal dan return, dan kalau function seperti ini menumpuk, sebagian besar barisnya hanya berisi kurung kurawal dan return.

Kalau parameternya tepat satu, tanda kurung di sekitarnya boleh dihapus. Kalau body-nya hanya satu ekspresi, kurung kurawal dan return juga boleh dihapus. Ini dimungkinkan oleh implicit return (aturan bahwa value dari ekspresi di body langsung menjadi return value).

// Bentuk dasar: tanda kurung parameter, kurung kurawal body, dan return ditulis semua
const withFee = (price) => {
  return price + 500;
};

// Bentuk singkat
const withFeeShort = price => price + 500;
const isFreeShipping = total => total >= 5000;

console.log(withFee(1200));          // 1700
console.log(withFeeShort(1200));     // 1700
console.log(isFreeShipping(4800));   // false

Body isFreeShipping hanya berisi satu perbandingan, jadi kalau diberi 4800, yang dikembalikan adalah false, hasil dari 4800 >= 5000. Implicit return mengembalikan value hasil evaluasi ekspresinya, jadi perhitungan dan perbandingan ditulis dengan bentuk yang persis sama.

Tanda Kurung Wajib Kalau Parameternya Nol atau Lebih dari Satu

Kalau tanda kurung dihapus saat tidak ada parameter (() => ekspresi) atau saat parameternya dua atau lebih ((price, rate) => ekspresi), hasilnya SyntaxError dan kodenya tidak mulai dijalankan sama sekali. Kalau nanti kamu menambah parameter, jangan lupa memasang kembali tanda kurungnya. Dengan satu parameter pun, menulis (price) => ekspresi dengan tanda kurung tetap boleh.

Buat function untuk estimasi ongkos kirim, masing-masing dengan body satu ekspresi. shippingFee dan boxCount sudah dideklarasikan.

① Tulis discountFee dalam satu baris: menerima ongkos kirim dan mengembalikan nominalnya setelah diskon 10% (dibulatkan ke bawah).

② Tulis totalFee dalam satu baris: menerima ongkos kirim dan jumlah kardus, lalu mengembalikan total ongkos kirim.

③ Panggil ① dan tampilkan "Setelah diskon: X yen".

④ Oper hasil ① ke ② dan tampilkan "Total setelah diskon: X yen".

Mengembalikan Object — Membungkusnya dengan Tanda Kurung

Saat memformat satu data untuk ditampilkan, yang ingin kamu kembalikan sering kali bukan satu angka, melainkan object dengan beberapa key. Tapi kalau kamu memakai bentuk singkat dan langsung menulis kurung kurawal object setelah =>, yang kembali justru undefined, bukan object.

Kurung kurawal yang ditulis setelah => dibaca sebagai block body (area tempat kamu bisa menulis statement sebanyak apa pun), bukan sebagai object. Untuk mengembalikan object, bungkus dengan tanda kurung, seperti (name) => ({ name: name }), supaya kurung kurawalnya dibaca sebagai ekspresi.

// Kurung kurawal biasa dibaca sebagai block body
const toBadge = (name) => { label: name };
console.log(toBadge("Mouse Wireless"));   // undefined

// Kalau dibungkus tanda kurung, kurung kurawalnya dibaca sebagai object
const toCard = (name, stock) => ({ name: name, inStock: stock > 0 });
const card = toCard("Mouse Wireless", 4);
console.log(JSON.stringify(card));        // {"name":"Mouse Wireless","inStock":true}
console.log(card.inStock);                // true

Kalau ada dua key atau lebih, seperti { name: name, inStock: true }, isinya tidak bisa dibaca sebagai statement, jadi terjadi SyntaxError dan kodenya tidak dijalankan sama sekali. Kalau key-nya hanya satu, label: name kebetulan merupakan statement yang valid (sebuah label diikuti ekspresi), jadi tidak ada error dan kamu diam-diam mendapat undefined — sulit disadari sampai hasilnya ditampilkan.

Buat estimasi ongkos kirim. orderTotals dan freeLine sudah dideklarasikan; ongkos kirimnya 500 yen untuk nominal di bawah freeLine, dan gratis kalau nominalnya mencapai freeLine.

① Tulis toQuote dalam satu baris: menerima satu nominal dan mengembalikan object dengan key total dan shippingFee, dengan urutan itu.

② Tampilkan estimasi pertama dengan JSON.stringify.

③ Untuk estimasi kedua, tampilkan "Total bayar: X yen" (nominal + ongkos kirim).

④ Tampilkan gabungan ongkos kirim kedua estimasi sebagai "Total ongkos kirim: X yen".

Kalau Prosesnya Butuh Beberapa Baris — Block Body dan return

Ada proses yang harus menghitung value perantara atau bercabang berdasarkan kondisi sebelum menentukan apa yang dikembalikan, misalnya menghitung sisa hari yang dimiliki pelanggan untuk me-retur produk. Bentuk singkat satu ekspresi tidak punya tempat untuk menyimpan value perantara dan tidak bisa mengembalikan value yang berbeda untuk tiap kondisi.

Block body bisa berisi statement seperti const dan if, tapi implicit return tidak berlaku di sana, jadi kamu harus menulis return untuk mengembalikan value. Satu function boleh punya beberapa return, dan function berakhir di return mana pun yang dijalankan lebih dulu.

// Body satu ekspresi: value ekspresinya langsung dikembalikan
const shortMessage = (days) => `${days} hari sejak pembelian`;
console.log(shortMessage(12));           // 12 hari sejak pembelian

// Block body: buat value perantara dan return sesuai kondisi
const returnMessage = (days, isOpened) => {
  const limit = isOpened ? 7 : 14;
  if (days > limit) {
    return "Batas retur sudah lewat";   // Function berakhir di sini
  }
  return `Sisa ${limit - days} hari`;
};
console.log(returnMessage(12, false));   // Sisa 2 hari
console.log(returnMessage(12, true));    // Batas retur sudah lewat

// Tanpa return, hasilnya undefined
const brokenMessage = (days) => { `Sisa ${days} hari`; };
console.log(brokenMessage(12));          // undefined

Kalau kasus yang tidak lolos pengecekan kamu kembalikan lebih dulu dengan return, baris-baris setelahnya cukup menangani kasus normal saja. Tabel di bawah menunjukkan apa yang diterima pemanggil untuk tiap cara menulis body.

Cara Kerja this Berbeda dari Function Biasa

Di dalam method sebuah object, kamu bisa memakai this (keyword yang merujuk ke object tempat method itu dipanggil). Arrow function tidak punya this sendiri; yang dipakai adalah this dari kode di sekitarnya. Perbedaan ini dibahas lagi di artikel tentang class pada bab pemrograman berorientasi objek.

Hitung jumlah restok barang yang dibulatkan ke lot penuh. targetStock, currentStock, dan lotSize sudah dideklarasikan.

① Tulis planRestock sebagai arrow function dengan block body yang menerima target stok, stok saat ini, dan isi per lot.

② Di dalam body, hitung kekurangannya lalu kembalikan setelah dibulatkan ke atas menjadi lot penuh (0 kalau tidak ada kekurangan).

③ Panggil dengan stok saat ini dan tampilkan "Restok: X unit".

④ Tampilkan hasilnya dengan bentuk yang sama saat stok saat ini sama dengan targetnya.