জাভাস্ক্রিপ্ট ইএস ৬(ES6): ক্লাস (Class)

জাভাস্ক্রিপ্ট অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং ল্যাঙ্গুয়েজ হওয়া সত্বেও জাভাস্ক্রিপ্ট এ ইএস৫ পর্যন্ত এই ক্লাস(Class) এর কোনো ধারনাই ছিলো না। যারা অন্যান্য প্রোগ্রামিং ল্যাঙ্গুয়েজ থেকে জাভাস্ক্রিপ্ট এ আসে, তারা এই জিনিসটা মিসিং থাকায় অনেক সময় কনফিউজড হয়ে যায় জাভাস্ক্রিপ্ট কি আসলেই অবজেক্ট ওরিয়েন্টের প্রোগ্রামিং ল্যাঙ্গুয়েজের মধ্যে পড়ে কিনা এ নিয়ে।

কিন্তু আসল ব্যাপার হলো জাভাস্কিপ্টও অবজেক্ট ওরিয়েন্টেড ল্যাঙ্গুয়েজ, কিন্তু অন্যান্য মেজর ল্যাঙ্গুয়েজগুলোর মতো ক্লাস বেসড না, বরং প্রোটোটাইপ বেসড ল্যাঙ্গুয়েজ। আর তাই জাভাস্ক্রিপ্ট এ ইএস৫ পর্যন্ত এই ক্লাসের ধারণাই ছিলো না। কিন্তু ইএস৬ এ অবশেষে সিন্ট্যাক্টিক শুগ্যার হিসেবে ক্লাস লাগানো হয়েছে। তার মানে হচ্ছে এই ক্লাস আসলে কিছুই না, ফাংশন কন্সট্রাকটরেরই অন্যরকম সিনট্যাক্স মাত্র।

ইএস৫ এ আমরা ফাংশন কন্সট্রাক্টর এভাবে ইউজ করতে পারতামঃ

var Child5 = function(name, dob) {
   this.name = name;
   this.dob = dob;
}

এখন এটার টাইপের নতুন একটা অবজেক্ট তৈরী করবো এভাবেঃ

var zawad = new Child5('Zawad Ahmed', 2017);

এখন এখান থেকে ডাটা প্রিন্ট করতে চাইলেঃ

console.log(zawad.name);
console.log(zawad.dob);

এখন আমরা যদি আমাদের এই ফাংশন কন্সট্রাকটর এ নতুন কোনো মেথড ঢুকাতে চাই তাহলে এভাবে সহজেই করতে পারবোঃ

Child5.prototype.currentAge = function() {
   console.log(this.name + ' is ' + (2018 - this.dob) + ' years old!');
}

এখন এই মেথডটাকে এই ফাংশন কন্সট্রাকটর দিয়ে যত অবজেক্ট তৈরী করা হবে সবাই অ্যাক্সেস করতে পারবেঃ

zawad.currentAge();

এখন আমরা উপরের এই সেইম জিনিসটাই ইএস৬ এর সিন্ট্যাক্স ইউজ করে অর্থাৎ ক্লাস (Class) ইউজ করে করবো।

class Child6 {
   constructor(name, dob) {
      this.name = name;
      this.dob = dob;
   }
   
   currentAge() {
      console.log(`${this.name} is ${2018 - this.dob} years old!`);
   }
}

কি? এখানকার সিন্ট্যাক্সগুলো পরিচিত লাগছে না? আগে অন্য কোনো অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং ল্যাঙ্গুয়েজ শিখে থাকলে এগুলো অবশ্যই পরিচিত লাগার কথা। যদিও বিহ্যাইন্ড দ্যা সীনে এটাও ফাংশন কন্সট্রাকটরই।

এখানে constructor মেথডটা অবশ্যই লাগবে। এটা আপনার অবজেক্ট এর ইনিশিয়াল ভ্যালুগুলো সেট করার জন্যে ইউজ হবে। আর ক্লাসে এটা একটা স্পেশাল মেথড। যাই হউক এবার আমরা নতুন একটা অবজেক্ট তৈরী করবো এই ক্লাস থেকেঃ

