DEV Community: Moriam Akter Swarna

Understanding API and Fetch in JavaScript (Step by Step Explanation)

Moriam Akter Swarna — Tue, 03 Mar 2026 04:08:24 +0000

API, বা Application Programming Interface, হলো দুটি অ্যাপ্লিকেশনের মধ্যে যোগাযোগের মাধ্যম। এটি একটি নির্দিষ্ট protocol ফলো করে অ্যাপ্লিকেশনগুলিকে একে অপরের সাথে ডেটা শেয়ার করতে সহায়তা করে।

আমরা জানি, JavaScript একটি ওয়েব অ্যাপ্লিকেশনে প্রাণ সঞ্চার করে। আর API হচ্ছে সেই মাধ্যম যার মাধ্যমে একটি অ্যাপ্লিকেশন অন্য একটি সার্ভারের সাথে কথা বলে।

এই লেখায় আমরা দেখবো:

API কিভাবে কাজ করে
JavaScript দিয়ে API কল কিভাবে করতে হয়
fetch() আসলে কী করে
.then() কেন ব্যবহার করি
Promise দিয়ে asynchronous behaviour কিভাবে handle হয়

How API Works?

ধরুন আপনি একটি ওয়েবসাইট তৈরি করছেন যা আবহাওয়ার তথ্য দেখাবে।

আপনি সরাসরি আবহাওয়া অধিদপ্তরের database access করতে পারবেন না।
তার পরিবর্তে, আপনাকে তাদের তৈরি করা API ব্যবহার করতে হবে।

Flowটা এমন:

আপনার অ্যাপ্লিকেশন একটি request পাঠায়
সার্ভার request validate করে
সার্ভার একটি response পাঠায়
আপনার অ্যাপ্লিকেশন সেই response ব্যবহার করে UI update করে

এই তথ্য আদান-প্রদানটাই মূলত API এর কাজ।

JavaScript দিয়ে API Implementation

JavaScript-এ API কল করা খুব সহজ। আমরা fetch() ব্যবহার করি।

ধরি আমাদের API URL:

const url = 'https://api.example.com/weather';

এখন API call করি:

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

এখানে আসলে কী হচ্ছে?

Step 1: fetch()

fetch(url)

এটি সার্ভারে একটি request পাঠায়।

⚠️ গুরুত্বপূর্ণ বিষয়: fetch() asynchronous।

মানে — এটি request পাঠিয়ে পরের লাইনের কোড execute করা শুরু করে দেয়।

Step 2: First `.then()`

.then(response => response.json())

সার্ভার থেকে response আসলে এটি একটি Response object দেয়।

আমরা .json() ব্যবহার করে সেটিকে JavaScript object এ convert করি।

⚠️ এটিও asynchronous।

Step 3: Second `.then()`

.then(data => {
  console.log(data);
});

এখন আমরা final JSON data পেয়ে যাই।
এখানে আমরা চাইলে:

UI update করতে পারি
Condition check করতে পারি
DOM manipulate করতে পারি

Example: API Response Based UI Update

const url = 'https://api.example.com/weather';

fetch(url)
  .then(response => response.json())
  .then(data => {
    if (data.weather === 'sunny') {
      document.getElementById('message').innerHTML = 'আজ আকাশ পরিষ্কার!';
    } else {
      document.getElementById('message').innerHTML = 'আজ বৃষ্টি হতে পারে।';
    }
  });

এখানে কী হলো?

request পাঠানো হলো
response আসলো
JSON এ convert হলো
condition check করা হলো
DOM update হলো

তাহলে `.then().then()` কেন?

API call asynchronous।

JavaScript একসাথে অনেক কাজ করতে পারে।
তাই আমরা .then() ব্যবহার করি —

👉 "Response পাওয়ার পর এই কাজটা করো"
👉 "JSON পাওয়ার পর এই কাজটা করো"

এভাবে asynchronous code কে controlled flow তে চালানো হয়।

Promise কীভাবে কাজ করছে?

fetch() একটি Promise return করে।

Promise এর তিনটি state আছে:

Pending
Fulfilled
Rejected

.then() চলে যখন Promise fulfilled হয়।
.catch() ব্যবহার করা হয় error handle করার জন্য।

Final Thoughts

API হলো আধুনিক ওয়েব ডেভেলপমেন্টের backbone।
JavaScript-এর fetch() এবং Promise বুঝে ফেললে আপনি সহজেই:

External data নিয়ে কাজ করতে পারবেন
Dynamic UI তৈরি করতে পারবেন
Real-world application বানাতে পারবেন

Asynchronous flow পরিষ্কারভাবে বুঝতে পারলেই API নিয়ে কাজ করা অনেক সহজ হয়ে যায়।

If this article helped you understand API & fetch more clearly, feel free to react and share your thoughts 🚀

Array vs Object Destructure

Moriam Akter Swarna — Sun, 01 Mar 2026 10:59:09 +0000

জাভাস্ক্রিপ্টে ডেটা অ্যাক্সেস এবং ম্যানিপুলেশন একটি গুরুত্বপূর্ণ স্কিল। ES6-এর সাথে, ডেটা অ্যাক্সেসকে আরও সিম্পল এবং সহজ করার জন্য অ্যারে এবং অবজেক্ট Destructuring নামক একটি শক্তিশালী feature এসেছে। আজ আমরা এই Destructuring নিয়েই আলোচনা করবো।

জাভাস্ক্রিপ্টে ডিস্ট্রাকচারিং কি?

ডিস্ট্রাকচারিং হলো একটি ES6 বৈশিষ্ট্য যা আপনাকে অ্যারে এবং অবজেক্টের উপাদানগুলিকে সরাসরি ভেরিয়েবলে extract করতে দেয়। এটি সাধারণ অ্যারে ইনডেক্সিং এবং অবজেক্ট প্রোপার্টি অ্যাক্সেসের চেয়ে স্বচ্ছ এবং কম এরর
যুক্ত ।

কোডে ডিস্ট্রাকচারিং এর গুরুত্ব:

i. Clean code: ডিস্ট্রাকচারিং কোডকে আরও clean এবং বোঝার জন্য সহজ করে তোলে।
ii. Less error: ডিস্ট্রাকচারিং দুর্ঘটনাবশত ভুল প্রোপার্টি অ্যাক্সেস করার সম্ভাবনা কমিয়ে দেয়।
iii. Less code: ডিস্ট্রাকচারিং কোডকে সংক্ষিপ্ত করতে পারে, বিশেষ করে যখন আপনি একাধিক মান অ্যাক্সেস করছেন।
iv. Reduce repetition: ডিস্ট্রাকচারিং ডেটা অ্যাক্সেসের জন্য একই কোড বারবার লেখার প্রয়োজনীয়তা হ্রাস করে।

Array Destructuring কি?

Array Destructuring হলো জাভাস্ক্রিপ্টে একটি ES6 বৈশিষ্ট্য যা আপনাকে একটি অ্যারের element গুলিকে সরাসরি ভেরিয়েবলে extract করতে দেয়। এটি সাধারণ অ্যারে ইনডেক্সিংয়ের চেয়ে clean এবং কম ত্রুটিপূর্ণ।

