DEV Community: Sabbir Hossen

Function Composition in JS - বাংলা

Sabbir Hossen — Tue, 31 Dec 2024 08:52:32 +0000

হাই ডেভেলোপারস 👋
আজকে আমারা 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-এর মতো যেমনঃ

Boiling Water Function:

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

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

Adding Tea Function:

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

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

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 করে তোলে।

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

এক নজরে জাভাস্ক্রিপ্ট Promise

Sabbir Hossen — Wed, 25 Sep 2024 13:55:22 +0000

জাভাস্ক্রিপ্টে প্রমিজ অনেকটা ভবিষ্যৎ value এর container হিসেবে কাজ করে । যেমন আপনার কোন একটা value এখন প্রয়োজন নেই কিন্তু এটি ভবিষ্যতে পরে প্রয়োজন হবে এমতা অবস্থায় promise ব্যবহার করা যেতে পারে । আবার promise হচ্ছে অ্যাসিঙ্ক্রোনাস অপারেশনের চূড়ান্ত সমাপ্তি বা ব্যর্থতার প্রতিনিধি হিসেবে কাজ করে। ধরেন আপনর কোডে কোন একটা অ্যাসিঙ্ক্রোনাস অপারেশনের মাধ্যমে আপনি কোন একটা সার্ভার থেকে ডাটা ফেচ করে নিয়ে আসছেন,এমন সিচুয়েশনেও promise ব্যবহার করা যেতে পারে।

promise তৈরি করার নিয়ম

new Promise হচ্ছে js এর es6 এর একটি কন্সট্রাক্টর ফাংশন যেটি ব্যবহার করে আমরা একটি promise অবজেক্ট তৈরি করে থাকি । সেই ফাংশনটা বা constructorতৈরি করার জন্য আমাদের আর্গুমেন্ট হিসেবে একটা কল ব্যাক ফাংশন দিতে হয় এবং সেই কলব্যাক ফাংশন এর ভিতর আরও দুইটা প্যারামিটার থাকে একটা হচ্ছে reslove আরেকটি হচ্ছে reject।এখানে resolve এবং reject দুইটাই একেটা ফাংশন।

let p1 = new Promise((resolve,reject)=>{})

এমতাবস্থায় যদি p1 কে console.log(p1) করি তাহলে আমরা pending দেখতে পারবো ।এর কারণ হচ্ছে এই promise এর ভিতরে আমরা কোন কাজ করেনি এবং resolve reject কোনটাই হয়নি । অর্থাৎ promise এর মধ্য ৩ টি state রয়েছে প্রথমটি pending এবং resolve অথবা reject । তারমানে promise সবসময় ৩টি state এর মধ্য দিয়ে তার কাজ শেষ করে। প্রতমত সে pending দিয়ে শুরু হয় এবং promis এর ভিতরে থাকা callback ফাংশন থেকে যদি resolve() কল করা হয় তাহলে promise টির state fulfiled বা সম্পূর্ণ হবে অথবা callback ফাংশন থেকে যদি reject() কল করা হয় তাহলে promise টির state reject হয়ে যাবে। যদি promise এর state reject হয় তাহলে সেটি error হিসেবে গণ্য করা হয়।

এবার উপরের উদাহারনটাকে আরেক্টু দেখা যাক :

let p = new Promise((res,rej)=>{
    setTimeout(()=>{
        res("hello world")
    },5000) 
})

এখন যদি আমরা p variable কে ব্রাউজারে console করি সাথে সাথে তাহলে দেখতে পারবো Promise এর state টি pending অবস্থায় থাকবে এবং ৫ সেকেন্ড পর যদি p কে console করি তাহলে Promise এর state টি fullfiled দেখাবে।

এখন কথা হচ্ছে promis এর ভিতরে থাকা callback এর value কীভাবে পাবো ? এর জন্য আমাদের .then() এবং .catch() ব্যবহার করতে হবে। আচ্ছা এখন একটু .then() এবং .catch() syntex দিয়ে কীভাবে promise এর value বের করা হয় সেটি দেখি।

//promise declare with new Promise constructor
let p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve ("hello world")
    },5000) 
}) 

// promise consume 
p.then((v )=>{ 
console.log(v ) // output- hello world
}).catch((error) =>{ 
console.log(error)
})

এই কোডে ৫ সেকেন্ড পর "hello world" দেখতে পারব । কীভাবে হলো ? খেয়াল করুন আমরা promise কন্সট্রাক্টর থেকে setTimeout ফাংশন থেকে শুধু resolve() ফাংশন কল করেছি যা ৫সেকেন্ড পরে এক্সিকিউট হবে।

