সরাসরি পর্বে যান
পর্ব ৫৭ · ৫৯-এর মধ্যে · মডিউল ৮

MCQ প্রশ্নব্যাংক — JavaScript-এর ২৫৭টি প্রশ্নে যেকোনো পরীক্ষার প্রস্তুতি

JavaScript MCQ Question Bank — Core Language, Async, DOM, Web Security, Node.js & Tooling, Every Option Explained

Taught in Bangla, this question bank holds 257 JavaScript multiple-choice questions ordered by course module: history and engines, types, coercion and scope, arrays, Map and JSON, closures, this, prototypes and classes, the event loop and Promises, DOM, storage and web security, and modules, npm, TypeScript, testing, Node.js and Express, with every option explained and exam strategies for elimination and time.

এই পর্বে যা করবেন

  • MCQ পরীক্ষা JavaScript-এর কোন কোন দিক যাচাই করে, তা চেনা
  • বাদ দেওয়ার পদ্ধতি, “সব সময়/কখনো না” ধরনের শব্দের ফাঁদ আর সময় ভাগের কৌশল শেখা
  • পুরো কোর্সের ২৫৭টি প্রশ্নে নিজের দুর্বল জায়গা খুঁজে বের করা, আর সেই পর্বে ফিরে যাওয়া
  • সবচেয়ে প্রচলিত ফাঁদ — coercion আর ==, hoisting ও TDZ, লুপে closure, this, event loop-এর ক্রম, sort-এর ডিফল্ট — গভীরভাবে বোঝা
  • AI দিয়ে আরও প্রশ্ন বানানো, আর সেগুলোর “সঠিক উত্তর” কোড চালিয়ে যাচাই করা

১ · MCQ পরীক্ষা JavaScript-কে কীভাবে যাচাই করে — আর উত্তর বাছাইয়ের কৌশল

নুসরাত একটি সফটওয়্যার কোম্পানির ফ্রন্ট-এন্ড পদের অনলাইন পরীক্ষার জন্য পড়ছেন। একই মাসে একটি সরকারি প্রতিষ্ঠানের প্রোগ্রামার পদের লিখিত পরীক্ষাও আছে। দুই জায়গাতেই প্রথম ধাপ MCQ — চারটি অপশন, একটি সঠিক। নুসরাত React দিয়ে দুটি প্রজেক্ট বানিয়েছেন, রোজ fetch আর map লেখেন। তবু প্রথম অনুশীলন সেটে ৪০টির মধ্যে ঠিক হলো ২৪টি। কেন?

কারণ MCQ প্রোগ্রাম লেখার পরীক্ষা নয়। এটি নিখুঁত খুঁটিনাটির পরীক্ষা। এডিটরে কোড লেখার সময় ভুল হলে console-এ লাল লেখা আসে, আপনি ঠিক করে নেন। MCQ-তে console নেই — আপনার মাথাই engine. আর প্রশ্নকর্তা জেনেশুনে এমন ভুল অপশন রাখেন, যা দেখতে একদম ঠিক মনে হয়। এমন বিভ্রান্তিকর অপশনকে বলে distractor. JavaScript-এ distractor বানানো খুব সহজ, কারণ ভাষাটি অনেক জায়গায় error না দিয়ে চুপচাপ একটা কিছু করে ফেলে — coercion, hoisting, this-এর বাঁধন, event loop-এর ক্রম।

আট ধরনের প্রশ্ন

JavaScript আর ওয়েবের MCQ মোটামুটি আটটি ছাঁচে পড়ে। কোন ছাঁচের প্রশ্ন, সেটা চিনতে পারলে অর্ধেক কাজ হয়ে যায়:

ধরনউদাহরণআসলে কী মাপে
ধারণা মনে রাখা“closure কী?”সংজ্ঞা সঠিকভাবে জানেন কি না
আউটপুট কী?ছোট কোড, চারটি সম্ভাব্য আউটপুটমাথায় কোড চালানো — coercion, scope, ক্রম
কোন error?“চলার সময় কী হবে?”TypeError, ReferenceError, SyntaxError-এর পার্থক্য
কোন কোড সঠিক/নিরাপদ?“কোনটি XSS থেকে নিরাপদ?”ভালো অভ্যাস আর নিরাপত্তার জ্ঞান
ক্রম কী?setTimeout, Promise আর console.log মিশিয়েevent loop, task আর microtask
ওয়েবের ভিত্তি“404 মানে কী?”, “কোন tag semantic?”HTML, CSS, HTTP আর ব্রাউজারের সাধারণ জ্ঞান
টুল ও পরিবেশ“npm ci কী করে?”npm, Node, TypeScript, টেস্টিং-এর শব্দভান্ডার
কোনটি মিথ্যা?চারটি বাক্য, একটি ভুলপুরো বিষয়ের ওপর দখল — প্রতিটি বাক্য যাচাই

কৌশল ১ · বাদ দেওয়ার পদ্ধতি

সঠিক উত্তর সরাসরি খোঁজার চেয়ে ভুলগুলো বাদ দেওয়া প্রায়ই সহজ। একে বলে elimination method. প্রতিটি অপশনকে আলাদা করে জিজ্ঞেস করুন: “এটি ঠিক হতে হলে কোন নিয়মটি সত্য হতে হবে?” যে অপশনের পেছনের নিয়মটি মিথ্যা, সেটি কেটে দিন। নিচের ডায়াগ্রামে একটি চতুর প্রশ্ন এভাবে ধাপে ধাপে সমাধান করা হয়েছে।

  1. বিষয় চেনাsort()ডিফল্ট তুলনা
  2. error হবে?নাঘ বাদ
  3. array বদলায়?হ্যাঁগ বাদ
  4. কীভাবে তুলনা?stringক বাদ
  5. যাচাই[ 1, 10, 2 ]উত্তর খ
প্রশ্নChrome / Node 20
const nums = [10, 1, 2];
nums.sort();
console.log(nums);

ক) [ 1, 2, 10 ]   খ) [ 1, 10, 2 ]
গ) [ 10, 1, 2 ]   ঘ) TypeError
ধাপ ২কোডটি কি error দেবে?
const দিয়ে array রাখা, তারপর array-র ভেতর বদলানো
→ বৈধ (const শুধু নাম আর বাঁধন স্থির রাখে)
sort() সব array-তে আছে → কোনো error নেই

ক) [ 1, 2, 10 ]   খ) [ 1, 10, 2 ]
গ) [ 10, 1, 2 ]   ঘ) TypeError
ধাপ ৩sort কি মূল array বদলায়?
sort() = in-place → nums নিজেই সাজানো হয়
(নতুন কপি চাইলে toSorted(), ES2023)

ক) [ 1, 2, 10 ]   খ) [ 1, 10, 2 ]
গ) [ 10, 1, 2 ]   ঘ) TypeError
ধাপ ৪comparator না দিলে তুলনা কীভাবে?
প্রতিটি মানকে string বানিয়ে তুলনা:
"10"  "1"  "2"
"1" < "10" (ছোট string আগে) < "2" ("1" < "2")

ক) [ 1, 2, 10 ]   খ) [ 1, 10, 2 ]
গ) [ 10, 1, 2 ]   ঘ) TypeError
ধাপ ৫উত্তর ও ফাঁদের চেক
উত্তর: খ) [ 1, 10, 2 ]

সংখ্যা হিসেবে সাজাতে:
nums.sort((a, b) => a - b);   // [ 1, 2, 10 ]
  1. আগে বিষয় চিনুন। কোডে কোনো লুপ বা হিসাব নেই — আছে শুধু sort(), কোনো comparator ছাড়া। তাই প্রশ্নটি আসলে একটি নিয়মের: “comparator না দিলে sort কীভাবে তুলনা করে?” প্রশ্নকর্তা এখানে সংখ্যা দেখিয়ে আপনাকে সংখ্যার মতো ভাবাতে চান।
  2. কোডটি কি আদৌ error দেবে? const দিয়ে রাখা array-র ভেতরের উপাদান বদলানো সম্পূর্ণ বৈধ — const শুধু নামটিকে অন্য মানে সরাতে দেয় না। আর sort প্রতিটি array-তে আছে। তাই “TypeError” (ঘ) বাদ। এই প্রশ্ন সব সময় আগে করুন, কারণ প্রশ্নকর্তা প্রায়ই error-কেই সঠিক উত্তর হিসেবে রাখেন — এখানে রাখেননি।
  3. মূল array কি বদলায়? sort in-place কাজ করে: যে array-তে ডাকা হয়, সেটিকেই সাজায় এবং সেটিকেই ফেরত দেয়। তাই nums আর আগের মতো থাকে না — “[ 10, 1, 2 ]” (গ) বাদ। (মূল array অক্ষত রেখে সাজানো কপি চাইলে ES2023-এর toSorted().)
  4. কীভাবে তুলনা হয়? comparator না দিলে প্রতিটি উপাদানকে string বানিয়ে UTF-16 code unit-এর ক্রমে তুলনা হয় — অভিধানের মতো। "1" হলো "10"-এর শুরুর অংশ, তাই আগে; আর "10" বনাম "2"-এ প্রথম অক্ষর "1" < "2". তাই সংখ্যার ক্রম “[ 1, 2, 10 ]” (ক) আসে না।
  5. উত্তর খ — তারপর ফাঁদটি মনে রাখুন। শেষে ভাবুন, প্রশ্নকর্তা ক কেন রেখেছিলেন: এটিই “স্বাভাবিক” মনে হয়। সংখ্যা হিসেবে সাজাতে সব সময় comparator দিন: (a, b) => a - b. ভুল অপশন দেখেই বোঝা যায় প্রশ্নটি কোন ভুল ধারণা ধরতে চায়।

কৌশল ২ · “TypeError”, “ReferenceError”, “SyntaxError” আর “নিশ্চিত নয়”

JavaScript-এর MCQ-তে প্রায়ই একটি অপশন থাকে কোনো error-এর নাম। অনেকে এগুলো “ফাঁকা ঘর” ভেবে এড়িয়ে যান। ভুল। এগুলো প্রায়ই সঠিক উত্তর। চারটির পার্থক্য পরিষ্কার রাখুন:

SyntaxError

কোডটি parse-ই হয় না, তাই ফাইলের একটি লাইনও চলে না — আগের console.log-ও না। যেমন একই scope-এ দুবার let x, বা const x; (মান ছাড়া)।

কিছুই চলে না

ReferenceError

নামটিই খুঁজে পাওয়া যায় না, অথবা TDZ-এ থাকা let/const ঘোষণার আগে ছোঁয়া হয়েছে। চলার সময় আসে, আগের লাইনগুলো চলে যায়।

নাম নেই বা এখনো তৈরি নয়

TypeError

নাম আছে, কিন্তু মানটি দিয়ে সেই কাজ করা যায় না: undefined-এর property পড়া, function নয় এমন কিছু ডাকা, const-এ নতুন মান বসানো।

মানটি ভুল ধরনের

নিশ্চিত নয়

দুটি নেটওয়ার্ক অনুরোধের কোনটি আগে শেষ হবে, Math.random()-এর ফল, বা ভিন্ন engine-এ error বার্তার ভাষা — এগুলো নির্দিষ্ট নয়।

“নির্দিষ্ট নয়” বৈধ উত্তর
মূল ধারণা

প্রশ্নে কোড থাকলে আউটপুট খোঁজার আগে তিনটি প্রশ্ন করুন। এক, “এটি কি parse হবে?” — একই নামে দুবার let, ভুল জায়গায় await, বন্ধ না হওয়া বন্ধনী। দুই, “চলার সময় কি error?” — TDZ, undefined-এর property, function নয় এমন কিছু ডাকা। তিন, “ক্রম কি নির্দিষ্ট?” — timer, promise আর নেটওয়ার্ক। কোনোটির উত্তর “হ্যাঁ” হলে মান নিয়ে মাথা ঘামানোর আগে সেটিই উত্তর।

কৌশল ৩ · শব্দের ফাঁদ — “সব সময়”, “কখনো না”, “শুধু”

“কোনটি সত্য?” আর “কোনটি মিথ্যা?” প্রশ্নে চরম শব্দ খুঁজুন। “সব সময়”, “কখনো না”, “শুধু”, “নিশ্চিতভাবে” — এমন শব্দ একটি বাক্যকে খুব শক্ত দাবি বানায়, আর একটি ব্যতিক্রমই সেটিকে মিথ্যা করে দেয়। যেমন “setTimeout(fn, 0) সব সময় সাথে সাথে চলে” — মিথ্যা, কারণ বর্তমান কোড আর সব microtask শেষ হওয়ার পরেই চলে। “typeof কখনো error দেয় না” — এটিও মিথ্যা: TDZ-এ থাকা let ভ্যারিয়েবলে typeof ReferenceError দেয়।

উল্টোটাও মনে রাখুন: “সাধারণত”, “বেশিরভাগ ক্ষেত্রে”, “গড়ে” শব্দওয়ালা বাক্য প্রায়ই সত্য — যেমন “Map-এ খোঁজা গড়ে O(1)”. তবে এটি একটি ইঙ্গিত, নিয়ম নয়। শেষ সিদ্ধান্ত নিন বিষয়ের জ্ঞান দিয়ে।

“কোনটি মিথ্যা?” প্রশ্নে সবচেয়ে বেশি ভুল হয় তাড়াহুড়োয় — প্রথম সত্য বাক্যটি দেখেই সেটি বেছে ফেলা। প্রশ্নের “মিথ্যা” বা “ভুল” শব্দটির নিচে মনে মনে দাগ দিন, তারপর প্রতিটি বাক্যের পাশে “স” বা “মি” লিখে এগোন।

কৌশল ৪ · ভুলে নম্বর কাটলে কখন আন্দাজ করবেন

যেসব পরীক্ষায় ভুল উত্তরে নম্বর কাটে (negative marking), সেখানে আন্দাজ করা একটি হিসাবের প্রশ্ন। নিয়ম পরীক্ষাভেদে আলাদা, তাই নিজের পরীক্ষার নিয়ম আগে জেনে নিন। হিসাবটি সহজ: (ঠিক হওয়ার সম্ভাবনা × ১) − (ভুল হওয়ার সম্ভাবনা × কাটা নম্বর)। যেমন দুটি অপশন বাকি আর ভুলে ০.৫ কাটে: ০.৫ − ০.৫ × ০.৫ = +০.২৫. আবার কিছুই না জেনে চারটি থেকে আন্দাজ করলে আর ০.৫ কাটলে: ০.২৫ − ০.৭৫ × ০.৫ = −০.১২৫ — ক্ষতি। শিক্ষা পরিষ্কার: অন্তত দুটি অপশন নিশ্চিতভাবে বাদ দিতে পারলে আন্দাজ সাধারণত লাভজনক; কিছুই না জানলে আর কাটা নম্বর বেশি হলে ছেড়ে দিন।

কৌশল ৫ · সময় ভাগ করা

ধরুন ১০০টি প্রশ্ন ৬০ মিনিটে — প্রতিটির জন্য গড়ে ৩৬ সেকেন্ড। একটি event loop-এর ক্রমের প্রশ্নেই দুই মিনিট চলে যেতে পারে। তাই দুই দফায় চলুন। প্রথম দফায় সংজ্ঞা, HTTP status, HTML tag, keyword-এর মতো সরাসরি প্রশ্ন দ্রুত শেষ করুন। কোড-ভারী প্রশ্নে দাগ দিয়ে এগিয়ে যান। দ্বিতীয় দফায় ফিরে এসে সেগুলো ধরুন। এক প্রশ্নে আটকে থেকে শেষের পাঁচটি সহজ প্রশ্ন না দেখা — MCQ পরীক্ষায় এটিই সবচেয়ে দামি ভুল।

এই পাতার প্রশ্নগুলো সম্পর্কে: প্রশ্নগুলো এ ধরনের পরীক্ষায় প্রায়ই আসে এমন ধারণা নিয়ে বানানো — কোনোটিই কোনো নির্দিষ্ট পরীক্ষার আসল প্রশ্ন নয়। প্রতিটি কোড-প্রশ্নের আউটপুট আর error আধুনিক ব্রাউজার ও Node.js 20-এ চালিয়ে যাচাই করা। প্রশ্নের শুরুতে কঠিনতার মাত্রা দেওয়া আছে: (সহজ), (মাঝারি), (কঠিন)। আলাদা কিছু বলা না থাকলে ধরে নিন কোডটি একটি সাধারণ (module নয় এমন) script-এ চলছে, আর console.log-এর আউটপুট Node-এর ধাঁচে লেখা — যেমন array [ 1, 2 ], string-এর ভেতরে থাকলে 'a'.

C/C++/Python/Java জানলে

C আর C++-এর MCQ-তে বড় অংশ জুড়ে থাকে undefined behavior আর মেমরি; Java-তে compile error আর exception-এর নাম। JavaScript-এ সেই জায়গা নেয় নীরব আচরণ — coercion, this, hoisting আর async ক্রম, যেখানে কোনো error আসে না, শুধু অপ্রত্যাশিত মান আসে। Python-এর is বনাম ==-এর ফাঁদ এখানে আসে == বনাম === আর object-এর reference হয়ে। একই ধাঁচের প্রশ্নব্যাংক আছে Java, Python, C++ আর C কোর্সে; যিনি এগুলো শেখেননি, তিনি এই বাক্সটি বাদ দিতে পারেন।

২ · ভিত্তি — ইতিহাস, ওয়েবের তিন স্তর, সেটআপ আর engine

