Pro JS Documentation

Array, Object, Loop, Event Loop ও Event Listener

১. Array (অ্যারে)

কী: অ্যারে হলো অর্ডার করা লিস্ট — একই বা আলাদা টাইপের অনেকগুলো ভ্যালু একটা ভেরিয়েবলে। ইনডেক্স ০ থেকে শুরু। কখন কোথায়: লিস্ট ডেটা (ইউজার লিস্ট, টাস্ক, প্রোডাক্ট), লুপ চালাতে, map/filter/reduce দিয়ে ট্রান্সফর্ম করতে।

সিনট্যাক্স (প্রায়ই ব্যবহৃত):

কিভাবে কাজ করে ও ব্যবহার করবেন:

// বানানো ও অ্যাক্সেস

const arr = [10, 20, 30, 40, 50];

console.log(arr[0]);   // 10 (প্রথম)

console.log(arr.length); // 5

arr.push(60);  // শেষে যোগ

arr.pop();     // শেষটা বাদ

// map: প্রতিটা আইটেম বদলিয়ে নতুন অ্যারে

const doubled = arr.map(x => x * 2);

console.log(doubled); // [20, 40, 60, 80, 100]

// filter: শর্ত মেনে শুধু কিছু রাখা

const big = arr.filter(x => x > 25);

console.log(big); // [30, 40, 50]

// reduce: পুরো অ্যারে থেকে একটা মান (যেমন যোগফল)

const sum = arr.reduce((acc, x) => acc + x, 0);

console.log(sum); // 150

// find: প্রথম যে আইটেম শর্ত মেনে

const first = arr.find(x => x > 25);

console.log(first); // 30

map, filter সহ যে মেথডগুলো কোডকে efficient করে — এবং কিভাবে কাজ করে

এই মেথডগুলো লুপ নিজে লিখার বদলে এক লাইনে কাজ সেরে দেয়; কোড ছোট হয়, পড়তে ও বাগ কম হয়। নিচে প্রতিটির কিভাবে কাজ করে সংক্ষেপে দেওয়া হলো।

// flatMap: প্রতিটি শব্দ ভাঙে অক্ষরের অ্যারে, তারপর সবার একসাথে

['hi', 'ok'].flatMap(s => s.split(''));  // ['h','i','o','k']

// at: শেষ আইটেম

const last = [10, 20, 30].at(-1);  // 30

// sort সংখ্যা (কপি নিয়ে, অরিজিনাল অক্ষুণ্ণ)

const sorted = [...[3, 1, 2]].sort((a, b) => a - b);  // [1, 2, 3]

কোডিং লাইফে সবচেয়ে বেশি ব্যবহৃত Array মেথড — সংক্ষিপ্ত টেবিল

// রিয়েল লাইফ উদাহরণ: API থেকে ইউজার নিয়ে শুধু নাম + টোটাল কাউন্ট

const users = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];

const names = users.map(u => u.name);           // ['A', 'B']

const total = users.reduce((n, u) => n + 1, 0); // 2

const hasA = users.some(u => u.name === 'A');   // true

২. Object (অবজেক্ট)

কী: অবজেক্ট হলো key-value জোড়ার কালেকশন — একটা এনটিটির বিভিন্ন প্রপার্টি (নাম, বয়স, ইমেইল) একসাথে রাখা। কখন কোথায়: ইউজার/প্রোডাক্ট ডেটা, সেটিংস, API থেকে আসা JSON, ফ্রিকোয়েন্সি কাউন্টার (কোন অক্ষর কতবার)।

কিভাবে কাজ করে: Object.keys(obj) অবজেক্টের নিজস্ব (enumerable) প্রপার্টিগুলোর শুধু কী নামগুলো অ্যারে হিসেবে দেয়। Object.values(obj) সেই কীগুলোর ভ্যালুগুলো অ্যারে করে দেয়। Object.entries(obj) প্রতিটি প্রপার্টিকে [key, value] জোড়া হিসেবে দেয় — লুপে for (const [k, v] of Object.entries(obj)) চালাতে বা Map বানাতে সুবিধা। এই তিনটা মেথড অরিজিনাল অবজেক্ট বদলায় না।