এবার .then() এবং .catch() মেথড নিয়ে আরেক্টু আলোচনা করা যাক।

1. Promise then() মেথড

promise এর method তখন এ invoked করা যাবে যখন promise এর স্টেট fulfiled অথবা rejected হবে তখন । .then() মেথড প্যারামিটার হিসেবে ২টি ফাংশন নেয় । ১ম ফাংশনটি এক্সিকিউট হবে যদি promise এর স্টেট fulfiled হয় এবং ২য় ফাংশনটি এক্সিকিউট হবে যদি promise এর স্টেট rejected হয় ( যদিও ২য় ফাংশনটি অপশনাল তবে আমরা promise যদি rejected হয় সেই ক্ষেত্রে .catch() মেথড ব্যবহার করতে পারি )। resolve এবং rejected এর value রিসিভ করার জন্য প্রত্যেকটা ফাংশনে একটা করে প্যারামিটার রিসিভ করে । চলেন এক্সাম্পল দেখি তাইলে আরেক্টু বুঝতে পারবেন।

Example - 1

//promise declare with new Promise constructor
let promise = new Promise(function (resolve, reject) {
      resolve('Hello world '); 
})

// promise consume
promise
    .then(function (successMessage) {
        //success handler function is invoked  when promise state will be fulfiled 
        console.log(successMessage);
    }, function (errorMessage) {
        console.log(errorMessage);
    });

// output- Hello world

এখানে খেয়াল করুন.then() মেথড এর প্রথম ফাংশনটি এক্সিকিউট হচ্ছে উপরে resolve() ফাংশনটি কল হওয়ার কারণে। এখানে resolve("Hello world ") এইভাবে লিখা হয়েছে অর্থাৎ resolve ফাংশনটি আর্গুমেন্ট সহ কল হচ্ছে। সেই আরগুমেন্টি রিসিভ করার জন্য .then()মেথড এর প্রথম ফাংশনে successMessage নামে একটা প্যারামিটার রিসিভ করে সেই প্যারামিটার এর ভিতরে Hello world লিখাটি পাচ্ছি।

Example - 2

let promise = new Promise(function (resolve, reject) {
    reject('Promise Rejected')
})

promise
    .then(function (successMessage) {
        console.log(successMessage);
    }, function (errorMessage) {
        //error handler function is invoked 
        console.log(errorMessage);
    });

// output- Promise Rejected

এখানে খেয়াল করুন .then() মেথড এর দ্বিতীয় ফাংশনটি এক্সিকিউট হচ্ছে উপরে rejected() ফাংশনটি কল হওয়ার কারণে। এখানে rejected ("Promise Rejected ")এইভাবে লিখা হয়েছে অর্থাৎ rejected ফাংশনটি আর্গুমেন্ট সহ কল হচ্ছে। সেই আরগুমেন্টি রিসিভ করার জন্য.then() মেথড এর দ্বিতীয় ফাংশনে errorMessage নামে একটা প্যারামিটার রিসিভ করে সেই প্যারামিটার এর ভিতরে Promise Rejected লিখাটি পাচ্ছি।

2. Promise catch() Method

catch() মেথড তখনই invoked হবে যখন promise এর স্টেট rejected হবে অথবা promise এর ভিতরে যদি কোন error ঘটে তখন । এটি ব্যবহার করা হয় মূলত error handling এর জন্য। .catch() মেথড প্যারামিটার হিসেবে একটি কলব্যাক ফাংশন রিসিভ করে এবং সেই কলব্যাক ফাংশনটি আরও একটি প্যারামিটার রিসিভ করে promise এর ভিতরের error কে রিসিভ করার জন্য।

Example:

let promise = new Promise(function (resolve, reject) {
    reject('Promise Rejected')
})

promise
    .then(function (successMessage) {
        console.log(successMessage);
    })
    .catch(function (errorMessage) {
        //error handler function is invoked 
        console.log(errorMessage);
    });

output - Promise Rejected

এখানে error টা catch() মেথড এ ঢুকবে কারণ .then() মেথডে প্যারামিটারে আমরা ১ম ফাংশনটি ব্যবহার করেছি যেহেতু .then() মেথড এর প্যারামিটারে ২য় ফাংশনটি ব্যবহার করেনি এবং এর পরিবর্তীতে catch() মেথড ব্যবহার করেছি তাই promise কন্সট্রাক্টর এর ভিতরে যদি promise এর state rejected হয় অথবা কোন error ঘটে তখন সেটি .catch() মেথড এর প্যারামিটার এর কলব্যাক ফাংশনে চলে আসবে।