এই অংশের প্রশ্ন সহজ মনে হয়, তাই সবাই তাড়াহুড়া করেন — আর ঠিক সেখানেই ভুল হয়। সবচেয়ে বেশি আসে: JavaScript-এর জন্ম আর ECMAScript-এর সম্পর্ক, HTML-CSS-JavaScript-এর কাজের ভাগ, defer আর async-এর পার্থক্য, JavaScript engine, JIT, call stack আর garbage collection-এর আসল কাজ।

(সহজ) JavaScript ভাষাটি প্রথম কোন প্রতিষ্ঠানে, কার হাতে তৈরি হয়েছিল?

  • Microsoft, Anders Hejlsberg
  • Google, Lars Bak
  • Sun Microsystems, James Gosling
  • Netscape, Brendan Eich

(সহজ) JavaScript আর Java-র সম্পর্ক কোনটি ঠিক?

  • JavaScript হলো Java-র হালকা সংস্করণ
  • Java কোড ব্রাউজারে সরাসরি JavaScript-এর মতো চলে
  • JavaScript কোড চালাতে JVM লাগে
  • দুটি আলাদা ভাষা; নামের মিল মূলত ১৯৯৫ সালের বিপণনের সিদ্ধান্ত

(সহজ) ECMAScript কী?

  • JavaScript ভাষার আনুষ্ঠানিক নির্দেশিকা (ECMA-262), যা TC39 কমিটি দেখাশোনা করে
  • ব্রাউজারের DOM API-র নাম
  • JavaScript-এর একটি framework
  • Node.js-এর পুরোনো নাম

(সহজ) কোন সংস্করণ থেকে ECMAScript প্রতি বছর একটি করে নতুন সংস্করণ পাচ্ছে, আর সংস্করণের নাম সাল দিয়ে রাখা হচ্ছে?

  • ES5 (২০০৯)
  • ES2015 (ES6)
  • ES3 (১৯৯৯)
  • ES2020

(সহজ) Chrome, Edge আর Node.js-এর ভেতরে কোন JavaScript engine কাজ করে?

  • SpiderMonkey
  • Chakra
  • JavaScriptCore
  • V8

(সহজ) Node.js আসলে কী?

  • একটি ডেটাবেস
  • JavaScript থেকে আলাদা একটি নতুন ভাষা
  • V8 engine আর libuv-এর ওপর বানানো একটি runtime, যা ব্রাউজারের বাইরে JavaScript চালায়
  • ব্রাউজারের ভেতরের একটি JavaScript লাইব্রেরি

(সহজ) একটি ওয়েব পাতায় HTML, CSS আর JavaScript-এর কাজের সঠিক ভাগ কোনটি?

  • HTML — চেহারা; CSS — আচরণ; JavaScript — গঠন
  • HTML — বিষয়বস্তু ও গঠন; CSS — চেহারা ও বিন্যাস; JavaScript — আচরণ ও প্রতিক্রিয়া
  • JavaScript ছাড়া কোনো পাতা দেখানো যায় না
  • তিনটিই একই কাজ করে, শুধু লেখার ধরন আলাদা

(মাঝারি) কোন HTML element-টি semantic, অর্থাৎ নাম দেখেই বোঝা যায় ভেতরে কী আছে?

  • <nav>
  • <b>
  • <div>
  • <span>

(মাঝারি) একটি p element-এ তিনটি নিয়ম মেলে: p { color: red }, .note { color: green }, #intro { color: blue }. কোনোটিতে !important নেই আর inline style নেই। লেখার রং কী হবে?

  • লাল — element selector সবচেয়ে নির্দিষ্ট
  • তিনটি রং মিশে একটি নতুন রং
  • নীল — id selector-এর specificity সবচেয়ে বেশি
  • সবুজ — class সবচেয়ে শেষে লেখা

(মাঝারি) একটি box-এ width: 200px; padding: 10px; border: 5px solid আর box-sizing: border-box. পাতায় box-টির মোট প্রস্থ (margin বাদে) কত?

  • 200px
  • 170px
  • 220px
  • 230px

(মাঝারি) <head>-এ দুটি script আছে: <script defer src="a.js"> আর <script defer src="b.js">. b.js আগে ডাউনলোড শেষ হলো। কোনটি সঠিক?

  • HTML পড়া শেষ হলে a.js, তারপর b.js চলবে — DOMContentLoaded-এর আগে
  • b.js আগে চলবে, কারণ সেটি আগে এসেছে
  • defer শুধু body-র ভেতরে কাজ করে
  • দুটিই HTML পড়া থামিয়ে সাথে সাথে চলবে

(মাঝারি) <script type="module" src="app.js"> সম্পর্কে কোনটি সত্য?

  • এটি সব সময় HTML পড়া থামিয়ে সাথে সাথে চলে
  • এটি ডিফল্টভাবে defer হয়, strict mode-এ চলে, আর এর top-level ভ্যারিয়েবল global হয় না
  • এটি শুধু Node.js-এ চলে
  • এতে import লেখা যায় না

(সহজ) ব্রাউজারের ঠিকানার ঘরে একটি URL লিখে Enter চাপলে প্রথমে কী দরকার হয়, যাতে ব্রাউজার জানে কোন সার্ভারে যাবে?

  • CSS ফাইল পড়া
  • JavaScript চালানো
  • DOM তৈরি করা
  • DNS দিয়ে domain নামটি থেকে IP ঠিকানা বের করা

(সহজ) Node.js-এর কোন ধরনের সংস্করণ সাধারণত production সার্ভারের জন্য সুপারিশ করা হয়?

  • সবচেয়ে পুরোনো সংস্করণ, কারণ সেটিই সবচেয়ে পরীক্ষিত
  • LTS (Long-Term Support) সংস্করণ — জোড় সংখ্যার major সংস্করণ, যেমন 20 বা 22
  • যেকোনো nightly build
  • সর্বশেষ বিজোড় সংখ্যার Current সংস্করণ

(সহজ) REPL বলতে কী বোঝায়?

  • কোড জমা রাখার online repository
  • একটি JavaScript framework
  • Read–Eval–Print Loop: একটি লাইন লিখলে সাথে সাথে চালিয়ে ফল দেখায়, তারপর আবার অপেক্ষা করে
  • npm package প্রকাশের কমান্ড

(সহজ) টেবিলের মতো সাজিয়ে array বা object দেখাতে console-এর কোন method সবচেয়ে উপযোগী?

  • console.time
  • console.error
  • console.table
  • console.log

(মাঝারি) নিচের function ডাকলে কী ফেরত আসে?

function getUser() {
  return
  {
    name: "Rafi"
  };
}
console.log(getUser());
  • undefined
  • { name: 'Rafi' }
  • SyntaxError
  • "Rafi"

(সহজ) কোন বাক্যটি সঠিক?

  • JavaScript case-sensitive: myName আর myname আলাদা ভ্যারিয়েবল
  • JavaScript-এ myName আর myname একই ভ্যারিয়েবল
  • ভ্যারিয়েবলের নাম সংখ্যা দিয়ে শুরু করা যায়
  • let শব্দটি সব জায়গায় ভ্যারিয়েবলের নাম হিসেবে চলে

(মাঝারি) ব্যবহারকারীর লেখা একটি string পাতায় দেখাতে হবে। কোনটি সবচেয়ে নিরাপদ?

  • el.outerHTML = userText;
  • el.textContent = userText;
  • el.innerHTML = userText;
  • document.write(userText);

(মাঝারি) V8-এর মতো আধুনিক engine সম্পর্কে কোনটি সত্য?

  • engine শুধু interpret করে, কখনো machine code বানায় না
  • JIT শুধু Node.js-এ থাকে
  • engine প্রথমে কোড parse করে bytecode চালায়, আর বারবার চলা কোড JIT দিয়ে optimized machine code-এ compile করে
  • JavaScript কোড আগে থেকে exe ফাইলে compile করে বিতরণ করতে হয়

(মাঝারি) base case ছাড়া একটি function নিজেকে বারবার ডাকতে থাকলে V8-এ কী হয়?

function f() { return f(); }
f();
  • SyntaxError
  • RangeError: Maximum call stack size exceeded
  • প্রোগ্রাম চিরকাল চলতে থাকে
  • TypeError: f is not a function

(মাঝারি) JavaScript-এর মেমরি ব্যবস্থাপনা সম্পর্কে কোনটি সঠিক?

  • delete obj লিখলে object সাথে সাথে মেমরি থেকে মুছে যায়
  • garbage collector root (global, call stack) থেকে পৌঁছানো যায় না এমন object খুঁজে মেমরি ফেরত নেয়
  • প্রোগ্রামারকে free() ডেকে মেমরি ছাড়তে হয়
  • একবার তৈরি object প্রোগ্রাম শেষ না হওয়া পর্যন্ত থাকে

(মাঝারি) “JavaScript single-threaded” কথাটির সঠিক অর্থ কোনটি?

  • JavaScript-এ asynchronous কাজ সম্ভব নয়
  • আপনার JavaScript কোড একটি main thread-এ একবারে একটি কাজ চালায়; লম্বা কাজ চললে ততক্ষণ পাতা সাড়া দেয় না
  • ব্রাউজার পুরোটাই একটি thread-এ চলে
  • Web Worker দিয়েও দ্বিতীয় thread পাওয়া যায় না

(কঠিন) নিচের কোনটি ECMAScript নির্দেশিকার অংশ নয়, বরং host পরিবেশ (ব্রাউজার বা Node) দেয়?

  • JSON.parse
  • setTimeout
  • Array.prototype.map
  • Promise

(মাঝারি) একই আকারের অনেক object বানালে V8 দ্রুত চলে, কিন্তু প্রতিটিতে ভিন্ন ক্রমে property যোগ করলে ধীর হতে পারে। এর পেছনের কারণ কী?

  • এটি শুধু Firefox-এর সমস্যা
  • ভিন্ন ক্রমে লিখলে property-গুলো মুছে যায়
  • JavaScript object-এর property সংখ্যা সীমিত
  • V8 একই আকারের object-কে একই hidden class দেয়, আর inline cache সেই আকার মনে রেখে property দ্রুত খোঁজে; ভিন্ন ক্রম মানে ভিন্ন hidden class

রিভিশনের জন্য: পর্ব ০১ · JavaScript কেন? · পর্ব ০২ · HTML, CSS আর JavaScript · পর্ব ০৩ · সেটআপ · পর্ব ০৪ · প্রথম প্রোগ্রাম · পর্ব ০৫ · JavaScript কীভাবে চলে

৩ · মূল ভাষা — টাইপ, coercion, scope, অপারেটর, string, number, শর্ত, লুপ আর function

পরীক্ষায় সবচেয়ে বেশি প্রশ্ন আসে এই অংশ থেকে, আর সবচেয়ে বেশি ফাঁদও এখানে। মূল বিষয়: primitive টাইপ আর typeof-এর খামখেয়ালি, loose equality (==) বনাম strict equality (===), truthy/falsy, var-let-const আর TDZ, nullish coalescing (??) ও optional chaining (?.), floating-point, আর function-এর তিন রূপ।

(সহজ) console.log(typeof null) কী ছাপবে?

  • "undefined"
  • "object"
  • TypeError
  • "null"

(সহজ) JavaScript-এ কয়টি primitive টাইপ আছে?

  • ৬টি
  • ৮টি
  • ৫টি
  • ৭টি — string, number, bigint, boolean, undefined, null, symbol

(সহজ) typeof NaN-এর মান কী?

  • "object"
  • "NaN"
  • "undefined"
  • "number"

(সহজ) console.log(typeof function () {}, typeof class {}) কী ছাপবে?

  • function object
  • function function
  • object object
  • function class

(সহজ) console.log("5" + 3, "5" - 3) কী ছাপবে?

  • 53 2
  • 8 8
  • 53 53
  • 8 2

(মাঝারি) console.log([] + {}) কী ছাপবে?

  • [object Object]
  • TypeError
  • 0
  • {}

(সহজ) console.log(null == undefined, null === undefined) কী ছাপবে?

  • false false
  • false true
  • true true
  • true false

(মাঝারি) console.log(null == 0, null >= 0) কী ছাপবে?

  • true true
  • TypeError
  • false true
  • false false

(সহজ) একটি মান NaN কি না, তা নির্ভরযোগ্যভাবে যাচাইয়ের সঠিক উপায় কোনটি?

  • isNaN(x)
  • Number.isNaN(x)
  • x === NaN
  • x == NaN

(সহজ) নিচের কোন মানটি truthy?

  • null
  • 0
  • "false"
  • ""

(মাঝারি) Boolean([]) আর Boolean({})-এর মান কী?

  • true true
  • false true
  • true false
  • false false

(কঠিন) console.log([] == false) কী ছাপবে?

  • TypeError
  • true
  • undefined
  • false

(সহজ) নিচের কোড কী ছাপবে?

console.log(a);
var a = 5;
  • ReferenceError: a is not defined
  • 5
  • SyntaxError
  • undefined

(মাঝারি) নিচের কোড চালালে কী হবে?

console.log(b);
let b = 5;
  • undefined
  • ReferenceError: b is not defined
  • 5
  • ReferenceError: Cannot access 'b' before initialization

(সহজ) নিচের কোডের ফল কী?

const user = { name: "Rafi" };
user.name = "Mitu";
console.log(user.name);
  • TypeError: Assignment to constant variable.
  • Rafi
  • Mitu
  • SyntaxError

(সহজ) const x = 1; x = 2; চালালে কী হয়?

  • TypeError: Assignment to constant variable.
  • SyntaxError
  • কিছুই হয় না, x চুপচাপ 1 থাকে
  • ReferenceError

(মাঝারি) নিচের কোড কী ছাপবে?

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
  • 0 1 2
  • 0 0 0
  • 3 3 3
  • undefined undefined undefined

(মাঝারি) একটি সাধারণ (module নয়) script-এর top-level-এ var a = 1; let b = 2; লেখা। ব্রাউজারে কোনটি সত্য?

  • কোনোটিই window-এর property নয়
  • window.a হলো 1, কিন্তু window.b হলো undefined
  • window.b হলো 2, window.a হলো undefined
  • দুটিই window-এর property

(সহজ) নিচের কোড কী ছাপবে?

{
  let x = 1;
}
console.log(typeof x);
  • "number"
  • "undefined"
  • ReferenceError: x is not defined
  • "object"

(সহজ) console.log(0 || "default", 0 ?? "default") কী ছাপবে?

  • 0 default
  • 0 0
  • default 0
  • default default

(সহজ) const user = {}; থাকলে console.log(user?.address?.city) কী ছাপবে?

  • undefined
  • null
  • TypeError: Cannot read properties of undefined (reading 'city')
  • ""

(মাঝারি) a ||= b কোনটির সমান?

  • a || (a = b) — a falsy হলে তবেই b বসায়
  • a = a || b — সব সময় a-তে মান বসায়
  • a = b || a
  • a = a ?? b

(মাঝারি) console.log(2 ** 3 ** 2) কী ছাপবে?

  • 512
  • SyntaxError
  • 36
  • 64

(মাঝারি) console.log(-7 % 3) কী ছাপবে?

  • -1
  • -2
  • 1
  • 2

(মাঝারি) একটি সাধারণ (non-strict) script-এ নিচের কোড কী ছাপবে?

let s = "abc";
s[0] = "X";
console.log(s);
  • abc
  • Xbc
  • X
  • SyntaxError

(মাঝারি) console.log("😀".length) কী ছাপবে?

  • 2
  • 4
  • undefined
  • 1

(সহজ) "JavaScript".slice(-6)-এর মান কী?

  • "Script"
  • ""
  • "JavaS"
  • "JavaScript"

(সহজ) "a-b-c".replace("-", "+")-এর মান কী?

  • "a+b+c"
  • "a-b-c"
  • "a+b-c"
  • TypeError

(সহজ) নিচের কোড কী ছাপবে?

console.log(`মোট: ${2 + 3}`);
  • মোট: 5
  • SyntaxError
  • মোট: 23
  • মোট: ${2 + 3}

(সহজ) console.log(0.1 + 0.2 === 0.3) কী ছাপবে?

  • true
  • NaN
  • false
  • TypeError

(মাঝারি) Number.MAX_SAFE_INTEGER-এর মান কী?

  • 2⁶⁴ − 1
  • 2³¹ − 1
  • Infinity
  • 2⁵³ − 1 (9007199254740991)

(মাঝারি) console.log(parseInt("12px"), Number("12px")) কী ছাপবে?

  • 12 12
  • NaN NaN
  • 12 NaN
  • NaN 12

(মাঝারি) console.log(Number(""), Number(null), Number(undefined)) কী ছাপবে?

  • 0 0 NaN
  • 0 0 0
  • "" null undefined
  • NaN NaN NaN

(মাঝারি) 10n + 5 চালালে কী হয়?

  • "105"
  • 15n
  • TypeError: Cannot mix BigInt and other types, use explicit conversions
  • 15

(কঠিন) console.log(Math.round(-2.5), Math.round(2.5)) কী ছাপবে?

  • -3 3
  • -2 3
  • -3 2
  • -2 2

(কঠিন) console.log((1.005).toFixed(2)) কী ছাপবে?

  • 1.01
  • 1.00
  • RangeError
  • 1.005

(মাঝারি) নিচের কোড কী ছাপবে?

let r;
switch ("1") {
  case 1: r = "number"; break;
  default: r = "other";
}
console.log(r);
  • other
  • SyntaxError
  • number
  • undefined

(মাঝারি) নিচের কোড কী ছাপবে?

