Bahasa JavaScript terus berkembang. Proposal baru untuk bahasa tersebut muncul secara berkala, dianalisis dan, jika dianggap layak, ditambahkan ke daftar di https://tc39.github.io/ecma262/ dan kemudian dilanjutkan ke spesifikasi.
Tim di belakang mesin JavaScript mempunyai ide sendiri tentang apa yang harus diterapkan terlebih dahulu. Mereka mungkin memutuskan untuk melaksanakan usulan yang masih dalam rancangan dan menunda hal-hal yang sudah ada dalam spesifikasi, karena kurang menarik atau lebih sulit untuk dilakukan.
Jadi sangat umum bagi sebuah mesin untuk menerapkan hanya sebagian dari standarnya.
Halaman yang bagus untuk melihat status dukungan fitur bahasa saat ini adalah https://compat-table.github.io/compat-table/es6/ (sangat besar, masih banyak yang harus kita pelajari).
Sebagai pemrogram, kami ingin menggunakan fitur-fitur terkini. Semakin banyak barang bagus – semakin baik!
Di sisi lain, bagaimana cara membuat kode modern kita berfungsi pada mesin lama yang belum memahami fitur-fitur terkini?
Ada dua alat untuk itu:
Transpiler.
polifill.
Di sini, di bab ini, tujuan kita adalah mendapatkan inti cara kerjanya, dan posisinya dalam pengembangan web.
Transpiler adalah perangkat lunak khusus yang menerjemahkan kode sumber ke kode sumber lain. Ia dapat mengurai (“membaca dan memahami”) kode modern dan menulis ulang menggunakan konstruksi sintaksis lama, sehingga juga dapat berfungsi di mesin yang sudah ketinggalan zaman.
Misalnya JavaScript sebelum tahun 2020 tidak memiliki "operator penggabungan nol" ??
. Jadi, jika pengunjung menggunakan browser yang ketinggalan jaman, mungkin ia gagal memahami kode seperti height = height ?? 100
.
Transpiler akan menganalisis kode kita dan menulis ulang height ?? 100
menjadi (height !== undefined && height !== null) ? height : 100
.
// sebelum menjalankan transpiler tinggi = tinggi ?? 100; // setelah menjalankan transpiler tinggi = (tinggi !== tidak terdefinisi && tinggi !== null) ? tinggi : 100;
Sekarang kode yang ditulis ulang cocok untuk mesin JavaScript lama.
Biasanya, pengembang menjalankan transpiler di komputer mereka sendiri, dan kemudian menyebarkan kode transpiler ke server.
Berbicara tentang nama, Babel adalah salah satu transpiler paling menonjol di luar sana.
Sistem pembangunan proyek modern, seperti webpack, menyediakan sarana untuk menjalankan transpiler secara otomatis pada setiap perubahan kode, sehingga sangat mudah untuk diintegrasikan ke dalam proses pengembangan.
Fitur bahasa baru mungkin tidak hanya mencakup konstruksi sintaksis dan operator, tetapi juga fungsi bawaan.
Misalnya, Math.trunc(n)
adalah fungsi yang “memotong” bagian desimal suatu angka, misalnya Math.trunc(1.23)
mengembalikan 1
.
Di beberapa mesin JavaScript (yang sudah sangat ketinggalan jaman), tidak ada Math.trunc
, sehingga kode tersebut akan gagal.
Karena kita berbicara tentang fungsi baru, bukan perubahan sintaksis, tidak perlu mentranspilasi apa pun di sini. Kita hanya perlu mendeklarasikan fungsi yang hilang.
Skrip yang memperbarui/menambahkan fungsi baru disebut “polyfill”. Hal ini “mengisi” kesenjangan dan menambahkan implementasi yang hilang.
Untuk kasus khusus ini, polyfill untuk Math.trunc
adalah skrip yang mengimplementasikannya, seperti ini:
if (!Math.trunc) {// jika tidak ada fungsi seperti itu // menerapkannya Math.trunc = fungsi(angka) { // Math.ceil dan Math.floor ada bahkan di mesin JavaScript kuno // semuanya akan dibahas nanti di tutorial nomor pengembalian < 0 ? Math.ceil(angka) : Matematika.lantai(angka); }; }
JavaScript adalah bahasa yang sangat dinamis. Skrip dapat menambah/memodifikasi fungsi apa pun, bahkan fungsi bawaan.
Dua perpustakaan polyfill yang menarik adalah:
core js yang mendukung banyak hal, memungkinkan untuk memasukkan hanya fitur-fitur yang diperlukan.
Dalam bab ini kami ingin memotivasi Anda untuk mempelajari fitur-fitur bahasa modern dan bahkan yang paling mutakhir, meskipun fitur-fitur tersebut belum didukung dengan baik oleh mesin JavaScript.
Jangan lupa untuk menggunakan transpiler (jika menggunakan sintaks atau operator modern) dan polyfill (untuk menambahkan fungsi yang mungkin hilang). Mereka akan memastikan bahwa kodenya berfungsi.
Misalnya, nanti ketika Anda sudah familiar dengan JavaScript, Anda dapat menyiapkan sistem pembuatan kode berdasarkan webpack dengan plugin babel-loader.
Sumber daya bagus yang menunjukkan status dukungan terkini untuk berbagai fitur:
https://compat-table.github.io/compat-table/es6/ – untuk JavaScript murni.
https://caniuse.com/ – untuk fungsi terkait browser.
PS Google Chrome biasanya paling mutakhir dengan fitur bahasa, cobalah jika demo tutorial gagal. Kebanyakan demo tutorial dapat digunakan pada browser modern apa pun.