ECMAScript 2015 (ES6) থেকে ECMAScript 2022 (ES12) পর্যন্ত নতুন ফিচার

BabelJS একটি শক্তিশালী টুল যা JavaScript কোডকে পুরনো ব্রাউজার এবং পরিবেশে রান করার জন্য ট্রান্সপাইল করতে সাহায্য করে। এটি নতুন JavaScript (ES6 বা তার পরবর্তী সংস্করণ) ফিচারগুলোকে পুরনো JavaScript (যেমন ES5) এ রূপান্তরিত করে। এই গাইডে, আমরা ECMAScript 2015 (ES6) থেকে ECMAScript 2022 (ES12) পর্যন্ত কিছু গুরুত্বপূর্ণ নতুন ফিচার নিয়ে আলোচনা করব যেগুলো BabelJS দ্বারা ট্রান্সপাইল করা সম্ভব।

১. ECMAScript 2015 (ES6) ফিচার

Let এবং Const

• let এবং const দিয়ে ব্লক স্কোপ ভ্যারিয়েবল ডিক্লেয়ার করা যায়।
• let ভ্যারিয়েবল পরিবর্তনযোগ্য, আর const ভ্যারিয়েবল অপরিবর্তনীয় (immutable)।

let x = 10;
const y = 20;
x = 30;  // সঠিক
y = 40;  // ত্রুটি (Error)

Arrow Functions

Arrow function সিনট্যাক্স কোড লেখার ক্ষেত্রে আরও সোজা এবং সংক্ষিপ্ত।

const add = (a, b) => a + b;

Template Literals

স্ট্রিং ইন্টারপোলেশন এবং মাল্টিলাইন স্ট্রিং সাপোর্ট করে।

let name = 'World';
let greeting = `Hello, ${name}!`;  // স্ট্রিং ইন্টারপোলেশন

Destructuring Assignment

অবজেক্ট এবং অ্যারে থেকে সহজে ডেটা এক্সট্র্যাক্ট করার পদ্ধতি।

const person = { name: 'John', age: 30 };
const { name, age } = person;

Classes

ওবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিং (OOP) এ ক্লাস ব্যবহার করা হয়।

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

Modules (Import/Export)

JavaScript মডিউল সিস্টেম (ESM) যা মডিউল এক্সপোর্ট এবং ইমপোর্ট করার জন্য import এবং export ব্যবহার করা হয়।

// export
export const greet = () => console.log('Hello');

// import
import { greet } from './greet';
greet();

২. ECMAScript 2016 (ES7) ফিচার

Exponentiation Operator (**)

এটি আগের Math.pow() ফাংশনের পরিবর্তে ব্যবহার করা হয়।

let result = 2 ** 3;  // 8

৩. ECMAScript 2017 (ES8) ফিচার

Async/Await

আসিঙ্ক্রোনাস কোড লিখতে আরও সহজ করে তোলে, এটি প্রমিসের সাথে কাজ করার জন্য ব্যবহৃত হয়।

async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  console.log(data);
}

Object.entries() এবং Object.values()

অবজেক্টের কীগুলি বা ভ্যালুগুলি অ্যারে হিসেবে পেতে Object.entries() এবং Object.values() ব্যবহার করা হয়।

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj));  // [['a', 1], ['b', 2], ['c', 3]]
console.log(Object.values(obj));   // [1, 2, 3]

৪. ECMAScript 2018 (ES9) ফিচার

Asynchronous Iteration

for-await-of লুপ ব্যবহার করে আসিঙ্ক্রোনাস ডেটা ইটারেট করা যায়।

async function fetchData() {
  for await (let data of asyncGenerator()) {
    console.log(data);
  }
}

Rest/Spread Properties for Objects

অবজেক্টে রেস্ট এবং স্প্রেড অপারেটর ব্যবহার।

// Spread
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

// Rest
const { a, ...rest } = obj2;
console.log(a);    // 1
console.log(rest); // { b: 2, c: 3 }