Chaining Promises

কখনও কখনও, আপনাকে একের পর এক promise নিয়ে কাজ করা লাগতে পারে । যেমন আপনি কোন একটা সার্ভার থেকে ডাটা নিয়ে আসবেন তারপরে ডাটা চলে আসলে আপনি সেই ডাটা প্রসেস করবেন এবং প্রসেস করা শেষ হলে আপনি সেটি ডিসপ্লে করাবেন। এমন পর পর কাজ যদি করতে হয় তাহলে আপনি promise চেইন ব্যবহার করতে পারেন।
Example:

// fetdchData promise declare with new Promise constructor
const fetchData = () => {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(JSON.stringify({ name: 'Sabbir' }));
    }, 2000);
  });
};

// processData promise declare with new Promise constructor
const processData = data => {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(JSON.parse(data));
    }, 1000);
  });
};

const displayData = (finalData) =>{
  console.log(finalData)
} 


fetchData()
  .then(res => { 
return processData(res)  //processData function invoke with fetch data
})
  .then( data => { 
displayData(data )  //display function invoke with displayData func result
})
  .catch(error => { 
console.log(error) 
});

output - {name:"sabbir"}

১। ডেটা ফেচ করা: প্রথমে ডেটা ফেচ করতে হবে, যেটা একটি প্রমিজের মাধ্যমে করা হচ্ছে। এখানে fetchData ফাংশনটি একটি অ্যাসিনক্রোনাস কাজ সিমুলেট করে, যেখানে ২ সেকেন্ড পর একটি JSON অবজেক্ট রিটার্ন হয়।

২ ডেটা প্রসেস করা: ডেটা ফেচ হয়ে গেলে পরবর্তী ধাপ হলো সেই ডেটা প্রসেস করা। এখানে processData ফাংশনটি ডেটাকে পার্স করে এবং ১ সেকেন্ড পর তা রিটার্ন করে।

ডেটা ডিসপ্লে করা: সবশেষে, প্রসেস করা ডেটা কনসোলে দেখানো হয়। displayData ফাংশনের মাধ্যমে এটি করা হয়।

এই ধরনের কাজগুলো যদি ঠিকঠাকভাবে পরপর করতে হয়, তাহলে প্রমিজ চেইনিং ব্যবহার করা লাগে।তবে এখানে একটা catch() ব্যবহার করলে হবে । এখানে যেকোনো promis এ কোন error হলে সেটি এই catch() ব্লক এ চলে আসবে । তো আজ এই পর্যন্তই দেখা হবে আগামীতে ।

Javascript Object Assignments, Copy Or Reference?

Sabbir Hossen — Tue, 27 Aug 2024 14:35:34 +0000

জাভাস্ক্রিপ্টে আমরা হর হামেশা অবজেক্ট ব্যবহার করি । অবজেক্ট value কে যখন আমরা কোন একটা variable এ আসাইন করি তখন ডিফল্ট এপ্রোচ হিসেবে "=" এসাইনমেন্ট অপারেটর ব্যবহার করি। আমরা জানি সেই অবজেক্ট,মেমরিতে একটি জায়গায় ষ্টোর করা থাকে এবং variable এ সেই মেমোরি এড্রেস এর রেফারেন্স থাকে। জাভাস্ক্রিপ্ট এ যখন আমরা অবজেক্ট নিয়ে কাজ করি তখন বিভিন্ন কারণে অবজেক্ট এর আউটকাম বিভিন্ন রকম হয় । তাই আমদের অবজেক্টে এর আউটকামএর উপর বেইজ করে অবজেক্টকে পরিবর্তন বা ট্রান্সফরমেশন, কপি অথবা ক্লোন করে কাজ করতে হয়। তাহলে আলোচনা করা যাক, কখন এবং কোন উপায়ে একটি জাভাস্ক্রিপ্ট অবজেক্টকে ক্লোন বা কপি করা যেতে পারে।

Object Reference Pass করা।
Object Copy or clone
1. Shallow Copy
2. Deep Copy

Object Reference Pass করা