let out = "";
switch (2) {
  case 1: out += "a";
  case 2: out += "b";
  case 3: out += "c"; break;
  default: out += "d";
}
console.log(out);
  • bc
  • b
  • abc
  • bcd

(সহজ) array-র মানগুলোর ওপর লুপ চালাতে কোনটি সবচেয়ে উপযোগী?

  • for...each
  • while...in
  • for...of
  • for...in

(মাঝারি) const a = ["x", "y"]; for (const i in a) console.log(typeof i); কী ছাপবে?

  • undefined undefined
  • x y
  • number number
  • string string

(সহজ) do { ... } while (false); লুপের ভেতরের অংশ কতবার চলে?

  • এটি SyntaxError
  • ০ বার
  • ১ বার
  • অসীমবার

(মাঝারি) নিচের কোড চালালে কী হয়?

greet();
var greet = function () { console.log("hi"); };
  • hi
  • ReferenceError: greet is not defined
  • undefined
  • TypeError: greet is not a function

(মাঝারি) arrow function সম্পর্কে কোনটি মিথ্যা?

  • arrow function-এ নিজস্ব arguments object নেই
  • এক expression-এর arrow function-এ return না লিখলেও মান ফেরত আসে
  • arrow function-এর নিজস্ব this নেই; বাইরের scope-এর this ব্যবহার করে
  • arrow function-কে new দিয়ে constructor হিসেবে ডাকা যায়

(মাঝারি) function f(x = 10) { return x; } থাকলে console.log(f(undefined), f(null)) কী ছাপবে?

  • null 10
  • 10 10
  • 10 null
  • undefined null

(মাঝারি) function f(...items, last) {} লিখলে কী হয়?

  • items সব সময় খালি array হয়
  • TypeError চলার সময়
  • কাজ করে; শেষ argument last-এ যায়
  • SyntaxError: Rest parameter must be last formal parameter

(কঠিন) function f(a, b = 2, ...c) {} থাকলে f.length-এর মান কী?

  • ২
  • ৩
  • ০
  • ১

(মাঝারি) console.log("10" > "9", "10" > 9) কী ছাপবে?

  • true true
  • true false
  • false false
  • false true

(মাঝারি) একটি function-এর শুরুতে "use strict"; লেখা, আর ভেতরে ঘোষণা ছাড়াই total = 5; লেখা হলো। কী হবে?

  • একটি global ভ্যারিয়েবল total তৈরি হবে
  • SyntaxError
  • ReferenceError: total is not defined
  • TypeError

(কঠিন) let a = 5; const b = a++ + ++a; চালানোর পরে a আর b-এর মান কী?

  • a = 7, b = 14
  • a = 7, b = 12
  • a = 6, b = 11
  • a = 7, b = 11

(সহজ) typeof typeof 1-এর মান কী?

  • "undefined"
  • "number"
  • "string"
  • SyntaxError

রিভিশনের জন্য: পর্ব ০৬ · মান, টাইপ আর coercion · পর্ব ০৭ · let, const, var · পর্ব ০৮ · অপারেটর, truthy/falsy · পর্ব ০৯ · string আর Unicode · পর্ব ১০ · number আর BigInt · পর্ব ১১ · if, switch · পর্ব ১২ · লুপ · পর্ব ১৩ · function

coercion-এর প্রশ্নে মাথায় হিসাব করার পরে চাইলে নিচের কোড চালিয়ে মিলিয়ে নিন। প্রতিটি লাইন এই অংশের একটি ফাঁদ।

console.log("5" + 3, "5" - 3, "5" * "2");
console.log(null == undefined, null == 0, null >= 0);
console.log([] == false, Boolean([]), [] + {});
console.log(0 || "ডিফল্ট", 0 ?? "ডিফল্ট");
console.log(isNaN("abc"), Number.isNaN("abc"));
console.log(Number(""), Number(null), Number(undefined));
console.log(0.1 + 0.2, (1.005).toFixed(2));
console.log([10, 1, 2].sort(), typeof null);

প্রথম লাইন 53 2 10 — শুধু + string জোড়া দেয়, বাকি গাণিতিক অপারেটর সংখ্যা বানায়। দ্বিতীয় লাইন true false true — ==-এ null শুধু undefined-এর সমান, কিন্তু >= null-কে 0 বানায়। তৃতীয় লাইন true true [object Object] — [] truthy হয়েও == false-এ true. চতুর্থ লাইন ডিফল্ট 0. পঞ্চম true false — পুরোনো isNaN আগে রূপান্তর করে। ষষ্ঠ 0 0 NaN. সপ্তম 0.30000000000000004 1.00 — দুটিই floating-point-এর ফল। শেষ লাইন [ 1, 10, 2 ] object — comparator ছাড়া sort string হিসেবে সাজায়, আর typeof null-এর পুরোনো বাগ।

৪ · ডেটা স্ট্রাকচার — object, array, array method, destructuring, Map/Set, JSON আর তারিখ

এখানে মূল প্রশ্ন একটিই: কোন কাজ মূল ডেটা বদলায়, আর কোনটি নতুন কপি দেয়? object আর array ভ্যারিয়েবলে থাকে না, থাকে তার reference. তাই shallow copy বনাম deep copy, sort বনাম toSorted, splice বনাম slice — এই জোড়াগুলো পরীক্ষায় বারবার আসে। সাথে reduce, destructuring, Map/Set, JSON-এর সীমা আর Date-এর ০ থেকে শুরু হওয়া মাস।

(সহজ) নিচের কোড কী ছাপবে?

const a = { n: 1 };
const b = a;
b.n = 2;
console.log(a.n);
  • 1
  • TypeError
  • 2
  • undefined

(সহজ) console.log({ a: 1 } === { a: 1 }) কী ছাপবে?

  • undefined
  • true
  • false
  • TypeError

(মাঝারি) Object.keys({ b: 1, 2: "x", a: 2, 1: "y" })-এর ফল কী?

  • [ 'a', 'b', '1', '2' ]
  • ক্রম নির্দিষ্ট নয়
  • [ '1', '2', 'b', 'a' ]
  • [ 'b', '2', 'a', '1' ]

(সহজ) const k = "name"; const o = { name: "A", k: "B" }; থাকলে o[k] আর o.k-এর মান কী?

  • "B" আর "A"
  • দুটিই undefined
  • "A" আর "B"
  • দুটিই "A"

(মাঝারি) const o = { a: 1 }; থাকলে "toString" in o আর Object.hasOwn(o, "toString")-এর মান কী?

  • true false
  • false false
  • false true
  • true true

(মাঝারি) নিচের কোড কী ছাপবে?

const o = { a: 1, inner: { x: 1 } };
const c = { ...o };
c.a = 9;
c.inner.x = 9;
console.log(o.a, o.inner.x);
  • 9 1
  • 9 9
  • 1 1
  • 1 9

(মাঝারি) sloppy mode-এ নিচের কোড কী ছাপবে?

const o = Object.freeze({ a: 1, inner: { x: 1 } });
o.a = 2;
o.inner.x = 2;
console.log(o.a, o.inner.x);
  • 1 1
  • TypeError
  • 1 2
  • 2 2

(সহজ) একটি মান array কি না, তা যাচাইয়ের সবচেয়ে নির্ভরযোগ্য উপায় কোনটি?

  • typeof x === "array"
  • Array.isArray(x)
  • x.length !== undefined
  • x instanceof Object

(মাঝারি) console.log(new Array(3).length, Array.of(3)) কী ছাপবে?

  • 1 [ <3 empty items> ]
  • 1 [ 3 ]
  • 3 [ <3 empty items> ]
  • 3 [ 3 ]

(সহজ) const a = [1, 2, 3, 4]; a.length = 2; console.log(a); কী ছাপবে?

  • [ 3, 4 ]
  • [ 1, 2 ]
  • TypeError
  • [ 1, 2, 3, 4 ]

(মাঝারি) const a = [1, 2]; console.log(a.push(3)); কী ছাপবে?

  • 3
  • undefined
  • [ 1, 2, 3 ]
  • 2

(মাঝারি) নিচের কোড কী ছাপবে?

const a = [1, 2, 3, 4, 5];
const r = a.splice(1, 2);
console.log(r, a);
  • [ 1, 4, 5 ] [ 2, 3 ]
  • [ 2, 3 ] [ 1, 4, 5 ]
  • [ 2, 3 ] [ 1, 2, 3, 4, 5 ]
  • [ 2 ] [ 1, 3, 4, 5 ]

(সহজ) [1, 2, 3].at(-1) আর [1, 2, 3][-1]-এর মান কী?

  • undefined আর 3
  • 3 আর undefined
  • 3 আর 3
  • TypeError আর undefined

(মাঝারি) console.log([NaN].indexOf(NaN), [NaN].includes(NaN)) কী ছাপবে?

  • 0 false
  • -1 false
  • -1 true
  • 0 true

(সহজ) [5, 12, 8].find(x => x > 100)-এর মান কী?

  • undefined
  • null
  • []
  • -1

(মাঝারি) const a = [3, 1, 2]; const b = a.toSorted(); চালানোর পরে কোনটি সত্য?

  • TypeError: a.toSorted is not a function সব আধুনিক ব্রাউজারে
  • a আর b দুটিই [ 1, 2, 3 ], আর a === b
  • a এখনো [ 3, 1, 2 ], আর b হলো [ 1, 2, 3 ]
  • b হলো undefined

(কঠিন) console.log(["1", "2", "3"].map(parseInt)) কী ছাপবে?

  • [ 1, NaN, NaN ]
  • [ 1, 2, 3 ]
  • [ NaN, NaN, NaN ]
  • [ "1", "2", "3" ]

(মাঝারি) console.log([1, 2, 3].map(x => { x * 2; })) কী ছাপবে?

  • [ undefined, undefined, undefined ]
  • []
  • [ 2, 4, 6 ]
  • SyntaxError

(সহজ) forEach সম্পর্কে কোনটি সত্য?

  • এটি নতুন array ফেরত দেয়
  • এটি async callback শেষ হওয়া পর্যন্ত অপেক্ষা করে
  • এটি শুধু string-এ কাজ করে
  • এটি সব সময় undefined ফেরত দেয়, আর break দিয়ে মাঝপথে থামানো যায় না

(মাঝারি) [].reduce((a, b) => a + b) চালালে কী হয়?

  • TypeError: Reduce of empty array with no initial value
  • []
  • 0
  • undefined

(সহজ) [1, 2, 3, 4].filter(x => x % 2)-এর মান কী?

  • [ 2, 4 ]
  • [ true, false, true, false ]
  • [ 1, 0, 1, 0 ]
  • [ 1, 3 ]

(কঠিন) console.log([].some(x => x), [].every(x => x)) কী ছাপবে?

  • true true
  • false false
  • TypeError
  • false true

(মাঝারি) নিচের কোড কী ছাপবে?

const [a, , b = 5, ...rest] = [1, 2, undefined, 4, 5];
console.log(a, b, rest);
  • 1 2 [ 4, 5 ]
  • 1 undefined [ 4, 5 ]
  • 1 5 [ undefined, 4, 5 ]
  • 1 5 [ 4, 5 ]

(মাঝারি) const { name: n, age = 18 } = { name: "Rafi", age: null }; চালানোর পরে n আর age কী?

  • n = "Rafi", age = null
  • n = "Rafi", age = 18
  • name = "Rafi", age = 18
  • SyntaxError

(মাঝারি) const { a } = undefined; চালালে কী হয়?

  • a হয় undefined
  • TypeError: Cannot destructure property 'a' of 'undefined' as it is undefined.
  • SyntaxError
  • ReferenceError

(সহজ) দুটি ভ্যারিয়েবল x আর y-এর মান অদলবদল করার আধুনিক এক লাইনের উপায় কোনটি?

  • [x, y] = [y, x];
  • x = y; y = x;
  • {x, y} = {y, x};
  • swap(x, y);

(সহজ) console.log({ ...{ a: 1, b: 2 }, ...{ b: 3 } }) কী ছাপবে?

  • { a: 1, b: 2 }
  • TypeError
  • { a: 1, b: 3 }
  • { a: 1, b: 2, b: 3 }

(মাঝারি) console.log(Math.max(), Math.max(...[1, 5, 3])) কী ছাপবে?

  • 0 5
  • -Infinity 5
  • undefined 5
  • NaN NaN

(মাঝারি) নিচের কোড কী ছাপবে?

const m = new Map();
m.set(1, "num").set("1", "str");
const o = {};
o[1] = "num"; o["1"] = "str";
console.log(m.size, Object.keys(o).length);
  • 2 1
  • TypeError
  • 2 2
  • 1 1

(মাঝারি) const o = {}; const k1 = {}, k2 = {}; o[k1] = "a"; o[k2] = "b"; চালানোর পরে o[k1]-এর মান কী?

  • undefined
  • "a"
  • TypeError
  • "b"

(সহজ) new Set([1, 1, 2, "2", NaN, NaN]).size-এর মান কী?

  • ৪
  • ৩
  • ৫
  • ৬

(মাঝারি) WeakMap সম্পর্কে কোনটি সত্য?

  • যেকোনো মান key হতে পারে, string-ও
  • WeakMap Map-এর চেয়ে বেশি মেমরি নেয় বলে কম ব্যবহার হয়
  • WeakMap-এর সব key for...of দিয়ে ঘোরা যায়
  • key শুধু object (বা non-registered symbol) হতে পারে, আর key-টি অন্য কোথাও reference না থাকলে entry garbage collect হতে পারে

(মাঝারি) JSON.stringify({ a: undefined, b: () => 1, c: NaN, d: [undefined] })-এর ফল কী?

  • {"a":undefined,"b":"() => 1","c":NaN,"d":[undefined]}
  • {"c":null,"d":[null]}
  • TypeError
  • {}

(সহজ) JSON.parse("{'a': 1}") চালালে কী হয়?

  • undefined পাওয়া যায়
  • TypeError আসে
  • SyntaxError আসে
  • { a: 1 } পাওয়া যায়

(মাঝারি) নিচের কোনটি JSON.stringify দিয়ে ঠিকমতো রূপ দেওয়া যায় না — error দেয়?

  • [1, "two", null]
  • new Map([["a", 1]])
  • { when: new Date(0) }
  • { total: 10n }

(মাঝারি) Date আর Map থাকা একটি object-এর পূর্ণ (deep) কপি বানাতে কোনটি সবচেয়ে উপযুক্ত?

  • Object.assign({}, obj)
  • structuredClone(obj)
  • JSON.parse(JSON.stringify(obj))
  • { ...obj }

(মাঝারি) const d = new Date(2026, 0, 31);-এ d.getMonth()-এর মান কী?

  • 1
  • 0
  • 31
  • 2026

(কঠিন) নিচের কোড কী ছাপবে?

const d = new Date(2026, 0, 31);
d.setMonth(1);
console.log(d.getMonth(), d.getDate());
  • RangeError
  • 1 31
  • 1 28
  • 2 3

(মাঝারি) new Intl.NumberFormat("bn-BD").format(1234567.5)-এর ফল কী?

  • ১,২৩৪,৫৬৭.৫
  • 1,234,567.5
  • RangeError: invalid locale
  • ১২,৩৪,৫৬৭.৫

রিভিশনের জন্য: পর্ব ১৪ · object · পর্ব ১৫ · array · পর্ব ১৬ · map, filter, reduce · পর্ব ১৭ · destructuring আর spread · পর্ব ১৮ · Map, Set, WeakMap · পর্ব ১৯ · JSON আর structuredClone · পর্ব ২০ · তারিখ আর Intl · পর্ব ২১ · মাঝপথের প্রজেক্ট

৫ · ফাংশন ও অবজেক্ট গভীরে — closure, FP, this, prototype, class, generator, Proxy, error আর regex

ইন্টারভিউতে “JavaScript কতটা গভীরে জানেন” মাপা হয় এই অংশ দিয়ে। closure কী ধরে রাখে — মান নাকি ভ্যারিয়েবল, this কে ঠিক করে — লেখার জায়গা নাকি ডাকার ধরন, prototype chain-এ পড়া আর লেখার পার্থক্য, class আসলে কী বানায়, generator কখন চলে, আর finally-র আচরণ — প্রতিটির একটি করে চেনা ফাঁদ আছে।

(সহজ) closure-এর সবচেয়ে সঠিক সংজ্ঞা কোনটি?

  • শুধু class-এর private field
  • এমন function, যা শেষ হলে নিজেকে বন্ধ (close) করে দেয়
  • একটি function আর যে lexical পরিবেশে সেটি তৈরি হয়েছিল, তার ভ্যারিয়েবলগুলোর সাথে বাঁধন — বাইরের function শেষ হওয়ার পরেও
  • function-এর ভেতরে লেখা সব ভ্যারিয়েবলের একটি কপি

(মাঝারি) নিচের কোড কী ছাপবে?

function makeCounter() {
  let c = 0;
  return () => ++c;
}
const a = makeCounter(), b = makeCounter();
a(); a();
console.log(a(), b());
  • 1 1
  • 3 1
  • 3 3
  • 2 1

(মাঝারি) নিচের কোড কী ছাপবে?

let rate = 5;
const fee = () => rate;
rate = 10;
console.log(fee());
  • ReferenceError
  • 10
  • 5
  • undefined

(সহজ) pure function-এর বৈশিষ্ট্য কোনটি?

  • এটি console.log ব্যবহার করে
  • একই input-এ সব সময় একই output দেয়, আর বাইরের কিছু বদলায় না (side effect নেই)
  • এটি কোনো parameter নেয় না
  • এটি সব সময় একটি সংখ্যা ফেরত দেয়