৫. ECMAScript 2019 (ES10) ফিচার

Array.flat() এবং Array.flatMap()

অ্যারে থেকে নেস্টেড অ্যারে ফ্ল্যাট করতে flat() এবং আরও জটিল ম্যাপ অপারেশন করার জন্য flatMap() ব্যবহার করা হয়।

const arr = [1, [2, 3], [4, 5]];
console.log(arr.flat());  // [1, 2, 3, 4, 5]

Object.fromEntries()

অবজেক্ট তৈরি করতে Object.entries() এর বিপরীত কাজ করে।

const entries = [['name', 'John'], ['age', 30]];
const obj = Object.fromEntries(entries);
console.log(obj);  // { name: 'John', age: 30 }

৬. ECMAScript 2020 (ES11) ফিচার

BigInt

বড় সংখ্যাগুলির জন্য BigInt টাইপ তৈরি করা হয়।

let bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber);  // 1234567890123456789012345678901234567890n

Nullish Coalescing Operator (??)

এটি null বা undefined চেক করতে ব্যবহৃত হয়, যদি কোনো ভ্যালু না থাকে, তবে ডিফল্ট ভ্যালু প্রদান করা হয়।

let value = null;
let result = value ?? 'default';
console.log(result);  // 'default'

Optional Chaining (?.)

অবজেক্টের প্রপার্টি অ্যাক্সেস করার সময় যদি কোনো ভ্যালু না থাকে, তাহলে এটি undefined রিটার্ন করবে, যা কোড ক্র্যাশ ঠেকায়।

const user = { profile: { name: 'John' } };
console.log(user?.profile?.name);  // 'John'
console.log(user?.address?.city);  // undefined

৭. ECMAScript 2021 (ES12) ফিচার

Logical Assignment Operators

&&=, ||=, এবং ??= অপারেটর ব্যবহার করে সহজে লজিক্যাল অ্যাসাইনমেন্ট করা যায়।

let x = 5;
x ||= 10;  // x = x || 10
console.log(x);  // 5

let y = null;
y ??= 'default';  // y = y ?? 'default'
console.log(y);  // 'default'

String.prototype.replaceAll()

একটি স্ট্রিং থেকে সব occurrences প্রতিস্থাপন করতে replaceAll() ব্যবহার করা হয়।

let text = 'I love apples and apples are great';
let newText = text.replaceAll('apples', 'oranges');
console.log(newText);  // 'I love oranges and oranges are great'

WeakRefs

Weak references তৈরি করতে WeakRef ব্যবহার করা হয়, যা একটি অবজেক্টের রেফারেন্স রাখে, কিন্তু গার্বেজ কালেকশন দ্বারা মুক্তি পাওয়ার পর তাকে মেমরি থেকে মুক্ত করে দেয়।

let obj = { name: 'WeakRef' };
let weakRef = new WeakRef(obj);
console.log(weakRef.deref());  // { name: 'WeakRef' }

সারাংশ

BabelJS ব্যবহারের মাধ্যমে আপনি নতুন ECMAScript ফিচারগুলো পুরনো JavaScript কোডে ট্রান্সপাইল করতে পারেন। ES6 থেকে ES12 পর্যন্ত অনেক নতুন ফিচার এসেছে, যেমন:

• ES6: Arrow functions, Classes, Let/Const, Template Literals, Destructuring।
• ES7: Exponentiation Operator।
• ES8: Async/Await, Object.entries/values।
• ES9: Async Iteration, Rest/Spread for objects.
• ES10: Array.flat(), Array.fromEntries().
• ES11: BigInt, Nullish Coalescing, Optional Chaining.
• ES12: Logical Assignment Operators, replaceAll(), WeakRefs।

BabelJS আপনাকে এই সব ফিচারকে পুরনো JavaScript সংস্করণে রূপান্তর করতে সহায়তা করবে, যাতে আপনার কোড সর্বোচ্চ ব্রাউজার এবং পরিবেশে সাপোর্ট করতে পারে।