মনে করুন আমরা একটি অবজেক্ট তৈরি করেছি এবং সেটি listData নামে একটি variable এ এসাইন করা হয়েছে ।এই সিনারিওতে, listData নামে variable সেই অবজেক্ট এর একটি মেমরির এড্রেস রেফারেন্স পয়েন্ট করে আছে এবং সেই মেমরি এড্রেস রেফারেন্স এর মধ্যে অবজেক্ট এর value গুলো স্টোর করা আছে। এখন যদি আমরা copylistData নামে একটি variable তৈরি করি এবং "="এসাইনমেন্ট অপারেটর দিয়ে listDataকে এসাইন করে দেই তখন copylistData সেই listData অবজেক্ট এর সেই মেমরির একই অ্যাড্রেস কে পয়েন্ট করে রাখবে। আর এই পদ্ধতিকে বলা হয় Object Reference Pass করা।

Example:

const listData = { a: 1, b: 2 }; 
const copyListData = listData //Assign the listData into copyListData both are poient same memory address reference

copyListData.a = 3;

console.log(listData.a); // Output: 3

এই পদ্ধতির ২টি বৈশিষ্ট্য রয়েছে
Shared Reference: listData এবং copylistData একই অবজেক্ট এর মেমরি এড্রেস এর রেফারেন্সকে পয়েন্ট করে থাকে। এই ক্ষেত্রে যদি listData তে কোন পরিবর্তন করা হয় তখন সেটার প্রভাব সরাররি copylistData তেও হবে।

Single Source of Truth: এই পদ্ধিত Single Source of Truth এর মত কাজ করে । অর্থাৎ,আপনি যখন listData এর সাথে copylistData কে লিঙ্ক করতে চান বা এই দুই variable এর মধ্যে ধারাবিহিকতা বা সামঞ্জস্যতা বজায় রাখতে চান তাহলে এই পদ্ধিত ব্যবহার করতে পারেন।

Object Copy or Clone

জাভাস্ক্রিপ্টে arry এবং object কপি করার ক্ষেত্রে ২টি পদ্ধতি ব্যবহার করা হয় "Shallow copy" অন্যটি "Deep Copy" এই দুইটি পদ্ধতি দিয়ে অবজেক্ট কপি করা হলেও কপির ধরন হয় ভিন্নরকম। কোডের সাইড এফেক্ট পরিহার করা এবং ইফেক্টিভ ভাবে state মেনেজ করার জন্য উপরের দুইটি পদ্ধিতর ভূমিকা অপরিহার্য এবং এগুলো কোনটি কিভাবে কাজ করে তা বুঝা অনেক গুরুত্বপূর্ণ।

Shallow Copy

Shallow Copy বলতে বুঝায়, Object অথবা Array এর top level পর্যন্ত কপি বা ডুপ্লিকেট করা । অর্থাৎ কোন একটা object অথবা array এর মেমরিতে থাকা সকল values গুলো কপি করা । কিন্তু সেই অবজেক্ট এর ভিতরে যদি কোন নেস্টেড object অথবা array থাকে তাহলে সেই নেস্টেড object কপি হবে না । তবে সেই ক্ষেত্রে Shallow Copy করার সময় নেস্টেড object এর মেমোরির সেইম রেফারেন্স থেকে যাবে যেটা আমারা উপরে সেকশনে দেখেছিলাম। অবজেক্ট Shallow Copy করার পরেও যদি নেস্টেড অবজেক্ট এর কোন প্রপার্টিজ এর value change করি তাহলে অরজিনাল অবজেক্ট এর মধ্যেও সেই প্রপার্টিজ এর value change হয়ে যাবে।
তবে কোন একটি অবজেক্টকে Shallow Copy করতে চাইলে JS এর Spread operator ব্যবহার করে অবজেক্ট এর Shallow Copy তৈরি করা যায়।

Example

const originalObj  = {
    name: 'Sabbir ',
    address: {
        city: 'Narsingdi ',
        zip: '12345'
    }
}; 

// Creating a shallow copy using the spread operator
const shallowCopyObj  = { ...originalObj};
shallowCopyObj.name = 'Fahad'; // This changes only the shallow copy object  
shallowCopyObj.address.city = 'Dhaka '; // This changes both the shallow copy and the originalObj 

console.log(originalObj.name); // Output: 'Sabbir'
console.log(originalObj.address.city); // Output: 'Dhaka '