(মাঝারি) const add = a => b => c => a + b + c; থাকলে add(1)(2)(3)-এর মান কী?

  • একটি function
  • 6
  • "123"
  • TypeError

(কঠিন) const pipe = (...fs) => x => fs.reduce((v, f) => f(v), x); আর inc = x => x + 1, dbl = x => x * 2 থাকলে pipe(inc, dbl)(5)-এর মান কী?

  • 11
  • 10
  • 12
  • NaN

(মাঝারি) sloppy mode-এর ব্রাউজার script-এ নিচের কোড কী ছাপবে?

const o = { n: "A", get() { return this.n; } };
const g = o.get;
console.log(o.get(), g());
  • A A
  • undefined undefined
  • A TypeError
  • A undefined

(মাঝারি) নিচের কোড কী ছাপবে?

const o = {
  n: "A",
  get() { return [1].map(() => this.n); }
};
console.log(o.get());
  • [ 'A' ]
  • [ 1 ]
  • TypeError
  • [ undefined ]

(সহজ) call, apply আর bind-এর পার্থক্য কোনটি ঠিক?

  • শুধু arrow function-এ এগুলো কাজ করে
  • call আর apply সাথে সাথে ডাকে (call-এ argument আলাদা করে, apply-এ array-তে); bind ডাকে না, this বাঁধা নতুন function ফেরত দেয়
  • তিনটি একই, শুধু নাম আলাদা
  • bind সাথে সাথে ডাকে, call নতুন function দেয়

(কঠিন) function f() { return this.n; } থাকলে f.bind({ n: 1 }).bind({ n: 2 })()-এর মান কী?

  • undefined
  • 2
  • TypeError
  • 1

(মাঝারি) this কে ঠিক করে, তার নিয়মগুলোর অগ্রাধিকার (সবচেয়ে শক্তিশালী আগে) কোনটি?

  • implicit (obj.f()) → explicit (call/bind) → new → default
  • সব নিয়ম সমান; শেষে লেখাটি জেতে
  • default → implicit → explicit → new
  • new → explicit (call/apply/bind) → implicit (obj.f()) → default

(মাঝারি) নিচের কোড কী ছাপবে?

const a = { x: 1 };
const b = Object.create(a);
b.x = 5;
console.log(a.x, b.x);
  • 1 5
  • TypeError
  • 5 5
  • 1 1

(মাঝারি) function P() {} আর const p = new P(); হলে কোনটি সত্য?

  • Object.getPrototypeOf(p) === P.prototype
  • p.prototype === P.prototype
  • p === P.prototype
  • Object.getPrototypeOf(P) === P.prototype

(সহজ) prototype chain-এর একদম শেষে কী থাকে?

  • window
  • Object.prototype নিজেই চিরকাল নিজেকে দেখায়
  • null
  • undefined

(সহজ) class A {} থাকলে typeof A-এর মান কী?

  • "function"
  • "object"
  • "undefined"
  • "class"

(মাঝারি) class A {} ঘোষণার পরে A() (new ছাড়া) ডাকলে কী হয়?

  • SyntaxError
  • TypeError: Class constructor A cannot be invoked without 'new'
  • undefined ফেরত আসে
  • একটি নতুন object ফেরত আসে

(মাঝারি) new B(); class B {} — এই ক্রমে লিখলে কী হয়?

  • ঠিকমতো চলে, কারণ class hoist হয় function-এর মতো
  • ReferenceError: Cannot access 'B' before initialization
  • undefined
  • TypeError: B is not a constructor

