function — declaration, arrow, default আর rest

১ · Function কী — নাম দেওয়া, বারবার ব্যবহারযোগ্য একটি কাজ

পর্ব ১২ পর্যন্ত আপনার কোড ছিল ওপর থেকে নিচে চলা একটি লম্বা তালিকা — মান রাখা, সিদ্ধান্ত নেওয়া, লুপ ঘোরানো। কিন্তু একটি অনলাইন দোকানের কথা ভাবুন। দামের সাথে VAT যোগ করার হিসাব লাগে কার্ট পাতায়, চেকআউটে, রসিদে, অ্যাডমিন রিপোর্টে। প্রতিটি জায়গায় একই হিসাব আলাদা করে লিখলে চারটি কপি হবে। হার বদলালে চার জায়গায় বদলাতে হবে, আর একটি ভুলে গেলেই রসিদ আর কার্টে দুই রকম দাম।

সমাধান হলো হিসাবটিকে একবার লিখে একটি নাম দেওয়া — একটি function. তারপর যেখানে দরকার, শুধু নাম ধরে ডাকা। Function-এর তিনটি অংশ মনে রাখুন:

function addVat(amount, rate) {     // amount, rate — parameter
  return amount + amount * rate;    // ফল বাইরে পাঠানো
}

const price = addVat(500, 0.15);    // 500, 0.15 — argument
console.log(price);                 // 575

Parameter আর argument শব্দ দুটো প্রায়ই গুলিয়ে যায়। মনে রাখার সহজ উপায়: parameter হলো ঘরের নাম, argument হলো ঘরে রাখা জিনিস। Function লেখার সময় আপনি ঘরের নাম দেন (amount, rate); ডাকার সময় ঘরে আসল মান রাখেন (৫০০, ০.১৫)। একই function একবার ৫০০ দিয়ে, পরের বার ১২০০ দিয়ে ডাকা যায় — ঘর একই, জিনিস আলাদা।

JavaScript-এর বিশেষত্ব — function-ও একটি মান

C-তে function শুধু কোডের একটি নাম দেওয়া অংশ। JavaScript-এ function তার চেয়ে বেশি কিছু: এটি একটি মান, ঠিক number বা string-এর মতো। একে বলে first-class function. এর মানে, একটি function-কে আপনি —

• variable-এ রাখতে পারেন: const tax = addVat;
• অন্য function-এ argument হিসেবে পাঠাতে পারেন: checkout(cart, applyDiscount)
• একটি function থেকে ফেরত দিতে পারেন: return (x) => x * 2;
• array বা object-এর ভেতরে রাখতে পারেন।

এই একটি বৈশিষ্ট্য থেকেই আসে বোতামে ক্লিকের সময় কোড চালানো (event), map/filter-এর মতো array method (পর্ব ১৬), Promise (পর্ব ৩৩) আর closure (পর্ব ২২)। তাই এই পর্বটি মডিউল ২-এর শেষ ইট হলেও, পরের প্রায় সব মডিউলের ভিত্তি।

২ · Function ডাকলে কী ঘটে — argument, parameter, return আর call stack

পর্ব ০৫-এ দেখেছেন, প্রতিটি function কলে engine call stack-এ একটি নতুন stack frame বসায়। এবার একটি কলকে খুব ধীরে, ধাপে ধাপে দেখুন। “পরে” চাপুন।

1function addVat(amount, rate) {2  const vat = amount * rate;3  return amount + vat;4}5const price = addVat(500, 0.15);6console.log(price);

কম বা বেশি argument দিলে — JavaScript চুপ থাকে

Java বা C-তে parameter দুটি থাকলে ঠিক দুটি argument দিতেই হয়, নইলে compile হয় না। JavaScript এ ব্যাপারে খুব নরম:

• কম দিলে: যে parameter মান পায়নি, তার মান হয় undefined. addVat(500) চালালে rate হয় undefined, আর 500 * undefined হয় NaN — কোনো error ছাড়াই ফল আসে NaN.
• বেশি দিলে: বাড়তি argument চুপচাপ উপেক্ষিত হয়। addVat(500, 0.15, "হ্যালো") ঠিকঠাক ৫৭৫ দেয়।

এই নরম আচরণ সুবিধাও, ফাঁদও। সুবিধা: ঐচ্ছিক (optional) parameter রাখা সহজ। ফাঁদ: ভুল করে একটি argument বাদ পড়লে প্রোগ্রাম ভাঙে না, বরং অনেক দূরে গিয়ে একটি অদ্ভুত NaN দেখায় — তখন উৎস খুঁজে পাওয়া কঠিন। এই ফাঁদ থেকে বাঁচার প্রথম অস্ত্র default parameter (অংশ ৪), আর বড় অস্ত্র TypeScript (পর্ব ৪৭)।

