ডিক্লারেটিভ (Declarative) এবং ইম্পারেটিভ (Imperative) প্রোগ্রামিং এপ্রোচ দুটি প্রোগ্রামিং করার ভিন্ন ভিন্ন পদ্ধতি। আসুন, প্রথমে প্রতিটি এপ্রোচের মূল ধারণা বুঝি, তারপরে কোডের উদাহরণ দেখি।

১. ইম্পারেটিভ (Imperative) এপ্রোচ:

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

উদাহরণ:

ধরুন, আমাদের একটি অ্যারের উপাদানগুলিকে ২ দিয়ে গুণ করতে হবে।

// Imperative approach
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = [];
 
for (let i = 0; i < numbers.length; i++) {
    doubledNumbers.push(numbers[i] * 2);
}
 
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

এখানে আমরা একটি লুপ দিয়ে প্রতিটি উপাদানকে ২ দিয়ে গুণ করে নতুন অ্যারেতে পুশ করছি। প্রতিটি পদক্ষেপ যেমনঃ

• লুপিং,
• গুণ,
• পুশ

স্পষ্টভাবে বলে দেয়া হয়েছে।

২. ডিক্লারেটিভ (Declarative) এপ্রোচ:

ডিক্লারেটিভ প্রোগ্রামিংয়ে আপনি কী করতে চান সেটি বলেন, তবে কীভাবে করবেন তা নির্দিষ্টভাবে উল্লেখ করেন না। কম্পিউটারকে নির্দিষ্টভাবে প্রতিটা স্টেপ বলে দিতে হয় না।

এই এপ্রোচে আপনি মূলত কী চান শুধু তা বলে দেন, আর ভেতরের ইম্প্লিমেন্টেশন কম্পিউটার নিজেই বোঝে নেয় ।

উদাহরণ:

উপরে যে একই কাজ করলাম, এবার ডিক্লারেটিভ এপ্রোচে করবো:

// Declarative approach
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => num * 2);
 
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

এখানে .map() ফাংশন ব্যবহার করেছি, যা প্রত্যেকটি উপাদানকে ২ দিয়ে গুণ করছে এবং নতুন অ্যারে তৈরি করছে। তবে, কোন লুপের উল্লেখ নেই—অ্যারের উপরে কাজ করতে কীভাবে গুণ করতে হবে, তা সরাসরি বলিনি। শুধু বলেছি, "প্রতিটি উপাদানকে ২ দিয়ে গুণ করো"।

প্রধান পার্থক্য:

1. ইম্পারেটিভ: প্রতিটি ধাপ স্টেপ বাই স্টেপ বলে দিতে হয়,কীভাবে কাজটি সম্পন্ন হবে তা নির্দিষ্টভাবে উল্লেখ করতে হয়।
2. ডিক্লারেটিভ: শুধু কী করতে হবে তা বলে দিতে হয়, আর কীভাবে করতে হবে তা গোপন থাকে বা কম্পিউটার নিজেই বুঝে নেয়।

রিয়াক্ট কি এপ্রোচে তার ইউ আই চেঞ্জ করে?

React মূলত ডিক্লারেটিভ (Declarative) এপ্রোচে তার UI পরিবর্তন করে। এর অর্থ হলো, React-এ আপনি কীভাবে UI আপডেট হবে তা নিয়ে চিন্তা করার পরিবর্তে, UI-র বর্তমান অবস্থা কেমন হবে তা বর্ণনা করেন, আর React নিজেই সেই UI-টি আপডেট করার জন্য ভেতরে ভেতরে প্রয়োজনীয় কাজ করে নেয়।

React-এর ডিক্লারেটিভ এপ্রোচ কীভাবে কাজ করে?

1. Declarative Components: React-এ আপনি প্রতিটি UI অংশ (component) তৈরি করার সময়, প্রতিটি কম্পোনেন্টকে বলে দেন কীভাবে সেটা দেখতে হবে। আপনি UI এর শেষ অবস্থা (final state) বলে দেন, কিন্তু সেই অবস্থা কীভাবে পরিবর্তন হবে তা নির্দিষ্টভাবে বলে দিতে হয় না।

   উদাহরণ:

   function Greeting({ name }) {
       return <h1>Hello, {name}!</h1>;
   }

   এখানে আমরা শুধু বলে দিচ্ছি, "এই component-টি কেমন দেখতে হবে," কিন্তু কীভাবে render হবে বা কতবার হবে তা চিন্তা করতে হচ্ছে না। React সেই কাজগুলো নিজের মতো করে করে নিচ্ছে।

2. State Changes: React-এর ডিক্লারেটিভ এপ্রোচের আরেকটি গুরুত্বপূর্ণ বিষয় হলো state। আপনি যখন কোনো state পরিবর্তন করেন, React সেই state অনুযায়ী UI-কে আপডেট করে।

   উদাহরণ:

   import React, { useState } from "react";
    
   function Counter() {
       const [count, setCount] = useState(0);
    
       return (
           <div>
               <p>You clicked {count} times</p>
               <button onClick={() => setCount(count + 1)}>Click me</button>
           </div>
       );
   }

   এখানে, আমরা state (count) এর মান পরিবর্তন করলে, React সেই অনুযায়ী UI-কে রি-রেন্ডার করে। আমরা শুধু জানাচ্ছি UI কেমন দেখতে হবে যখন state পরিবর্তন হবে, কিন্তু কিভাবে DOM ম্যানিপুলেট হবে বা পরিবর্তনগুলো কীভাবে ঘটবে, তা React-এর দায়িত্ব।

3. Virtual DOM: React-এর ডিক্লারেটিভ UI পরিবর্তনের আরেকটি বড় বিষয় হলো Virtual DOM। যখন state বা props পরিবর্তিত হয়, React প্রথমে সেই পরিবর্তনগুলোকে Virtual DOM-এর মাধ্যমে চেক করে, এবং তারপর প্রয়োজনীয় স্থানে শুধুমাত্র প্রয়োজনীয় UI অংশটুকু আপডেট করে।

React নিজেই Virtual DOM ব্যবহার করে কীভাবে পরিবর্তন করতে হবে, সেটি নির্ধারণ করে নেয়। ফলে ডেভেলপারকে DOM নিয়ে চিন্তা করতে হয় না।

React-এর UI আপডেটিং পদ্ধতি ডিক্লারেটিভ এপ্রোচে কাজ করে। এর ফলে ডেভেলপাররা কেবল UI-র শেষ অবস্থা কী হবে তা বলে দেয়, আর React ভেতরে ভেতরে কীভাবে সেই পরিবর্তনগুলো ঘটাবে তা নিজে থেকেই করে।