(মাঝারি) class-এর private field (#count) সম্পর্কে কোনটি সত্য?

  • class-এর বাইরে obj.#count লিখলে parse-এর সময়ই SyntaxError আসে
  • এটি শুধু TypeScript-এ কাজ করে
  • class-এর বাইরে obj["#count"] লিখে পড়া যায়
  • Object.keys(obj)-এ #count দেখা যায়

(মাঝারি) derived class-এর constructor-এ super() ডাকার আগে this.x = 1 লিখলে কী হয়?

  • TypeError: this is undefined
  • ReferenceError আসে — super constructor ডাকার আগে this ছোঁয়া যায় না
  • x চুপচাপ উপেক্ষা হয়
  • কাজ করে, পরে super ডাকলেই চলে

(সহজ) class B extends A {} আর const b = new B(); হলে কোনটি সত্য?

  • b instanceof A false, কারণ b তৈরি হয়েছে B দিয়ে
  • instanceof class-এ কাজ করে না
  • b instanceof B, b instanceof A আর b instanceof Object — তিনটিই true
  • শুধু b instanceof Object true

(মাঝারি) class-এর static member সম্পর্কে কোনটি সত্য?

  • static property বা method class-এর নিজের, instance-এর নয় — A.count পাওয়া যায়, new A().count undefined
  • static method-এ this সব সময় undefined
  • static member প্রতিটি instance-এ কপি হয়
  • static শুধু method-এ বসে, property-তে নয়

(সহজ) composition over inheritance নীতির মূলকথা কী?

  • শুধু prototype ব্যবহার করা, class নয়
  • সব কোড একটি বড় class-এ রাখা
  • কখনো extends ব্যবহার করবেন না
  • গভীর inheritance শিকলের বদলে ছোট ছোট আচরণ জোড়া দিয়ে object বানানো পছন্দ করা

(মাঝারি) একটি object for...of দিয়ে ঘোরা যাবে, যদি তার ভেতরে কী থাকে?

  • [Symbol.iterator] method, যা next() থাকা একটি iterator ফেরত দেয়
  • length property
  • toString method
  • forEach method

(সহজ) for (const x of { a: 1 }) {} চালালে কী হয়?

  • TypeError — object is not iterable
  • একবার চলে, x = 1
  • একবার চলে, x = "a"
  • কিছুই হয় না, error-ও নয়

(মাঝারি) নিচের কোড কী ছাপবে?

function* g() {
  yield 1;
  yield 2;
  return 3;
}
console.log([...g()]);
  • [ 1, 2, 3 ]
  • [ 3 ]
  • একটি generator object
  • [ 1, 2 ]

(কঠিন) নিচের কোড কী ছাপবে?

function* g() {
  const x = yield 1;
  yield x * 2;
}
const it = g();
console.log(it.next().value, it.next(5).value);
  • 1 NaN
  • 5 10
  • 1 10
  • 1 2

(মাঝারি) একটি generator function ডাকলে (যেমন const it = g();) তার body-র কোড কখন চলা শুরু করে?

  • g() ডাকার সাথে সাথে, প্রথম yield পর্যন্ত
  • প্রোগ্রাম শেষ হলে
  • প্রথমবার it.next() ডাকলে
  • কখনোই না

(সহজ) Symbol("id") === Symbol("id")-এর মান কী?

  • TypeError
  • false
  • true
  • undefined

(মাঝারি) symbol key থাকা object { [s]: 1, a: 2 }-এর ক্ষেত্রে কোনটি সত্য?

  • symbol key রাখলে object frozen হয়ে যায়
  • Object.keys দুটি key-ই দেখায়
  • symbol key দিয়ে মান পড়া যায় না
  • Object.keys আর JSON.stringify symbol key উপেক্ষা করে; Reflect.ownKeys দুটিই দেখায়

(মাঝারি) Proxy-এর কাজ কী?

  • একটি target object-এর সামনে বসে property পড়া, লেখা, মোছা ইত্যাদি মৌলিক কাজ (trap দিয়ে) ধরে নিজের মতো সামলানো
  • নেটওয়ার্কের proxy সার্ভারে সংযোগ
  • একটি object-এর deep copy বানানো
  • শুধু function-এর জন্য cache

(মাঝারি) নিচের function কী ফেরত দেয়?

function f() {
  try { return "try"; }
  finally { return "finally"; }
}
  • "finally"
  • undefined
  • SyntaxError
  • "try"

(সহজ) const o = {}; o.go(); চালালে কোন error আসে?

  • ReferenceError: go is not defined
  • কোনো error নয়, undefined ফেরত আসে
  • SyntaxError
  • TypeError: o.go is not a function

(মাঝারি) try { throw "oops"; } catch (e) { console.log(typeof e); } কী ছাপবে?

  • object
  • error
  • SyntaxError
  • string

(মাঝারি) ES2022-এ যুক্ত new Error("সংরক্ষণ ব্যর্থ", { cause: err })-এর cause কী কাজে লাগে?

  • error-কে warning বানিয়ে দেয়
  • নিচের স্তরের আসল error-টি নতুন error-এর সাথে জুড়ে রাখে, যাতে প্রসঙ্গ যোগ করেও মূল কারণ হারায় না
  • error-কে চুপচাপ উপেক্ষা করে
  • শুধু Node.js-এ কাজ করে

(মাঝারি) নিচের কোডে timer-এর ভেতরের error কি catch ধরতে পারবে?

try {
  setTimeout(() => { throw new Error("x"); }, 0);
} catch (e) {
  console.log("ধরা পড়েছে");
}
  • না — catch চলে না; error টি uncaught হয়ে যায়
  • হ্যাঁ, “ধরা পড়েছে” ছাপবে
  • SyntaxError আসবে
  • error-টি চুপচাপ হারিয়ে যাবে, কোথাও দেখা যাবে না

(মাঝারি) একটি regex-এ g flag আছে: const r = /a/g;. তারপর r.test("a") তিনবার পরপর ডাকলে কী পাওয়া যায়?

  • false false false
  • true true true
  • true false true
  • true false false

(মাঝারি) "<b>x</b>".match(/<.+>/)[0]-এর মান কী?

  • null
  • "<b>"
  • "<b>x</b>"
  • "b"

(মাঝারি) "2026-10-19".replace(/(\d+)-(\d+)-(\d+)/, "$3/$2/$1")-এর মান কী?

  • "2026/10/19"
  • "19/10/2026"
  • TypeError
  • "$3/$2/$1"

(কঠিন) /\d/.test("৫")-এর মান কী (u flag ছাড়া)?

  • ব্রাউজারভেদে আলাদা
  • true
  • false
  • SyntaxError

রিভিশনের জন্য: পর্ব ২২ · closure · পর্ব ২৩ · functional programming · পর্ব ২৪ · this, call, apply, bind · পর্ব ২৫ · prototype · পর্ব ২৬ · class · পর্ব ২৭ · iterator আর generator · পর্ব ২৮ · Symbol, Proxy, Reflect · পর্ব ২৯ · error · পর্ব ৩০ · regular expression

৬ · Asynchronous JavaScript — event loop, callback, Promise, async/await, fetch আর async নকশা

“এই কোড কোন ক্রমে ছাপবে?” — ফ্রন্ট-এন্ড আর ব্যাক-এন্ড দুই ধরনের ইন্টারভিউতেই এটি সবচেয়ে প্রিয় প্রশ্ন। উত্তরের চাবি তিনটি: বর্তমান synchronous কোড আগে শেষ হয়; তারপর সব microtask (promise-এর then, await-এর পরের অংশ, queueMicrotask); তারপর একটি করে task (setTimeout, event). সাথে promise combinator, fetch-এর দুই ধাপ আর res.ok, debounce/throttle, আর HTTP-র status code.

(সহজ) নিচের কোড কী ক্রমে ছাপবে?

console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");
  • A B C D
  • A D B C
  • A C D B
  • A D C B

(কঠিন) নিচের কোড কী ক্রমে ছাপবে?

setTimeout(() => console.log("t1"), 0);
Promise.resolve()
  .then(() => {
    console.log("p1");
    setTimeout(() => console.log("t2"), 0);
  })
  .then(() => console.log("p2"));
queueMicrotask(() => console.log("q"));
  • p1 p2 q t1 t2
  • p1 q p2 t1 t2
  • t1 p1 q p2 t2
  • q p1 p2 t1 t2

(মাঝারি) নিচের কোড কী ক্রমে ছাপবে?

async function f() {
  console.log("f1");
  await null;
  console.log("f2");
}
console.log("s");
f();
console.log("e");
  • s f1 e f2
  • s e f1 f2
  • s f1 f2 e
  • f1 s e f2

(মাঝারি) নিচের কোড কী ক্রমে ছাপবে?

new Promise((resolve) => {
  console.log("exec");
  resolve();
}).then(() => console.log("then"));
console.log("after");
  • exec then after
  • after exec then
  • then exec after
  • exec after then

(সহজ) setTimeout(fn, 1000) সম্পর্কে কোনটি সঠিক?

  • প্রোগ্রাম ১০০০ মিলিসেকেন্ড থেমে থাকবে
  • fn ঠিক ১০০০ মিলিসেকেন্ড পরে চলবে, এক মিলিসেকেন্ডও এদিক-ওদিক নয়
  • fn একটি আলাদা thread-এ চলবে
  • fn অন্তত ১০০০ মিলিসেকেন্ড পরে চলবে — তখন call stack খালি থাকলে

(সহজ) callback hell বলতে কী বোঝায়?

  • খুব বেশি setTimeout ব্যবহার
  • একটার পর একটা asynchronous কাজের জন্য callback-এর ভেতরে callback বসাতে বসাতে কোড ডানে সরে “পিরামিড” হয়ে যাওয়া, আর error সামলানো জটিল হওয়া
  • callback-এর ভেতরে error হওয়া
  • callback ছাড়া function লেখা

(মাঝারি) Node.js-এর error-first callback রীতিতে callback-এর প্রথম argument কী?

  • সব সময় true বা false
  • error (না থাকলে null), তারপর ফল
  • ফল, তারপর error
  • সব সময় একটি promise

(সহজ) একটি Promise কোন তিনটি অবস্থার যেকোনো একটিতে থাকে?

  • open, closed, error
  • true, false, null
  • pending, fulfilled, rejected
  • started, running, stopped

(মাঝারি) নিচের কোড কী ছাপবে?

new Promise((res, rej) => {
  res("first");
  res("second");
  rej(new Error("no"));
}).then(v => console.log(v));
  • Error: no
  • first second
  • first
  • second

(মাঝারি) নিচের chain কী ছাপবে?

Promise.resolve(1)
  .then(x => x + 1)
  .then(x => { throw new Error("b" + x); })
  .then(() => console.log("skip"))
  .catch(e => console.log(e.message))
  .then(() => console.log("done"));
  • skip b2 done
  • b2
  • b1 done
  • b2 done

(মাঝারি) Promise.all([p1, p2, p3])-এ p2 reject হলে কী হয়?

  • p2-কে আবার চেষ্টা করে
  • all সাথে সাথে p2-এর কারণ দিয়ে reject হয় (fail-fast); p1, p3 চলতে থাকে, কিন্তু তাদের ফল all দেয় না
  • সব promise বাতিল হয়ে যায়
  • বাকি দুটির ফল নিয়ে fulfilled হয়

(সহজ) প্রতিটি promise-এর ফল (সফল বা ব্যর্থ) জানতে চাইলে কোন combinator সবচেয়ে উপযুক্ত?

  • Promise.all
  • Promise.allSettled
  • Promise.any
  • Promise.race

(মাঝারি) Promise.any-এর সব promise reject হলে কী পাওয়া যায়?

  • undefined দিয়ে fulfilled
  • একটি AggregateError, যার errors array-তে সব কারণ
  • সাথে সাথে TypeError
  • প্রথম rejection-এর কারণ

(মাঝারি) ১০ ms আর ৩০ ms পরে resolve হওয়া দুটি promise-এ Promise.race দিলে কী পাওয়া যায়?

  • কোনটি আগে, তা নির্দিষ্ট নয়
  • পরে শেষ হওয়াটির মান
  • যেটি আগে settle হয় (১০ ms), তার মান
  • দুটির মানের array

(মাঝারি) async function f() { return 1; } থাকলে f() কী ফেরত দেয়?

  • সংখ্যা 1
  • একটি generator
  • undefined
  • 1 দিয়ে fulfilled একটি Promise

(মাঝারি) নিচের কোড চালানোর পরে, শেষ লাইনে কী ছাপবে?

const results = [];
[1, 2].forEach(async (x) => {
  await null;
  results.push(x);
});
console.log(results.length);
  • 1
  • 0
  • 2
  • SyntaxError

(মাঝারি) তিনটি স্বাধীন API ডাক একসাথে চালিয়ে মোট সময় কমাতে কোনটি সঠিক?

  • Promise.all(getA, getB, getC);
  • await getA(), getB(), getC();
  • const [a, b, c] = await Promise.all([getA(), getB(), getC()]);
  • const a = await getA(); const b = await getB(); const c = await getC();

(সহজ) const res = await fetch(url);-এর পরে JSON ডেটা পেতে কী লিখতে হয়?

  • JSON.parse(res)
  • await res.json()
  • res.json (বন্ধনী ছাড়া)
  • res.data

(মাঝারি) সার্ভার 404 বা 500 ফেরত দিলে fetch()-এর promise কী হয়?

  • res.json() সব সময় error দেয়
  • fulfilled হয়; res.ok হয় false আর res.status 404/500 — তাই নিজে if (!res.ok) throw … লিখতে হয়
  • fetch চিরকাল pending থাকে
  • reject হয়, catch-এ চলে যায়

(সহজ) HTTP status code 404 মানে কী?

  • সার্ভারে ভেতরের ভুল
  • অনুমতি নেই
  • সফল
  • চাওয়া resource পাওয়া যায়নি (Not Found)

(মাঝারি) নতুন একটি resource সফলভাবে তৈরি হলে (যেমন POST দিয়ে নতুন অর্ডার) REST API সাধারণত কোন status দেয়?

  • 302 Found
  • 200 OK
  • 201 Created
  • 204 No Content

(মাঝারি) 401 Unauthorized আর 403 Forbidden-এর পার্থক্য কী?

  • 401 — সার্ভার বন্ধ; 403 — পাতা নেই
  • 403 — লগইন নেই; 401 — অনুমতি নেই
  • দুটি একই
  • 401 — পরিচয় যাচাই হয়নি (লগইন নেই বা token অবৈধ); 403 — পরিচয় জানা, কিন্তু এই কাজের অনুমতি নেই

(সহজ) নিচের কোন HTTP method idempotent নয় — অর্থাৎ একই অনুরোধ বারবার পাঠালে ফল বদলাতে পারে?

  • POST
  • DELETE
  • PUT
  • GET

(মাঝারি) একটি অনুরোধ বাতিল করতে (যেমন ব্যবহারকারী অন্য পাতায় চলে গেলে) fetch-এর সাথে কোনটি ব্যবহার হয়?

  • fetch.stop()
  • Promise.cancel()
  • AbortController — fetch(url, { signal: controller.signal }), তারপর controller.abort()
  • clearTimeout

(মাঝারি) সার্চ বক্সে প্রতিটি অক্ষর টাইপে API না ডেকে, ব্যবহারকারী ৩০০ ms টাইপ থামালে তবেই একবার ডাকার কৌশলকে কী বলে?

  • debounce
  • memoization
  • throttle
  • polling

(মাঝারি) scroll event-এ ভারী হিসাব প্রতি ১০০ ms-এ সর্বোচ্চ একবার চালাতে চাইলে কোন কৌশল উপযুক্ত?

  • throttle
  • Promise.race
  • retry
  • debounce

(মাঝারি) ব্যর্থ নেটওয়ার্ক অনুরোধ আবার চেষ্টার (retry) ভালো নীতি কোনটি?

  • ব্যর্থ হলেই সাথে সাথে বারবার, যতক্ষণ না সফল হয়
  • প্রতিটি 4xx-এ retry করা
  • POST অনুরোধ নির্দ্বিধায় retry করা
  • প্রতিবার অপেক্ষা দ্বিগুণ করা (exponential backoff), সাথে কিছু এলোমেলো দেরি (jitter), সর্বোচ্চ চেষ্টার সীমা, আর শুধু অস্থায়ী ব্যর্থতায় (নেটওয়ার্ক, 503, 429) retry

(কঠিন) Node.js-এর main module-এর top-level-এ setTimeout(a, 0) আর setImmediate(b) পাশাপাশি লিখলে কোনটি আগে চলবে?

  • সব সময় setTimeout
  • দুটি একই সাথে, আলাদা thread-এ
  • সব সময় setImmediate
  • নিশ্চিত নয় — প্রক্রিয়া কত দ্রুত শুরু হলো তার ওপর নির্ভর করে

(মাঝারি) একটি async function-এর ভেতরে throw new Error("x") হলে, আর ডাকার জায়গায় কোনো await বা catch না থাকলে কী হয়?

  • সাথে সাথে synchronous error হিসেবে ডাকার লাইনে ছোড়া হয়
  • error চুপচাপ হারিয়ে যায়, কোথাও দেখা যায় না
  • function আবার চলে
  • ফেরত দেওয়া promise reject হয়; কেউ না ধরলে unhandled rejection — ব্রাউজারে console-এ দেখায়, Node 15+-এ ডিফল্টভাবে প্রক্রিয়া থেমে যায়

(মাঝারি) Promise.resolve(5).finally(() => 99).then(v => console.log(v)) কী ছাপবে?

  • 5 99
  • 5
  • 99
  • undefined

রিভিশনের জন্য: পর্ব ৩১ · event loop · পর্ব ৩২ · callback আর setTimeout · পর্ব ৩৩ · Promise আর combinator · পর্ব ৩৪ · async/await · পর্ব ৩৫ · fetch আর HTTP · পর্ব ৩৬ · AbortController, retry, debounce

ক্রমের প্রশ্ন মাথায় সমাধান করার পরে নিচের কোড চালিয়ে মিলিয়ে নিন। এখানে synchronous কোড, promise, await, queueMicrotask আর timer — সব একসাথে।

console.log("1 sync");
setTimeout(() => console.log("6 timeout"), 0);
Promise.resolve()
  .then(() => console.log("3 then-1"))
  .then(() => console.log("5 then-2"));
queueMicrotask(() => console.log("4 microtask"));

async function job() {
  console.log("2 async শুরু");
  await null;
  console.log("4.5 await-এর পরে");
}
job();
console.log("2.5 sync শেষ");

আউটপুট: 1 sync, 2 async শুরু, 2.5 sync শেষ, 3 then-1, 4 microtask, 4.5 await-এর পরে, 5 then-2, 6 timeout. লেবেলের সংখ্যা ক্রম বোঝায়। async function প্রথম await পর্যন্ত সাথে সাথে চলে। তারপর microtask queue-তে ক্রম অনুযায়ী তিনটি কাজ জমা ছিল: then-1, microtask আর await-এর বাকি অংশ। then-1 চলার পরে then-2 queue-এর শেষে যোগ হয়, তাই সবার পরে। সব microtask শেষ হলে তবেই timer-এর task.

৭ · ব্রাউজার ও DOM — DOM, event, form, storage, Web API, Worker, নিরাপত্তা আর PWA

চাকরির পরীক্ষার “ওয়েব প্রযুক্তি” অংশ আর ফ্রন্ট-এন্ড ইন্টারভিউর বড় অংশ এখান থেকে আসে। মনে রাখার মতো জোড়া: textContent বনাম innerHTML, live বনাম static তালিকা, target বনাম currentTarget, stopPropagation বনাম preventDefault, localStorage বনাম sessionStorage বনাম cookie, আর তিনটি নিরাপত্তা-শব্দ — XSS, CSRF আর CORS, যাদের প্রায়ই গুলিয়ে ফেলা হয়।

(সহজ) DOM কী?

  • HTML ফাইলের আরেক নাম
  • CSS-এর একটি অংশ
  • একটি JavaScript framework
  • ব্রাউজার HTML পড়ে যে node-এর গাছ (tree) বানায়, আর JavaScript যে API দিয়ে সেই গাছ পড়ে ও বদলায়

(সহজ) document.querySelector(".item") কী ফেরত দেয়?

  • সব সময় একটি array
  • CSS selector মেলে এমন প্রথম element, না পেলে null
  • না পেলে খালি string
  • .item class-এর সব element-এর তালিকা

(মাঝারি) getElementsByClassName("item") আর querySelectorAll(".item")-এর পার্থক্য কী?

  • প্রথমটি live HTMLCollection — DOM বদলালে নিজে বদলায়; দ্বিতীয়টি static NodeList — নেওয়ার সময়ের ছবি
  • প্রথমটি শুধু id দিয়ে খোঁজে
  • দুটিই live
  • দুটিই array, তাই map চলে

(মাঝারি) একটি element-এ CSS দিয়ে লুকানো (display: none) একটি child আছে। textContent আর innerText সম্পর্কে কোনটি সত্য?

  • textContent লুকানো লেখাসহ সব text দেয়; innerText CSS মেনে শুধু দৃশ্যমান লেখা দেয়, আর তা হিসাব করতে layout লাগে বলে ধীর
  • দুটি সব সময় একই ফল দেয়
  • textContent শুধু প্রথম child-এর লেখা দেয়
  • innerText HTML tag-সহ দেয়

(মাঝারি) <input id="q" value="ঢাকা">-এ ব্যবহারকারী “খুলনা” লিখলেন। তারপর q.value আর q.getAttribute("value")-এর মান কী?

  • দুটিই "খুলনা"
  • q.value = "খুলনা", getAttribute("value") = "ঢাকা"
  • q.value = "ঢাকা", attribute = "খুলনা"
  • দুটিই "ঢাকা"

(সহজ) <div data-user-id="42">-এর মান JavaScript-এ কীভাবে পড়বেন?

  • el.data.userId
  • el.dataset["user-id"]
  • el.dataset.userId
  • el.userId

(সহজ) একটি element-এ CSS class যোগ বা বাদ (থাকলে বাদ, না থাকলে যোগ) করার সবচেয়ে সুবিধাজনক উপায় কোনটি?

  • el.classList.toggle("active")
  • el.addClass("active")
  • el.style.class = "active"
  • el.className = "active"

(মাঝারি) ১০০০টি নতুন li একটি ul-এ যোগ করার সময় পাতা দ্রুত রাখতে কোনটি ভালো?

  • সব li একটি DocumentFragment-এ (বা একটি array-তে বানিয়ে ul.append(...items)) জমিয়ে একবারে DOM-এ বসানো
  • প্রতিটি li-এর জন্য ul.innerHTML += "<li>…</li>"
  • লুপে প্রতিটি li বানিয়ে সাথে সাথে ul.appendChild আর প্রতিবার ul.offsetHeight পড়া
  • প্রতিটি li যোগের পরে setTimeout দিয়ে অপেক্ষা

(সহজ) DOMContentLoaded আর load event-এর পার্থক্য কী?

  • load আগে, DOMContentLoaded পরে
  • দুটি একই সময়ে ঘটে
  • DOMContentLoaded — HTML পড়া আর DOM তৈরি শেষ (defer script চলার পরে); load — ছবি, stylesheet, iframe সহ সব resource লোড শেষ
  • DOMContentLoaded শুধু Node.js-এ ঘটে

(মাঝারি) একটি button একটি div-এর ভেতরে। দুটিতেই ডিফল্ট (bubble ধাপে) click listener আছে। button-এ click করলে কোন ক্রমে listener চলে?

  • ক্রম নিশ্চিত নয়
  • div, তারপর button
  • button, তারপর div
  • শুধু button

(মাঝারি) event listener-এর ভেতরে e.target আর e.currentTarget-এর পার্থক্য কী?

  • target — যেখানে event আসলে ঘটেছে (সবচেয়ে ভেতরের element); currentTarget — যে element-এ এই listener বসানো
  • target — listener বসানো element; currentTarget — click হওয়া element
  • currentTarget শুধু keyboard event-এ থাকে
  • দুটি সব সময় একই element

(মাঝারি) e.preventDefault() আর e.stopPropagation()-এর পার্থক্য কী?

  • stopPropagation listener-টিকে মুছে দেয়
  • দুটি একই কাজ করে
  • preventDefault bubbling থামায়, stopPropagation ডিফল্ট কাজ
  • preventDefault ব্রাউজারের ডিফল্ট কাজ (form submit, link-এ যাওয়া) থামায়; stopPropagation event-এর ওপরের দিকে যাত্রা থামায়

(মাঝারি) একটি ul-এর হাজারখানেক li-তে আলাদা listener না বসিয়ে ul-এ একটি listener বসিয়ে e.target.closest("li") দিয়ে কাজ করার কৌশলকে কী বলে, আর এটি কেন কাজ করে?

  • event capturing; কারণ event নিচের দিকে নামে
  • event delegation; কারণ li-এর click bubble হয়ে ul পর্যন্ত ওঠে
  • custom event; কারণ ul নিজে event বানায়
  • debounce; কারণ click কম আসে

(কঠিন) নিচের কোন event স্বাভাবিকভাবে bubble করে না?

  • keydown
  • focus
  • input
  • click

(মাঝারি) addEventListener("scroll", fn, { passive: true })-এ passive: true কী বোঝায়?

  • listener capture ধাপে চলবে
  • listener আলাদা thread-এ চলবে
  • listener একবার চলেই মুছে যাবে
  • listener preventDefault() ডাকবে না — তাই ব্রাউজার listener শেষ হওয়ার অপেক্ষা না করেই scroll করতে পারে, scroll মসৃণ হয়

(সহজ) <input type="number"> থেকে input.value পড়লে কোন টাইপের মান পাওয়া যায়?

  • boolean
  • undefined
  • number
  • string

(মাঝারি) form-এ required, type="email", pattern দিয়ে ব্রাউজারের যাচাই চালু আছে। কোনটি সঠিক?

  • JavaScript বন্ধ থাকলে এই যাচাই কাজ করে না
  • এটি ব্যবহারকারীর অভিজ্ঞতার জন্য; নিরাপত্তার জন্য সার্ভারে আবার যাচাই করতেই হবে
  • এখন সার্ভারে যাচাই লাগবে না
  • type="email" দিলে ইমেইলটি সত্যিই আছে কি না যাচাই হয়

(সহজ) form submit-এ পাতা রিলোড না করে JavaScript দিয়ে ডেটা পাঠাতে submit listener-এ প্রথমে কী ডাকতে হয়?

  • return true
  • e.stopPropagation()
  • form.reset()
  • e.preventDefault()

(মাঝারি) localStorage.setItem("cart", { id: 1 }); console.log(localStorage.getItem("cart")); কী ছাপবে?

  • [object Object]
  • TypeError
  • null
  • { id: 1 }

(মাঝারি) localStorage আর sessionStorage-এর মূল পার্থক্য কী?

  • localStorage ব্রাউজার বন্ধ করার পরেও থাকে আর একই origin-এর সব ট্যাব ভাগ করে; sessionStorage শুধু ওই ট্যাবের জন্য, ট্যাব বন্ধ হলে মুছে যায়
  • sessionStorage সার্ভারে থাকে
  • sessionStorage-এ object রাখা যায়
  • localStorage প্রতিটি HTTP অনুরোধের সাথে সার্ভারে যায়

(মাঝারি) একটি cookie-তে HttpOnly flag থাকলে কী হয়?

  • JavaScript (document.cookie) সেটি পড়তে পারে না; শুধু HTTP অনুরোধের সাথে সার্ভারে যায়
  • cookie ব্রাউজার বন্ধ হলেই মুছে যায়
  • cookie অন্য সাইট থেকে পাঠানো অনুরোধে যায় না
  • cookie শুধু HTTP-তে যায়, HTTPS-এ নয়

(মাঝারি) একই origin-এর দুটি ট্যাব খোলা। ট্যাব ১-এ localStorage.setItem(...) চালালে storage event কোথায় ঘটে?

  • শুধু অন্য ট্যাবে (ট্যাব ২-এ)
  • দুটি ট্যাবেই
  • শুধু ট্যাব ১-এ
  • কোথাও নয়

(মাঝারি) ব্রাউজারে বড় পরিমাণ structured ডেটা (হাজার হাজার রেকর্ড, Blob) অফলাইনে রাখতে কোনটি উপযুক্ত?

  • localStorage
  • cookie
  • IndexedDB
  • sessionStorage

(মাঝারি) একই origin বলতে কোন তিনটি অংশ মিলতে হয়?

  • domain, path আর query
  • scheme (protocol), host আর port
  • IP ঠিকানা আর browser
  • শুধু domain

(মাঝারি) CORS সম্পর্কে কোনটি সত্য?

  • CORS সার্ভারকে আক্রমণ থেকে রক্ষা করে
  • CORS error ঠিক করতে ব্রাউজারের কোডে mode: "no-cors" দিলেই উত্তর পড়া যায়
  • এটি এমন একটি ব্যবস্থা, যেখানে সার্ভার Access-Control-Allow-Origin-এর মতো header দিয়ে ব্রাউজারকে জানায় কোন অন্য origin-এর JavaScript তার উত্তর পড়তে পারবে
  • CORS আটকানো অনুরোধ সার্ভারে পৌঁছায়ই না, সব ক্ষেত্রে

(কঠিন) fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body }) অন্য origin-এ পাঠালে ব্রাউজার আগে কী করে?

  • cookie মুছে দেয়
  • কিছু না, সরাসরি POST পাঠায়
  • একটি OPTIONS preflight অনুরোধ পাঠিয়ে জানতে চায় সার্ভার এই method আর header অনুমতি দেয় কি না; অনুমতি পেলে তবেই আসল POST
  • অনুরোধটি GET-এ বদলে দেয়

(সহজ) XSS (Cross-Site Scripting) কী?

  • আক্রমণকারীর পাঠানো ডেটা পাতায় কোড হিসেবে চলে যাওয়া, যাতে সে অন্য ব্যবহারকারীর ব্রাউজারে JavaScript চালাতে পারে
  • অন্য সাইট থেকে ব্যবহারকারীর নামে অনুরোধ পাঠানো
  • সার্ভারে অসংখ্য অনুরোধ পাঠিয়ে বন্ধ করা
  • ডেটাবেস query-তে কোড ঢোকানো

(মাঝারি) CSRF ঠেকাতে নিচের কোনটি কার্যকর?

  • CORS-এ Access-Control-Allow-Origin: * দেওয়া
  • SameSite cookie (Lax বা Strict) আর অবস্থা বদলানো প্রতিটি অনুরোধে CSRF token যাচাই
  • textContent ব্যবহার
  • শুধু HTTPS ব্যবহার

(মাঝারি) Content Security Policy (CSP)-এর প্রধান কাজ কী?

  • পাসওয়ার্ড encrypt করা
  • একটি HTTP header দিয়ে ব্রাউজারকে বলে দেওয়া কোন উৎস থেকে script, style, ছবি ইত্যাদি চলতে পারবে — inline script বন্ধ করে XSS-এর ক্ষতি সীমিত করা
  • ওয়েবসাইট দ্রুত লোড করা
  • cookie-র মেয়াদ ঠিক করা

(মাঝারি) Web Worker সম্পর্কে কোনটি মিথ্যা?

  • Worker-এর ভেতরে fetch আর setTimeout ব্যবহার করা যায়
  • main thread আর Worker postMessage দিয়ে কথা বলে, আর ডেটা structured clone হয়ে কপি যায়
  • Worker-এর ভেতর থেকে সরাসরি document.querySelector দিয়ে পাতার DOM বদলানো যায়
  • Worker আলাদা thread-এ চলে, তাই ভারী হিসাবে main thread আটকায় না