return না থাকলে — undefined

প্রতিটি JavaScript function কিছু না কিছু ফেরত দেয়। return না লিখলে, বা শুধু return; লিখলে, ফেরত আসে undefined. তাই const x = console.log("hi"); লিখলে x হয় undefined — console.log ছাপে, কিন্তু কিছু ফেরত দেয় না।

function getUser() {
  return
    { name: "Rafi" };
}

৩ · তিন রকম লেখা — declaration, expression আর arrow

JavaScript-এ একই কাজের function তিনভাবে লেখা যায়। তিনটিই কাজ করে, কিন্তু আচরণে কিছু গুরুত্বপূর্ণ পার্থক্য আছে।

// ১. Function declaration — "function" শব্দ দিয়ে statement শুরু
function square(x) {
  return x * x;
}

// ২. Function expression — function একটি মান, সেটি variable-এ রাখা
const square2 = function (x) {
  return x * x;
};

// ৩. Arrow function (ES2015) — ছোট রূপ
const square3 = (x) => x * x;

Arrow function-এর লেখার নিয়ম

Hoisting-এর পার্থক্য — একটুখানি recap

পর্ব ০৭-এ hoisting বিস্তারিত দেখেছেন। Function-এর ক্ষেত্রে এর ফল সরাসরি চোখে পড়ে:

এই বার্তাগুলো V8-এর (Chrome, Edge, Node.js). Declaration-এর এই সুবিধার জন্য অনেকে ফাইলের ওপরে মূল কাজ আর নিচে helper function লেখেন — পড়তে সুবিধা হয়।

তাহলে কোনটি কখন?

৪ · Default parameter — কখন ডিফল্ট মান খাটে

অংশ ২-এ দেখেছেন, argument বাদ পড়লে parameter undefined হয়। ES2015 (ES6) থেকে আপনি parameter-এর পাশে একটি default parameter মান লিখে দিতে পারেন: function addVat(amount, rate = 0.15). Argument না এলে rate হবে ০.১৫.

কিন্তু “না এলে” মানে ঠিক কী? এখানেই সূক্ষ্ম নিয়মটি: default খাটে শুধু তখন, যখন argument-এর মান undefined. বাদ দিলে undefined, নিজে undefined পাঠালেও undefined — দুই ক্ষেত্রেই default. কিন্তু null, 0, "" বা false পাঠালে default খাটে না; পাঠানো মানটিই থাকে। চার রকম কল ধাপে ধাপে দেখুন:

1function addVat(amount, rate = 0.15) {2  return amount + amount * rate;3}4addVat(1000);5addVat(1000, undefined);6addVat(1000, null);7addVat(1000, 0);

Default নিয়ে আরও তিনটি কাজের কথা:

• প্রতিটি কলে নতুন করে হিসাব হয়। function addItem(item, list = []) — প্রতিবার নতুন খালি array. (Python-এ এটি একটি বিখ্যাত বাগ, JavaScript-এ নয়।)
• আগের parameter ব্যবহার করা যায়। function box(width, height = width) — উচ্চতা না দিলে বর্গ।
• Default আছে এমন parameter শেষে রাখুন। function f(a = 1, b) লেখা বৈধ, কিন্তু b দিতে গেলে f(undefined, 5) লিখতে হয় — বিরক্তিকর। অনেক ঐচ্ছিক option থাকলে একটি object নিন: createUser({ name, role = "user" }) — এই destructuring পর্ব ১৭-এ।

৫ · Rest parameter, পুরোনো arguments আর spread

একটি কার্টে কতগুলো পণ্য থাকবে, আগে থেকে জানা নেই। sum(120, 80), sum(120, 80, 250, 40) — যত খুশি দাম নিতে পারে এমন function কীভাবে লিখবেন? উত্তর rest parameter: শেষ parameter-এর আগে তিনটি ডট।

function sum(...prices) {           // prices একটি আসল array
  let total = 0;
  for (const p of prices) total += p;
  return total;
}
sum(120, 80, 250);   // prices = [120, 80, 250] → 450
sum();               // prices = [] → 0

function bill(customer, ...items) { }  // প্রথমটি আলাদা, বাকি সব items-এ

পুরোনো উপায় — arguments object

