খুব ভালো বলেছেন! চলুন, নিচের এই লাইনটা:
const filtered = statuses.filter((status) =>
status.toLowerCase().includes(query)
);
এখন আমরা এই লাইনের deep dive (গভীর ব্যাখ্যা) করব, যেন প্রতিটি অংশ একদম পরিষ্কার হয়।
🔍 লাইনটা ব্রেক করে ধাপে ধাপে ব্যাখ্যা করি:
✅ 1. statuses.filter(...)
- এখানে
statuses
হচ্ছে একটি array (যেখানে ১০টি ফেসবুক স্ট্যাটাস আছে)। .filter()
হলো JavaScript এর একটি array method — এটা একটা নতুন অ্যারে রিটার্ন করে, যেগুলো নির্দিষ্ট কন্ডিশন পূরণ করে।
📌 বাংলা ভাষায়:
.filter()
বলছে — “এই array-এর প্রতিটা item দেখে যাও, এবং যেগুলো আমার দেওয়া শর্ত (condition) পূরণ করে, শুধু সেগুলো নিয়ে একটা নতুন array তৈরি করো।”
✅ 2. status => ...
- এটি একটি arrow function।
status
মানে হলো,statuses
array-এর প্রতিটি item — যেমন:"React is awesome!"
,"Life is beautiful"
ইত্যাদি।
📌 সহজভাবে:
filter()
একে একে প্রতিটি স্ট্যাটাস status
নামে পাঠায়, আর এই ফাংশনে বলা হয় — “এই স্ট্যাটাসটা যদি শর্তে মিলে যায়, তাহলে এটা নতুন filtered array-এ রাখো।”
✅ 3. status.toLowerCase()
- কারণ আমরা চাই case-insensitive (বড় হাত vs ছোট হাত) সার্চ — তাই স্ট্যাটাসকে ছোট হাতের অক্ষরে রূপান্তর করি।
- উদাহরণ:
"React is awesome!"
→"react is awesome!"
📌 এতে লাভ হলো — ইউজার যদি react
, React
, REACT
, বা reAcT
যেভাবেই টাইপ করুক না কেন, মিল খুঁজে পাবে।
✅ 4. .includes(query)
- এটি চেক করে,
status.toLowerCase()
এর মধ্যেquery
(ইনপুটে টাইপ করা শব্দ/অক্ষর) আছে কিনা। - যদি থাকে, তাহলে
true
রিটার্ন করে → মানে, এই status ফিল্টার রেজাল্টে থাকবে।
📌 উদাহরণ:
ইউজার লিখছে "rea"
স্ট্যাটাস হলো "React is awesome!"
→ "react is awesome!".includes("rea")
→ true
🔁 চূড়ান্ত ব্যাখ্যা:
const filtered = statuses.filter((status) =>
status.toLowerCase().includes(query)
);
এই কোডের কাজ:
statuses
অ্যারেতে যতগুলো স্ট্যাটাস আছে, সব একে একে নিয়ে চেক করে,- ইনপুটে টাইপ করা অক্ষর (query) যদি সেই স্ট্যাটাসের মধ্যে থাকে,
- তাহলে সেই স্ট্যাটাসকে
filtered
নামে নতুন অ্যারেতে রেখে দেয়।
🧠 Bonus Tip:
এই কোড লাইভ সার্চের জন্য efficient কারণ:
.filter()
ফাস্ট এবং ইনপুট পরিবর্তনের সাথে সাথে সাথে সাথে ফিল্টার করে রেজাল্ট দেখায়।toLowerCase()
+includes()
মিলিয়ে সার্চকে কেস ইনসেন্সিটিভ ও পার্শিয়াল করে তোলে।
আপনি চাইলে আমি এই .filter()
+ .includes()
প্রক্রিয়াটা চিত্র বা ডায়াগ্রামে দেখাতে পারি। দরকার হলে বলবেন?