Fungsi anonymous, musuhmu ketika development..!!

Fungsi anonymous, musuhmu ketika development..!!

Jangan pernah menulis fungsi anonymous di JavaScript

ยท

4 min read

Table of contents

Anonymous sendiri sudah tidak asing ditelinga kita yaitu seseorang yang kita tidak ketahui siapa identitas asli sebenarnya, lalu apa hubungannya dengan JavaScript? dan apa hubungannya dengan development kita?

Penggunaan function pada JavaScript sudah biasa sekali kita gunakan ntah itu mulai dari a + b atau meng-handle side-effect sekalipun, namun terkadang kita masih suka - suka kita dengan penulisan kode tersebut, nah pada JavaScript sendiri penulisan function ada beberapa type yaitu;

  • Function sebagai declaration

  • Function sebagai expression

  • Function sebagai constructor

Saya tidak akan menjelaskan apa perbedaan dari jenis - jenis function diatas, yang saya tegaskan disini adalah penyalahgunaan pada fungsi diatas yang bersifat anonymous contoh seperti ini

(function () {
  throw new Error("disini");
})();

contoh diatas saya menggunakan IIFE (Immediately Invoked Function Expression) jadi ketika browser menjalankan fungsi itu maka akan keluar error seperti ini

image-2.png

bayangkan code kalian sudah banyak dan memiliki 1001 fungsi yang harus dijalan lalu terdapat error yang tidak inginkan pada fungsi ke 1000 misalkan, karena kita menuliskan fungsinya anonymous jadi kita tidak tau nama fungsinya apa dan errornya dimana, ini akan menjadi sulit untuk kita debug. Ini dia yang saya bilang bahwa fungsi anonymous itu bahkan bisa jadi musuh ketika development maksudnya ialah, ketika kita sedang development tentu pasti ada saja error yang tidak dinginkan entah itu a, b atau c kalau itu kode yang buat adalah kita yaa it's no problem gitu nah lain cerita ketika kita mempunyai sebuah tim yang besar dan ada error tiba - tiba yang bahkan bukan kita yang membuat? hayoo mau ngapain kita? tapi lain cerita jika kita memberikan sebuah nama

(function iniFungsiKita() {
  throw new Error("disini");
})();

lalu ketika kita intip dev tools akan seperti ini

jadi itu bisa dibilang bahasa keren-nya named function yang artinya fungsi yang bernama *lol, jadi jika kita melihat devtools akan memperlihatkan sebuah error yang kita tahu fungsi apa yang membuatnya error, jadi jelas bukan? tidak peru menebak - nebak error yang terjadi ada dimana bukan? "ahh mas kita kan kalau pake module bundler macam webpack gitu jarang nulis function IIFE gitu" bukan masalah pake module bundler atau gaknya tapi gimana caranya kita konsisten untuk tidak pernah nulis function yang sifatnya anonymous itu paham?

Kasus lainnya

Oke ini adalah kasus yang menarik, jadi gini terkadang ntah di group atau dikerjaan kita, kita pernah melihat contoh kode yang sifatnya anonymous kalau pada React sendiri contohnya akan seperti ini

import React from "react";

export default () => {
  return <h1>Halo dunia</h1>;
};

diatas adalah contoh sebuah component yang sifatnya anonymous oke sekarang mari kita coba membuat component tersebut error

import React from "react";

export default () => {
  setTimeout(() => {
    console.error("ehh error disini");
  }, 3000);

  return <h1>Halo dunia</h1>;
};

dan setelah tiga detik seharusnya kita sudah bisa melihat error yang kita buat, lalu kita liat stack trace-nya

lihat stack trace yang ada pada sebelah kiri kita tidak tau dimana fungsi kita yang barusan kita buat error kan? ini karena kita membuat contohnya hanya bermain pada satu file saja yaitu App.js makanya itu akan terlihat di stack trace disisi sebelah kanan, lah seperti yang saya bilang kalau itu error yang mana kodenya bukan punya kita bagaimana ceritanya? mau ngubah ngeri ngeri sedap juga kan? dan kita juga harus meraba - raba, oke kita coba untuk memberikan sebuah nama

import React from "react";

export default function IniAdalahAppKita() {
  setTimeout(() => {
    console.error("ehh error disini");
  }, 3000);

  return <h1>Halo dunia</h1>;
}

lalu kita coba cek console browser kembali

ya kan terlihat lebih mudah? jadi kita bisa memastikan juga error ini ada pada fungsi apa, dan tidak meraba sana sani.

Recap

Jadi ada untuk React sendiri usahakan benar - benar memberikan fungsi itu sebuah nama gak ada ruginya kok, malah untung cotohnya;

  • Tidak akan muncul sebagai Anonymous lagi pada stack trace console browser

  • Biasanya pada component dev tools React itu tidak akan muncul sebagai Unknown component

dan untungnya ada plugin eslint yang membantu kita untuk memeriksa itu semua dan ini dia librarynya eslint-plugin-import.

Terima kasih, stay with the named function ๐Ÿ˜Ž

ย