Array Destructuring এর সিনট্যাক্স:

const [first, second, ...rest] = array;

এই কোডে, array থেকে প্রথম দুটি উপাদান first এবং second ভেরিয়েবলে extract করা হয়েছে। ...rest ব্যবহার করে, অবশিষ্ট উপাদানগুলি rest নামক একটি অ্যারেতে সংরক্ষণ করা হয়েছে।

Array Destructuring এর ব্যবহার:

অ্যারের উপাদানগুলিকে ভেরিয়েবলে extract করতে:

const numbers = [1, 2, 3];

const [first, second] = numbers; // first = 1, second = 2

console.log(`first= ${first}, second = ${second}`)  //first= 1, second = 2

অ্যারে থেকে নির্দিষ্ট উপাদান বাদ দিতে:

const numbers = [1, 2, 3, 4];

const [first, , third] = numbers; // first = 1, third = 3 (skips second element)

console.log(`first= ${first}, third = ${third}`)//first= 1, third = 3

অ্যারের উপাদানগুলিকে নতুন নাম দিতে:

const numbers = [1, 2, 3];

const [ one, two ] = numbers; // one = 1, two = 2

console.log(`One= ${one}, two = ${two}`)//One= 1, two = 2

অ্যারের অবশিষ্ট উপাদানগুলি পেতে:

const numbers = [1, 2, 3,4,5];

const [ , , ...bakiGulo ] = numbers; // one = 1, two = 2

console.log(`baki gulo= ${bakiGulo}`)//baki gulo= 3,4,5

ডিফল্ট মান ব্যবহার করে undefined মান হ্যান্ডেল করা:

const numbers = [1];

const [first, second = "Unknown"] = numbers; // first = 1, second = "janina" (if second is not present)

console.log(`first= ${first}, second = ${second}`)//first= 1, second = janina

নেস্টেড অ্যারের মধ্যে ডিস্ট্রাকচারিং:

const nestedArray = [[1, 2], [3, 4]];

const [first, second] = nestedArray; // first = [1, 2], second = [3, 4]

console.log(`first= ${first}, second = ${second}`)//first= 1,2, second = 3,4

const [firstArr, [third, fourth]] = nestedArray; // first = 1, third = 3, fourth = 4

console.log( `firstArray= ${firstArr}, third = ${third}, fourth= ${fourth}`)//firstArray= 1,2, third = 3, fourth= 4

Object Destructuring কি?

Object Destructuring হলো জাভাস্ক্রিপ্টের একটি ES6 বৈশিষ্ট্য যা আপনাকে একটি অবজেক্টের প্রোপার্টিগুলিকে সরাসরি ভেরিয়েবলে এক্সট্রাক্ট করতে দেয়। এটি সাধারণ ডট নোটেশন ব্যবহার করে প্রোপার্টি অ্যাক্সেস করার চেয়ে clean এবং কম ত্রুটিপূর্ণ।

Object Destructuring এর সিনট্যাক্স:

const { name, age } = object;

এই কোডে, object থেকে name এবং age প্রোপার্টিগুলিকে name এবং age ভেরিয়েবলে এক্সট্রাক্ট করা হয়েছে।

অবজেক্ট ডিস্ট্রাকচারিং এর ব্যবহার:

অবজেক্টের প্রোপার্টিগুলিকে ভেরিয়েবলে এক্সট্রাক্ট করতে:

const person = { name: "John", age: 30 };

const { name, age } = person; // name = "John", age = 30

console.log(`Name: ${name}, age: ${age}`)

অবজেক্ট থেকে নির্দিষ্ট প্রোপার্টি বাদ দিতে:

const person = { name: "Sherlock Holmes", age: 30, address: "221 B Baker Street" };

const { name, age } = person;  // address is not extracted here

console.log(`Name: ${name}, age: ${age}`)// name = "John", age = 30

অবজেক্টের প্রোপার্টিগুলিকে নতুন নাম দিতে:

const person = { name: "Sherlock Holmes", age: 30, address: "221 B Bekar Street" };

const { name:writerName, age:writerAge } = person;  

console.log(`Writer Name: ${writerName}, Writer age: ${writerAge}`)
Writer Name: Sherlock Holmes, Writer age: 30

ডিফল্ট মান ব্যবহার করে undefined মান হ্যান্ডেল করা:

const person = { name: "Sherlock" };

const { age = "janina" } = person; // age = "janina" (if age is not present)

console.log(`Age: ${age}`) //Age: janina

নেস্টেড অবজেক্টের মধ্যে ডিস্ট্রাকচারিং:

const nestedObject = {

  person: { name: "John", age: 30 },

  address: { city: "New York", state: "NY" },

};

const { person: { name, age }, address:{city, state} } = nestedObject; // name = "John", age = 30

console.log(`Name: ${name} Age: ${age}, address: ${city}, ${state}`)//Name: John Age: 30, address: New York, NY

Array / Object ডিস্ট্রাকচারিংয়ের benifits:

Easy Data Access: কমপ্লেক্স অ্যারে স্ট্রাকচারের মধ্যে থেকেও নির্দিষ্ট মানগুলি অ্যাক্সেস করা সহজ করে তোলে।

Set default value: যদি কোনো উপাদান না থাকে তাহলে ডিফল্ট মান সেট করা যায়, যা এরর এড়াতে সাহায্য করে।

অ্যারে এবং অবজেক্ট ডিস্ট্রাকচারিং এর মধ্যে পার্থক্য:

1. Access Element:

Array Destructuring: অ্যারের ইনডেক্স অনুযায়ী এলিমেন্ট অ্যাক্সেস করা হয়।
যেমন:

const numbers = [1, 2, 3];
const  [ firstNumber ]= numbers;

Object Destructuring: অবজেক্টের প্রোপার্টি নাম অনুযায়ী এলিমেন্ট অ্যাক্সেস করা হয়।
যেমন:

const person = { name: "John", age: 30 };
const {name} = person;

2. Order:

Array Destructuring: অ্যারেতে element অর্ডার গুরুত্বপূর্ণ। যে ক্রমে/সিরিয়াল আপনি ভেরিয়েবলে আনবেন সেই ক্রমেই অ্যারের উপাদানগুলি মিলিয়ে নেওয়া হবে।

Object Destructuring: অবজেক্টে প্রোপার্টির অর্ডার গুরুত্বপূর্ণ নয়। আপনি যে কোনো ক্রমে প্রোপার্টিগুলিকে ভেরিয়েবলে আনতে পারেন।

3. Default Value:

অ্যারে এবং অবজেক্ট ডিস্ট্রাকচারিং: উভয় ক্ষেত্রেই ডিফল্ট মান ব্যবহার করা যায় যদি কোনো উপাদান বা প্রোপার্টি অনুপস্থিত থাকে।

4. ব্যবহারের ক্ষেত্র:

Array Destructuring: সাধারণত অ্যারের প্রথম কয়েকটি এলিমেন্ট বা নির্দিষ্ট ইনডেক্সের ভ্যালু আনার জন্যে ব্যবহৃত হয়।

Object Destructuring: সাধারণত অবজেক্টের একাধিক প্রোপার্টি একসাথে আনার জন্যে ব্যবহৃত হয়।