ES2015-এর আগে rest ছিল না। তখন প্রতিটি সাধারণ function-এর ভেতরে স্বয়ংক্রিয়ভাবে একটি arguments নামের object থাকত (এখনো থাকে), যাতে সব argument জমা থাকে। পুরোনো কোড আর লাইব্রেরিতে এটি প্রচুর দেখবেন। কিন্তু এর তিনটি বড় সমস্যা:

1. এটি array নয়, “array-এর মতো”। arguments.length আর arguments[0] আছে, কিন্তু map, filter-এর মতো array method নেই। আগে Array.from(arguments) দিয়ে বদলাতে হতো।
2. Arrow function-এ নিজস্ব arguments নেই। Arrow-এর ভেতরে arguments লিখলে সেটি বাইরের সাধারণ function-এর arguments ধরে; বাইরে কোনো function না থাকলে ব্রাউজারের সাধারণ script-এ ReferenceError: arguments is not defined.
3. নাম দেখে বোঝা যায় না। function sum() দেখে কেউ বুঝবে না যে এটি argument নেয়; function sum(...prices) নিজেই বলে দেয়।

তাই নতুন কোডে সবসময় rest parameter. এর পেছনের ইতিহাস ভাবনার প্রশ্ন ৪-এ।

উল্টো দিক — spread দিয়ে ডাকা

Rest অনেক argument-কে একটি array-তে জড়ো করে। ঠিক উল্টো কাজ করে spread — ডাকার সময় একটি array-কে আলাদা আলাদা argument-এ ছড়িয়ে দেয়:

const prices = [120, 80, 250];
Math.max(...prices);     // Math.max(120, 80, 250) → 250
sum(...prices, 40);      // sum(120, 80, 250, 40) → 490

চিহ্ন একই (...), কিন্তু অবস্থান দেখে কাজ বোঝা যায়: parameter-এর তালিকায় থাকলে rest (জড়ো), কলের ভেতরে বা array/object-এর ভেতরে থাকলে spread (ছড়ানো)। Spread-এর পুরো ব্যবহার পর্ব ১৭-এ।

এবার default, rest আর arrow-এর object ফাঁদ — তিনটিই নিজে চালিয়ে দেখুন:

// উদাহরণ: ধরে নেওয়া VAT হার 15%
function addVat(amount, rate = 0.15) {
  return amount + amount * rate;
}
console.log(addVat(1000), addVat(1000, undefined));
console.log(addVat(1000, null), addVat(1000, 0.05));

function sum(...prices) {
  let total = 0;
  for (const p of prices) total += p;
  return total;
}
const cart = [120, 80, 250];
console.log(sum(...cart), sum(), Array.isArray([...cart]));

const bad = () => { taka: 100 };
const good = () => ({ taka: 100 });
console.log(bad(), good());

function old() { return Array.isArray(arguments) + " " + arguments.length; }
console.log(old("a", "b"), addVat.length, sum.length);

৬ · Function-ও একটি মান — callback, higher-order function আর function ফেরত দেওয়া

এবার JavaScript-এর সবচেয়ে শক্তিশালী ধারণা। একটি চেকআউট function ভাবুন। দাম যোগ করার কাজ সব সময় একই, কিন্তু ছাড় (discount) বদলায় — ঈদের অফারে ১০%, নতুন গ্রাহকের জন্য ১০০ টাকা কম, bKash দিয়ে দিলে আলাদা ক্যাশব্যাক। প্রতিটি অফারের জন্য আলাদা চেকআউট function লিখবেন? না। বরং ছাড়ের নিয়মটি একটি function হিসেবে চেকআউটের হাতে দিন, আর চেকআউট মোট দাম বের করে সেই function-কে ডাকুক।

যে function আপনি অন্য function-এ পাঠান, যাতে সে পরে আপনার function-কে “ফিরে ডাকে”, সেটি callback. আর যে function অন্য function নেয় বা ফেরত দেয়, সেটি higher-order function. ধাপে ধাপে দেখুন:

1const tenOff = (t) => t * 0.9;2function checkout(cart, discountFn) {3  let total = 0;4  for (const item of cart) total += item.price;5  return discountFn(total);6}7console.log(checkout([{price: 700}, {price: 500}], tenOff));

যেসব জায়গায় আপনি আগেই callback দেখছেন