const zawad6 = new Child6('Zawad Ahmed', 2017);

এখন আমরা সেইমভাবে এই নতুন অবজেক্ট থেকেও ডাটাগুলো অ্যাক্সেস করতে পারবোঃ

console.log(zawad6.name);
console.log(zawad6.dob);

সেইমভাবে আমরা ক্লাসের ভিতরের মেথডটাকেও অ্যাক্সেস করতে পারবোঃ

zawad6.currentAge();

এখন জাভাস্ক্রিপ্ট এ ক্লাস ঠিক ফাংশনের মতো করেই দুইভাবে নেওয়া যায়ঃ

১। ক্লাস স্টেটমেন্ট;

২। ক্লাস এক্সপ্রেশন;

ক্লাস স্টেটমেন্টঃ ক্লাস স্টেটমেন্ট ঠিক class কীওয়ার্ড দিয়েই ডিক্লেয়ার করতে হয়। আর অবশ্যই একটা নাম দিতে হবে এই টাইপের ক্লাসের জন্যে। উপরের দেখানো উদাহরণে ব্যবহৃত ক্লাস ক্লাস স্টেটমেন্ট এ পড়েঃ

class ClassStatement { 
...
}

ক্লাস এক্সপ্রেশনঃ এটাও সেইম ফাংশন এক্সপ্রেশনসের মতো। আমরা নাম পরিচয়বিহীন একটা ক্লাস নিবো, আর সেটাকে একটা ভ্যারিয়েবলে অ্যাসাইন করবো। ব্যাস হয়ে গেলো ক্লাস এক্সপ্রেশন! এখানে ক্লাসের নাম থাকাটা জরুরী না, যেহেতু আলটেমেটলি আমরা এটাকে আরেকটা ভ্যারিয়েবলেই অ্যাসাইন করতেছি। ভ্যারিয়েবলটাই ক্লাসে পরিচয় বহন করবে। আর কোনো পার্থক্য নেই এই দুই টাইপের ক্লাসের মধ্যেঃ

const ClassExpression = class {
   ...
}

এখন ক্লাসের ক্ষেত্রে হোইস্টিং একটু অন্যরকমভাবে কাজ করে। ক্লাস হোইস্টেড হয় না ফাংশনের মতো। এমনকি ক্লাস স্টেটমেন্টও না। অনেকে এটা ভেবে ভুল করতে পারে যে ক্লাস এক্সপ্রেশন হোইস্টেড হয় না সেটার যুক্তি আছে, আমরা ফাংশন এক্সপ্রেশনের ক্ষেত্রেও দেখেছি সেটা। কিন্তু ক্লাস স্টেটমেন্টে হয়তো হতেও পারে, যেহেতু ফাংশন স্টেটমেন্ট এ হয় বা ক্লাস স্টেটমেন্ট দেখতেও অনেকটা ঐরকমভাবেই কাজ করে বলে মনে হয়। কিন্তু না! ক্লাস কখনই হোইস্টেড হয় না। আর তাই আপনি একটা ক্লাস ডিফাইন করার আগে কখনই ইউজ করতে পারবেন না। এরর আসবে সোজা।

ক্লাসে প্রোটোটাইপ বেসড ইনহেরিট্যান্সঃ

ক্লাস যেহেতু সিন্ট্যাক্টিক শুগ্যার, তাই ইনহেরিট্যান্সেও একটু ভিন্নতা আছে সিন্ট্যাক্সে। আর তাই আমরা দেখবো কিভাবে সেটা কাজ করে ক্লাসের ক্ষেত্রে।