উপরের উদাহারনে যখন আমরা shallowCopyObj.name = 'Fahad' করেছি তখন শুধু shallowCopyObj এর name এর value chang হয়েছে কিন্তু এতে originalObj অবজেক্ট এ এর কোন প্রভাব পরবে না। কারণ Shallow Copy করার কারণে আমরা originalObj অবজেক্ট এর একটি ক্লোন তৈরি করেছি । অনুরূপ ভাবে যখন আমরা shallowCopyObj.address.city = 'Dhaka '; করেছি তখন এটি shallowCopyObj এবং originalObj অবজেক্ট দুই জায়গায় chang হয়েছে কারণ city প্রপারটিজটি address অবজেক্ট এর একটি প্রপারটিজ। অর্থাৎ address এর ভিতরে থাকা অবজেক্টটি মেমোরির একটি জায়গায় ষ্টোর করা হয়েছে এবং সেই মেমোরির অ্যাড্রেস এর রেফারেন্স originalObj এবং shallowCopyObj দুই জায়গায় ব্যবহার হচ্ছে বিধায় যেকোনো এক জায়গায় change হওয়ার করনে উভয় জায়গায় পরিবর্তন হচ্ছে।

কখন এই পদ্ধিতি ব্যবহার করা উচিত

যখন আপনি ধুমাত্র টপ-লেভেল প্রোপার্টিজ কপি করতে চান এবং নেস্টেড অবজেক্ট shareable করতে চান তখন ব্যবহার করা যেতে পারে।
সিম্পল state আপডেট এর ক্ষেত্রে অথবা যখন immutable এর প্রয়োজনীয়তা হয় তখন এই পদ্ধতিটি যথেষ্ট।

Deep Copy

Deep Copy বলতে বুঝায় কোন একটি object অথবা array এর সব level পর্যন্ত কপি বা ক্লোন করা । অর্থাৎ অবজেক্টে থাকা সকল লেয়ার এর values, নেস্টেড object সহ সকল কিছু কপি করা যা অরজিনাল object বা array এর থেকে সম্পূর্ণ স্বাধীন। এর ফলে কপি অবজেক্ট এর যেকোনো জায়গায় change হলে অরজিনাল অবজেক্ট এর মধ্যে কোন ধরনের প্রভাব পরবে না। এবার আলোচনা করা যাক কোন কোন উপায়ে deep copy করা যেতে পারে।

Example:

const originalObj = {
    name: 'Sabbir ',
    address: {
        city: 'Narsingdi ',
        zip: '12345'
    } 
};

// Creating a deep copy using JSON method 
const deepCopyObj  = JSON.parse(JSON.stringify(originalObj ))
deepCopy.name = 'Hasan '; // This changes only deepCopyObj
deepCopyObj.address.city = 'Dhaka '; // This changes only the deepCopyObj

console.log(original.name); // Output: 'Sabbir ' 
console.log(original.address.city); // Output: 'Narsingdi '

উপরের উদাহারনে, যখন আমরা deepCopyObj.name এবং deepCopyObj.address.city তে পরিবর্তন করেছি তখন শুধু deepCopyObj object এই পরিবর্তন হয়েছে orginalObj object অপরিবর্তিত রেখে।

যেই উপায় গুলোতে object কে deep copy বা clone করা যেতে পারে:

JSON Method : কোন object অথবা array কে Deep Copy করার জন্য সব থেকে সহজ এবং কমন উপায় হচ্ছে object বা array কে JSONএ কনভার্ট করে তারপর JSON থেকে পার্স করে js object এ কনভার্ট করা। সেই জন্য আমরা JSON এর দুইটি মেথড ব্যবহার করতে পারি । JSON.stringify() মেথড ইউজ করবো js object কে json এ কনভার্ট করার জন্য এবং json এ কনভার্ট হওয়ার পর JSON.parse() মেথড ইউজ করবো json কে js object এ রূপান্তর করার জন্য। তবে এই মেথডের কিছু লিমিটেশন রয়েছে যেমন অবজেক্ট যখন আমরা json এ কনভার্ট করতে যাবো, তখন function, undefiand, NaN, এবং সার্কুলার রেফারেন্স এসব সাপোর্ট করে না । কারণ json নন সিরিয়ালাইজেবল ডাটা (যেমন : function, undefiend , bigInt ,NaN ইত্যাদি ) গুলো কপি করতে পারেনা।

Lodash এর _.cloneDeep মেথড: এই Lodash লাইব্রেরী _.cloneDeep নামক একটি মেথড প্রদান করে যেটি দিয়ে সহজে যেকোনো কমপ্লেক্স object বা array কে সহজে deep clone করা যায় ।