এই ছিল অ্যারে এবং অবজেক্ট Destructuring নিয়ে আজকের আলোচনা।

Happy coding 🎉🎉

What is JavaScript??

Moriam Akter Swarna — Fri, 23 Jan 2026 07:55:49 +0000

JavaScript কি??

JavaScript হচ্ছে একটা object oriented, high-level, dynamic প্রোগ্রামিং ল্যাঙ্গুয়েজ যা ওয়েবসাইটকে interactive করতে ব্যবহার করা হয়। জাভাস্ক্রিপ্ট HTML এবং CSS কে আপডেট বা পরিবর্তন করতে পারে। জাভাস্ক্রিপ্ট একটি client side scripting language অর্থাৎ এটি ব্যবহারকারীর ব্রাউজারে চলতে থাকে।
JavaScript ওয়েবসাইটের কনটেন্টকে আপডেট করতে পারে, মাল্টিমিডিয়া ডাটা যেমন ভিডিও, ইমেজ, অডিও, অ্যানিমেশন ইত্যাদি কন্ট্রোল করতে পারে। জাভাস্ক্রিপ্ট সার্ভার সাইড এবং ক্লায়েন্ট সাইড উভয় দিকে কাজ করতে পারে।
1995 সালে Brendan Eich প্রথম JavaScript আবিষ্কার করেন।

কেন JavaScript ব্যবহার করব??

১. Client side Interactivity: JavaScript ডেভলপারদেরকে ক্লায়েন্ট সাইডে ইন্টারেক্টিভ এবং ডাইনামিক ইউজার ইন্টারফেস তৈরি করতে দেয়, যার ফলে user experience ভালো হয়।

২. Cross browser compatibility: জাভাস্ক্রিপ্ট প্রায় সমস্ত প্রধান ব্রাউজার গুলোতে রান করতে পারে। যেহেতু সব ধরনের প্লাটফর্মে জাভাস্ক্রিপ্ট রান করতে পারে তাই এটি web application তৈরীর ক্ষেত্রে প্রধান পছন্দ হয়ে উঠেছে।

৩. Asynchronous Programming: JavaScript asynchronous task হ্যান্ডেল করতে পারে কোন ধরনের ব্লক করা ছাড়ায় একাধিক কাজ একসঙ্গে করতে পারে।

৪. Versatility: জাভাস্ক্রিপ্ট যে শুধুমাত্র ওয়েব ডেভেলপমেন্ট এর ক্ষেত্রে ব্যবহার করা যায় এমন নয়। Node js উদ্ভাবনের পর থেকে জাভা স্ক্রিপ্ট সার্ভার সাইড ডেভেলপমেন্ট এর জন্য ব্যবহার করা যায়। এছাড়াও mobile development এবং machine learning এর মত কাজেও জাভাস্ক্রিট ব্যবহার করা যায়।

জাভাস্ক্রিপ্ট এর Features:

Client-Side Technology: জাভাস্ক্রিপ্ট যেহেতু ক্লায়েন্টের ব্রাউজারে কাজ করে তাই এটি ডায়নামিক ভাবে কনটেন্ট দেখাতে পারে এবং ওয়েব পেজকে ইন্টারএকটিভ করতে পারে।
Greater Control: জাভাস্ক্রিপ্ট ইউসারের ব্রাউজারের ওপর কন্ট্রোল করতে পারে এবং ওয়েব পেজের এলিমেন্ট গুলোকে manipulate করতে পারে
Detecting User Browser & OS: ইউজার কোন ব্রাউজার ব্যবহার করছে এবং ইউজারের অপারেটিং সিস্টেম টা কি জাভাস্ক্রিপ্ট সেটা ডিটেক্ট করতে পারে এবং সে অনুযায়ী কনটেন্ট ডেলিভারি কাস্টমাইজ করতে পারে।
Performing Simple Calculation: JavaScript বেসিক ক্যালকুলেশন করতে পারে। অর্থাৎ সার্ভারে কোন রিকোয়েস্ট করা ছাড়াই সিম্পল JavaScript arithmethic operations গুলো যেমন- addition, subtraction, multiplication, division etc. করতে পারে। যার ফলে সার্ভারের উপর লোড কমে যায় এবং পারফরম্যান্স ইমপ্রুভ হয়।
Validating User’s Input: ইউজারের ইনপুটগুলো এক্সপেক্টেড ফরমেটে আছে কিনা সেটা চেক করে দেখতে পারে।
Handling Date & Time: জাভাস্ক্রিপ্ট এর মাধ্যমে আমরা ডেট এবং টাইম কে ম্যানেজ করতে পারি, manipulate করতে পারি।
Generating HTML: জাভা স্ক্রিপ্ট ডাইনামিক্যালি এইচটিএমএল কন্টেন্টকে জেনারেট করতে পারে যার ফলে আমরা ওয়েব পেজে রিয়েল টাইম আপডেট পেতে পারি।
Semicolon Insertion: যদি ডেভেলপাররা লাইনের শেষে সেমিকোলন ব্যবহার না করে জাভাস্ক্রিপ্ট অটোমেটিক সেমিকোলন insert করতে পারে।

জাভাস্ক্রিপ্ট এর সুবিধা সমূহ:

১. জাভাস্ক্রিপ্ট ব্যবহার করে ডায়নামিক এবং রেস্পন্সিভ ইউজার ইন্টারফেস তৈরি করা যায়।

২. জাভাস্ক্রিপ্ট শেখা অনেক সহজ, বিশেষ করে বিগিনারদের জন্য। জাভাস্ক্রিপ্ট এর সিমট্যাক্স অন্যান্য প্রোগ্রামিং ল্যাঙ্গুয়েজ এর মতই।

৩. জাভাস্ক্রিপ্টের অনেক বড় একটা কমিউনিটি রয়েছে এবং ডেভেলপারদের জন্য অসংখ্য documentation এবং রিসোর্স রয়েছে। অর্থাৎ কেউ যদি কোন সমস্যায় পড়ে অতি সহজেই বিভিন্ন রিসোর্স থেকে সাহায্য পেতে পারবে।

৪. যেহেতু জাভাস্ক্রিপ্ট দিয়েই ক্লায়েন্ট সাইড এবং সার্ভার সাইড উভয়ের কাজ করা সম্ভব তাই একটা প্রোগ্রামিং ল্যাঙ্গুয়েজ এর মাধ্যমেই ওয়েব অ্যাপ্লিকেশন তৈরি করা সম্ভব।

৫. জাভাস্ক্রিপ্ট এর প্রচুর ফ্রেমওয়ার্ক ও লাইব্রেরি রয়েছে। যেমন- React, Angular, Vue, jQuery, Node js, Svelte, solid js etc.

জাভাস্ক্রিপ্ট এর কিছু অসুবিধা:

১. সিকিউরিটির কারনে জাভাস্ক্রিপ্ট ক্লায়েন্ট মেশিনের ফাইল গুলোকে read বা write করতে পারেনা।

