ডিক্লারেটিভ (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]

এখানে তুমি দেখছো, আমরা একটি for লুপ ব্যবহার করে প্রতিটি উপাদানকে ২ দিয়ে গুণ করছি। প্রতিটি ধাপকে স্টেপ বাই স্টেপ বলে দিচ্ছি:

• প্রথমে একটা লুপ চলছে, মানে প্রতিটি সংখ্যা ঘুরে ঘুরে দেখা হচ্ছে,
• তারপর প্রতিটি সংখ্যাকে ২ দিয়ে গুণ করা হচ্ছে,
• আর সেই গুণফলকে নতুন একটা অ্যারেতে পুশ করা হচ্ছে।

এখানে পুরোটা কীভাবে করতে হবে, তা তোমাকে ঠিকভাবে বলে দিতে হচ্ছে।

২. ডিক্লারেটিভ (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 কি এপ্রোচে UI আপডেট করে?

এবার, React নিয়ে কিছু কথা বলি। React হল একটি জনপ্রিয় লাইব্রেরি যেটি মূলত ডিক্লারেটিভ পদ্ধতি অনুসরণ করে। তুমি React-এর মাধ্যমে যখন UI তৈরি করো, তখন তুমি UI-র শেষ অবস্থা কী হবে তা বর্ণনা করো, কিন্তু কীভাবে সেই UI-র আপডেটগুলো হবে তা তুমি নিয়ন্ত্রণ করো না। React নিজে থেকেই সব কাজগুলো করে নেয়।

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

1. Declarative Components: React-এ তুমি কম্পোনেন্ট তৈরি করার সময় কেবল বলো, UI-টি দেখতে কেমন হবে, কিন্তু UI-র পরিবর্তন কীভাবে ঘটবে সেটা নিয়ে ভাবতে হয় না।

   উদাহরণ:

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

   এখানে, তুমি শুধু বলছো Greeting কম্পোনেন্টের আউটপুট কী হবে। তবে, এটি কীভাবে রেন্ডার হবে বা React কিভাবে সেই আউটপুট তৈরি করবে, সেটা নিয়ে চিন্তা করতে হচ্ছে না।

2. State Changes: React-এর আরেকটি গুরুত্বপূর্ণ বিষয় হলো state। তুমি যখন state পরিবর্তন করো, তখন React সেই state অনুযায়ী UI আপডেট করে। মানে তুমি শুধু state-এ কী পরিবর্তন চাইছো তা বলে দাও, এবং React নিজেই 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>
     );
   }

   এখানে তুমি দেখছো, যখন setCount দিয়ে state পরিবর্তন করছো, তখন React নিজে থেকে UI-কে আপডেট করে দিচ্ছে। তুমি শুধু বলে দিচ্ছো, UI কেমন হবে, কিন্তু কীভাবে সেটা আপডেট হবে, React সেই দায়িত্ব নিজের কাঁধে তুলে নিচ্ছে।

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

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