প্রথমে প্রোটোটাইপ বেসড ইনহেরিট্যান্সটাই দেখি। ইএস৫ এ আমরা একটা ফাংশন কন্সট্রাকটর ডিক্লেয়ার করার পরে সেটাতে নতুন আরেকটা মেথড অ্যাসাইন করিয়েছিলাম prototype ইউজ করে। আমাদের সেই ফাংশন কন্সট্রাকটর প্রথমে দেখতে এমন ছিলোঃ

var Person5 = function(name, age, job) {
   this.name = name;
   this.age = age;
   this.job = job;
}

এখন এটাতে নতুন একটা মেথড অ্যাসাইন করতে চাইঃ

Person5.prototype.dateOfBirth = function() {
   console.log(this.name + ' born in ' + (2018 - this.age));
}

আমরা এখন এটা থেকে অবজেক্ট বানিয়ে এই মেথডটাকে অ্যাক্সেস করতে পারবোঃ

var zawad5 = new Person5('Zawad Ahmed', 1, 'Child');

অবজেক্ট তৈরী হয়ে গেলো। এখন আমরা এই অবজেক্ট থেকেও আমাদের পরে অ্যাসাইন করা মেথডটাকে অ্যাক্সেস করতে পারবোঃ

zawad5.dateOfBirth();

আমরা জানি ইএস৬ এর ক্লাসে কন্সট্রাকটর constructor মেথডের ভিতরে আমাদের ভ্যালুগুলো সেট করতে হয়, চাইলে সেখানেও আমরা আমাদের মেথড অ্যাসাইন করতে পারি ঠিক আগের মতোই। কিন্তু আমরা এই constructor মেথডের বাইরেও চাইলে মেথড নিতে পারবো এভাবেঃ

class Person6 {
   constructor(name, age, job) {
      this.name = name;
      this.age = age; 
      this.job = job
   }
   dateOfBirth() {
      console.log(`${this.name} is born in ${2018 - this.age}`);
   }
}

এখন এটা থেকে ইচ্ছামতো অবজেক্ট তৈরী করতে পারবো আর সবাই এই মেথডটাকেও অ্যাক্সেস করতে পারবেঃ

const zawad6 = new Person6('Zawad Ahmed', 1, 'Child');

এখন আমরা এই zawad6 থেকে আমাদের উক্ত মেথডটাকে অ্যাক্সেস করতে পারবোঃ

zawad6.dateOfBirth();

এখন আমরা চাইলে খাতা-কললে ইএস৫ এর টেকনিক ইউজ করেও মেথড অ্যাসাইন করতে পারতাম prototype এর সাহায্যেঃ

class Person56 {
   constructor(name, age, job) {
      this.name = name;
      this.age = age; 
      this.job = job
   }
}

এটা যেহেতু আমরা দাবী করতেছি সিন্ট্যাক্টিক শুগ্যার হিসেবে, সেই হিসাবে আমাদের আগের ইএস৫ এর টেকনিকও কাজ করার কথাঃ

Person56.prototype.dateOfBirth = function() {
   console.log(this.name + ' born in ' + (2018 - this.age));
}

রান করানোর পর কোনো এরর আসে নাই। তাহলে এবার একটা অবজেক্ট তৈরী করে দেখি তাহলেঃ

const zawad56 = new Person56('Zawad Ahmed', 1, 'Child');

এবার দেখি তাহলে মেথডটাকে অ্যাক্সেস করা যায় কিনাঃ

zawad56.dateOfBirth();

এখান থেকে ক্লিয়ার যে ক্লাস আসলে জাভাস্ক্রিপ্ট এ নতুন কোনো অবজেক্ট ওরিয়েন্টেডের মডেল তৈরী করে নাই, বরং সব আগেরগুলোই আছে। কিন্তু এভাবে ইএস৫ আর ইএস৬ মিক্স করে কোড লেখা ব্যাড প্র্যাক্টিস। তাই অ্যাভয়েড করাই ভালো।

পরের পর্বে পৃথক করে ক্লাসের ইনহেরিট্যান্স নিয়ে বিস্তারিত কথা বলবো। আজকে এই পর্যন্তই।