Polyfills dan Transpilers

JavaScript terus berkembang. Secara berkala, proposal bahasa baru diajukan, dianalisis, dan ditambahkan ke https://tc39.github.io/ecma262/ dan kemudian diintegrasikan ke dalam spesifikasi. Mungkin ada perbedaan dalam cara implementasinya di mesin JavaScript tergantung pada browser. Beberapa mungkin mengimplementasikan proposal awal, sementara yang lain menunggu hingga seluruh spesifikasinya dirilis. Masalah kompatibilitas mundur muncul ketika hal-hal baru diperkenalkan.

Untuk mendukung kode modern di browser lama, kita menggunakan dua alat: transpiler dan polyfill.

Transpiler

Ini adalah program yang menerjemahkan kode modern dan menulis ulangnya menggunakan konstruksi sintaks yang lebih lama sehingga mesin yang lebih lama dapat memahaminya. Misalnya, operator "nullish coalescing" ?? diperkenalkan pada tahun 2020, dan browser lama tidak dapat memahaminya.

Sekarang, tugas transpiler adalah membuat operator "nullish coalescing" ?? menjadi dapat dimengerti oleh browser lama.

// sebelum menjalankan transpiler
height = height ?? 200;

// setelah menjalankan transpiler
height = (height !== undefined dan height !== null) ? height: 200;

Polyfills

Ada saat-saat ketika fungsionalitas baru tidak tersedia di mesin browser yang ketinggalan zaman. Dalam kasus ini, kode yang menggunakan fungsionalitas baru tidak akan berfungsi. Untuk mengisi celah, kita menambahkan fungsionalitas yang hilang yang disebut polyfill. Misalnya, metode filter() diperkenalkan dalam ES5 dan tidak didukung di beberapa browser lama. Metode ini menerima sebuah fungsi dan mengembalikan sebuah array yang hanya berisi nilai-nilai dari array asli yang fungsi tersebut mengembalikan true

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter((e) => e % 2 === 0); // menghapus angka genap
console.log(filtered);

// [2, 4, 6]

Polyfill untuk metode filter adalah.

Array.prototype.filter = function (callback) {
  // Simpan array baru
  const result = [];
  for (let i = 0; i < this.length; i++) {
    // panggil callback dengan elemen saat ini, indeks, dan konteks.
    // jika lulus uji maka tambahkan elemen ke dalam array baru.
    if (callback(this[i], i, this)) {
      result.push(this[i]);
    }
  }
  // kembalikan array
  return result;
};