নতুন Data Structures (e.g., Map, Set) এবং Babel

JavaScript এর Map এবং Set হলো নতুন Data Structures যা ES6 (ECMAScript 2015) এ চালু করা হয়েছিল। এগুলি এক্সটেন্ডেড বা উন্নত ফিচার হিসেবে ব্যবহৃত হয়, এবং এগুলি সাধারণত পুরনো JavaScript পরিবেশে সমর্থিত নয়। এখানে BabelJS এই নতুন ডাটা স্ট্রাকচারগুলোকে সমর্থন করতে সাহায্য করে, যাতে আপনি পুরনো ব্রাউজারেও এই ফিচারগুলো ব্যবহার করতে পারেন।

নতুন Data Structures

1. Map:

   • Map হলো একটি নতুন ধরনের collection, যেখানে কী এবং ভ্যালু জোড়া (key-value pairs) সেভ করা হয়। এটি মূলত অবজেক্ট এর মতো কাজ করে, তবে এতে কিছু উন্নত ফিচার রয়েছে যেমন, কী যেকোনো ডাটা টাইপ হতে পারে (অবজেক্টের ক্ষেত্রে কেবল স্ট্রিং এবং সিম্বল হতে পারে), এবং এটি ইনসার্ট হওয়া ক্রমে আইটেমগুলো ধরে রাখে।

   উদাহরণ:

   const map = new Map();
   map.set('name', 'John');
   map.set('age', 30);
   
   console.log(map.get('name'));  // Output: John
   console.log(map.has('age'));   // Output: true
   

2. Set:

   • Set হলো একটি collection যা শুধু ইউনিক (একই মানের আইটেম) মান ধারণ করে। এটি ডুপ্লিকেট আইটেমের অনুমতি দেয় না এবং এর মাধ্যমে আপনি দ্রুত আইটেম অনুসন্ধান এবং ডুপ্লিকেট অপসারণ করতে পারেন।

   উদাহরণ:

   const set = new Set();
   set.add(1);
   set.add(2);
   set.add(2);  // Duplicate, won't be added
   
   console.log(set);  // Output: Set { 1, 2 }
   

BabelJS এর মাধ্যমে নতুন Data Structures সমর্থন

যেহেতু Map এবং Set ES6 এর নতুন ফিচার, পুরনো JavaScript পরিবেশে এগুলোর জন্য সমর্থন প্রয়োজন হয়। BabelJS এই ফিচারগুলোকে সমর্থন করার জন্য ট্রান্সপাইলিং বা রূপান্তর প্রক্রিয়া চালায়।

Babel Plugin/Polyfill ব্যবহার:

BabelJS মূলত নতুন JavaScript ফিচারগুলোকে পুরনো ব্রাউজারে সমর্থনযোগ্য করে তোলে। Map এবং Set এর মতো নতুন ডাটা স্ট্রাকচারগুলো ব্যবহারের জন্য Babel এর প্লাগইন বা polyfill ব্যবহার করা হয়।

1. @babel/preset-env: এই প্রিসেটটি ES6 এবং পরবর্তী ফিচারগুলো ট্রান্সপাইল করার জন্য ব্যবহৃত হয়, এবং এটি Map ও Set এর মতো নতুন ডাটা স্ট্রাকচারগুলোর সমর্থন নিশ্চিত করে।

   কনফিগারেশন উদাহরণ:

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "useBuiltIns": "usage",
           "corejs": 3
         }
       ]
     ]
   }
   

   এখানে corejs: 3 নির্দেশ করে যে, Babel আপনার কোডে core-js এর তৃতীয় সংস্করণের polyfills যুক্ত করবে। এর মাধ্যমে, পুরনো ব্রাউজারেও Map, Set এবং অন্যান্য নতুন ফিচার ব্যবহার করা সম্ভব হবে।

2. Babel Polyfill: পুরনো ব্রাউজার বা JavaScript রানটাইমে নতুন ফিচারগুলোর জন্য polyfill ব্যবহারের মাধ্যমে সমর্থন যোগ করা হয়। Map, Set এর মতো ডাটা স্ট্রাকচারগুলির জন্য আপনাকে core-js প্যাকেজ ব্যবহার করতে হবে।

   Polyfill ইনস্টলেশন:

   npm install core-js
   

   Polyfill ব্যবহার:

   import 'core-js';
   

BabelJS এ নতুন Data Structures সমর্থন করার জন্য Plugins

Babel এ কিছু প্লাগইন ও প্রিসেট রয়েছে যা ES6-এর নতুন ডাটা স্ট্রাকচার সমর্থন করে:

1. @babel/plugin-transform-runtime: এই প্লাগইনটি কোডের নতুন ফিচারগুলির জন্য runtime helpers ব্যবহার করে, এবং polyfill সাপোর্ট যুক্ত করে।

   ইন্সটলেশন:

   npm install --save @babel/plugin-transform-runtime
   

   কনফিগারেশন:

   {
     "plugins": ["@babel/plugin-transform-runtime"]
   }
   

2. core-js polyfills: core-js লাইব্রেরি ES6 এবং তার পরবর্তী সমস্ত ফিচারগুলির জন্য polyfill সরবরাহ করে।

কোড ট্রান্সপাইলিংয়ের উদাহরণ:

যদি আপনি Map বা Set ব্যবহার করেন, এবং পুরনো JavaScript পরিবেশে এটি চালাতে চান, তাহলে BabelJS এই কোডগুলোকে ES5 এর কমপ্যাটিবল কোডে রূপান্তরিত করবে।

ES6 কোড (নতুন ফিচার):

const map = new Map();
map.set('name', 'John');
console.log(map.get('name'));

const set = new Set([1, 2, 3]);
console.log(set);

ES5 ট্রান্সপাইলড কোড:

"use strict";

var map = new Map();
map.set('name', 'John');
console.log(map.get('name'));

var set = new Set([1, 2, 3]);
console.log(set);

সারাংশ

BabelJS ES6 এর নতুন ডাটা স্ট্রাকচারগুলো (যেমন, Map এবং Set) পুরনো ব্রাউজারে ব্যবহারের উপযোগী করতে সহায়তা করে। Babel এর polyfill এবং plugins ব্যবহার করে নতুন ফিচারগুলো পুরনো JavaScript পরিবেশে রূপান্তরিত করা হয়। @babel/preset-env এবং core-js এর মাধ্যমে এটি সম্ভব, যার ফলে পুরনো ব্রাউজারগুলোতে এই নতুন ডাটা স্ট্রাকচার সমর্থিত হয়।