এছাড়াও আরও অনেক উপায় রয়েছে object deep copy করার জন্য যেমন structuredClone() মেথড । তবে উপরের উপায় গুলো সব থেকে কমন ইউজ করা হয়।

কখন এই পদ্ধিতি ব্যবহার করা উচিত
কমপ্লেক্স object এর জন্য একটি ইন্ডিপেন্ডেন্ট অবজেক্ট ক্লোন করা যেটি সম্পূর্ণ ভাবে আলাদা এবং নেস্টেড object বা array সহ ক্লোন করা।

JS Callback Function

Sabbir Hossen — Fri, 28 Jun 2024 17:20:22 +0000

Callback function কি ?

jS এ কোন একটি function কে অন্য আরেকটা function এর প্যারামিটার হিসেবে pass করা হয় তখন সেই function কে callback function বলা হয় ।

function anotherFunction(callback){
  callback()
}

উপরে anotherFunction নামে একটি function ডিফাইন করা হয়েছে,সেই function এর প্যারামিটারে আমরা callback নামে একটা প্যারামিটার নিয়েছি এবং সেটি anotherFuntion এর ভিতরে function call এর মতো করে call করেছি । অর্থাৎ আমরা আশা করি যে যখন ডেভেলপার anotherFunction কে invoke বা call করবে তখন anotherFunction এর argument হিসেবে একটি function কে pass করবে।

function simpleTextLog(){
  console.log("simple text showing")
}
anotherFunction(simpleTextLog)

output : simple text showing

কেন Callback Function প্রয়োজন ?

মূলত asynchronous প্রোগ্রামিং এর ক্ষেত্রে callback function টি ব্যাপক ভাবে ব্যাবহার করা হয় তবুও নিচে ছোট একটি উদাহারন দিলাম।

আমরা জানি যে js এ কোড উপর থেকে নিচে লাইন বাই লাইন execute হয় । এখন যদি আমরা চাই, আমদের কোন একটা function এর কাজ শেষ হলে আরেকটি function এর কাজ শুরু হবে । সেই ক্ষেত্রে আমরা অনেক উপায়ে Function Sequence Control করতে পারি ।

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

Ex-1

function displaySum(sum){
 console.log(`total sum is ${sum}`);
}

function doSum(num1,num2){
   const sum = num1 + num2;
   return sum;
}

const result = doSum(5,7)
displaySum(result)

Ex-2

function displaySum(sum){
 console.log(`total sum is ${sum}`);
}

function doSum(num1,num2){
   const sum = num1 + num2;
  displaySum(sum)
}

doSum(5,7)

Ex-1 এ কাজটি করার জন্য আমাদের দুটি function আলাদা করে পর পর কল করা লাগতেছে । এখানে displaySum function টি doSum function এর উপর নির্ভরশীল ছিলো । তাই এই ক্ষেত্রে এই উদাহারন কে আমরা batter Function Sequence Control বলতে পারি না ।

Ex-2 এটিও batter Function Sequence Control বলতে পারি না । কারণ ফলাফল ডিসপ্লে করার জন্য doSum function থেকে displaySum function কে control করা যাচ্ছে না । মনে করেন আপনি চাচ্ছেন যে doSum function টি আপনার আপ্লিকেশনে 3 বার কল করতে চাচ্ছেন । এখন 3 বার কল করার সময় displaySum function কল হয়ে যাবে কিন্তু আপনি চাচ্ছেন যে doSum function থেকে শুধু মাত্র একবার বা আপনার ইচ্ছা মতো displaySum function কল করবেন। সেটি করার জন্যই আমাদের callback function ব্যাবহার করতে হবে।

callback function এর মাদ্ধমে doSum function থেকে displaySum function কে control করা যাবে।
যেমন :

function displaySum(sum){
 console.log(`total sum is ${sum}`);
}

function doSum(num1,num2,cb){
   const sum = num1 + num2;
  cb && cb(sum)
}

doSum(5,7,displaySum) //output: total sum is 12
doSum(5,7) //output: undefined

উপরের কোডে displaySum function হলো callback function যেটি doSum function এর argument হিসবে pass হয়েছে ।

*নোট : callback function হিসেবে যখন কোন function কে argument হিসেবে পাঠাবেন তখন function এর reference পাঠাতে হয় । সেই জন্য function এর name এর সাথে কখনো "()" ব্র্যাকেট বা parentheses ব্যবহার করবেন না । যখন কোন একটা function এর name এর সাথে ব্র্যাকেট বা parentheses ব্যবহার করা হয় তখন সেই function টি কল হয়ে যায় । *