২. যেহেতু জাভাস্ক্রিপ্ট Single threaded, অর্থাৎ জাভাস্ক্রিপ্ট এক সময়ে একটা কাজ করে। তাই এটি multi-threading সাপোর্ট করে না। Multi-threading মানে হচ্ছে একসাথে একাধিক thread এ কাজ করা।
তবে modern JavaScript (বিশেষ করে Node.js) এখন—

Child processes
Worker threads
Asynchronous & event-driven architecture

এর মাধ্যমে parallel execution হ্যান্ডেল করতে পারে।

👉 অর্থাৎ JavaScript নিজে multi-threaded না হলেও,
modern Node.js environment multi-threading support করে।

৩. Browser-based JavaScript সরাসরি low-level network operations যেমন raw TCP/IP sockets ব্যবহার করতে পারে না।
তবে Node.js ব্যবহার করলে socket, TCP, HTTP, WebSocket ইত্যাদি নিয়ে কাজ করা সম্ভব।

কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করা যায়??

আপনার প্রজেক্টে জাভাস্ক্রিপ্ট ব্যবহার করার জন্য HTML ডকুমেন্টে <script> ট্যাগ include করতে হবে। আপনার সব জাভাস্ক্রিপ্ট কোড এই <script> ট্যাগ এর ভিতরে থাকবে। এছাড়া আপনি চাইলে <script> ট্যাগ এর ভিতরে src attribute এর মাঝে external JavaScript file link অ্যাড করতে পারবেন।

*উদাহরণস্বরূপ: *

//internal JavaScript
<script>
  // Your JavaScript code goes here
</script>

//adding external javaScript file 
<script src="scripts/main.js"></script>

<script> ট্যাগ মূলত এইচটিএমএল ডকুমেন্টের <body> ট্যাগের একেবারে শেষে ব্যবহার করব যাতে এইচটিএমএল কন্টেন্টগুলো জাভাস্ক্রিপ্ট কোডের আগে লোড হয়।

কেন JavaScript Dynamically Typed Language??

জাভাস্ক্রিপ্ট একটা Dynamically Typed ল্যাঙ্গুয়েজ, এর মানে হচ্ছে যে জাভাস্ক্রিপ্টে আমরা একটা ভেরিয়েবলে বিভিন্ন ধরনের data রাখতে পারি। variable ডিক্লেয়ার করার সময় ডেটা টাইপ স্পেসিফাই করে দিতে হবে না, জাভাস্ক্রিপ্ট নিজেই data type ডিটেক্ট করতে পারে।

*উদাহরণ: *

উপরের উদাহরণে, আমরা x নামের একটি ভ্যারিয়েবল ডিক্লেয়ার করেছি এবং একটি সংখ্যা assign করেছি। পরবর্তীতে আমরা একই ভেরিয়েবলে অন্য ধরনের ডেটা টাইপ যেমন string এবং boolean value assign করেছি এবং এটা জাভাস্ক্রিপ্ট অনুমোদন দেয়।

জাভাস্ক্রিপ্ট কি JIT Compiled এবং Interpreted Language??

*JIT Compiled: *
জাভাস্ক্রিপ্ট কোড স্থানীয়ভাবে মেমোরি তে লোড হতে পারে এবং স্থানীয়ভাবে এক্সিকিউট হতে পারে কম্পাইল প্রক্রিয়ার মাধ্যমে। জাভাস্ক্রিপ্ট ইঞ্জিনের মধ্যে JIT কম্পাইলার থাকে, যা কোডটি রানটাইমে এক্সিকিউট হবার সাথে সাথে কোডটি কম্পাইল করে।
প্রোগ্রাম রান হওয়ার আগে, কোডটি machine code এ কম্পাইল হতে পারে, যাতে প্রোগ্রামটি দ্রুত চলতে পারে।

*Interpreted Language: *
জাভাস্ক্রিপ্ট একটি interpreted language. এটি
Interpreters প্রোগ্রামের সাহায্যে প্রতিটা লাইন বাই লাইন কমান্ড read করে এবং execute করে এবং সেজন্য এটা ফ্লেক্সিবল এবং মডিফাই করা সহজ।

এই ছিল আজকের জাভাস্ক্রিপ্ট এর বেসিক কিছু আলোচনা। পরবর্তীতে অন্য কোনদিন অন্য কোন টপিক নিয়ে হাজির হবো। হ্যাপি কোডিং🎉🎉

K-Means Clustering Step by Step: Beginner-Friendly Bangla Guide

Moriam Akter Swarna — Mon, 12 Jan 2026 08:42:35 +0000

কল্পনা করো, তোমার টেবিলে হাজার হাজার এলোমেলো খেলনা ছড়িয়ে আছে। তুমি চোখ মুদে হাত বুলিয়ে বললে, “এগুলোকে রঙ অনুযায়ী গ্রুপ করে দাও!” — আর হুড়মুড় করে সব লাল একপাশে, নীল আরেকপাশে চলে গেল! এই জাদু করেই K-Means Clustering! নেটফ্লিক্স তোমার পছন্দের মুভি ঠিকনা করে, অ্যামাজন তোমাকে “এটা কিনলে এটাও কিনো” বলে — সবার পেছনে এই অ্যালগরিদমের খেলা।

১. Clustering কী জিনিস? (সহজ করে বলি)

Clustering মানে এলোমেলো ডেটাকে তাদের মিলের ভিত্তিতে দলে ভাগ করা।

মেশিন লার্নিংয়ের ভাষায়: এটি Unsupervised Learning-এর একটি পদ্ধতি।

Supervised Learning: যেখানে টিচার বা লেবেল থাকে (যেমন: ইনপুট = আপেল ছবি, আউটপুট = “আপেল”)।
Unsupervised Learning: এখানে কোনো লেবেল নেই। ডেটাগুলো এলোমেলো ছড়িয়ে থাকে। অ্যালগরিদমকে নিজে থেকেই প্যাটার্ন খুঁজে বের করতে হয়।

বাস্তব উদাহরণ :

কাস্টমার গ্রুপিং: তোমার দোকানে কেউ সোনার গয়না কিনে, কেউ চিপস-বিস্কুট। K-Means বলবে, “এই ১০ জন ‘লাক্সারি ক্রেজি’, ওই ৫০ জন ‘বাজেট হান্টার’!”
নিউজ সর্টিং: হাজার নিউজ হেডলাইন মিশে আছে? এটা স্পোর্টস, ওটা পলিটিক্সে ভাগ করে দেয়।
ইমেজ ম্যাজিক: ডাক্তারের ছবিতে টিউমারটা আলাদা করে বের করে!
Classification-এর সাথে পার্থক্য? Classification-এ আগে থেকে বলা “এটা আপেল বা কমলা”। Clustering-এ বলো না, “দেখি কী কী গ্রুপ বানায়!”

Clustering vs Classification:

Classification: আগে থেকেই জানি কী কী ক্লাস আছে (যেমন: স্প্যাম বা নট-স্প্যাম)।
Clustering: আমরা জানি না কয়টি গ্রুপ হবে বা তাদের নাম কী।

২. Types of Clustering

Clustering অ্যালগরিদম অনেক ধরনের হয়, তবে প্রধান ৩টি হলো:

১. K-Means Clustering: এটি কেন্দ্রবিন্দু (Centroid) নির্ভর। সবচেয়ে জনপ্রিয় এবং দ্রুত।

২. Hierarchical Clustering: এটি গাছের মতো শাখা-প্রশাখা (Dendrogram) তৈরি করে গ্রুপিং করে।

৩. DBSCAN: এটি ডেটার ঘনত্ব (Density) এর ওপর ভিত্তি করে ক্লাস্টার তৈরি করে (যেকোনো শেইপের জন্য ভালো)।

৩. K-Means কেন রাজা?

Clustering-এর অনেক ধরন, কিন্তু K-Means সবচেয়ে জনপ্রিয় কারণ:

সহজ, দ্রুত, বিশাল ডেটাতেও চলে।
অন্যরা: Hierarchical (গাছের মতো ধীর), DBSCAN (ঘনত্ব দেখে, শেপ যাই হোক)।
K-Means তোমার ডেটাকে Kটা দলে ভাগ করে, প্রতি দলের মাঝখানে একটা ‘লিডার’ (Centroid) রাখে।

৪. Mathematical Foundation of K-Means

Dataset Representation
ধরো, আমাদের n-টা ডেটা পয়েন্ট আছে:

X = {x₁, x₂, …, xₙ}

প্রতিটি xᵢ একটা ভেক্টর। যদি 2D হয় (বয়স, আয়):

x₁ = (25, 50000), x₂ = (30, 75000), ইত্যাদি।

Choosing K
আগেই ঠিক করো কয়টা গ্রুপ চাও: K = 3 (ধরি ৩টা ক্লাস্টার)।

সঠিক K খুঁজতে Elbow Method ব্যবহার করব পরে।

Centroid Definition
প্রতি ক্লাস্টারের একটা “লিডার” থাকে — Centroid (μ):

C = {μ₁, μ₂, …, μₖ}

উদাহরণ: μ₁ = (28, 60000) — প্রথম গ্রুপের “গড় মানুষ”।

Distance Calculation
Euclidean Distance (পিথাগোরাস সূত্র):

d(x, μ) = √[ (x₁ — μ₁)² + (x₂ — μ₂)² + … + (x_d — μ_d)² ]

কিন্তু K-Means-এ সাধারণত Squared Distance ব্যবহার করে (√ বাদ দেয়):

||x — μ||² = (x₁ — μ₁)² + (x₂ — μ₂)² + …

উদাহরণ: x=(3,4), μ=(1,1)

||x — μ||² = (3–1)² + (4–1)² = 4 + 9 = 13

Cluster Assignment Step
প্রতিটি xᵢ কোন গ্রুপে যাবে?

যে μⱼ এর কাছে সবচেয়ে কম দূরত্ব:

||xᵢ — μⱼ||² ≤ ||xᵢ — μₖ||² (সব k ≠ j এর জন্য)

অর্থাৎ: xᵢ যাবে সবচেয়ে কাছের centroid-এর গ্রুপে।

Centroid Update Step
সবাই গ্রুপে জয়েন করার পর, নতুন লিডার = গ্রুপের গড়:

μⱼ = (1/|Cⱼ|) × Σ{xᵢ | xᵢ ∈ Cⱼ}

যেখানে:

|Cⱼ| = j-তম গ্রুপে মোট সদস্য সংখ্যা

Σxᵢ = সেই গ্রুপের সব পয়েন্টের যোগফল

উদাহরণ: গ্রুপে ৩টা পয়েন্ট — (2,3), (4,5), (1,1)

μ = [(2+4+1)/3, (3+5+1)/3] = (7/3, 9/3) = (2.33, 3)

Objective Function
K-Means এর মেইন গোল: WCSS কমানো

J = Σⱼ₌₁ᴷ Σ₍ₓᵢ∈𝒞ⱼ₎ ||xᵢ — μⱼ||²

Intuition: প্রতিটি পয়েন্ট তার নিজ গ্রুপের centroid-এর

যত কাছাকাছি থাকবে, J তত ছোট হবে = ক্লাস্টারিং তত ভালো!

J কমতে কমতে স্থির হলে → Algorithm Stop!

Algorithm Flow

র‍্যান্ডম K-টা centroid বেছে নাও (μ₁, μ₂, …, μₖ)
WHILE (J পরিবর্তন হচ্ছে বা max iteration < 100):

a. ASSIGNMENT: প্রতিটি xᵢ → সবচেয়ে কাছের μⱼ

b. UPDATE: নতুন μⱼ = গ্রুপ Cⱼ-এর গড়

c. J calculate করো

J স্থির হলে STOP → Final clusters + centroids

Example & Implementation:

Formula:

Press enter or click to view image in full size

Iteration ১: Initial Centroids

𝜇1=(1,1) 𝜇2=(2,1)

**
**

Clusters: C1: {A}, C2: {B,C,D}

Update Centroids:
New m1: যেহেতু শুধু A আছে, তাই (1, 1)।

New m2: B, C, D এর গড়।

x-avg: (2+4+5)/3 = 3.67
y-avg: (1+3+4)/3 = 2.67
New m2 = (3.67, 2.67)
WCSS: 26.0

Iteration ২: Continue
নতুন 𝜇1=(1,1)), 𝜇2=(3.67,2.67)

Distances:

Clusters: C1: {A,B}, C2: {C,D}

Update Centroids:
𝜇1=(1+22,1+12)=(1.5,1)
𝜇2=(4+52,3+42)=(4.5,3.5)
WCSS: 4.78 (আগের থেকে অনেক কম!)

Iteration ৩: Convergence
নতুন centroids দিয়ে assign করলে clusters একই থাকে। Centroids আর বড় পরিবর্তন নেই, WCSS ~4.5-এ স্থিতিশীল। Stop!

Pseudocode

1. Initialize μ = random K points from X 
2. While not converged:

a. For each x_i in X:

cluster[i] = argmin_j ||x_i — μ_j||²

b. For j=1 to K:

μ_j = mean({x_i | cluster[i]=j})

c. If centroids unchanged or J < epsilon: break

3. Return clusters, μ

এটা লুপ চালিয়ে WCSS minimize করে।

৫. Scratch Implementation

Output: Final centroids: [[1.5 1. ] [4.5 3.5]], Labels: [0 0 1 1], WCSS: ~4.5।

৬. সঠিক K কীভাবে খুঁজব? Elbow Method! 🏃‍♂️
K=1 থেকে 10 চালিয়ে WCSS প্লট করো। গ্রাফটা কনুইয়ের মতো বাঁক নেবে — সেখানেই সেরা K!

৭. ভালো-খারাপ দিক + কখন ফেল করে?
✅ সুপারহিরো পাওয়ার: দ্রুত, সহজ, বিশাল ডেটায় চলে।

❌ দুর্বলতা:

আউটলায়ারে টলে যায়,
শুরুর লিডার ভুল হলে খারাপ রেজাল্ট,
শুধু গোল-গোল ডেটায় ভালো। (রিং-আকারে ফেল করে!)

Implementation of K-means Clustering

