Function Composition in JS - বাংলা

হাই ডেভেলোপারস 👋
আজকে আমারা Function Composition নিয়ে কিছু আলোচনা করবো । জাভাস্ক্রিপ্টে বা যে কোনো ফাংশনাল প্রোগ্রামিং ল্যাঙ্গুয়েজে ফাংশন নিয়ে কাজ করতে করতে কখনো Function Composition এর কথা শুনে থাকি। তাই , Function Composition আসলে কি ? এটা কেন ব্যবহার করা হয় এবং কিভাবে করা হয় ? তা নিয়ে আজকের আলোচনা।

Function Composition কি ?

Function Composition হল একটি পদ্ধতি যেখানে একাধিক ফাংশনকে একত্রিত করে একটি নতুন ফাংশন তৈরি করা হয়,সেই সাথে এক ফাংশনের আউটপুট অপর ফাংশনের ইনপুট হিসেবে কাজ করে। এটি অনেকটা "ধাপ ধাপে কাজ করা" বা "একটির পর একটি ফাংশন কল করার” মতো।

চলেন ছোট একটা উদাহারন দেখিঃ
ধরা যাক, দুটি ফাংশন আছে

const addingBy = (x)=> x + 2 ; //এই ফাংশনের কাজে হচ্ছে x ভ্যালুকে ২ দিয়ে যোগ করা 

const multiplyBy = (x)=> x * 5 ; //এই ফাংশনের কাজে হচ্ছে x ভ্যালুকে ৫ দিয়ে গুন করা 

//এখন ধরা যাক X=4, এবং বলা হলো x কে আগে addingBy দিয়ে যোগ করতে হবে তারপর multiplyBy দিয়ে গুন করতে হবে
//তাহলে আমরা যেভাবে করতে পারি তা হলোঃ

const result = multiplyBy(addingBy(4)) // output :30

ব্যখ্যাঃ

১। addingBy(4) এটি আগে এক্সিকিউট হবে এবং এর রেজাল্ট হবেঃ 4 + 2 = 6

২। multiplyBy(6) এক্সিকিউট হবে এবং addingBy(4) এর জায়গায় উপরের ৬ বসে যাবে এবং রেজাল্ট হবেঃ 6*5 = 30

Analogy: Making a Cup of Tea

Function Composition কে চা তৈরি করার ধাপ গুলোর সাথে তুলোনা করা যেতে পারে । প্রতিটি ধাপ একটি ফাংশন হিসেবে কাজ করে এবং একত্রে সব ধাপগুলো Function Composition-এর মতো যেমনঃ

1. Boiling Water Function:

   প্রথমে পানি ফুটাও।

- ফাংশন: `boilWater() → hotWater`

1. Adding Tea Function:

   ফুটন্ত পানিতে চা-পাতা বা টি-ব্যাগ দাও।

- ফাংশন: `addTea(hotWater) → teaMixture`

1. Adding Sugar and Milk Function:

   চা মিশ্রণে চিনি ও দুধ যোগ করো।

- ফাংশন: `addSugarAndMilk(teaMixture) → readyTea`

এবার একটু কোড এর সাহায্যে দেখা যাক

const boilWater = () => "hotWater";
const addTea = (water) => `${water} + tea`;
const addSugarAndMilk = (tea) => `${tea} + sugar and milk`;

// Composition:
const makeTea = (boilWater, addTea, addSugarAndMilk) => {
  const hotWater = boilWater();
  const teaMixture = addTea(hotWater);
  return addSugarAndMilk(teaMixture);
};

console.log(makeTea(boilWater, addTea, addSugarAndMilk));
// Output: "hotWater + tea + sugar and milk"

ব্যাখ্যা:

প্রতিটি ধাপ (ফাংশন) একে অপরের আউটপুট ব্যবহার করে, এবং শেষ পর্যন্ত আমরা এক কাপ চা (final output) পাই। এটি ফাংশন Composition-এর মতো কাজ করে যেখানে এক ফাংশনের আউটপুট অন্য ফাংশনের ইনপুট। 😊

এখানে একটা ব্যপার লক্ষণীয় যে প্রতটী function composition এর জন্য একটা করে ফাংশন থাকে যাকে প্রোগ্রামিং এর ভাষায় “compose” ফাংশন বলা হয় । উপরের উদাহারণে makeTea হচ্ছে compose ফাংশন।

এবার compose ফাংশন নিয়ে বিশদ আলোচনা করা যাক । তবে তার আগে আমাদের কিছু Array Reduce মেথড নিয়ে একটু ধারনা নেয়া যাক।

Array Reduce মেথড

Array.reduce() হলো জাভাস্ক্রিপ্টের একটি অ্যারে মেথড যা একটি অ্যারের সমস্ত এলিমেন্টকে একটি সিঙ্গেল ভ্যালুতে রিডিউস করে। এই মেথড একটি কলব্যাক ফাংশন এবং একটি ইনিশিয়াল ভ্যালু নেয়।

reduce মেথডের সিনট্যাক্স:
array.reduce(callback(accumulator, currentValue), initialValue)
যেখানে:

• callback: প্রতিটি এলিমেন্টের জন্য এক্সিকিউট হবে
• accumulator: পূর্ববর্তী অপারেশনের রেজাল্ট স্টোর করে
• currentValue: বর্তমান এলিমেন্টের ভ্যালু
• initialValue: প্রাথমিক ভ্যালু (অপশনাল) উদাহরণ:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