কিভাবে কাজ করে ও ব্যবহার করবেন:

// বানানো ও অ্যাক্সেস

const user = { name: 'Karim', age: 28, city: 'Dhaka' };

console.log(user.name);  // Karim (dot)

console.log(user['age']); // 28 (bracket)

user.email = 'k@mail.com'; // নতুন প্রপার্টি যোগ

// Keys, Values, Entries — লুপ বা অ্যারে বানানোর জন্য

console.log(Object.keys(user));   // ['name','age','city','email']

console.log(Object.values(user)); // ['Karim', 28, 'Dhaka', 'k@mail.com']

console.log(Object.entries(user)); // [['name','Karim'], ['age',28], ...]

// ফ্রিকোয়েন্সি কাউন্টার (কোন অক্ষর কতবার)

function countChars(str) {

  const obj = {};

  for (const ch of str) {

    obj[ch] = (obj[ch] || 0) + 1;

  }

  return obj;

}

console.log(countChars('hello')); // { h:1, e:1, l:2, o:1 }

কোডিং লাইফে সবচেয়ে ব্যবহৃত Object প্যাটার্ন ও মেথড

// রিয়েল লাইফ: সেটিংস থেকে শুধু সক্রিয় কীগুলো

const settings = { theme: 'dark', sound: true, lang: 'en' };

const keys = Object.keys(settings);  // ['theme','sound','lang']

const copy = { ...settings, theme: 'light' }; // কপি + ওভাররাইড

৩. Loop (লুপ)

কী: একই কাজ বারবার করানোর জন্য লুপ। কখন কোনটা: ইনডেক্স দরকার হলে for (let i=0; ...); অ্যারের ভ্যালু দরকার হলে for...of; অবজেক্টের কী/ভ্যালু ঘুরতে for...in বা Object.keys(); প্রতিটায় একটা কাজ করতে forEach।

কিভাবে কাজ করে: for (let i=0; i<arr.length; i++) — i দিয়ে ০ থেকে length-১ পর্যন্ত এক এক করে বাড়ে, প্রতিবার arr[i] এক্সেস করেন। for...of অ্যারের প্রতিটি উপাদানকে একটার পর একটা ভ্যারিয়েবলে দেয় (ইনডেক্স দেয় না)। for...in অবজেক্টের keys দিয়ে ঘোরে; অ্যারে এ ব্যবহার করলে ইনডেক্স (স্ট্রিং) পাবেন, তাই অ্যারে ঘুরতে for...of ভালো। forEach অ্যারের প্রতিটি উপাদানের জন্য callback(value, index, array) একবার করে চালায়; মাঝে break করা যায় না, return শুধু সেই callback থেকে বের হয়।

উদাহরণ — কপি করে রান করুন:

const nums = [10, 20, 30];

// for — ইনডেক্স দরকার হলে

for (let i = 0; i < nums.length; i++) {

  console.log(i, nums[i]); // 0 10, 1 20, 2 30

}

// for...of — শুধু ভ্যালু দরকার (সবচেয়ে সহজ)

for (const n of nums) {

  console.log(n); // 10, 20, 30

}

// for...in — অবজেক্টের keys (অ্যারে না দেয়া ভালো)

const obj = { a: 1, b: 2 };

for (const key in obj) {

  console.log(key, obj[key]); // a 1, b 2

}

// forEach — অ্যারের প্রতিটি উপাদানে ফাংশন চালানো

nums.forEach((value, index) => {

  console.log(index, value);

});

কোডিং লাইফে কখন কোন লুপ ব্যবহার করবেন

ইনডেক্স দরকার (যেমন i, position) বা পেছন দিক দিয়ে ঘুরতে চাইলে → for (let i = 0; i < arr.length; i++)। শুধু ভ্যালু দরকার, অ্যারেতে ঘুরতে → for (const item of arr) — সবচেয়ে পড়তে সহজ। অবজেক্টের key/value ঘুরতে → for (const key in obj) বা Object.keys(obj).forEach(...)। অ্যারের প্রতিটায় সাইড ইফেক্ট (DOM আপডেট, লগ) করতে চাইলে → arr.forEach((item, i) => { ... })। নতুন অ্যারে বা এক মান বের করতে চাইলে map/filter/reduce ব্যবহার করুন, শুধু লুপের জন্য for বা for...of।