🔹 সেকশন ১: লাইব্রেরি ইমপোর্ট করা
K-Means এর জন্য আমাদের ডেটা হ্যান্ডলিং (Pandas), ম্যাথমেটিক্যাল ক্যালকুলেশন (NumPy), ভিজ্যুয়ালাইজেশন (Matplotlib, Seaborn) এবং মেশিন লার্নিং টুলস (Scikit-learn) প্রয়োজন।

import numpy as np

import pandas as pd

import matplotlib.pyplot as plt

import seaborn as sns

from sklearn.cluster import KMeans

from sklearn.preprocessing import StandardScaler

from sklearn.metrics import silhouette_score

🔹 সেকশন ২ ও ৩: ডেটাসেট লোড ও এক্সপ্লোর করা
এখানে আমরা গ্রাহকদের বার্ষিক আয় এবং খরচ করার স্কোর (Spending Score) ব্যবহার করবো।

# ডেটা লোড করা

url = “https://raw.githubusercontent.com/mwaskom/seaborn-data/master/mall_customers.csv"

df = pd.read_csv(url)

# ডেটা দেখা

print(df.head())

print(df.shape)

print(df.columns)

🔹 সেকশন ৪ ও ৫: ফিচার সিলেকশন ও স্কেলিং
K-Means অ্যালগরিদম ইউক্লিডীয় দূরত্বের (Euclidean distance) ওপর ভিত্তি করে কাজ করে। যদি একটি ফিচারের মান অনেক বড় (যেমন: আয়) এবং অন্যটির মান ছোট হয়, তবে বড় মানটি ফলাফলকে প্রভাবিত করবে। তাই StandardScaler দিয়ে সব ফিচারকে একই স্কেলে আনা জরুরি।

🔹** সেকশন ৬: Elbow Method (সঠিক ‘k’ খুঁজে বের করা)**
আমরা জানি না কয়টি ক্লাস্টার করলে সবচেয়ে ভালো হবে। তাই আমরা ১ থেকে ১০ পর্যন্ত ক্লাস্টার সংখ্যা দিয়ে পরীক্ষা করবো এবং Inertia (ক্লাস্টারের ভেতরের দূরত্বের যোগফল) বের করবো।

inertia = []``

K_range = range(1, 11)

for k in K_range:

kmeans = KMeans(n_clusters=k, random_state=42, n_init=10)

kmeans.fit(X_scaled)

inertia.append(kmeans.inertia_)

# প্লট করা

plt.figure(figsize=(8, 5))

plt.plot(K_range, inertia, marker=’o’, linestyle=’ — ‘)

plt.xlabel(‘Number of Clusters (k)’)

plt.ylabel(‘Inertia’)

plt.title(‘Elbow Method to find Optimal k’)

plt.show()

🔹 সেকশন ৭ ও ৮: মডেল ট্রেইনিং ও ভিজ্যুয়ালাইজেশন
সাধারণত এলবো প্লটে যেখানে গ্রাফটি হঠাৎ বাঁক নেয় (কনুইয়ের মতো), সেটিই সেরা k। ধরুন আমাদের ক্ষেত্রে এটি ৫।

# k=5 ধরে মডেল তৈরি

kmeans = KMeans(n_clusters=5, random_state=42, n_init=10)

clusters = kmeans.fit_predict(X_scaled)

# অরিজিনাল ডেটাফ্রেমে ক্লাস্টার লেবেল যোগ করা

df[‘Cluster’] = clusters

# ভিজ্যুয়ালাইজেশন

plt.figure(figsize=(10, 6))

sns.scatterplot(x=’annual_income’, y=’spending_score’, hue=’Cluster’, data=df, palette=’viridis’, s=100)

plt.title(‘Customer Segments (K-Means)’)

plt.show()

🔹 সেকশন ৯: এভালুয়েশন (Silhouette Score)
সিলুয়েট স্কোর বলে দেয় ক্লাস্টারগুলো একে অপরের থেকে কতটা আলাদা। এর মান ১ এর যত কাছে হবে, ক্লাস্টারিং তত ভালো হয়েছে।

score = silhouette_score(X_scaled, clusters)

print(f”Silhouette Score: {score:.2f}”)

মন্তব্য: সাধারণত ০.৫ এর উপরে স্কোর থাকলে সেটি ভালো ক্লাস্টারিং হিসেবে ধরা হয়।

🔹 সেকশন ১০: Reflection Questions

১. কেন স্কেলিং বাধ্যতামূলক?

K-Means দূরত্বের ওপর নির্ভর করে। স্কেলিং না করলে যে ফিচারের মান বড় (যেমন ১,০০,০০০ টাকা আয়), সেটি ছোট মানের ফিচারের (যেমন ১-১০০ স্কোর) চেয়ে বেশি প্রাধান্য পাবে, যা ভুল ফলাফল দেবে।

২. k এর মান খুব বেশি হলে কী হবে?

যদি k খুব বড় হয় (যেমন ডেটা পয়েন্টের সমান), তবে প্রতিটি পয়েন্ট নিজেই একটি ক্লাস্টার হয়ে যাবে। একে Overfitting বলে। এতে ডেটার আসল প্যাটার্ন বোঝা যায় না।

৩. K-Means কি সব ডেটাসেটের জন্য উপযোগী?

না। এটি কেবল গোলাকার (spherical) ক্লাস্টার এবং সমান ঘনত্বের ডেটার জন্য ভালো কাজ করে। যদি ডেটা খুব জটিল বা আঁকাবাঁকা (Non-linear) হয়, তবে K-Means ভালো ফলাফল দেয় না।

What Is Vibe Coding? A Practical Guide to AI-Assisted Development

Moriam Akter Swarna — Sun, 28 Dec 2025 07:26:07 +0000

Introduction

A few months ago, I got stuck on a very small feature.

Nothing fancy.
Just a form, some validation, and a clean UI.

I knew exactly what I wanted to build.
But my brain felt tired.

I kept switching tabs—documentation, Stack Overflow, old projects.
Everything felt slow.

Then I tried something different.

Instead of writing code, I wrote what I wanted in simple English.
I pasted it into an AI tool.

The code came back.
And surprisingly—it worked.

That moment didn’t make me feel replaced.
It made me feel… relieved.

That’s where vibe coding started to make sense.

Not as magic.
Not as cheating.

But as a new way of thinking about development.

What Is Vibe Coding?

Vibe coding is a workflow, not a tool.

It means you focus on your idea and intent, and let AI help translate that into code.

You’re not writing every line by hand.
You’re guiding the code.

Think of it like this:

Traditional coding: “I write code, then test.”
Vibe coding: “I explain my idea, then refine the code.”

You still control the logic.
AI just helps with execution and speed.

A Simple Example

Traditional approach:

Think about the layout
Write HTML
Add CSS
Fix spacing
Debug responsiveness

Vibe coding approach:

You write:

“Create a responsive landing page with a navbar, hero section, and footer using clean HTML and modern CSS.”

AI gives you a starting point.

Now you:

Read the code
Modify it
Improve it

You’re still coding.
Just faster and with less mental pressure.

Why Developers Are Adopting Vibe Coding

Most developers don’t struggle with logic.

They struggle with:

Getting started
Writing the same boilerplate again and again
Remembering syntax
Mental fatigue after long sessions