(মাঝারি) service worker সম্পর্কে কোনটি সত্য?

  • প্রতিটি ট্যাবের জন্য আলাদা service worker সব সময় নতুন করে চলে
  • service worker হালনাগাদ হলে সাথে সাথে সব খোলা পাতা নিয়ন্ত্রণ নেয়
  • এটি পাতা আর নেটওয়ার্কের মাঝে proxy-র মতো বসে fetch অনুরোধ ধরতে পারে, cache থেকে উত্তর দিয়ে অফলাইনে চালাতে পারে, আর HTTPS (বা localhost) ছাড়া নিবন্ধিত হয় না
  • এটি পাতার DOM সরাসরি বদলায়

(মাঝারি) নিচের কোন caching strategy-তে আগে cache থেকে দ্রুত উত্তর দেওয়া হয়, আর পেছনে নেটওয়ার্ক থেকে নতুন সংস্করণ এনে cache হালনাগাদ হয়?

  • network-only
  • stale-while-revalidate
  • network-first
  • cache-only

(মাঝারি) ব্যবহারকারী স্ক্রল করে একটি ছবির কাছে এলে তবেই সেটি লোড করার (lazy loading) আধুনিক JavaScript উপায় কোনটি?

  • IntersectionObserver
  • setInterval দিয়ে প্রতি সেকেন্ডে পরীক্ষা
  • প্রতিটি scroll event-এ সব ছবির getBoundingClientRect() হিসাব
  • MutationObserver

(মাঝারি) navigator.geolocation বা navigator.clipboard-এর মতো সংবেদনশীল API ব্যবহারের শর্ত কোনটি?

  • যেকোনো http পাতায় অনুমতি ছাড়াই চলে
  • শুধু service worker-এর ভেতরে চলে
  • secure context (HTTPS বা localhost) লাগে; অবস্থানের জন্য ব্যবহারকারীর অনুমতি, আর অনেক ক্ষেত্রে ব্যবহারকারীর কোনো কাজ (click) থেকে ডাকা লাগে
  • শুধু Node.js-এ চলে

(সহজ) PWA হিসেবে একটি ওয়েব অ্যাপ ইনস্টলযোগ্য হতে মূলত কী কী লাগে?

  • শুধু একটি favicon
  • App Store-এ প্রকাশ
  • React বা অন্য কোনো framework
  • HTTPS, একটি web app manifest (নাম, icon, start_url, display) আর সাধারণত একটি service worker

রিভিশনের জন্য: পর্ব ৩৭ · DOM · পর্ব ৩৮ · event · পর্ব ৩৯ · form আর validation · পর্ব ৪০ · storage আর cookie · পর্ব ৪১ · Web API · পর্ব ৪২ · Web Worker · পর্ব ৪৩ · XSS, CSP আর CORS · পর্ব ৪৪ · PWA আর service worker

৮ · পেশাদার JavaScript — module, npm, TypeScript, টেস্টিং, Node, Express, real-time, ডেটাবেস, পারফরম্যান্স, framework আর deploy

এই অংশের প্রশ্ন ভাষার নিয়ম নয়, কাজের জগতের শব্দভান্ডার যাচাই করে — যা ফুল-স্ট্যাক আর ব্যাক-এন্ড ইন্টারভিউতে বেশি আসে। ES module বনাম CommonJS, semver-এর ^ আর ~, TypeScript-এর type erasure, unit/integration/E2E টেস্ট, Express-এর middleware, SQL injection, Core Web Vitals আর React-এর key — প্রতিটি থেকে প্রশ্ন আসে।

(সহজ) ES module (ESM) আর CommonJS-এর সঠিক তুলনা কোনটি?

  • ESM লেখে import/export আর গঠন static (আগে থেকে বিশ্লেষণযোগ্য); CommonJS লেখে require/module.exports, যা চলার সময় সাধারণ function-এর মতো ডাকা হয়
  • দুটি একই, শুধু নাম আলাদা
  • ESM-এ export করা মান import করলে কপি পাওয়া যায়
  • CommonJS ব্রাউজারের নিজস্ব মান, ESM শুধু Node-এর

(মাঝারি) counter.mjs-এ export let count = 0; export function inc() { count++; }. অন্য একটি module-এ import { count, inc } from "./counter.mjs"; inc(); inc(); console.log(count); কী ছাপবে?

  • 0
  • undefined
  • 2
  • TypeError

(মাঝারি) Node.js-এ একটি .js ফাইল ES module হিসেবে চলবে কখন?

  • ফাইলের প্রথম লাইনে "use module"; লিখলে
  • কাছের package.json-এ "type": "module" থাকলে (অথবা ফাইলের এক্সটেনশন .mjs হলে)
  • শুধু TypeScript দিয়ে compile করলে
  • সব সময়, Node 12 থেকে

(মাঝারি) import() (function-এর মতো লেখা dynamic import) কী ফেরত দেয়?

  • সরাসরি module object, synchronous
  • undefined
  • module-এর namespace object দিয়ে resolve হওয়া একটি Promise
  • এটি শুধু ESM ফাইলের top-level-এ লেখা যায়

(সহজ) package.json-এ dependencies আর devDependencies-এর পার্থক্য কী?

  • devDependencies বেশি নিরাপদ
  • dependencies — অ্যাপ চলার সময় লাগে (যেমন express); devDependencies — শুধু উন্নয়ন, টেস্ট আর build-এ লাগে (যেমন vitest, eslint)
  • dependencies অনলাইনে থাকে, devDependencies অফলাইনে
  • কোনো পার্থক্য নেই

(মাঝারি) package.json-এ "lodash": "^4.17.21" লেখা। npm কোন সংস্করণ নিতে পারে?

  • 4.17.x — শুধু patch হালনাগাদ
  • যেকোনো নতুন সংস্করণ, 5.x বা 6.x-ও
  • 4.17.21 বা তার বেশি, কিন্তু 5.0.0-এর কম
  • শুধু হুবহু 4.17.21

(মাঝারি) npm ci আর npm install-এর পার্থক্য কী?

  • দুটি একই
  • npm ci lockfile না থাকলেও চলে
  • npm ci শুধু global package বসায়
  • npm ci lockfile হুবহু মেনে node_modules মুছে নতুন করে বসায়, আর package.json-এর সাথে lockfile না মিললে ব্যর্থ হয় — তাই CI-তে পুনরুৎপাদনযোগ্য build দেয়

(সহজ) package-lock.json কেন git-এ commit করা উচিত?

  • এটি node_modules-এর বদলে কোড রাখে
  • এতে পাসওয়ার্ড থাকে
  • এতে প্রতিটি package-এর (transitive dependency সহ) হুবহু সংস্করণ লেখা থাকে, তাই সবার মেশিনে আর CI-তে একই dependency গাছ বসে
  • npm এটি ছাড়া চলে না

(সহজ) ESLint আর Prettier-এর কাজের পার্থক্য কোনটি?

  • Prettier টাইপের ভুল ধরে
  • ESLint একটি linter — অব্যবহৃত ভ্যারিয়েবল, == ব্যবহার, সম্ভাব্য বাগ ধরে; Prettier একটি formatter — ফাঁকা জায়গা, উদ্ধৃতি, লাইন ভাঙা একই রকম করে
  • দুটিই শুধু কোড সুন্দর করে সাজায়
  • ESLint কোড চালিয়ে টেস্ট করে

(সহজ) TypeScript compile করার পরে টাইপের তথ্য কোথায় যায়?

  • JavaScript-এর ভেতরে থেকে যায় আর চলার সময় যাচাই করে
  • মুছে যায় — চলার সময় সাধারণ JavaScript চলে, কোনো টাইপ-যাচাই হয় না
  • আলাদা .types ফাইলে ব্রাউজারে পাঠানো হয়
  • V8 টাইপ দেখে কোড দ্রুত চালায়

(মাঝারি) TypeScript-এ any আর unknown-এর পার্থক্য কী?

  • দুটি একই
  • unknown দিয়ে টাইপ-যাচাই বন্ধ হয়, any নিরাপদ
  • any দিয়ে টাইপ-যাচাই বন্ধ হয়ে যায় — যা খুশি করা যায়; unknown-এ কিছু করার আগে narrowing (typeof, instanceof, যাচাই) করতে হয়
  • any শুধু সংখ্যার জন্য

(মাঝারি) TypeScript-এ const n = JSON.parse(text) as number; লিখলে, আর text আসলে "\"abc\"" হলে চলার সময় কী হয়?

  • কোনো error নেই — n-এ আসলে string "abc" থাকে, যদিও TypeScript ভাবে এটি number
  • compile error আসে
  • চলার সময় TypeError আসে
  • মানটি স্বয়ংক্রিয়ভাবে NaN-এ রূপ নেয়

(মাঝারি) TypeScript-এর structural typing মানে কী?

  • টাইপের নাম মিললে তবেই মান বসানো যায়
  • প্রতিটি টাইপ একটি class হতে হবে
  • টাইপ শুধু array-র জন্য
  • একটি মানের আকৃতি (প্রয়োজনীয় property আর তাদের টাইপ) মিললেই সেটি টাইপের সাথে সামঞ্জস্যপূর্ণ — নাম যা-ই হোক

(সহজ) টেস্টের তিন স্তর — unit, integration, end-to-end (E2E) — সম্পর্কে কোনটি সঠিক?

  • unit — একটি function/module আলাদাভাবে; integration — কয়েকটি অংশ একসাথে (যেমন API আর ডেটাবেস); E2E — আসল ব্রাউজারে ব্যবহারকারীর মতো পুরো প্রবাহ
  • E2E সবচেয়ে দ্রুত, তাই সবচেয়ে বেশি লেখা উচিত
  • integration test মানে শুধু UI-এর ছবি তুলে তুলনা
  • unit test আসল ডেটাবেসে চালাতে হয়

(সহজ) একটি টেস্ট লেখার প্রচলিত গঠন “AAA” কী বোঝায়?

  • Async, Await, Abort
  • Assert, Act, Arrange
  • Arrange (প্রস্তুতি), Act (কাজটি করা), Assert (ফল যাচাই)
  • API, Auth, Assert

(মাঝারি) টেস্টে আসল fetch-এর বদলে নকল একটি function বসানো হলো, যা নির্দিষ্ট উত্তর দেয় আর পরে যাচাই করা যায় সেটি কোন argument দিয়ে কতবার ডাকা হয়েছিল। এটিকে কী বলে?

  • fixture
  • coverage
  • snapshot
  • mock (একটি test double)

(মাঝারি) code coverage ১০০% হলে কোনটি সত্য?

  • প্রোগ্রামে কোনো বাগ নেই
  • প্রতিটি লাইন (বা branch) অন্তত একবার টেস্টে চলেছে — এর বেশি কিছু নিশ্চিত নয়
  • টেস্টগুলো দ্রুত চলে
  • আর কোনো E2E টেস্ট লাগবে না

(সহজ) Node.js-এ node app.js hello চালালে process.argv[2]-এর মান কী?

  • undefined
  • "hello"
  • "node"
  • "app.js"

(মাঝারি) process.env.PORT-এর মান সম্পর্কে কোনটি সত্য?

  • PORT=3000 দিলে number 3000 পাওয়া যায়
  • মান থাকলে সব সময় string, না থাকলে undefined
  • এটি শুধু Windows-এ কাজ করে
  • process.env-এ মান বসালে .env ফাইল হালনাগাদ হয়

(মাঝারি) কয়েক GB-র একটি log ফাইল Node-এ লাইন ধরে প্রক্রিয়া করতে কোনটি উপযুক্ত?

  • fs.createReadStream (প্রয়োজনে readline-এর সাথে) — টুকরো টুকরো পড়া
  • JSON.parse দিয়ে পুরো ফাইল একবারে পড়া
  • fs.readFileSync দিয়ে পুরো ফাইল একবারে পড়া
  • setInterval দিয়ে প্রতি সেকেন্ডে কিছু বাইট পড়া

(মাঝারি) ব্যবহারকারীর দেওয়া ফাইলনাম দিয়ে Node থেকে একটি কমান্ড চালাতে হবে। কোনটি নিরাপদ?

  • exec(`convert ${userFile} out.png`)
  • eval(userFile)
  • execFile("convert", [userFile, "out.png"])
  • exec(`convert "${userFile}" out.png`)

(সহজ) Express-এ middleware function-এর স্বাক্ষর কোনটি?

  • (req, res) শুধু
  • (req, res, next) — কাজ শেষে next() ডাকলে পরের middleware/route চলে
  • (next, req, res)
  • (err) শুধু

(মাঝারি) Express-এ error-handling middleware চেনা যায় কীভাবে?

  • এটি শুধু async function হতে পারে
  • এটি app.error() দিয়ে বসাতে হয়
  • এর নাম অবশ্যই errorHandler হতে হয়
  • এটি ঠিক চারটি parameter নেয়: (err, req, res, next), আর সাধারণত সব route-এর পরে বসানো হয়

(সহজ) Express-এ app.get("/users/:id", …) route-এ /users/42?sort=name অনুরোধ এলে মানগুলো কোথায় পাওয়া যায়?

  • req.params.sort আর req.query.id
  • req.body.id আর req.body.sort
  • req.id আর req.sort
  • req.params.id = "42" আর req.query.sort = "name"

(মাঝারি) একটি REST API-র জন্য কোন URL নকশা সবচেয়ে প্রচলিত রীতি মানে?

  • GET /deleteProduct?id=7
  • POST /getAllProducts
  • GET /products, GET /products/7, POST /products, PATCH /products/7, DELETE /products/7
  • PUT /products/7/update

(মাঝারি) একটি অর্ডার আংশিক হালনাগাদে (শুধু status বদলানো) কোন HTTP method সবচেয়ে উপযুক্ত?

  • PUT
  • OPTIONS
  • GET
  • PATCH

(মাঝারি) নিচের কোন query সবচেয়ে নিরাপদ, যেখানে email ব্যবহারকারীর দেওয়া?

  • email থেকে শুধু ; সরিয়ে দিয়ে string জোড়া
  • db.query("SELECT * FROM users WHERE email = $1", [email])
  • db.query("SELECT * FROM users WHERE email = '" + email.trim() + "'")
  • db.query(`SELECT * FROM users WHERE email = '${email}'`)

(মাঝারি) একটি অর্ডারে “স্টক কমানো” আর “অর্ডার রেকর্ড” দুটিই সফল হতে হবে — একটি ব্যর্থ হলে অন্যটিও বাতিল। ডেটাবেসের কোন সুবিধা এটি নিশ্চিত করে?

  • transaction (BEGIN … COMMIT, ব্যর্থ হলে ROLLBACK)
  • index
  • foreign key
  • connection pool

(মাঝারি) ১০০টি অর্ডারের তালিকা দেখাতে একটি query, তারপর প্রতিটি অর্ডারের গ্রাহকের তথ্য আনতে আলাদা ১০০টি query চালানো হচ্ছে। এই সমস্যার নাম কী?

  • race condition
  • SQL injection
  • N+1 query সমস্যা
  • deadlock

(সহজ) সার্ভার থেকে ব্রাউজারে একমুখী লাইভ হালনাগাদ (যেমন খবরের ফিড) পাঠাতে HTTP-র ওপর সহজ, স্বয়ংক্রিয়ভাবে আবার সংযোগ করা প্রযুক্তি কোনটি?

  • Server-Sent Events (EventSource)
  • long polling
  • localStorage
  • WebSocket

(মাঝারি) WebSocket সংযোগ কীভাবে শুরু হয়?

  • একটি সাধারণ HTTP অনুরোধে Upgrade: websocket header পাঠিয়ে; সার্ভার 101 Switching Protocols দিলে একই TCP সংযোগ দ্বিমুখী WebSocket হয়ে যায়
  • প্রতিটি বার্তায় নতুন HTTP অনুরোধ পাঠিয়ে
  • সরাসরি UDP-তে, HTTP ছাড়া
  • service worker নিবন্ধন করে

(মাঝারি) Core Web Vitals-এর তিনটি মাপকাঠি কোনগুলো?

  • bundle size, RAM আর CPU
  • LCP (সবচেয়ে বড় বিষয়বস্তু কত দ্রুত দেখা যায়), INP (ক্লিক-ট্যাপে সাড়া কত দ্রুত) আর CLS (পাতা কতটা লাফায়)
  • FCP, TTFB আর FPS
  • LCP, FID আর CLS — FID এখনো বর্তমান

(মাঝারি) একটি single-page অ্যাপে memory leak-এর প্রচলিত কারণ কোনটি?

  • component সরানোর পরেও window-এ বসানো event listener, চলতে থাকা setInterval, বা global cache-এ রাখা পুরোনো DOM node (detached DOM)
  • খুব বেশি function লেখা
  • const বেশি ব্যবহার
  • arrow function ব্যবহার

(সহজ) React-এ তালিকা আঁকার সময় প্রতিটি উপাদানে key দেওয়া হয় কেন?

  • CSS দিয়ে সাজানোর জন্য
  • তালিকা sort করার জন্য
  • পুনরায় আঁকার সময় React যাতে বুঝতে পারে কোন উপাদান কোনটি — যোগ, বাদ আর ক্রম বদল সঠিকভাবে মেলাতে
  • key না দিলে কোড চলে না

