Fitur-fitur keren Javascript di tahun 2020 yang aku temukan
Javascript adalah bahasa pemrograman yang berkembang dengan sangat cepat, dengan komunitasnya yang sangat besar, kemudahan untuk contribute di berbagai library. Bahkan kasarannya, kita meleng sehari aja bisa-bisa udah ketinggalan banyak update terkait Javascript. Emang segila itu perkembangan Javascript sekarang.
Sejak munculnya ECMAScript 2015 atau yang dikenal dengan ES6, aku merasa hal itu jadi game changer buat Javascript. Dari kemunculannya muncul banyak library untuk support Javascript di web browser, misalnya transpiler kaya Babel. Muncul juga berbagai library yang dibilang memudahkan pengembangan web kaya Webpack atau RollUp sebagai module bundler; atau PostCSS sebagai tool buat ngetransform CSS kita yang bisa menggantikan Sass yang merupakan Gem dari Ruby, ada juga Grunt dan Gulp yang sempat populer sebagai task runner, dan masih banyak lagi perkembangannya sampe sekarang.
Di tengah berbagai fitur dan perkembangan yang ada sejak 5 tahun lalu, di tahun kemarin lewat beberapa referensi lewat temen, twitter, atau baca-baca sendiri, aku nemu fitur-fitur keren Javascript yang bener-bener bikin nge-develop web jadi makin gampang.
Optional Chaining
Sebagai developer pasti sering banget berinteraksi sama data dengan tipe object, mau itu object beneran atau array. Baik dari logic codingan kita sendiri maupun data yang diterima dari tim backend.
Dari snippet di atas, ketika kita mau akses data address.location kita bisa langsung dengan tuliskan data.address.location kan?
// abnormal condition
let data = null;
console.log(data.address.location.pluscode); // error, can break the app
// Uncaught TypeError: Cannot read property 'address' of null
Tapi gimana kalo misal value dari data itu bisa null atau undefined ? Tentu kita perlu kasih handler supaya aplikasi kita enggak nge-break, karena kalo enggak dikasih handle kita bakal mencoba ngakses property dari sebuah value yang undefined/null tadi.
if (data && data.address && data.address.location && data.address.location.pluscode) {
console.log(data.address.location.pluscode);
} // ampun deh
Ampun deh, bayangin kita cuma butuh satu petil data tapi handler nya bisa jadi panjang gini, belum lagi misal objectnya nested lebih dalam lagi, bisa panjang banget dan code kita jadi enggak readable.
Dengan adanya optional chaining, kita bisa akses data-data yang sekiranya bakal nullable tapi enggak bakal bikin aplikasi kita nge-break atau nge return error. Karena ketika akses dan ketemu error, akan langsung direturn sebagai undefined .
console.log(data?.address?.location?.pluscode); // undefined
See? Code kita jauh lebih singkat dan udah dihandle sama Javascript kalo ada error-error.
Selain object literal, optional chaining ini juga bisa digunain di array.
// normal condition
let arr = [1, 2, 3, 4]
if (arr.length > 0) {
arr.map(val => console.log(val));
}
Dari snippet di atas kita ingin melakukan mapping kalau misal data arr punya length > 0 . Tapi kalo ternyata ada update di code kita, dimana arr bisa aja null/undefined maka code di atas enggak bakal valid. Untuk bikin handle kondisi baru tersebut kita bisa pake dua cara.
// abnormal condition
let arr = null;
// normal approach
if (Array.isArray(arr) && arr.length > 0) {
arr.map(val => console.log(val));
}
// optional chaining #1
if (arr?.length > 0) {
arr.map(val => console.log(val));
}
// optional chaining #2
arr?.map(val => console.log(val));
Optional chaining bukan cuma handle nullable object property, bahkan bisa handle object prototype di Javascript. Jadi kita juga bisa meng-optional chainingkan kaya .length, .map, .filter, .any, etc. .
Masih ada lagi, optional chaining ini bisa dipakai dengan expression, untuk akses item di suatu array, atau function callback.
Optional chaining ini bener-bener penyelamat banyak developer Javascript karena code yang ditulis bisa jauh lebih singkat, juga banyak library yang udah mulai support fitur ini tanpa perlu menambahkan Babel plugin. Tapi kalau kamu pengen menikmati fitur ini di project yang lumayan lama kamu perlu install @babel/plugin-proposal-optional-chaining .
Numeric Separator
Kita sebagai developer yang sehari-hari dihadapkan dengan text editor yang punya font begitu-gitu aja pasti sering banget kerepotan kalo harus berurusan dengan angka yang digitnya banyak. Takut kalo salah antara ribuan dan puluh atau ratus ribuan. Padahal cuma jarak 1 digit tapi bener-bener bisa berefek ke banyak bagian di aplikasi kita.
Tenang kisanak, karena kayaknya banyak juga developer lain yang mengalami hal ini, sekarang udah ada support untuk numeric separator.
// Before:
let number = 1000000000; // ini berapa sih?
// After:
let number = 1_000_000_000; // oh 1 milyar toh ternyata
Seperti namanya numeric separator ngasih bantuan kita untuk kasih separator di angka-angka yang dirasa bisa bikin kita kebingungan. Aku pertama kali nemu fitur numeric separator ini di Ruby ketika #100DaysOfCode round 1 tahun lalu.
Di Ruby kita bisa pisahin angka-angka pake underscore ( _ ) dan menurutku membantu banget, saat itu aku udah sempet rasan-rasan “kayaknya asyik nih kalo Javascript ada beginian”. Ternyata ada teman-teman!
Ohiya numeric separator ini enggak harus dipake untuk misah per 3 digit, kita bisa juga tulis dengan pattern yang ngasal dan tetep bisa jalan dengan baik kok.
let number = 1_234_5_6789_0;
Setahuku ini sebenernya fitur yang ada di ECMAScript 2021, tapi sejak tahun lalu aku udah sempet pake di beberapa project. Aku belum tau apakah library sekarang ini udah full support fitur ini, tapi cari aman bisa install dulu @babel/plugin-proposal-numeric-separator , then you are ready to go.
Path aliasing with VSCode
Pernah nggak sih ketika kita udah punya project aplikasi yang cukup gede dengan struktur folder yang udah dalem terus import kita jadi jelek banget karena kebanyakan titik-titiknya ../../../ ? Memangnya codebase kita ini morse apa gimana?
// Before:
import SomeComponent from "../../../../../lib/SomeComponent";
// After:
import SomeComponent from "Libs/SomeComponent";
Dengan path aliasing, kita bisa mempersingkat import kita supaya enggak kepanjangan, sekali lagi code kita bisa jadi lebih kebaca dengan baik.
Kalo aku lihat, sebenernya fitur ini udah ada lumayan lama di webpack dan kayaknya aku udah sempet nyobain, tapi saat itu kita enggak bisa manfaatin intellisense dari VSCode kita (kayaknya, entah mungkin aku yang enggak tau).
Nah dengan nambahin jsconfig.json atau tsconfig.json di VSCode dan nambahin baseUrl serta nambahin konfigurasi resolve di webpack, kita udah bisa memanfaatkan path aliasing yang tersinkron dengan VSCode.
// jsconfig.json
{
"baseUrl": "./src",
"include": ["./src"],
// rest of the config...
}
// webpack config
module.exports = {
//...
resolve: {
alias: {
src: path.resolve(__dirname, "./src")
}
}
}
Voila! Sekarang kamu bisa ngoding tanpa perlu khawatir codebase mu yang agak besar itu berubah jadi sandi morse semua isinya.
JSDoc
Aku udah sempet bahas terkait JSDoc ini di story terpisah yang ngebahas tentang code commenting. Long story short, JSDoc ini ngebikin comment kita jadi smart, karena ketika kita ninggalin comment di code kita pakai standard JSDoc, IntelliSense dari VSCode ataupun text editor lain yang punya IntelliSense bakal bisa ngasih suggestion ketika kita mau pake method/function kita tadi.
Selain itu JSDoc juga bisa jadi guide buat kita yang mau migrasi dari Javascript ke Typescript.
Itu tadi empat fitur keren Javascript yang aku temuin sepanjang tahun 2020 kemarin, aku udah sempet intip-intip beberapa fitur di ES2021 dan juga keren-keren sih, meskipun belum tau apakah bakal ketemu case yang pake fitur itu.
Apa fitur keren Javascript yang udah pernah kamu temuin dan kamu cobain? Tinggalin di kolom komentar ya.
Have a great day. Jangan lupa pake masker!