Vibe coding helps maintain momentum.

When you’re in flow, you code manually.
When you’re stuck, AI helps you move forward.

It’s like having a junior developer who never gets tired.

Example: Boilerplate Fatigue

Instead of manually writing this every time:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Project</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>

You can prompt:

“Create a basic HTML boilerplate for a responsive webpage.”

You save time without skipping understanding.

A Real Coding Workflow Example (Todo App)

Let’s say you want to build a simple Todo App.

Instead of jumping straight into code, you start with intent.

Step 1: Describe the idea

“I want a simple todo app using HTML, CSS, and JavaScript. Users can add, delete, and mark tasks as completed.”

Step 2: Review the output

AI generates something like:

<input id="taskInput" placeholder="New task" />
<button id="addBtn">Add</button>
<ul id="taskList"></ul>

And JavaScript:

const input = document.getElementById("taskInput");
const list = document.getElementById("taskList");

document.getElementById("addBtn").addEventListener("click", () => {
  if (!input.value) return;

  const li = document.createElement("li");
  li.textContent = input.value;
  list.appendChild(li);
  input.value = "";
});

You don’t stop there.

Step 3: Refine

You ask:

“Refactor this using event delegation and add delete support.”

Now you’re learning while building.

That’s vibe coding.

Common Mistakes Beginners Make

Mistake 1: Trusting AI Blindly

AI can:

Miss edge cases
Use outdated patterns
Overcomplicate simple logic

For example:

const add = (...nums) => nums.reduce((a, b) => a + b, 0);

This works—but for beginners, it’s unnecessary.

Clear is better:

function add(a, b) {
  return a + b;
}

Always ask why.

Mistake 2: Skipping Fundamentals

AI won’t save you if you don’t understand:

Semantic HTML
CSS box model
JavaScript basics

Vibe coding amplifies skill.
It doesn’t replace it.

Mistake 3: Writing Vague Prompts

Bad prompt:

“Make a website.”

Good prompt:

“Create a responsive blog layout with a sidebar and main content area using Flexbox.”

Clear input produces better output.

Myths Around Vibe Coding

“AI Will Replace Developers”

No.

AI replaces tasks, not thinking.

Companies hire people who understand systems—not people who type fast.

“Junior Developers Shouldn’t Use AI”

Wrong.

Junior developers should:

Use AI
Learn faster
Ask better questions

The key is learning, not copying.

“It Kills Creativity”

It actually removes boring parts.

You spend more time on:

UX decisions
Architecture
Problem solving

That is creativity.

Practical Tips for Effective Vibe Coding

1. Start With Intent, Not Code

Before opening your editor, ask:

What am I building?
Who is it for?
What should it do?

Then write the prompt.

2. Break Problems Into Small Prompts

Instead of:

“Build a full-stack app”

Do:

“Design the database schema”
“Create REST API endpoints”
“Build frontend UI”

Smaller prompts give better control.

3. Always Refactor AI Code

Ask yourself:

Is this readable?
Is this necessary?
Can I simplify it?

AI output is a draft, not the final version.

4. Use AI as a Code Reviewer

Paste your own code and ask:

“Review this JavaScript code and suggest improvements for readability.”

Example improvement:

if (user?.isLoggedIn) {
  showDashboard();
}

You learn modern patterns through review.

5. Keep a Prompt Journal

Save good prompts.

They become reusable tools.

Over time, your prompts improve—just like your code.

When You Should NOT Use Vibe Coding

Avoid AI when:

Learning syntax for the first time
Practicing algorithms
Preparing for interviews
Debugging deep logical bugs

Example:

function reverseString(str) {
  let result = "";
  for (let i = str.length - 1; i >= 0; i--) {
    result += str[i];
  }
  return result;
}

That struggle matters.

Use AI after, not before.

How Vibe Coding Changed My Learning

I don’t feel blocked anymore.

If I don’t know something:

I ask
I test
I adjust

I build more projects.
I experiment more.

And most importantly—I finish things.

Finished projects matter more than perfect code.

The Future of Vibe Coding

This isn’t a trend.

It’s a shift.

Just like:

IDEs replaced text editors
Git replaced zip files

AI-assisted development will become normal.

The best developers will be:

Strong in fundamentals
Clear in communication
Comfortable guiding AI

An Honest Conclusion

Vibe coding won’t make you a developer overnight.

But it will:

Reduce fear
Increase momentum
Speed up learning

Use it wisely.

Learn deeply.
Build honestly.
Question everything.

If you treat AI as a partner—not a crutch—you’ll grow faster than ever.

And that’s what really matters.

Transaction Rollback in MongoDB: What Actually Happens When Things Go Wrong

Moriam Akter Swarna — Wed, 17 Dec 2025 10:45:44 +0000

The first time I tried to “rollback” data in MongoDB, I thought it would work like SQL.
Something fails → database magically goes back to the previous state. Simple, right?

Wrong.

I had already updated two collections.
The third operation failed.
Now my data was half-updated and half-broken.

That was the day I learned how MongoDB really handles transactions and rollbacks.

If you’re coming from MySQL or PostgreSQL, MongoDB transactions can feel confusing at first.
This post is for that exact confusion.

What rollback means in MongoDB (in plain words)

In simple terms, rollback means undoing changes if something fails.

In MongoDB, rollback only works inside a transaction.
Outside a transaction, MongoDB will not undo anything automatically.

So this is important:

MongoDB does NOT support rollback for normal single operations.

Rollback happens only when:

You start a transaction
Something fails
You abort the transaction

If you don’t use transactions, rollback is your responsibility.

When do you actually need transactions?

MongoDB is document-based.
Many times, one document update is enough.

But transactions matter when:

You update multiple documents
Or update multiple collections
And all changes must succeed together

Real-life example:

You are building a payment system.

Steps:

Deduct money from user wallet
Create an order
Update product stock

If step 2 fails, step 1 must be undone.
That’s where transaction rollback comes in.

Important requirement most beginners miss

Before jumping into code, one hard truth:

MongoDB transactions only work on replica sets or sharded clusters

They do NOT work on standalone MongoDB.

Even on localhost, you must run MongoDB as a replica set.

Many “transaction not working” issues come from this mistake.

Basic transaction flow in MongoDB

The transaction flow is always the same:

Start a session
Start a transaction
Do database operations
Commit if everything is OK
Abort if something fails (rollback)

Think of it like writing on a whiteboard:

Commit = make it permanent
Abort = erase everything you wrote

Simple rollback example (Node.js)

Let’s use a simple example.

We will:

Deduct balance from a user
Create an order
Rollback if anything fails

const session = await mongoose.startSession();

try {
  session.startTransaction();

  await User.updateOne(
    { _id: userId },
    { $inc: { balance: -500 } },
    { session }
  );

  await Order.create(
    [{ userId, amount: 500 }],
    { session }
  );

  await session.commitTransaction();
  session.endSession();

  console.log("Transaction successful");
} catch (error) {
  await session.abortTransaction();
  session.endSession();

  console.log("Transaction rolled back");
}

If any line inside try fails, MongoDB rolls back everything.

Balance deduction? Undone.
Order creation? Gone.

