JavaScript Basics Fundamentals
স্বাগতম! তুমি হয়তো ভাবছ, "Variables আর Data Types তো আমি পারি, এগুলো আবার পড়ার কী আছে?" একজন জুনিয়র ডেভেলপার কোড লেখে, কিন্তু একজন সিনিয়র ডেভেলপার কোড বোঝে। আমরা এই অধ্যায়ে জাভাস্ক্রিপ্টের একদম গোঁড়ায় হাত দেব, যাতে তোমার ভিত্তিটা এতটাই শক্ত হয় যে কোনো ইন্টারভিউ বা আর্কিটেকচারাল সিদ্ধান্তে তুমি আটকে না যাও।
চলো, একদম ভেতর থেকে জাভাস্ক্রিপ্টকে চিনি।
1. JavaScript আসলে কী? (Beyond the Definition)
বইয়ের ভাষায়: JavaScript হলো একটি high-level, dynamic, interpreted programming language।
কিন্তু বাস্তবে এর ক্ষমতা অনেক বিশাল। এটি একমাত্র ভাষা যা Full Stack ইকোসিস্টেম কন্ট্রোল করতে পারে।
এটি মূলত ৩টি ভিন্ন জগতে রাজত্ব করে:
১. Browser (The Client Side)
Chrome, Firefox বা Safari—এদের সবার পেটে একটি করে ছোট "মস্তিষ্ক" বা Engine আছে যা JS বুঝতে পারে।
কাজ: DOM ম্যানিপুলেশন (HTML বদলানো), ইভেন্ট হ্যান্ডেলিং (ক্লিক, স্ক্রল), এবং ইউজারের ব্রাউজারে সাময়িক ডেটা সেভ করা।
২. Server (The Back-end with Node.js)
২০০৯ সালের আগে JS শুধু ব্রাউজারে বন্দি ছিল। রায়ান ডাল (Ryan Dahl) ভাবলেন, "ব্রাউজারের ইঞ্জিনটা (V8) যদি কম্পিউটারে ইন্সটল করি?" ব্যাস, জন্ম হলো Node.js এর।
কাজ: API তৈরি, ডেটাবেস কানেকশন, ফাইল সিস্টেম কন্ট্রোল। এখন JS দিয়ে তুমি পুরো সার্ভার চালাতে পারো।
৩. Beyond Web (Desktop/Mobile)
Mobile: React Native দিয়ে তুমি iOS এবং Android অ্যাপ বানাচ্ছ।
Desktop: Electron.js দিয়ে VS Code, WhatsApp Desktop, Discord তৈরি হয়েছে। ভাবা যায়? এগুলো সব JS দিয়ে তৈরি!
2. JavaScript কীভাবে কাজ করে? (The Execution Model)
Senior Mindset:
ইন্টারভিউতে প্রায়ই জিজ্ঞেস করা হয়, "JS তো Single Threaded, তাহলে সে একসাথে হাজার হাজার রিকোয়েস্ট হ্যান্ডেল করে কীভাবে?"
Single-Threaded মানে কী?
সহজ কথায়, জাভাস্ক্রিপ্ট একবারে মাত্র একটি কাজই করতে পারে। তার হাত একটিই।
তাহলে Magic টা কোথায়? (Non-blocking I/O)
চিন্তা করো একটি রেস্টুরেন্টের কথা:
- Waiter (JS Engine): একজনই ওয়েটার।
- Kitchen (Web APIs/Node APIs): যেখানে রান্না (কাজ) হয়।
Scenario: তুমি কফি অর্ডার দিলে। ওয়েটার অর্ডার নিয়ে কিচেনে দিয়ে আসলো। এখন কফি হতে ৫ মিনিট লাগবে। ওয়েটার কি কিচেনের দরজায় ৫ মিনিট দাঁড়িয়ে থাকবে? না! সে অন্য টেবিলে গিয়ে আরেকটি অর্ডার নেবে। যখন কফি রেডি হবে, কিচেন থেকে বেল বাজবে (Callback Queue), তখন ওয়েটার কফিটা সার্ভ করবে।
এভাবেই Event Loop এর মাধ্যমে জাভাস্ক্রিপ্ট তার Single Thread দিয়েই হাজার হাজার কাজ Asynchronous উপায়ে হ্যান্ডেল করে। আমরা পরে Async/Await অধ্যায়ে এর গভীরে যাব।
3. Variables: let, const, var (The Evolution)
ভেরিয়েবল ডিক্লেয়ার করার সময় শুধু সিনট্যাক্স জানলে হবে না, মেমোরিতে কী ঘটছে সেটা বুঝতে হবে।
| Keyword | Reassignable? | Scope | Senior Recommendation |
|---|---|---|---|
| const | ❌ না | Block {} | Default choice. সবসময় এটি ব্যবহার করবে। |
| let | ✅ হ্যাঁ | Block {} | যখন ভ্যালু পরে বদলানোর দরকার হবে শুধু তখন। |
| var | ✅ হ্যাঁ | Function 🏠 | ❌ Avoid. এটি বাগ (bug) তৈরির কারখানা। |
⚠️ var কেন ক্ষতিকর? (Hoisting & Scope Issue)
var ব্লক স্কোপ মানে না, সে দেয়াল (curly braces {}) ভেদ করে বাইরে চলে আসে।
if (true) {
var tricky = "I am outside!";
}
console.log(tricky); // Output: "I am outside!" (ভয়ংকর ব্যাপার!)কিন্তু let বা const হলে Error দিত, যা কোডকে সুরক্ষিত রাখে।
💡 Pro Tip: const কি আসলেই অপরিবর্তনীয়?
Primitive ডেটার ক্ষেত্রে হ্যাঁ, কিন্তু Object/Array এর ক্ষেত্রে না!
const user = { name: "Shagor" };
user.name = "Rahim"; // ✅ কাজ করবে!
console.log(user); // { name: "Rahim" }
// user = { name: "Karim" } // ❌ Error! পুরো বক্সটা বদলানো যাবে না।Decision: const শুধু মেমোরি রেফারেন্স (Address) লক করে রাখে, ভেতরের ভ্যালু নয়।
4. Data Types (Memory Management)
জাভাস্ক্রিপ্টে ডেটা টাইপ বোঝা মানে মেমোরি ম্যানেজমেন্ট বোঝা। এটি দুই প্রকার:
A) Primitive Types (Stored in Stack)
এরা খুব সাধারণ এবং ওজনে হালকা। ভ্যালু সরাসরি ভেরিয়েবলের মধ্যে থাকে।
String, Number, Boolean, Null, Undefined, Symbol, BigInt.
let x = 10;
let y = x;
x = 20;
console.log(y); // 10B) Reference Types (Stored in Heap)
এরা ওজনে ভারী এবং জটিল। যেমন: Object, Array, Function.
ভেরিয়েবলের ভেতর থাকে মেমোরির ঠিকানা (Reference/Address)।
Interview Question: নিচের কোডটির আউটপুট কী এবং কেন?
let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2.push(99);
console.log(arr1); // Output: [1, 2, 3, 99] <-- 😲 arr1 ও বদলে গেছে!কারণ: arr1 এবং arr2 মেমোরির একই রুমের চাবি শেয়ার করছে।
5. Operators & Truthy/Falsy
মৌলিক +, -, * সবাই পারে। তোমাকে ফোকাস করতে হবে Comparison এবং Logical অপারেশনে।
== vs === (The Strictness)
- == শুধু ভ্যালু চেক করে (টাইপ কনভার্ট করে নেয়)।
- === ভ্যালু এবং টাইপ দুটোই চেক করে। (Always use this!)
Logical Magic (Short-circuiting)
সিনিয়র কোডে তুমি প্রায়ই এমন দেখবে:
const displayName = user.name || "Guest";
isLoggedIn && showDashboard();এটি if-else লেখার স্মার্ট এবং সংক্ষিপ্ত রূপ।
6. Type Conversion & Coercion (JS's Weird Parts)
জাভাস্ক্রিপ্ট অনেক সময় বেশি স্মার্ট হতে গিয়ে অদ্ভুত আচরণ করে। একে বলা হয় Coercion (জোর করে টাইপ বদলে ফেলা)।
Implicit Coercion (অদৃশ্য পরিবর্তন)
console.log("5" + 5); // "55"
console.log("5" - 5); // 0
console.log(true + 1); // 2উপদেশ: সবসময় Number() বা String() দিয়ে Explicit Convert করবে।
7. Debugging: Beyond console.log
জুনিয়ররা শুধু console.log ব্যবহার করে। সিনিয়ররা টুলের ব্যবহার জানে।
console.table():
বড় অ্যারে বা অবজেক্ট দেখার জন্য দারুণ।
console.table(users);console.error() / console.warn():
কনসোলে লাল বা হলুদ রঙে মেসেজ দেখায়।
Debugger Keyword:
debugger; লিখে দিলে ব্রাউজার সেখানে কোড থামিয়ে দেবে।
📝 অধ্যায় ১ সারাংশ (Summary)
আজ আমরা যা শিখলাম যা তোমাকে অন্যদের চেয়ে এগিয়ে রাখবে:
- ✓ Engine: JS শুধু ব্রাউজারে নয়, সার্ভার ও মোবাইলেও চলে।
- ✓ Single Thread: ওয়েটার এনালজি (কিভাবে কাজ জমে থাকে না)।
- ✓ Variables: var কেন বিপজ্জনক এবং const কেন অবজেক্টের ভ্যালু বদলাতে দেয়।
- ✓ Memory: Primitive (Copy value) vs Reference (Copy Address) এর পার্থক্য।
- ✓ Coercion: '5' + 5 এর ভুতুড়ে আচরণ থেকে সাবধান থাকা।
Next Step: "Execution Context & Scope Chain" এর গভীরে ডুব দেব!