JavaScript’te “Polyfill” Kavramı Nedir ve Neden Önemlidir?

Gelişen teknoloji ile birlikte modern tarayıcılar ve JavaScript’e eklenmiş yeni özellikleri sayesinde harika ve etkileyici web uygulamaları geliştirebilmek mümkün hale gelmiştir. Yine de eski tarayıcıları desteklemek adına birtakım tekniklerden yararlanılmaktadır. İşte bu noktada devreye polyfill kavramı girmektedir. Bu yazımızda, polyfill nedir, nasıl kullanılır ve neden önemli olduğunu inceleyeceğiz.

“Polyfill” Nedir?

Polyfill kavramı için kısaca; eksik olan belirli özellikleri taklit ederek eski tarayıcılar ve platformlar için daha yeni JavaScript API’lerini ve özelliklerini desteklemeye yardımcı olan kod parçacıklarıdır diyebiliriz.

Zira bir yandan geliştiriciler modern JavaScript özelliklerini kullanarak uygulamalarını yazarlarken öte yandan bu özelliklerin daha eski platformlarda düzgünce çalışabilmesini ister. Neden mi? Çünkü JavaScript forwards-compatible (Türkçesi: ileriye yönelik uyumluluk) değildir da ondan. Yani JavaScript, tam tersi olan backwards-compatible (Türkçesi: geriye yönelik uyumluluk) bir programlama dilidir.

“Polyfill “Nasıl Çalışır?

Bu kavramı tanımlamak için; “dile yeni bir özelliğin eklenmesi durumunda, ilgili programın daha eski bir JS motorunda çalıştırılması halinde bozulmaması diyebiliriz. Ancak JavaScript’te bu her zaman geçerli değildir. Zira yazılmış onca eski program bir anda işlevsiz hale gelme tehlikesi yaşar. Peki nasıl çalışırlar?

Polyfill’ler, eksik özellikleri tarayıcıya veya platforma özgü yöntemlerle taklit eder. Bu taklidi sağlayabilmek adına çeşitli derleyiciler kullanılır. Bunlarda en bilindik olanı ise Babel‘dir.

Örnek olarak, ECMAScript 2017 standardı (ES8 olarak da bilinir) ile JavaScript’e eklenen “async/await” söz dizimini ele alalım. Async/await, JavaScript’te asenkron işlemleri daha düzgün ve okunabilir bir şekilde yazmamızı sağlar.

Bu özellik, haliyle eski tarayıcılarda desteklenmemektedir. Ancak “async/await” kullanarak yazılmış bir fonksiyonu, “Babel” kullanarak eski tarayıcılarla uyumlu hale getirebiliriz. Aşağıdaki örneği inceleyiniz:

//Modern JavaScript (ES2017) ile yazılmış örnek bir kod:
async function getUserData(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const userData = await response.json();
  return userData;
}

//Babel'in dönüştürdüğü (ES5) hali:
function getUserData(userId) {
  return fetch('https://api.example.com/users/' + userId).then(function (response) {
    return response.json();
  });
}

Yukarıdaki örneğimizde, Babel, “async/await” sözdizimini daha eski tarayıcılarda çalışacak şekilde “Promise” tabanlı bir yapıya dönüştürmüştür. Böylece, kodumuz eski tarayıcılarda da çalışır duruma gelmiştir.

Babel’i kullanarak, modern JavaScript özelliklerini kullanarak kod yazabilir ve bu kodları daha eski tarayıcılarda ve JavaScript motorlarında çalışacak şekilde dönüştürebilirsiniz.

JavaScript, ECMAScript (JavaScript’in standardı) sürümleri arasında geriye yönelik uyumluluk (backwards-compatible) sağlamaya çalışır. Her ne kadar dile yeni özellikler eklense de, eski özelliklerin ve yapıların korunması öncelik olarak amaçlanır. Zira halihazırda bu özellikleri kullanan çok sayıda uygulama bulunmaktadır. Bundan dolayı, geriye yönelik uyumluluğu sağlamak adına “polyfill” gibi tekniklerin kullanılması zaruridir.