(মাঝারি) React-এর “rules of hooks” অনুযায়ী কোনটি ভুল?

  • component-এর শুরুতে পরপর কয়েকটি useState ডাকা
  • if (loggedIn) { const [x, setX] = useState(0); } — শর্তের ভেতরে hook ডাকা
  • custom hook-এর নাম use দিয়ে শুরু করা
  • hook শুধু function component বা নিজের custom hook-এর ভেতরে ডাকা

(মাঝারি) SSR (server-side rendering) আর CSR (client-side rendering)-এর পার্থক্য কী?

  • SSR-এ সার্ভার প্রতিটি অনুরোধে তৈরি HTML পাঠায়, পরে ব্রাউজারে JavaScript এসে hydration করে; CSR-এ প্রায় খালি HTML আসে আর ব্রাউজারের JavaScript পুরো UI আঁকে
  • দুটি একই
  • CSR-এ JavaScript লাগে না
  • SSR মানে শুধু CSS সার্ভারে রাখা

(সহজ) Vue বা Svelte-এর মতো framework ব্যবহারের মূল কারণ কোনটি?

  • state বদলালে UI নিজে থেকে হালনাগাদ রাখা (declarative UI) আর component দিয়ে বড় অ্যাপ সাজানো, যাতে হাতে DOM মেলানোর ভুল কমে
  • framework সব পাতা দ্রুত করে দেয়
  • JavaScript-এর বদলে আলাদা ভাষা শেখা
  • framework ছাড়া ব্রাউজার JavaScript চালাতে পারে না

(মাঝারি) ডেটাবেসের পাসওয়ার্ড বা API key রাখার সঠিক জায়গা কোনটি?

  • ফ্রন্ট-এন্ডের JavaScript-এ, যাতে ব্রাউজার সরাসরি ডেটাবেসে যেতে পারে
  • সরাসরি source কোডে, কারণ সেটি সার্ভারে চলে
  • localStorage-এ
  • environment variable-এ (বা secret manager-এ); উন্নয়নে .env ফাইল, যা .gitignore-এ থাকে

(মাঝারি) CI/CD-তে সাধারণত কী ঘটে?

  • deploy-এর পরে হাতে টেস্ট করা
  • শুধু প্রোগ্রামারের মেশিনে টেস্ট চালানো
  • প্রতিটি push বা pull request-এ স্বয়ংক্রিয়ভাবে install, lint, টেস্ট আর build চলে (CI); সব সবুজ হলে স্বয়ংক্রিয়ভাবে deploy হয় (CD)
  • শুধু কোড format করা

রিভিশনের জন্য: পর্ব ৪৫ · module · পর্ব ৪৬ · npm, Vite, ESLint · পর্ব ৪৭ · TypeScript · পর্ব ৪৮ · টেস্টিং · পর্ব ৪৯ · Node.js · পর্ব ৫০ · Express আর REST API · পর্ব ৫১ · WebSocket আর SSE · পর্ব ৫২ · ডেটাবেস · পর্ব ৫৩ · পারফরম্যান্স · পর্ব ৫৪ · framework · পর্ব ৫৫ · ক্যাপস্টোন

৯ · AI দিয়ে আরও MCQ বানান — কিন্তু উত্তর কোড চালিয়ে যাচাই করুন

এই পাতার প্রশ্ন শেষ হলে আরও অনুশীলন চাইবেন। AI চ্যাটবট মুহূর্তে শত শত MCQ বানিয়ে দিতে পারে। কিন্তু একটি সতর্কবার্তা মনে রাখুন: JavaScript-এর চতুর MCQ-তে AI প্রায়ই ভুল অপশনকে “সঠিক” বলে। কারণ ইন্টারনেটের পুরোনো প্রশ্নব্যাংকে একই ভুল বছরের পর বছর ছড়িয়েছে — যেমন “let hoist হয় না” (হয়, কিন্তু TDZ-এ থাকে), বা “JavaScript-এ ৬টি primitive” (BigInt আসার আগের তথ্য)। তার ওপর ভাষাটি প্রতি বছর বদলায়; AI অনেক সময় ES5-এর নিয়ম আর ES2023-এর নিয়ম মিশিয়ে ফেলে, বা Node আর ব্রাউজারের আচরণ গুলিয়ে ফেলে — যেমন top-level this, বা setTimeout-এর ফেরত মান (ব্রাউজারে সংখ্যা, Node-এ Timeout object).

AI-এর প্রচলিত ভুলউদাহরণকীভাবে ধরবেন
microtask আর task-এর ক্রম গুলিয়ে ফেলা“setTimeout 0 আগে চলবে, তারপর then”কোডটি ব্রাউজারের console বা Node-এ চালান
পরিবেশ উল্লেখ না করাsloppy বনাম strict mode-এ this; ব্রাউজার বনাম Node-এ globalপ্রশ্নে পরিবেশ লেখা আছে কি না দেখুন; না থাকলে প্রশ্নটি বাদ
error-এর ধরন ভুল বলাTDZ-এ ছোঁয়া → “undefined” বা “TypeError”চালিয়ে e.name আর e.message ছাপান
পুরোনো তথ্য“FID একটি Core Web Vital”, “Promise.any নেই”MDN বা web.dev-এর বর্তমান পাতার সাথে মেলান
দুটি সঠিক অপশন রাখা“কোনটি falsy?” — 0 আর "" দুটিই অপশনেপ্রতিটি অপশন আলাদা করে যাচাই করুন

নিচের প্রম্পটটি AI-কে প্রশ্ন বানাতে বলে, কিন্তু সাথে এমন তথ্যও চায়, যা দিয়ে আপনি উত্তর যাচাই করতে পারবেন। প্রতিটি কোড-প্রশ্নের জন্য চালানো যায় এমন পূর্ণ কোড চাওয়াই এখানে আসল কৌশল:

আমি JavaScript-এর MCQ পরীক্ষার প্রস্তুতি নিচ্ছি। ধরে নাও: আধুনিক Chrome বা Node.js 20, সাধারণ (module নয়) script, strict mode নয় — অন্য কিছু হলে প্রশ্নেই লিখে দেবে। বিষয়: [যেমন: closure আর this] কঠিনতা: [সহজ / মাঝারি / কঠিন] ১০টি MCQ বানাও। প্রতিটির জন্য: ১. প্রশ্ন আর ঠিক ৪টি অপশন; শুধু একটি সঠিক। প্রশ্ন নিজে সম্পূর্ণ হবে — “উপরের কোড” ধরনের উল্লেখ থাকবে না। ২. সঠিক উত্তর, আর প্রতিটি ভুল অপশন কোন ভুল ধারণা থেকে এসেছে — এক লাইনে। ৩. প্রশ্নে কোড থাকলে একটি সম্পূর্ণ কোড দাও, যা console-এ চালালে উত্তরটি দেখা যায়। ৪. উত্তর error হলে error-এর ধরন (TypeError, ReferenceError, SyntaxError, RangeError) আর V8-এর বার্তাটি লেখো। ৫. Math.random, আজকের তারিখ, নেটওয়ার্কের সময় বা object-এর ক্রম যেখানে নির্দিষ্ট নয় — এমন কিছুর ওপর নির্ভর করা প্রশ্ন বানাবে না। ৬. কোন ECMAScript সংস্করণ থেকে সুবিধাটি আছে, তা লেখো (যেমন “ES2022 থেকে”)। ৭. কোনো প্রশ্নকে কোনো নির্দিষ্ট পরীক্ষার আসল প্রশ্ন বলে দাবি করবে না।

যাচাইয়ের চেকলিস্ট

কেন এই উত্তর? — কৌশল আর যে প্রশ্নগুলোতে সবচেয়ে বেশি ভুল হয়

প্রথমটি এই প্রশ্নব্যাংক দিয়ে কীভাবে রিভিশন করবেন তা নিয়ে; বাকি ছয়টি বিষয় এত বেশি ভুল বোঝা হয় যে আলাদা ব্যাখ্যা দরকার। প্রশ্নটি নিয়ে আগে নিজে ভাবুন — তারপর “→ উত্তর” চাপুন।

প্র ০১এত প্রশ্ন একবারে পড়ে মনে থাকে না। এই প্রশ্নব্যাংক দিয়ে কীভাবে রিভিশন করলে সবচেয়ে বেশি কাজে লাগে?

প্রশ্নব্যাংকের সবচেয়ে বড় অপব্যবহার হলো একটানা পড়ে যাওয়া — প্রশ্ন দেখা, উত্তর চাপা, “ও আচ্ছা” বলে এগিয়ে যাওয়া। শেখার গবেষণায় বারবার দেখা গেছে, তথ্য মনে রাখতে সবচেয়ে কার্যকর দুটি কৌশল হলো নিজে মনে করে বের করা (retrieval practice) আর সময় নিয়ে ফিরে আসা (spaced repetition). এই পাতাটি সেভাবেই ব্যবহার করুন:

  • প্রথম দফা — একটি অংশ, পুরো মনোযোগ: একবারে একটি অংশ (যেমন “মূল ভাষা”) নিন। প্রতিটি প্রশ্নে চাপার আগে খাতায় নিজের উত্তর আর এক লাইনের কারণ লিখুন। কারণ লিখতে না পারলে আন্দাজটিকে “জানি” ধরবেন না।
  • ভুলের খাতা: প্রতিটি ভুল প্রশ্নের জন্য একটি লাইন — কোন নিয়মটি জানতাম না বা গুলিয়েছিলাম (“switch === দিয়ে তুলনা করে”)। প্রশ্ন নয়, নিয়মটি লিখুন; পরীক্ষায় একই নিয়ম অন্য চেহারায় আসবে।
  • পর্বে ফিরে যাওয়া: একটি অংশে তিনটির বেশি ভুল হলে সেই অংশের শেষে দেওয়া পর্বগুলো আবার পড়ুন — বিশেষ করে সেখানকার স্টেপার ডায়াগ্রাম। প্রশ্ন মুখস্থ করে নয়, কারণ বুঝে ফিরে আসুন।
  • ফিরে আসার সময়সূচি: ভুলের খাতা দেখে ১ দিন, ৩ দিন আর ৭ দিন পরে শুধু ভুল প্রশ্নগুলো আবার করুন। পাতাটি আবার খুললে প্রশ্নের ক্রম একই থাকে — তাই উত্তরের অবস্থান মুখস্থ হয়ে যাওয়ার ঝুঁকি আছে; অপশন পড়ে নিয়ম দিয়ে উত্তর দিন, “তৃতীয়টা ছিল” মনে করে নয়।
  • সময় ধরে পূর্ণ মহড়া: পরীক্ষার এক-দুই সপ্তাহ আগে প্রতিটি অংশ থেকে মিশিয়ে ৫০টি প্রশ্ন ৩০ মিনিটে করুন। এতে গতি আর “কখন ছেড়ে যাব” সিদ্ধান্তের অভ্যাস হয়। কোর্স হোমের মডিউল টেস্টও একই কাজে লাগে।
  • কোড প্রশ্নে সন্দেহ হলে চালান: ব্রাউজারের console (F12) বা Node-এ কোডটি চালিয়ে দেখুন — শুধু মিলিয়ে নেওয়ার জন্য নয়, একটু বদলে (var-কে let, ==-কে ===) ফল কীভাবে বদলায় তা দেখার জন্য। এতেই নিয়মটি গেঁথে যায়।

আরেকটি ছোট কৌশল: প্রতিটি ভুল অপশনের ব্যাখ্যাও পড়ুন, এমনকি নিজের উত্তর ঠিক হলেও। প্রশ্নকর্তা প্রতিটি distractor একটি প্রচলিত ভুল ধারণা থেকে বানান — সেগুলো চিনে রাখলে নতুন প্রশ্নেও ফাঁদটি দূর থেকে দেখা যায়।

মূল উপলব্ধি: প্রশ্নব্যাংক পড়ার জিনিস নয়, নিজেকে পরীক্ষা করার জিনিস। আগে উত্তর আর কারণ লিখুন, ভুলের নিয়ম খাতায় তুলুন, পর্বে ফিরে বুঝুন, আর কয়েক দিন পরপর শুধু ভুলগুলোতে ফিরে আসুন।

প্র ০২[] == false true, অথচ if ([])-এর ভেতরের কোড চলে। এটা কি স্ববিরোধ? ==-এর নিয়ম আসলে কী?

স্ববিরোধ মনে হয়, কারণ দুটি ভিন্ন প্রশ্নকে আমরা একই প্রশ্ন ভাবি। if ([]) জিজ্ঞেস করে “এই মানটি truthy কি না?” — উত্তর সরল: সব object truthy, খালি array-ও। কিন্তু [] == false truthiness দেখে না। loose equality একটি আলাদা রূপান্তরের অ্যালগরিদম চালায়, যার লক্ষ্য দুই দিককে একই টাইপে আনা — আর সেই টাইপ প্রায়ই number.

ধাপগুলো দেখুন। এক, একদিকে boolean থাকলে সেটি আগে number হয়: false → 0. এখন প্রশ্ন [] == 0. দুই, একদিকে object আর অন্যদিকে primitive থাকলে object-কে primitive বানানো হয় (valueOf, তারপর toString). খালি array-র toString() হলো "". এখন "" == 0. তিন, string আর number থাকলে string-কে number বানানো হয়: "" → 0. শেষে 0 == 0 — true.

এই নিয়মগুলো এসেছে ১৯৯৫-৯৬ সালের প্রথম JavaScript থেকে, যখন লক্ষ্য ছিল ফর্মের লেখা (সব string) সহজে সংখ্যার সাথে তুলনা করা। Brendan Eich পরে বলেছেন, কিছু ঢিলেঢালা রূপান্তর তিনি শুরুর দিকের ব্যবহারকারীদের অনুরোধে যোগ করেছিলেন, আর সেটিকে ভুল সিদ্ধান্ত মনে করেন। কিন্তু ওয়েবের পুরোনো পাতা ভেঙে যাবে বলে নিয়ম আর বদলানো যায়নি। প্রথম নির্দেশিকা ES1 (১৯৯৭)-এ === ছিল না; strict equality নির্দেশিকায় আসে ES3 (১৯৯৯)-এ।

পরীক্ষায় কাজে লাগে এমন কয়েকটি স্থির তথ্য:

  • null == undefined true, কিন্তু null বা undefined আর কোনো কিছুর == নয় — null == 0 false. (অথচ null >= 0 true, কারণ তুলনা অপারেটর আলাদা নিয়মে null-কে 0 বানায়।)
  • NaN কোনো কিছুর সমান নয়, নিজেরও না — ==, === দুটিতেই।
  • দুটি object-এর তুলনায় কোনো রূপান্তর হয় না — শুধু reference মেলে কি না।

ব্যবহারিক নিয়ম তাই সহজ: কোডে সব সময় ===; শুধু x == null (null বা undefined দুটিই ধরতে) প্রচলিত ব্যতিক্রম, অনেক lint নিয়মও এটি অনুমতি দেয়। আর MCQ-তে == দেখলে মাথায় ধাপগুলো চালান: boolean → number, object → primitive, string → number.

মূল উপলব্ধি: truthiness আর loose equality দুটি আলাদা নিয়ম। == truthy-falsy দেখে না; boolean-কে সংখ্যা আর object-কে primitive বানিয়ে তুলনা করে। তাই [] truthy হয়েও false-এর “সমান”।

প্র ০৩var ঘোষণার আগে ছুঁলে undefined, অথচ let ছুঁলে ReferenceError. তাহলে কি let hoist হয় না? TDZ কেন বানানো হলো?

“let hoist হয় না” — এটি সবচেয়ে প্রচলিত ভুল উত্তর, আর অনেক অনলাইন প্রশ্নব্যাংকে এটিকেই সঠিক বলা আছে। আসল কথা: কোড চলার আগে engine প্রতিটি scope-এর সব ঘোষণা খুঁজে নামগুলো তৈরি করে রাখে — var, let, const, function, class — সবগুলোরই। পার্থক্য শুরুর মানে।

  • var: নাম তৈরি হয় আর সাথে সাথে undefined বসে। তাই ঘোষণার আগে পড়লে undefined.
  • function declaration: নামের সাথে পুরো function-ও বসে — তাই ঘোষণার আগেই ডাকা যায়।
  • let, const, class: নাম তৈরি হয়, কিন্তু “uninitialized” অবস্থায় থাকে। ঘোষণার লাইন পর্যন্ত এই অংশটিই TDZ (Temporal Dead Zone). এর মধ্যে ছুঁলে ReferenceError: Cannot access 'x' before initialization.

প্রমাণ চান? এই কোডটি ভাবুন: let x = 1; { console.log(x); let x = 2; }. let hoist না হলে ভেতরের console.log বাইরের x (1) দেখত। কিন্তু ফল ReferenceError — কারণ block-এর ভেতরের x আগেই তৈরি হয়ে বাইরেরটিকে ঢেকে রেখেছে, শুধু এখনো ব্যবহারযোগ্য নয়।

কেন এমন নকশা? ES2015 নির্দেশিকা লেখার সময় TC39-এর সামনে দুটি সহজ পথ ছিল: var-এর মতো undefined দেওয়া, বা hoist একেবারেই না করা। প্রথমটি var-এর সব বাগ (ঘোষণার আগে নীরবে undefined ব্যবহার) ফিরিয়ে আনত। দ্বিতীয়টিতে একই block-এ একটি নাম প্রথমে বাইরের ভ্যারিয়েবল আর পরে ভেতরের ভ্যারিয়েবল বোঝাত — বিভ্রান্তিকর। const-এর জন্য তো আরও খারাপ: একটি const যদি প্রথমে undefined আর পরে অন্য মান দেখায়, তাহলে “constant” কথার মানেই থাকে না। TDZ মাঝামাঝি সমাধান: নাম scope-এর শুরু থেকেই এই block-এর, কিন্তু মান বসার আগে ব্যবহার করলে জোরে error.