৪. Event Loop (ইভেন্ট লুপ)

কী: JavaScript একটাই থ্রেডে চলে। Event Loop হলো ইঞ্জিনের যে মেকানিজম দিয়ে এটি সিনক্রোনাস কোড আগে রান করে, তারপর কলব্যাক/প্রমিজ (async) গুলো একটার পর একটা চালায় — যাতে UI ব্লক না হয়। কিভাবে কাজ করে (সংক্ষেপে): (১) Call Stack এ যে ফাংশনগুলো একটার পর একটা চলে সেগুলো শেষ হয়; (২) তারপর Task Queue / Microtask Queue থেকে একটা করে টাস্ক নিয়ে স্ট্যাকে দিয়ে রান করে; (৩) এই সাইকেল চলতেই থাকে। তাই setTimeout(fn, 0) বা প্রমিজের .then সবসময় বর্তমান সিনক্রোনাস কোডের পরে রান হয়।

// Event Loop বোঝার জন্য: এটা রান করে দেখুন

console.log('A');

setTimeout(() => console.log('B'), 0);

Promise.resolve().then(() => console.log('C'));

console.log('D');

// আউটপুট: A, D, C, B (সিনক্রোনাস আগে, তারপর মাইক্রোটাস্ক, তারপর টাস্ক)

কোডিং লাইফে: fetch() বা API কল করলে রেসপন্স আসতে সময় লাগে। সেই সময় পর্যন্ত বাকি কোড রান করতে থাকে। তাই API এর ডেটা ব্যবহার করতে চাইলে অবশ্যই await fetch() বা .then(callback) এর ভেতরে লিখতে হয় — বাইরে লিখলে ডেটা তখনো আসেনি বলে undefined বা এরর পাবেন। Event Loop এই নিয়ম দিয়ে অ্যাসিঙ্ক কাজগুলো সিরিয়াল রাখে।

৫. Event Listener (ইভেন্ট লিসেনার)

কী: ইউজার ক্লিক, টাইপ, স্ক্রল করলে ব্রাউজার একটা ইভেন্ট ফায়ার করে। Event Listener দিয়ে আপনি বলতে পারেন “এই ইভেন্ট হলে এই ফাংশন চালাও”। কখন কোথায়: বাটন ক্লিক, ইনপুটে টাইপ, ফর্ম সাবমিট, স্ক্রল, কী-প্রেস — যেকোনো ইউজার অ্যাকশনে রেসপন্স দিতে।

কিভাবে লিখতে হয় ও ব্যবহার করবেন:

// বেসিক: একটা এলিমেন্টে ক্লিক শুনা

// HTML: <button id="btn">Click</button>

const btn = document.getElementById('btn');

btn.addEventListener('click', function () {

  console.log('Button clicked!');

});

// ইভেন্ট অবজেক্ট ব্যবহার (কি ক্লিক হয়েছে, কী প্রেস হয়েছে)

btn.addEventListener('click', (e) => {

  console.log(e.target);      // যে এলিমেন্টে ক্লিক

  console.log(e.type);       // 'click'

});

input.addEventListener('keyup', (e) => {

  console.log(e.key, e.target.value);

});

// Event Delegation: প্যারেন্টে এক লিসেনার, অনেক চাইল্ডের জন্য

// HTML: <ul id="list"><li>A</li><li>B</li></ul>

document.getElementById('list').addEventListener('click', (e) => {

  const li = e.target.closest('li');

  if (!li) return;

  console.log('Clicked:', li.textContent);

});

// কমন ইভেন্ট টাইপ: 'click', 'submit', 'input', 'keyup', 'scroll', 'load'

form.addEventListener('submit', (e) => {

  e.preventDefault(); // পেজ রিলোড আটকাতে

  console.log('Form submitted');

});