7.7 জাভাস্ক্রিপ্টে Abstraction

 

আমরা ইতিমধ্যেই জানি যে OOP বা অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং মূলত ৪ টা কনসেপ্টের উপর ভিত্তি করে গঠিত। সেগুলো হচ্ছেঃ এবস্ট্রাকশন, এনক্যাপ্সুলেশন, ইনহেরিটেন্স এবং পলিমরফিজম। এই লেখায় আমরা এবস্ট্রাকশন নিয়ে আলোচনা করব।

এবস্ট্রাকশন জাভাস্ক্রিপ্টের একটি অত্যন্ত গুরুত্বপূর্ণ টপিক। Abstraction হলো এমন একটি ধারণা, যেখানে কোনো প্রোগ্রামের অভ্যন্তরীণ বিষয়গুলো ইউজারকে না দেখিয়ে শুধুমাত্র ফাংশনালিটি দেখাবে। যেমনঃ একটা গাড়ী চালাতে হলে আপনার গাড়ীর ইঞ্জিন কিভাবে কাজ করে তার সবকিছু জানার প্রয়োজন নেই। শুধুমাত্র selected কিছু জিনিস জানা দরকার যেমন gas pedal, brake, steering wheel, blinker ইত্যাদি। তাই গাড়ীর ভিতরের ইঞ্জিনিয়ারিং গোপন রাখা হয় ড্রাইভারের থেকে।

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

function Car(name){
   this.name = name;
   this.start = function(){
     // car starting mechanism
     console.log(this.name + " starts");
   }
   this.stop = function(){
     // break mechanism
     console.log(this.name+ " stops");
   }
}

let mercedes = new Car("Mercedes Benz");
mercedes.start();           // Output: Mercedes Benz starts
mercedes.stop();            // Output: Mercedes Benz stops

 

এখানে mercedes নামের নতুন অবজেক্টের গাড়ী কীভাবে স্টার্ট এবং স্টপ ইমপ্লিমেন্টেশন হয় তা জানার দরকার নেই। তার শুধুমাত্র জানা দরকার যে start মেথড কল করলে গাড়ী স্টার্ট হবে, এবং stop মেথড কল করলে গাড়ী স্টপ হবে।

উপরে আমরা কন্সট্রাক্টর ফাংশন দিয়ে উদাহরণ দিয়েছি। আমরা চাইলে তা জাভাস্ক্রিপ্ট ক্লাস দিয়েও করতে পারি।

উদাহরন

উদাহরণ-১:

class Account {
  #balance = 0;     // Private property
  constructor(name, initBalance) {
    this.name = name;
    this.#balance = initBalance;
  }
  addBalance(amount) {
    this.#balance = this.#balance + amount;
  }
  deductBalance(amount) {
    this.#balance = this.#balance - amount;
  }
  showBalance() {
    console.log('Current balance is: ', this.#balance);
  }
}

const myAccount = new Account('Tajnur', 526310);
console.log(myAccount);    // Account { name: 'Tajnur' }
myAccount.addBalance(804700);
myAccount.showBalance();    // Current balance is:  1331010
// উপরের কোডটিতে কিভাবে একাউন্টে টাকা যোগ বা বিয়োগ করা হচ্ছে সেটি সরাসরি না দেখিয়ে একটি মেথডের মাধ্যমে কাজটি করা হচ্ছে এবং মেথডের ভিতরের প্রসেসটি ইউজারের কাছ থেকে হাইড করে রাখা হচ্ছে।

 

উদাহরণ-২:

function Machine(name) {
  this.name = name;
  this.turnOn = function () {
    // Some process here
    console.log(`${this.name} machine starts...`);
  }
  this.turnOff = function () {
    // Some process here
    console.log(`${this.name} machine stops.`);
  }
}

const mig24 = new Machine('Jet');
mig24.turnOn();     // Jet machine starts...
mig24.turnOff();    // Jet machine stops.

 

উদাহরণ-৩:

function Computer(name, model) {
  this.name = name;
  this.model = model;
  this.startPC = function () {
    console.log(`Your ${this.name} ${this.model} is starting...`);
  }
  this.stopPC = function () {
    console.log(`Your ${this.name} ${this.model} is shutting down...`);
  }
}

const myPC = new Computer('MacBook', 'Pro');
myPC.startPC();    // Your MacBook Pro is starting...
myPC.stopPC();    // Your MacBook Pro is shutting down...

 

উদাহরণ-৪:

function InternetBanking(name, mobile, initBalance) {
  this.name = name;
  this.mobile = mobile;
  this.balance = initBalance;

  this.checkLocation = function () {
    // Process here
  }
  this.checkValidNumber = function (number) {
    // Process here
  }
  this.checkAmountValidity = function (amount) {
    // Process here
  }
  this.addAmount = function (amount, number) {
    // Process here
  }

  this.transferBalance = function (amount, toNumber) {
    this.checkLocation();
    this.checkValidNumber(toNumber);
    this.checkAmountValidity(amount);
    this.addAmount(amount, toNumber);
    console.log('Successfully balance transfered.');
  }
}

const mobileBanking = new InternetBanking('Imrul', '01710304050', 15000);
mobileBanking.transferBalance(7000, '01520708090');     // Successfully balance transfered.

 

উদাহরণ-৫:

class WifiService {
  // Private Methods
  static #checkWifiCompatibility() {
    // Wifi hardware compatibility checking processes here
    console.log('Compatibility ok.');
    return true;
  }
  static #turnOnWifi() {
    // Wifi machine power on processes
    console.log('Wifi on.');
  }
  static #turnOffWifi() {
    // Wifi machine power off processes
    console.log('Wifi off.');
  }
  static #checkAvailableNetworks() {
    // Available networks checking processes
    console.log('Searching for available networks...');
  }

  // Public Methods
  start() {
    if (WifiService.#checkWifiCompatibility()) {
      WifiService.#turnOnWifi();
      WifiService.#checkAvailableNetworks();
    }
  }
  stop() {
    WifiService.#turnOffWifi();
  }
}

const mobileWifi = new WifiService();
mobileWifi.start();
mobileWifi.stop();
// Output:
// Compatibility ok.
// Wifi on.
// Searching for available networks...
// Wifi off.

 

এসো নিজে করি
  • একটা এটিএম মেশিনের টাকা উত্তোলনের প্রসেস টা Abstraction এর মাধ্যমে করে দেখাও।
  •  একটা ফটোকপি মেশিনের ফটোকপি করার প্রসেস টা Abstraction এর মাধ্যমে করে দেখাও।
  • মোবাইল ইউজার কল কেটে দিলে যেভাবে কাজ করবে সেটার একটা ডেমো দাও।
  • Abstraction কে কাজে লাগিয়ে বিমানের ইঞ্জিন অন-অফ করার একটা উদাহরণ দাও।
  • ডাটা হাইড রেখে Abstraction প্রসেসের মাধ্যমে ঐ ডাটার read-write অপারেশন দেখাও।