আরেকটি পরীক্ষার ফাঁদ: “typeof কখনো error দেয় না” — মিথ্যা। ঘোষিতই নয় এমন নামে typeof নিরাপদে "undefined" দেয়, কিন্তু TDZ-এ থাকা নামে ReferenceError দেয়।

মূল উপলব্ধি: সব ঘোষণাই hoist হয়; পার্থক্য শুরুর অবস্থায়। var পায় undefined, function পায় পুরো function, আর let/const/class থাকে TDZ-এ — ঘোষণার লাইন পর্যন্ত ছুঁলেই ReferenceError.

প্র ০৪লুপে var দিলে timer ছাপে 3 3 3, let দিলে 0 1 2 — শুধু একটি শব্দ বদলালে এত পার্থক্য কেন?

এই প্রশ্নটি একসাথে তিনটি ধারণা যাচাই করে: scope, closure আর event loop. তিনটি আলাদা করে দেখলে রহস্য থাকে না।

এক — কখন চলে: setTimeout-এর callback চলে বর্তমান কোড শেষ হওয়ার পরে। অর্থাৎ লুপ পুরোটা ঘুরে শেষ, তারপর তিনটি callback. তখন লুপের ভ্যারিয়েবলের মান কী — সেটিই প্রশ্ন।

দুই — closure কী ধরে: callback একটি closure; সে তৈরির সময়ের মান নয়, ভ্যারিয়েবলটি ধরে রাখে। তাই প্রশ্নটা দাঁড়ায়: তিনটি callback কি একই ভ্যারিয়েবল দেখছে, নাকি আলাদা?

তিন — কয়টি ভ্যারিয়েবল: var function-scoped — পুরো লুপে একটিই i. তিনটি callback সেই একটি ঘর দেখে, যার মান লুপ শেষে 3. ফল 3 3 3. কিন্তু for (let i …)-এর জন্য ES2015 নির্দেশিকা একটি বিশেষ নিয়ম দিয়েছে: প্রতিটি পুনরাবৃত্তিতে নতুন একটি i binding তৈরি হয়, আগের মান কপি করে বাড়ানো হয় (per-iteration binding). তিনটি callback তিনটি আলাদা ঘর দেখে — 0, 1, 2.

ES2015-এর আগে এই বাগ এত প্রচলিত ছিল যে এর জন্য আলাদা কৌশল তৈরি হয়েছিল — IIFE দিয়ে প্রতিটি মানের জন্য নতুন scope বানানো:

for (var i = 0; i < 3; i++) {
  (function (j) { setTimeout(() => console.log(j), 0); })(i);
}

এখানে প্রতিবার function ডাকায় নতুন j তৈরি হয়। setTimeout-এর তৃতীয় argument (setTimeout(fn, 0, i)) দিয়েও মান পাঠানো যায়। আজ শুধু let লিখলেই চলে — এটি let আনার বড় কারণগুলোর একটি।

ইন্টারভিউতে প্রায়ই পরের প্রশ্ন আসে: “লুপের বাইরে let i ঘোষণা করে for (i = 0; …) লিখলে?” তখন আবার একটিই ভ্যারিয়েবল — 3 3 3. নতুন binding-এর নিয়ম শুধু for (let …)-এর মাথায় ঘোষণার ক্ষেত্রে খাটে।

মূল উপলব্ধি: closure মান নয়, ভ্যারিয়েবল ধরে; callback চলে লুপ শেষ হলে। var-এ একটি ভ্যারিয়েবল, তাই 3 3 3; for-এর মাথায় let-এ প্রতি পুনরাবৃত্তিতে নতুন ভ্যারিয়েবল, তাই 0 1 2.

প্র ০৫this-এর মান কে ঠিক করে? একই method কখনো ঠিক কাজ করে, কখনো undefined দেয় কেন?

Java বা C++ থেকে আসা প্রোগ্রামাররা ধরে নেন this মানে “যে object-এর method লেখা হয়েছে”। JavaScript-এ নিয়ম আলাদা: সাধারণ function-এর this ঠিক হয় ডাকার মুহূর্তে, ডাকার ধরন দেখে — কোথায় লেখা হয়েছে, তা দেখে নয়। চারটি নিয়ম, শক্তিশালী থেকে দুর্বল:

  1. new binding: new Foo() — this হলো নতুন তৈরি object.
  2. explicit binding: f.call(obj), f.apply(obj), f.bind(obj) — this হলো obj. bind করা function-এর this স্থায়ী; আবার bind করলেও বদলায় না (শুধু new পারে)।
  3. implicit binding: obj.f() — বিন্দুর আগের object.
  4. default binding: কোনোটিই না — sloppy mode-এ global object (ব্রাউজারে window), strict mode আর class/module-এর ভেতরে undefined.

“হারানো this”-এর সব বাগ এক জায়গা থেকে আসে: method-কে তার object থেকে আলাদা করে ডাকা। const g = obj.get; g(); — বিন্দু নেই, তাই default binding. একই ঘটনা ঘটে setTimeout(obj.get, 100), button.addEventListener("click", obj.handle) বা React-এর পুরোনো class component-এ onClick={this.handle} লিখলে — function-টি পাঠানো হয়, object নয়।

arrow function এই চার নিয়মের বাইরে। তার নিজের this নেই; যেখানে লেখা হয়েছে, সেই বাইরের scope-এর this ব্যবহার করে (lexical this). তাই method-এর ভেতরের callback-এ arrow দিলে method-এর this পাওয়া যায়। আবার object literal-এ method হিসেবে arrow লিখলে ({ get: () => this.n }) this বাইরের scope-এর — প্রায়ই global বা undefined — আর call/bind দিয়েও বদলানো যায় না।

ইতিহাসের দিক থেকে, ES5 (২০০৯) bind আর strict mode এনে সমস্যা কিছুটা কমায়: strict mode-এ হারানো this window না হয়ে undefined হয়, ফলে ভুলটি নীরব না থেকে TypeError দিয়ে ধরা পড়ে। ES2015-এর arrow function আর class field (handle = () => {…}) বাকিটা সহজ করেছে।

MCQ-তে কৌশল: ডাকার লাইনটি খুঁজুন। new আছে? call/apply/bind? বিন্দুর আগে object? কিছুই না — তাহলে strict কি না দেখুন। আর function-টি arrow হলে এসব বাদ দিয়ে বাইরের this খুঁজুন।

মূল উপলব্ধি: সাধারণ function-এর this ঠিক হয় ডাকার ধরন দেখে — new, explicit, implicit, default — এই অগ্রাধিকারে। arrow function-এর নিজের this নেই, বাইরেরটি নেয়।

প্র ০৬setTimeout(fn, 0) কেন promise-এর then-এর পরে চলে? task আর microtask-এর পার্থক্য কী, আর এটা জানা কেন বাস্তবে জরুরি?

JavaScript-এর main thread একজন দোকানির মতো — একবারে একজন খদ্দের সামলায়। কাজ জমা হয় দুটি সারিতে, আর সারি দুটির নিয়ম আলাদা।

  • task queue (macrotask): timer-এর callback, click-এর মতো event, নেটওয়ার্কের সাড়া। event loop প্রতি ঘোরায় এখান থেকে একটি কাজ নেয়।
  • microtask queue: promise-এর then/catch/finally, await-এর পরের অংশ, queueMicrotask, MutationObserver. প্রতিটি task শেষ হলে (call stack খালি হলে) এই সারি পুরোটা খালি করা হয় — চলার মাঝে নতুন microtask যোগ হলে সেটিও।

এক ঘোরার ক্রম তাই: একটি task (যেমন আপনার পুরো script) → সব microtask → দরকার হলে পাতা আঁকা (rendering) → পরের task. setTimeout(fn, 0) fn-কে task queue-তে পাঠায়; Promise.resolve().then(g) g-কে microtask queue-তে। script শেষ হলে আগে microtask খালি হয় — তাই g আগে, fn পরে, যদিও timer আগে লেখা।

কেন এমন নকশা? Promise-এর নির্দেশিকা (Promises/A+, পরে ES2015) চেয়েছিল callback সব সময় asynchronous হোক — promise আগেই resolve হয়ে থাকলেও — যাতে একই কোড কখনো sync, কখনো async না হয় (এই অনিশ্চয়তাকে বলে “Zalgo”). কিন্তু timer-এর মতো দেরিও চায়নি, কারণ একটির পর একটি then-এর chain প্রতি ধাপে ব্রাউজারের পাতা আঁকার অপেক্ষা করলে ধীর হতো। microtask এই দুইয়ের মাঝামাঝি: “এখনই না, কিন্তু অন্য কোনো কিছুর আগে।”

বাস্তবে এটি তিন জায়গায় জরুরি:

  • microtask starvation: একটি microtask যদি নিজেই নতুন microtask যোগ করতে থাকে, সারি কখনো খালি হয় না — timer, click, এমনকি পাতা আঁকা পর্যন্ত আটকে যায়। পাতা জমে যায়, অথচ কোনো লম্বা লুপ চোখে পড়ে না।
  • ভারী কাজ টুকরো করা: লম্বা হিসাব ভেঙে await Promise.resolve() দিলে main thread ছাড়া হয় না — microtask-এর মাঝে rendering হয় না। ছাড়তে হলে task-এ যেতে হয় (setTimeout, বা সমর্থিত ব্রাউজারে scheduler.yield()) — INP ভালো রাখতে এটি জরুরি।
  • টেস্ট আর ডিবাগ: “state বদলেছি, কিন্তু DOM এখনো পুরোনো কেন?” — অনেক framework হালনাগাদ microtask-এ জমিয়ে একবারে করে।

Node-এ ছবিটা একটু বড়: event loop-এর phase (timers, poll, check), আর process.nextTick-এর আলাদা সারি, যা promise microtask-এরও আগে খালি হয় (CommonJS script-এ)। ব্রাউজারের প্রশ্নে এগুলো আসে না।

মূল উপলব্ধি: প্রতিটি task-এর পরে পুরো microtask queue খালি হয়, তারপর rendering, তারপর পরের task. তাই then আর await-এর পরের অংশ যেকোনো timer-এর আগে চলে — আর microtask-এ আটকে থাকলে পাতা আঁকাও আটকে যায়।

প্র ০৭XSS, CSRF আর CORS — তিনটি শব্দ প্রায় একই রকম শোনায়। কোনটি কী, আর কোনটি কোন বিপদ থেকে বাঁচায়?

চাকরির পরীক্ষা আর ইন্টারভিউতে এই তিনটিকে মিলিয়ে প্রশ্ন আসে, কারণ নামে মিল আর কাজে গোলমাল। একটি প্রশ্ন দিয়ে আলাদা করুন: কে, কোথা থেকে, কী করছে?

  • XSS — আক্রমণকারীর কোড আপনার পাতার ভেতরে চলে। কোনো মন্তব্য, নাম বা URL-এর অংশ পরিষ্কার না করে innerHTML-এ বসালে <img src=x onerror=…> কোড হিসেবে চলে। তখন আক্রমণকারীর script আপনার origin-এর সব ক্ষমতা পায় — DOM পড়া, localStorage-এর token, ব্যবহারকারীর নামে API ডাকা। প্রতিরোধ: ডেটা লেখা হিসেবে বসানো (textContent), প্রসঙ্গ অনুযায়ী encoding, HTML দরকার হলে DOMPurify-এর মতো sanitizer, আর বাড়তি স্তর হিসেবে CSP. session cookie HttpOnly রাখলে অন্তত সেটি চুরি হয় না।
  • CSRF — আক্রমণকারীর নিজের সাইট আপনার সাইটে অনুরোধ পাঠায়। ব্যবহারকারী আপনার সাইটে লগইন করা অবস্থায় অন্য একটি পাতা খুললেন; সেখানে লুকানো একটি form আপনার /transfer-এ POST পাঠাল। ব্রাউজার পুরোনো নিয়মে cookie সাথে দিয়ে দিত, ফলে সার্ভার ভাবত ব্যবহারকারী নিজেই চেয়েছেন। আক্রমণকারী উত্তর পড়তে পারে না, কিন্তু কাজটি ঘটে যায়। প্রতিরোধ: SameSite=Lax/Strict cookie (আধুনিক Chrome-এ Lax ডিফল্ট), অবস্থা বদলানো অনুরোধে CSRF token, আর GET দিয়ে কখনো কিছু না বদলানো।
  • CORS — কোনো আক্রমণ নয়, একটি অনুমতির ব্যবস্থা। ব্রাউজারের same-origin policy বলে, এক origin-এর JavaScript অন্য origin-এর উত্তর পড়তে পারবে না। CORS সেই দেয়ালে নিয়ন্ত্রিত দরজা: সার্ভার Access-Control-Allow-Origin header দিয়ে জানায় কোন origin পড়তে পারবে। জটিল অনুরোধের আগে ব্রাউজার OPTIONS preflight পাঠায়।

সবচেয়ে প্রচলিত তিনটি ভুল ধারণা: এক, “CORS চালু করলে সাইট নিরাপদ” — উল্টো, CORS নিয়ম ঢিলে করে; আর curl বা সার্ভার থেকে পাঠানো অনুরোধ CORS মানেই না। দুই, “CORS CSRF ঠেকায়” — না; সাধারণ form POST সার্ভারে পৌঁছে চলে যায়, CORS শুধু উত্তর পড়া আটকায়। তিন, “HTTPS থাকলে XSS হয় না” — HTTPS শুধু পথে ডেটা রক্ষা করে; পাতার ভেতরে কোড ঢোকা আটকায় না।

মূল উপলব্ধি: XSS — আপনার পাতায় অন্যের কোড (প্রতিরোধ: textContent, encoding, CSP); CSRF — অন্যের পাতা থেকে আপনার নামে অনুরোধ (প্রতিরোধ: SameSite, token); CORS — আক্রমণ নয়, অন্য origin-কে উত্তর পড়তে দেওয়ার নিয়ন্ত্রিত অনুমতি।

শেষ ধাপ — ক্রম সাজান আর স্কোর দেখুন

উপরের সব MCQ শেষ করলে নিচে আপনার মোট স্কোর দেখাবে — প্রথম চেষ্টায় কয়টি ঠিক হয়েছে।

ক্রমঠিকানার ঘরে https দিয়ে শুরু একটি URL লিখে Enter চাপার পর ঘটনাগুলো সঠিক ক্রমে সাজান (▲▼ চেপে সরান)

  1. 🔎 DNS থেকে domain-এর IP ঠিকানা জানা
  2. 🔌 সার্ভারের সাথে TCP সংযোগ আর TLS handshake
  3. 📨 HTTP অনুরোধ পাঠানো (GET /)
  4. 📄 সার্ভার থেকে HTML উত্তর আসা
  5. 🌳 HTML পড়ে DOM আর CSS থেকে CSSOM বানানো
  6. 🎨 layout হিসাব করে পাতা আঁকা (paint)

শব্দকোষ

লেখার মধ্যে ডটেড দাগ দেওয়া শব্দে মাউস রাখুন বা চাপুন — অর্থ দেখাবে। এই পর্বের সব শব্দ এখানে একসাথে:

মনে রাখুন

  1. আগে তিনটি প্রশ্ন: কোড থাকলে আউটপুট খোঁজার আগে জিজ্ঞেস করুন — “parse হবে?” (SyntaxError), “চলার সময় error?” (ReferenceError/TypeError), “ক্রম কি নির্দিষ্ট?” অনেক কঠিন প্রশ্নের উত্তর এখানেই মেলে।
  2. বাদ দিন, খুঁজবেন না: প্রতিটি অপশনের পেছনের নিয়ম যাচাই করুন; “সব সময়”, “কখনো না” ধরনের চরম শব্দে সতর্ক হোন; “কোনটি মিথ্যা” প্রশ্নে প্রতিটি বাক্যে দাগ দিন।
  3. ভাষার পাঁচ ফাঁদ: == boolean-কে সংখ্যা বানায়; typeof null "object"; let/const TDZ-এ থাকে; closure ভ্যারিয়েবল ধরে, মান নয়; সাধারণ function-এর this ডাকার ধরনে ঠিক হয়।
  4. ডেটা ও async: sort, splice, push মূল array বদলায়, toSorted, slice, map নতুন দেয়; spread shallow; প্রতিটি task-এর পরে সব microtask; fetch 404-এ reject হয় না — res.ok দেখুন।
  5. ওয়েবের চার জোড়া: textContent (নিরাপদ) বনাম innerHTML; target বনাম currentTarget; localStorage বনাম HttpOnly cookie; XSS (আপনার পাতায় অন্যের কোড) বনাম CSRF (অন্যের পাতা থেকে আপনার নামে অনুরোধ) — আর CORS আক্রমণ নয়, অনুমতি।

পরের পর্বে: MCQ-তে চারটি অপশন থেকে বাছতে হয়। লিখিত আর মৌখিক (ভাইভা) পরীক্ষায় কোনো অপশন নেই — নিজের ভাষায় সংজ্ঞা, পার্থক্য আর উদাহরণ দিতে হয়। পর্ব ৫৮-এ সেই প্রশ্নগুলো আর উত্তর সাজানোর কৌশল।

আরও পড়ুন · ABCL TECH-এ আপনার পরবর্তী পদক্ষেপ

এই পর্বটি শেয়ার করুন:
এই পর্বে ভুল পেয়েছেন? জানান