• সাজানোর নিয়ম: [10, 9, 100].sort() দেয় [10, 100, 9] — কারণ ডিফল্টে sort সংখ্যাকে string বানিয়ে অভিধানের ক্রমে সাজায়। সংখ্যা হিসেবে সাজাতে একটি তুলনার function (comparator) পাঠান: .sort((a, b) => a - b). ফল ঋণাত্মক হলে a আগে, ধনাত্মক হলে b আগে।
• সময় পরে চালানো: setTimeout(() => console.log("চা তৈরি"), 2000) — দুই সেকেন্ড পরে ব্রাউজার আপনার function ডাকবে (পর্ব ৩২)।
• ক্লিক: button.addEventListener("click", handleClick) — ক্লিক হলে handleClick চলবে (পর্ব ৩৮)। এখানেও বন্ধনী নেই!
• Array method: prices.map((p) => p * 2), filter, reduce — পর্ব ১৬-এ পুরোটা।

Function ফেরত দেওয়া — function বানানোর কারখানা

Higher-order function-এর অন্য দিক: একটি function নতুন function তৈরি করে ফেরত দিতে পারে।

function checkout(cart, discountFn = (t) => t) {
  let total = 0;
  for (const item of cart) total += item.price * item.qty;
  return discountFn(total);
}
const tenOff = (t) => t * 0.9;
const flat100 = (t) => Math.max(0, t - 100);
const cart = [{ price: 450, qty: 2 }, { price: 300, qty: 1 }];
console.log(checkout(cart), checkout(cart, tenOff), checkout(cart, flat100));

function makeMultiplier(k) {
  return (x) => x * k;          // নতুন function ফেরত
}
const double = makeMultiplier(2);
const triple = makeMultiplier(3);
console.log(double(21), triple(5), typeof double);

console.log([10, 9, 100].sort(), [10, 9, 100].sort((a, b) => a - b));

IIFE — একটি পুরোনো কৌশল

পুরোনো কোডে প্রায়ই দেখবেন এমন অদ্ভুত লেখা: (function () { … })();. এটি IIFE — Immediately Invoked Function Expression, অর্থাৎ তৈরি হয়েই সাথে সাথে ডাকা function. কেন? ES2015-এর আগে let, const বা module ছিল না; var-এর scope শুধু function পর্যন্ত (পর্ব ০৭)। তাই একটি ফাইলের variable যাতে পুরো পাতার global-এ ছড়িয়ে না পড়ে, পুরো কোড একটি function-এ মুড়ে সাথে সাথে চালানো হতো। jQuery-র যুগের অনেক plugin এভাবে লেখা। আজ এই কাজ করে block scope আর ES module (পর্ব ৪৫), তাই নতুন কোডে IIFE খুব কম দরকার — কিন্তু পুরোনো কোড পড়তে চিনে রাখুন।

৭ · Arrow function আর this — কোথায় arrow নয়

Arrow function শুধু ছোট লেখা নয়; আচরণেও আলাদা। সবচেয়ে বড় পার্থক্য: arrow function-এর নিজের this নেই। এর ভেতরে this লিখলে সেটি বাইরের scope-এর this নেয় — যেখানে arrow-টি লেখা হয়েছে, সেখানকার। একে বলে lexical this. this কী জিনিস, কীভাবে ঠিক হয় — পুরো বিষয়টি পর্ব ২৪-এ। এখানে শুধু একটি নিয়ম মনে রাখুন, কারণ AI আর নতুনরা এই ভুল সবচেয়ে বেশি করে:

const shop = {
  name: "রহিম স্টোর",
  greetArrow: () => "স্বাগতম " + this.name,      // ✘ বাইরের this
  greet() { return "স্বাগতম " + this.name; },     // ✔ shop
  later() {
    setTimeout(() => console.log(this.name), 100); // ✔ arrow এখানে ঠিক
  },
};
shop.greet();       // "স্বাগতম রহিম স্টোর"
shop.greetArrow();  // "স্বাগতম undefined" বা "স্বাগতম " — shop নয়!

৮ · Pure function, side effect আর ভালো function-এর অভ্যাস

একটি pure function-এর দুটি গুণ: (১) একই input দিলে সবসময় একই output দেয়, আর (২) বাইরের কিছু বদলায় না। addVat pure — ১০০০ দিলে সবসময় ১১৫০, আর কিছু ছোঁয় না। বাইরের কিছু বদলানো — ফাইলে লেখা, পাতা বদলানো, global variable বাড়ানো, এমনকি console.log — এসবকে বলে side effect.

Side effect খারাপ নয়; এগুলো ছাড়া প্রোগ্রাম কিছুই দেখাতে পারত না। কিন্তু বিপজ্জনক ধরনটি হলো পাওয়া input গোপনে বদলে দেওয়া:

// ✘ input বদলে দেয় — যে cart পাঠিয়েছে, তার cart-ও বদলে যায়
function addItemBad(cart, item) {
  cart.push(item);
  return cart;
}

// ✔ নতুন array ফেরত দেয় — মূল cart অক্ষত
function addItem(cart, item) {
  return [...cart, item];
}

ছোট, এক-কাজের, নাম দেখেই বোঝা যায়

বাস্তব প্রজেক্টে ভালো function দেখতে কেমন? তিনটি ছোট helper দেখুন — একটি টাকা দেখানোর, একটি বাংলাদেশি মোবাইল নম্বর যাচাইয়ের:

/**
 * টাকার অঙ্ক বাংলাদেশি ধাঁচে কমা দিয়ে দেখায়।
 * @param {number} amount - টাকার পরিমাণ
 * @returns {string} যেমন "৳12,50,000"
 */
function formatTaka(amount) {
  return "৳" + amount.toLocaleString("en-IN");
}

/**
 * বাংলাদেশি মোবাইল নম্বর (01 দিয়ে শুরু, মোট 11 অঙ্ক) কি না।
 * @param {string} phone
 * @returns {boolean}
 */
function isValidBdPhone(phone) {
  return /^01[3-9]\d{8}$/.test(phone);
}

JSDoc-এর @param আর @returns শুধু মানুষের জন্য নয়। VS Code এগুলো পড়ে function ডাকার সময় parameter-এর নাম আর type দেখায়, আর ফাইলের ওপরে // @ts-check লিখলে type-এর ভুলও ধরে। এটা TypeScript-এর প্রথম ধাপ — পর্ব ৪৭-এ আরও এগোবেন।

৯ · Recursion — নিজেকে ডাকা function

একটি function নিজেকেও ডাকতে পারে — একে বলে recursion. ক্লাসিক উদাহরণ factorial: ৩! = ৩ × ২ × ১. লক্ষ করুন, ৩! = ৩ × ২!, আর ২! = ২ × ১!. অর্থাৎ বড় সমস্যাটি একই রকম ছোট সমস্যার ওপর দাঁড়িয়ে। শুধু একটি জায়গায় থামতে হবে — ১! = ১. এই থামার জায়গাটি হলো base case.

1function factorial(n) {2  if (n <= 1) return 1;          // base case3  return n * factorial(n - 1);4}5console.log(factorial(3));

Recursion-এর দুটি নিয়ম: (১) একটি base case থাকতে হবে, (২) প্রতিটি কলে সমস্যা base case-এর দিকে ছোট হতে হবে। Factorial-এর মতো সরল কাজ একটি লুপেও করা যায়, আর লুপ stack ভরায় না। Recursion সত্যিই উজ্জ্বল হয় গাছের মতো গঠনে — ফোল্ডারের ভেতরে ফোল্ডার, মন্তব্যের উত্তরে উত্তর, পাতার DOM (পর্ব ৩৭), নেস্টেড JSON (পর্ব ১৯)।

১০ · AI-এর যুগে — AI-এর লেখা function যাচাই করা

AI-কে “একটি checkout feature লিখে দাও” বললে প্রায়ই পাবেন একটিমাত্র ১৫০ লাইনের function — দাম যোগ, ছাড়, VAT, ডেটাবেসে লেখা, ইমেল পাঠানো সব একসাথে। কাজ হয়তো করে, কিন্তু পরীক্ষা করা, বদলানো আর পুনরায় ব্যবহার করা প্রায় অসম্ভব। Function-এর বিষয়ে AI-এর সবচেয়ে সাধারণ ভুলগুলো:

AI-এর লেখা function হাতে পেলে — যাচাইয়ের চেকলিস্ট

• প্রতিটি function-এর নাম পড়ে বোঝা যায় সে কী করে, আর সে একটিই কাজ করে
• কোনো function পাওয়া array বা object বদলায় না — push, sort, splice, সরাসরি property বসানো খুঁজে দেখেছি
• Object-এর method-এ arrow function নেই; this যেখানে আছে, সেখানে কে ডাকছে বুঝেছি
• Default parameter-এ undefined, null আর 0 — তিনটি দিয়েই চালিয়ে দেখেছি
• Callback পাঠানোর জায়গায় বন্ধনী নেই (fn, fn() নয়)
• Recursion থাকলে base case আছে, আর খুব বড় input-এ stack ভরে যায় কি না ভেবেছি
• JSDoc-এ লেখা type আর আসল কোড মেলে