Function Composition এর ক্ষেত্রে reduce মেথড খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে, কারণ এর মাধ্যমে আমরা একাধিক ফাংশনকে একটি সিঙ্গেল ফাংশনে কম্পোজ করতে পারি।

compose ফাংশন কি ?

compose ফাংশন হল একটি Higher-Order Function (HOF) যা একাধিক ফাংশনকে প্যারামিটার হিসেবে গ্রহণ করে এবং একটি নতুন ফাংশন রিটার্ন করে। এই নতুন ফাংশনটি প্রতিটি ফাংশনকে ডান থেকে বামে এই অর্ডারে এক্সিকিউট করে। অর্থাৎ, প্রথমে ডান পাশের ফাংশনটি এক্সিকিউট বা কল হবে, তারপর তার পরের ফাংশন এক্সিকিউট বা কল হবে এবং এইভাবে ডান থেকে বামে এই অর্ডারে চলতে থাকবে।

Compose ফাংশন ইমপ্লিমেন্টেশন:

const compose = (...functions) => {
  return (input) => {
    return functions.reduceRight((acc, fn) => {
      return fn(acc);
    }, input);
  };
};

এই ইমপ্লিমেন্টেশনে, compose ফাংশন একাধিক ফাংশনকে তার প্যারামিটার হিসেবে রিসিভ করে যা ...functions স্প্রেড অপারেটর এর মাদ্ধ্যমে নেয়া হয়েছে । আর এই ফাংশনটি একটা নতুন ফাংশন রিটার্ন করে । আর সেই নতুন ফাংশন এর ভিতরে প্যারামিটারে নেয়া একাধিক ফাংশনকে reduceRight মেথড ইউজ করে right to left অর্ডারে ইটারেট করছে, এবং ইটারেট করে একটা ফাংশন কল হয়ে সেটার রিটার্ন ভ্যালু acc এ রেখে দিয়ে এর পরের ফাংশন ইটারেটে চলে যাচ্ছে। আর এইভাবেই একটা সিংগেল ভ্যালু রিটার্ন হচ্ছে ।

উদাহরনঃ

মনে করেন আমাদের এখানে ৩ টি ফাংশন আছে যেমনঃ addBy5, multiplyBy2 এবং subtractBy10 । এখন আমরা চাচ্ছি যে, উপরের ফাংশন গুলো কল করার জন্য একটা কোম্পোজ ফাংশন নিবো যেখানে আমরা শুরূতে যেকোনো একটা ভ্যালু দিবো । যেমন আমাদের ইনিশিয়াল ভ্যালু হবে ৬

তাহলে এবার কোড এর মাধ্যমে দেখা যাক

const add5 = (x) => x + 5;
const multiplyBy2 = (x) => x * 2;
const subtract10 = (x) => x - 10;

const composedFunction = compose(subtract10, multiplyBy2, add5);
const result = composedFunction(6);

console.log(result); // Output: 12

এখানে আমরা প্রথমে ৩টি ফাংশন নিয়েছি addBy5, multiplyBy2 এবং subtractBy10 । এখন আমরা চাচ্ছি এই ফাংশন গুলো ধাপে ধাপে কাজ করূক । সেই জন্য একটা compose ফাংশন নেয়া যেখানে আমরা ইনিশিয়ালি ভ্যালু এবং ফংশন গুলো আরগুমেন্ট হিসেবে পাস করতে পারবো। তাই composedFunction ভ্যারিয়েবল এর ভিতরে compose ফাংশন কে ইনভোক করা হলো উপরের ফাংশগুলো দিয়ে। যেহেতু compose আরেকটি ফাংশন রিটার্ন করে এবং সেই ফাংশন ইনিশিয়ালি একটা ভ্যালু প্যারামিটার হিসেবে রিসিভ করে তাই composedFunction ভ্যারিয়েবল এর ভিতরে সেই রিটার্ন করা ফাংশনটি ডিফাইন হয়ে আছে। এখন আমরা composedFunction ফাংশন ইনভোক করার সময় ইনিশিয়ালি ৬ কে পাস করতে পারি আরগুমেন্ট হিসেবে । আর এই ভিতরের ফাংশন ইনিশিয়াল ভ্যালু নিয়ে compose ফাংশনে প্যারামিটার হিসেবে পাস করা ফাংশন গুলো কে right to left অর্ডারে রিডিউস করে 12 রিটার্ন করবে।

কেন Funciton Compostion ব্যাবহার করবো ?

ফাংশন কম্পোজিশন হচ্ছে একটা পাওয়ারফুল টেকনিক যা আপনকে অনেক বেনিফিট দিবে যেমনঃ Reusability, Readability এবং maintainable clean code

Reusability

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

Readability

ফাংশন কম্পোজিশনের আমাদের কমপ্লেক্স কাজগুলোকে আরও declarative এবং concise বা সংক্ষিপ্ত উপায়ে কাজ করার সুযোগ দেয় যেমনঃ

// without funciton compostion
const result = Math.sqrt(Math.abs(parseInt("-16", 10)));
console.log(result); // 4

// with funciton compostion
const parse = (str) => parseInt(str, 10);
const abs = (n) => Math.abs(n);
const sqrt = (n) => Math.sqrt(n);

const process = compose(sqrt, abs, parse);

console.log(process("-16")); // 4

Maintainability

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

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