That’s rollback.

What actually happens during rollback?

MongoDB does not “reverse” each query.

Instead:

It keeps all changes isolated inside the transaction
Nothing is written permanently until commitTransaction()
abortTransaction() simply throws everything away

So rollback is fast and safe.

This also means:

Other users cannot see half-done data
Either everything happens or nothing happens

Single document updates don’t need rollback

This is a common misunderstanding.

MongoDB guarantees atomicity at document level.

Example:

db.users.updateOne(
  { _id: 1 },
  { $inc: { balance: -100 } }
)

This update is already atomic.
It will either fully succeed or fully fail.

No transaction needed.
No rollback needed.

Use transactions only when multiple operations are involved.

Common mistakes and myths

Myth 1: MongoDB auto-rollbacks failed queries

False.

If you run multiple updates without a transaction, MongoDB will not rollback anything.

Myth 2: Transactions make MongoDB slow always

Not true.

They add overhead, yes.
But used correctly, they are fine for critical operations.

Just don’t wrap every query in a transaction.

Mistake 1: Forgetting to pass `session`

This is very common.

await User.updateOne({ _id }, { name: "A" }); // ❌ no session

That query is outside the transaction.

Rollback will NOT affect it.

Every query inside a transaction must include { session }.

Mistake 2: Using transactions on standalone MongoDB

If your MongoDB is not a replica set, rollback simply won’t work.

Always check your setup first.

Rollback vs manual compensation

Sometimes transactions are not possible.

Example:

You are calling a payment API
You update MongoDB after payment success

You cannot rollback an external API call.

In those cases, you use manual compensation.

Example logic:

If order creation fails
Call refund API
Update database again

Transactions are great, but they don’t solve everything.

Practical tips from real projects

Tip 1: Keep transactions short
Don’t do heavy logic inside a transaction.
Read, write, commit, exit.

Tip 2: Handle retries
MongoDB may throw transient errors.
Retry the whole transaction if needed.

Tip 3: Log aborted transactions
Rollback is not a failure.
But repeated rollbacks indicate a design issue.

Tip 4: Don’t fear rollback
Rollback is a safety net.
Design assuming things will fail.

A mental model that helps

Think of a MongoDB transaction like a Git branch.

You make changes
Nothing affects main branch
Commit merges changes
Abort deletes the branch

Once I started thinking this way, transactions became simple.

When NOT to use transactions

Avoid transactions when:

You update only one document
You can tolerate small inconsistencies
Performance is extremely critical

MongoDB is flexible.
Not every problem needs rollback.

Final honest advice

MongoDB transactions are powerful, but they are not magic.

Rollback works only when:

You explicitly use transactions
Your setup supports it
You pass the session correctly

If you are a beginner:

First understand document-level atomicity
Then move to transactions

Use rollback as a tool, not a habit.

Once you respect its limits, MongoDB becomes a very reliable database.

And yes, I still forget to pass { session } sometimes.
It happens to all of us.

DEV Community: Moriam Akter Swarna

Understanding API and Fetch in JavaScript (Step by Step Explanation)

How API Works?

Flowটা এমন:

JavaScript দিয়ে API Implementation

এখানে আসলে কী হচ্ছে?

Step 1: fetch()

Step 2: First .then()

Step 3: Second .then()

Example: API Response Based UI Update

এখানে কী হলো?

তাহলে .then().then() কেন?

Promise কীভাবে কাজ করছে?

Final Thoughts

Array vs Object Destructure

জাভাস্ক্রিপ্টে ডিস্ট্রাকচারিং কি?

কোডে ডিস্ট্রাকচারিং এর গুরুত্ব:

Array Destructuring কি?

Array Destructuring এর সিনট্যাক্স:

Array Destructuring এর ব্যবহার:

অ্যারের উপাদানগুলিকে ভেরিয়েবলে extract করতে:

অ্যারে থেকে নির্দিষ্ট উপাদান বাদ দিতে:

অ্যারের উপাদানগুলিকে নতুন নাম দিতে:

অ্যারের অবশিষ্ট উপাদানগুলি পেতে:

ডিফল্ট মান ব্যবহার করে undefined মান হ্যান্ডেল করা:

নেস্টেড অ্যারের মধ্যে ডিস্ট্রাকচারিং:

Object Destructuring কি?

Object Destructuring এর সিনট্যাক্স:

অবজেক্ট ডিস্ট্রাকচারিং এর ব্যবহার:

অবজেক্টের প্রোপার্টিগুলিকে ভেরিয়েবলে এক্সট্রাক্ট করতে:

অবজেক্ট থেকে নির্দিষ্ট প্রোপার্টি বাদ দিতে:

অবজেক্টের প্রোপার্টিগুলিকে নতুন নাম দিতে:

ডিফল্ট মান ব্যবহার করে undefined মান হ্যান্ডেল করা:

নেস্টেড অবজেক্টের মধ্যে ডিস্ট্রাকচারিং:

Array / Object ডিস্ট্রাকচারিংয়ের benifits:

অ্যারে এবং অবজেক্ট ডিস্ট্রাকচারিং এর মধ্যে পার্থক্য:

1. Access Element:

2. Order:

3. Default Value:

4. ব্যবহারের ক্ষেত্র:

What is JavaScript??

JavaScript কি??

কেন JavaScript ব্যবহার করব??

জাভাস্ক্রিপ্ট এর Features:

জাভাস্ক্রিপ্ট এর সুবিধা সমূহ:

জাভাস্ক্রিপ্ট এর কিছু অসুবিধা:

কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করা যায়??

কেন JavaScript Dynamically Typed Language??

জাভাস্ক্রিপ্ট কি JIT Compiled এবং Interpreted Language??

K-Means Clustering Step by Step: Beginner-Friendly Bangla Guide

১. Clustering কী জিনিস? (সহজ করে বলি)

বাস্তব উদাহরণ :

২. Types of Clustering

৩. K-Means কেন রাজা?

৪. Mathematical Foundation of K-Means

Example & Implementation:

Implementation of K-means Clustering

মন্তব্য: সাধারণত ০.৫ এর উপরে স্কোর থাকলে সেটি ভালো ক্লাস্টারিং হিসেবে ধরা হয়।

What Is Vibe Coding? A Practical Guide to AI-Assisted Development

Introduction

What Is Vibe Coding?

A Simple Example

Why Developers Are Adopting Vibe Coding

Example: Boilerplate Fatigue

A Real Coding Workflow Example (Todo App)

Step 1: Describe the idea

Step 2: Review the output

Step 3: Refine

Common Mistakes Beginners Make

Mistake 1: Trusting AI Blindly

Mistake 2: Skipping Fundamentals

Mistake 3: Writing Vague Prompts

Myths Around Vibe Coding

“AI Will Replace Developers”

“Junior Developers Shouldn’t Use AI”

“It Kills Creativity”

Practical Tips for Effective Vibe Coding

1. Start With Intent, Not Code

2. Break Problems Into Small Prompts

3. Always Refactor AI Code

Step 2: First `.then()`

Step 3: Second `.then()`

তাহলে `.then().then()` কেন?

Mistake 1: Forgetting to pass `session`