Chapter 3: জাভাস্ক্রিপ্ট ডেটা টাইপ-Javascript Data Type

3-1: Type দেখে হাইপ

এইবার মজার একটা বিষয় বলি। তুই তো অলরেডি খেয়াল করেছিস, console.log-এর ভিতরে ভেরিয়েবলের নাম লিখলে সেই ভেরিয়েবলের মান আউটপুট হিসেবে দেখায়। তবে console.log-এর পর ব্র্যাকেটের ভিতরে যদি ভেরিয়েবলের নামের আগে typeof লিখে দিস, তাহলে কী হয়? দেখ কী হয়।

const passed = false;
console.log(typeof passed);

Output: boolean

তাহলে ভেরিয়েবলের মান আউটপুট হিসেবে না দেখিয়ে সেটা কী ধরনের ভেরিয়েবল, সেটা বলবে। যেমন, ওপরের passed ভেরিয়েবল যে boolean টাইপ ভেরিয়েবল, সেটাই বলবে। কারণ, এই ভেরিয়েবলের মান true অথবা false আছে।

তুই একে বিভিন্নভাবে প্র্যাকটিস করতে পারিস:

const country = "Bangladesh";
const passed = false;
const price = 555;

console.log(typeof country);
console.log(typeof passed);
console.log(typeof price);

Output: string boolean number

আমরা ভেরিয়েবলের কয়েকটা টাইপ জানতে পারলাম, যেমন number, string, boolean এবং সেগুলোর টাইপ কীভাবে দেখতে হয়, তা দেখলাম। এগুলো তুই নিজে নিজে বিভিন্নভাবে এখন প্র্যাকটিস করতে পারবি। বিভিন্ন ভ্যালু দিবি, বিভিন্ন ধরনের আউটপুট দেখার চেষ্টা করবি। সেগুলো আবার কোন টাইপের ভেরিয়েবল, সেটা আউটপুটে দেখবি। আমরা পরবর্তীতে আরও নতুন নতুন জিনিস শিখব।

ভেরিয়েবলের ধরন:

ভেরিয়েবল বিভিন্ন ধরনের হতে পারে। যেমন:

• সংখ্যা (Number): 1, 2, 3, 4, 5 ইত্যাদি।
• স্ট্রিং (String): "বাংলা", "English", "Hello World" ইত্যাদি।
• বুলিয়ান (Boolean): true, false।

Javascript Data Type Practice:

1. "typeof" ব্যবহার করে প্রোগ্রাম লিখে দেখ, কোন ভেরিয়েবলের মান কী ধরনের। ধর, একটা ভেরিয়েবল "price" ডিক্লেয়ার কর, যার মান 555, এখন console-এ এই টাইপ চেক কর।

2. একটা ভেরিয়েবল "learning" ডিক্লেয়ার কর, যার মান true, আর সেটা console.log() দিয়ে আউটপুট কর। পরে "typeof" ব্যবহার করে দেখ, এটা কী ধরনের ভেরিয়েবল।

3. megaCity নামক একটা ভেরিয়েবলের মধ্যে মান হিসেবে "Dhaka" আছে। এইবার "typeof" ব্যবহার করে দেখ, এই ভেরিয়েবলটা কী ধরনের।

4. খুব কাকফাটা গরমে কপালে হাত দিয়ে দেখলি, গা পুড়ে যায় যায় অবস্থা। সেই মুহূর্তেই তুই "temperature" নামে একটা ভেরিয়েবল ডিক্লেয়ার করলি, যার মান 102.5। এটা কী ধরনের ভেরিয়েবল, সেটা "typeof" দিয়ে চেক কর।

5. ক্ষিধার চোটে তুই "isHungry" নামে একটা ভেরিয়েবল বানায় ফেললি, আর সেটার মান true। এখন console.log() আর "typeof" ব্যবহার করে এর টাইপ দেখ।

6. একটা ভেরিয়েবলের নাম "isRich", যার মান true। এখন console-এ এইটার টাইপ চেক কর।

3-2: Let দিয়ে শুরু, বদলাবে গুরু

দোস্ত, কিছুক্ষণ আগে বলছিলি, ভেরিয়েবল ভেরি করতে পারে। কিন্তু ভেরিয়েবল ডিক্লেয়ার করার সময় ভেরিয়েবলের নামের আগে const লাগায় দিছস। আর const মানে হচ্ছে ফিক্সড বা চেইঞ্জ হতে পারবে না। তাই এইটা নিয়ে খটকা লাগতেছে। ভেরিয়েবল কি ভেরি করতে পারে, মান কি চেইঞ্জ হতে পারে?

— অবশ্যই ভেরিয়েবলের মান চেইঞ্জ হইতে পারবে। মানুষের মনের মতন যখন দরকার, তখন চেইঞ্জ করতে পারবি। আমি ভাবছিলাম, এইটা নিয়ে একটু পরে আলোচনা করব। এখন ক্ষিধা লাগছে। কিছু খেয়ে আলোচনা করব।

আগে বল, তারপর আমি না হয় তোকে সিঙ্গারা-সমুচা খাওয়াব।

শুন, ভেরিয়েবল লেখার সময় তোকে আগে থেকে চিন্তা করতে হবে, এই ভেরিয়েবলের মান কি চেইঞ্জ হতে পারে, না-কি হবে না। যদি মনে হয়, চেইঞ্জ হবে না, তাহলে সেই ভেরিয়েবল লেখার সময় const দিয়ে লেখবি। কারণ, const জিনিসটা আসছে constant শব্দ থেকে। আর constant শব্দের মানে হচ্ছে ফিক্সড। যেটা পরিবর্তন হবে না।

আর যদি মনে হয়, এই ভেরিয়েবলের মান চেইঞ্জ হতে পারে, তাহলে সেই ভেরিয়েবল ডিক্লেয়ার করার সময় const না লিখে const-এর জায়গায় let দিয়ে দিবি। তখনই জাভাস্ক্রিপ্ট এই ভেরিয়েবলের মান চেইঞ্জ করতে দিবে।

যেমন:

let price = 35;
price = 45;
console.log(price);

Output: 45

এখানে প্রথম লাইনে price ভেরিয়েবলটি প্রথমে ডিক্লেয়ার করা হয়েছে। তাই প্রথম লাইনে let ইউজ করা হইছে। কিন্তু দ্বিতীয় লাইনে price-এর আগে let লেখা হয়নি। না লেখার কারণ হচ্ছে, price নামে নতুন কোনো ভেরিয়েবল ডিক্লেয়ার করা হচ্ছে না; বরং আগের price নামে যে ভেরিয়েবল আছে, সেটার মান চেইঞ্জ বা পরিবর্তন হচ্ছে। তাই সেটার নামের আগে let লেখা হয়নি।

অর্থাৎ তুই যদি কোনো ভেরিয়েবলের মান চেইঞ্জ করতে চাস, তাহলে একদম প্রথমবার let দিয়ে ভেরিয়েবল ডিক্লেয়ার করবি। তারপর যতবার সেই ভেরিয়েবলের মান চেইঞ্জ করতে চাস, ততবার সেই ভেরিয়েবলের নাম ইউজ করবি। তবে প্রথমবার ছাড়া আর কখনো সেই ভেরিয়েবলের নামের আগে let লিখবি না।

আরও একটা উদারহণ দেখ:

let balance = 500;
balance = 400;
console.log(balance);

Output: 400

যখন ভেরিয়েবলের মান চেইঞ্জ করা লাগবে, তখন let দিয়ে ভেরিয়েবলের ডিক্লেয়ার না করে const দিয়ে লিখে তারপর মান চেইঞ্জ করতে চাইলে তখন কাজ হবে না; বরং তোকে এরর দিবে। আর এররে লেখা থাকবে—

const name = "Kala Mia";
name = "Lal Mia";

Uncaught TypeError: Assignment to constant variable.

এইটা দেখলে সাথে সাথে যেই ভেরিয়েবলের মান চেইঞ্জ করতে চাস বা নতুন আরেকটা মান সেট করতে চাস, সেই ভেরিয়েবল প্রথম যেখানে ডিক্লেয়ার করা হইছে, সেখানে গিয়ে জাস্ট const-এর পরিবর্তে let লিখে দিবি। তাহলেই কিচ্ছা খতম।

আপাতত let আর const-এর চক্করে মাথা চক্রাকারে ঘুরাইস না। এই জিনিস নিয়ে আমি আবার বিস্তারিত আলোচনা করব।

জাস্ট মনে রাখবি: let দিলে চেইঞ্জ হতে পারে, const দিলে চেইঞ্জ হবে না。

এইটুক বুঝলে আমাকে সিঙ্গারা-সমুচার পর তরমুজ খাওয়াবি।

Javascript let, const Practice:

1. তোর বর্তমান বয়স age নামে একটি ভেরিয়েবলে রাখ। কনসোলে প্রিন্ট কর। তারপর age ভেরিয়েবলে নতুন মান সেট কর এবং আবার কনসোলে প্রিন্ট কর।

2. তোর পকেটে এখন 500 টাকা আছে, pocketMoney নামে একটি ভেরিয়েবলে রাখ। পরে pocketMoney-এর মান 150 সেট কর এবং কনসোলে প্রিন্ট কর।

3. তুই 4 ঘণ্টা পড়াশোনা করার পরিকল্পনা করেছিস, studyTime নামে একটি ভেরিয়েবলে রাখ। পরে studyTime-এর মান আপডেট করে তুই আসলেই আজকে যত ঘণ্টা পড়াশোনা করছস, সেটা সেট কর। মান যদি শূন্য হয়, তাহলে 0-ই সেট কর এবং কনসোলে দেখ।

4. তোর মোট 3 জন বন্ধু আছে, friendsCount নামে একটি ভেরিয়েবলে এই সংখ্যা রাখ। পরে তোর 2 জন ফ্রেন্ড তোকে ছেড়ে চলে গেল। এখন friendsCount-এর মান আপডেট কর এবং কনসোলে সেটার আউটপুট দেখ

5. তুই একটা নতুন ফোন কিনছিলি 25000 টাকা দিয়ে। সেটা নিয়ে একটা ভেরিয়েবল ডিক্লেয়ার কর। আর এক মাস পর সেই ফোন বিক্রি করতে গিয়েই দেখস, দাম দিতে চায় 12000 মাত্র, কী আর করবি! phonePrice নামে একটি ভেরিয়েবলের মান প্রথমে 25000 দিবি। তারপর সেটাকে 12000 দিয়ে আপডেট কর এবং কনসোলে দেখা।

6. তোদের ক্লাসে 40টা চেয়ার আছে। কয়দিন পর 2টা চেয়ারের পা ভেঙে গেল। chairsCount নামে একটি ভেরিয়েবলে এই মান আপডেট কর। আরও কয়দিন পর পাশের রুমের সিনিয়র ভাইয়ারা এসে 6টা চেয়ার নিয়ে গেছে। এইবারও chairsCount-এর মান আপডেট কর এবং কনসোলে ফাইনাল মান আউটপুট করে দেখ।

7. তুই আজকে 3 ঘণ্টা খেলা করার পরিকল্পনা করেছিস, playTime নামে একটি ভেরিয়েবলে রাখ। পরে playTime-এর মান আপডেট করে আসলেই তুই কত ঘণ্টা খেলা করেছিস, সেটি সেট কর। যদি তুই না খেলিস, তাহলে playTime-এর মান 0 সেট কর এবং কনসোলে দেখ।

3-3: Comment-এর সিমেন্ট

সিঙ্গারা খেতে খেতে জাভেদ বলল, সব সময় যে কোড লিখবি, এমন না। মাঝেমধ্যে কোডের মাঝে মাঝে কিছু কথা বা কিছু তথ্য লিখে রাখার দরকার পড়বে। এইটা সাধারণত কোড বুঝার জন্য হেল্প করে। এমন হতে পারে, কোডটা একটু ট্রিকি বা কোড দেখে বুঝা যাচ্ছে না, কী কাজ করবে। তখন বাড়তি কিছু নোটস বা তথ্য লিখে রাখলে কোড বুঝতে সুবিধা হয়।

এই বাড়তি নোট কিন্তু কোড না। এই বাড়তি নোট কোনো আউটপুট দেখাবে না বা কোডের ডাইরেক্ট কাজে লাগবে না। তবে কোড বুঝার জন্য কাজে লাগবে।

এই কাজটা আমরা অনেক সময় করি। যেমন, বই পড়ার সময় বইয়ের লেখার ফাঁকে ফাঁকে বা সাইডে বা কোণার মধ্যে অনেকেই বিভিন্ন নোটস, চিরকুট বা এক্সট্রা কিছু কথা লিখে রাখে। পরবর্তীতে ওই জিনিসগুলো বুঝার জন্য কাজে লাগে।

কোডের মধ্যে মাঝেমধ্যে একটু নোটস বা কথা লিখে রাখার বিষয়কে কমেন্টস (comments) করা বলে।

কমেন্টস কোনো কোড না। এইগুলা কোড হিসেবে রান হবে না। কোনো আউটপুট দিবে না। শুধু ডেভেলপার দেখার জন্য বা বুঝার জন্য বা কী করতেছে, সেটা ফিউচারে দেখলে যেন বুঝতে পারে বা একজনের কোড আরেকজন দেখলে যেন বুঝতে সুবিধা হয়।

অনেক সময় ভেরিয়েবলের মান দেখেও বুঝা যায় না বা কোনো কারণে কোড একটু জটিল হয়ে যায়, তখন কমেন্ট খুব কাজে লাগে। এ ছাড়াও কোডের কোনো জায়গায় একটু নতুন জিনিস আছে, সেটা বুঝানোর জন্য কমেন্ট খুব কাজে দেয়।

এক লাইনের কমেন্ট

যেমন ধর, একটা ভেরিয়েবল আছে।

const userLevel = 4;

এখন এইখানে userLevel-এর মান 4 বলতে আসলে কী বুঝায়, সেটা কিন্তু ক্লিয়ার না। হতে পারে আমাদের এইখানে অনেক ধরনের ইউজার আছে। তাদের মধ্যে হয়তো 4 লেভেলের ইউজার মানে একজন অ্যাডমিন। সে ক্ষেত্রে নতুন কেউ কোড দেখলে বা অনেক দিন পর নিজেই নিজের কোড দেখলে বুঝতে পারবে না। সে ক্ষেত্রে ছোট একটা কমেন্ট লিখে রাখলে খুবই কাজে দেয়।

কমেন্ট লেখার সবচেয়ে সহজ উপায় হচ্ছে, লাইনের শুরুতে দুইটা ফরওয়ার্ড স্ল্যাশ চিহ্ন (পরপর দুইবার কোনো গ্যাপ ছাড়া), তারপর দুইটা স্ল্যাশের পর যা খুশি লিখতে পারবি। সেটাই কমেন্ট হয়ে যাবে।

// make user admin

এই কোডের কোনো আউটপুট থাকবে না। তাই ভেরিয়েবল এবং কমেন্টসহ দেখতে এমন হবে—

// make user admin
const userLevel = 4;

আবার কখনো কখনো কোড করার সময় কোনো একটা লাইন কোড বন্ধ করে আউটপুট চেক করতে চাইলে সেই লাইন ডিলিট বা রিমুভ করা যায়। কমেন্টও করে রাখতে পারে। কোনো কোডের লাইনের আগে দুইবার ফরওয়ার্ড স্ল্যাশ দিলে সেই লাইন কিন্তু কমেন্ট হয়ে যাবে। আর কমেন্ট হয়ে গেলে সেই লাইনের কোড কাজ করবে না।

const price = 100;
// price = 50;
console.log(price);

output: 100;

অনেক লাইনের কমেন্ট

মাঝে মাঝে তোর মাথায় এত কিছু চলে, একটা লাইনে লেখা সম্ভব না, তখনই অনেক লাইনের কমেন্ট লিখতে হয়। সে ক্ষেত্রে প্রত্যেক লাইনের শুরুতে দুইটা করে স্ল্যাশ চিহ্ন দিতে পারস—

// Total number of items in the shopping cart.
// This value is initially set to 0 because the user hasn't added any items yet.
// It will increase whenever the user adds an item to the cart.

let totalItems = 0;

কখনো যদি অনেক লাইনের কমেন্ট লেখার দরকার হয়, কিন্তু প্রত্যেক লাইনে দুইটা করে ফরওয়ার্ড স্ল্যাশ লিখতে না চাস, তাহলেও একটা সমাধান আছে। সেটা হচ্ছে— একদম কমেন্ট লেখার শুরুতে স্ল্যাশ(/) দিয়ে একটা এস্টেরিস্ক (*) সিম্বল দিবি। স্ল্যাশ আর এস্টেরিস্ক সিম্বলের মধ্যে কোনো গ্যাপ দিবি না।

তারপর একদম পুরা কমেন্ট লেখা শেষ হওয়ার পর একটা এস্টেরিস্ক (*) এবং তারপর একটা স্ল্যাশ দিয়ে দিবি। তাহলেই হবে নিচের মতো করে।

/*
 This variable stores the maximum number of attempts a user is allowed
 to make while logging into their account. It is set to 3. If the user exceeds
 this limit, their account will be temporarily locked.
*/

let maxLoginAttempts = 3;

যদিও ভেরিয়েবলের নাম এমনভাবে দেয়া উচিত, যাতে নাম দেখে বুঝা যায়, এইটা কী জিনিস। তবে এইটা সব সময় করা সম্ভব হয় না। তখন কমেন্ট খুব দরকারি হয়ে ওঠে।

তা ছাড়া কমপ্লেক্স কোড নিয়ে কাজ করার সময় কমেন্ট করা খুবই দরকারি হয়ে ওঠে।

Practice:

1. তুই score নামে একটা ভেরিয়েবল লিখ। এখন এইটা কীসের স্কোর, সেটা ভেরিয়েবলের নাম দেখে বুঝা যাচ্ছে না। তাই এই ভেরিয়েবল ডিক্লেয়ার করার ওপরে এক লাইন কমেন্ট লিখ। কমেন্টে থাকবে, এইটা কীসের স্কোর।

2. এখন radius নামে একটা ভেরিয়েবল লিখ। তারপর এইটা কীসের রেডিয়াস, সেটা বুঝানোর জন্য তিন লাইনের কমেন্ট লিখ। প্রত্যেক লাইনের আগে স্ল্যাশ চিহ্ন দিয়ে কমেন্ট লিখবি।

3. তোর পছন্দের জামা কয়টা, সেটা নিয়ে dress নামে একটা ভেরিয়েবল ডিক্লেয়ার কর। তারপর সেটার ওপর মাল্টিলাইন কমেন্ট লিখ স্ল্যাশ এবং এস্টেরিস্ক চিহ্ন দিয়ে।

4. তোকে একটা গিফট হিসেবে 100 টাকা দেওয়া হয়েছে, giftMoney নামে একটা ভেরিয়েবলে রাখ। তারপর কমেন্টে লিখবি, এই টাকা কী কারণে দেওয়া হয়েছে।

5. তুই ঠিক করলি 7 ঘণ্টা পড়ালেখা করবি। studyTime নামে একটি ভেরিয়েবলে রাখ। তার ওপর চার-পাঁচ লাইনের কমেন্ট লিখ, এই 7 ঘণ্টার মধ্যে কোন কোন সাবজেক্টের কী কী জিনিস তুই কতক্ষণ ধরে পড়বি।

6. তোর মোবাইল পেমেন্টের জন্য sendMoney নামে একটি ভেরিয়েবল ডিক্লেয়ার কর। তার ওপর দুই লাইনের কমেন্ট লিখ, যাকে মানি সেন্ড করতেছস, সে কত টাকা পাবে, আর সার্ভিস ফি কত টাকা।

7. তুই অনলাইন থেকে একটা প্রোডাক্ট অর্ডার করছস। তোর কাছ থেকে মোট কত টাকা নিবে, সেটা pay নামে একটা ভেরিয়েবলে রাখ। তারপর ওপরে এক লাইন কমেন্ট লিখবি। এই টাকার মধ্যে প্রোডাক্টের দাম এবং ডেলিভারি ফি যোগ করা আছে।

3-4: ও মেয়ে, তোর Name দিব কী

দোস্ত, এইবার তোকে ভেরিয়েবলের নাম নিয়ে কিছু কথা বলে ফেলি।

— নাম নিয়ে এত প্যারা কেন? একটা নাম দিলেই তো হয়।

আরেকটু সামনে এগুলেই বুঝতে পারবি। নামের সাথে মানের একটা মিল রাখতে হয়। তা ছাড়া তুই চাইলে ইচ্ছামতো যেকোনো নাম দিতে পারবি না। কিছু রুলস আছে। সেগুলা আগে থেকে জেনে রাখলে সামনে আরও অনেক কাজে লাগবে।

আমি কয়েকটা রুলস বলে দিচ্ছি। দেখে রাখ। মুখস্ত করার দরকার নাই। ফিউচারে আটকে গেলে বা সমস্যা হলে আবার এসে দেখবি।

ভেরিয়েবলের নামের মধ্যে কোনো জাভাস্ক্রিপ্টের রিজার্ভ করা কি-ওয়ার্ড। যেমন const বা false এমন আরও অনেক শব্দ আছে, সেগুলা ব্যবহার করা যাবে না।

const false = 45; // ভুল
const const = 50; // ভুল

ভেরিয়েবলের নামের মধ্যে Space বা gap ব্যবহার করা যাবে না। পুরা নাম এক শব্দে লিখতে হবে।

const is happy = false; // ভুল
const isHappy = true; // ঠিক

ভেরিয়েবলের নামের মধ্যে Quotation ব্যবহার করা যাবে না।

const "address" = xyz; // ভুল

ভেরিয়েবলের নাম সংখ্যা দিয়ে শুরু করা যাবে না। তবে নামের প্রথম অক্ষর ছাড়া যেকোনো জায়গায় সংখ্যা ব্যবহার করা যাবে।

const 3money = 45; // ভুল
const money3 = 45; // ঠিক
const mon3ey = 45; // ঠিক

নাম আলাদা হলে ভেরিয়েবল আলাদা তো হবেই। এমনকি নামের মধ্যে এক বা একাধিক অক্ষর যদি ইংরেজি ছোট হাতের অক্ষর বা বড় হাতের অক্ষর হয়, তাহলেও কিন্তু আলাদা আলাদা ভেরিয়েবল হিসেবে গণ্য হবে। এইটাকে বলে ভেরিয়েবলের নাম Case sensitive।

const address = "xyz";
const Address = "abc";
const AddresS = "abc";

ওপরের ভেরিয়েবলের নাম দেখতে বা পড়তে সেইম হলেও ছোট এবং বড় হাতের অক্ষরের পার্থক্য থাকায় তারা আলাদা আলাদা ভেরিয়েবল হিসেবে গণ্য হবে।

বড় নামের ক্ষেত্রে: যখন একাধিক অক্ষর দিয়ে ভেরিয়েবলের নাম লিখতে হয়, তখন কয়েকটা সিস্টেম আছে। একটা হচ্ছে, প্রত্যেকটা শব্দের মধ্যে একটা করে আন্ডারস্কোর দিয়ে দেওয়া। এইটা কিছু প্রোগ্রামিং ল্যাঙ্গুয়েজে করা হয়। চাইলে জাভাস্ক্রিপ্টেও ইউজ করা যায়। তবে এইটা বেশির ভাগ মানুষ করে না। আরেকটা সিস্টেম হচ্ছে, প্রত্যেক শব্দের প্রথম অক্ষর বড় হাতের অক্ষর করে ফেলে। যেন পড়তে সুবিধা হয়। এইটাকে camel case বলে। অর্থাৎ উটের মতো একটু উঁচা একটু নিচা স্টাইলে নাম লেখা আছে।

const mycurrenthomeaddress = "kana goli"; // Not Recommended
const My_current_home_address; // (snake case) try to avoid
const myCurrentHomeAddress; // (camel case) recommended

ভেরিয়েবলের নামের মধ্যে কোনো স্পেশাল ক্যারেক্টার ব্যবহার করা যাবে না। শুধু মাত্র _(আন্ডারস্কোর) এবং $(ডলার সাইন) ব্যবহার করা যায়। কিন্তু অন্য কোনো স্পেশাল ক্যারেক্টার (যেমন @, #, %, &, *) ব্যবহার করলে এরর দিবে।

const my@name = "Hanks"; // ভুল
const price#tag = 999; // ভুল
const user$name = "Fahim"; // ঠিক
const _secretCode = 12345; // ঠিক

JavaScript-এ রিজার্ভড ওয়ার্ড (Keyword):

JavaScript-এ কিছু রিজার্ভড ওয়ার্ড আছে। রিজার্ভ মানে এইগুলা নির্দিষ্ট কাজ করে বা এখনও সেট না করা হলেও ফিউচারে কাজ করতে পারে। এদেরকে রিজার্ভ করা ওয়ার্ড বলে। অনেকটা বুকিং দিয়ে রাখছে টাইপ অবস্থা। আবার এদের মধ্যে যেগুলা যেগুলা নির্দিষ্ট কোনো কাজ করে, সেগুলাকে আমরা keyword বলে চিনি।

এই keyword-গুলোকে ভেরিয়েবল ডিক্লেয়ার করার সময় ভেরিয়েবলের নাম হিসেবে ব্যবহার করা যাবে না। কারণ, এদের স্পেশাল কাজে ইউজ করা হয়। নিচে কয়েকটা রিজার্ভ ওয়ার্ডের (কি-ওয়ার্ড) নাম দিলাম। এইগুলা এখন বুঝার দরকার নাই। মুখস্ত করারও দরকার নাই। জাস্ট দেখে রাখ।

আরেকটা কথা, কোনোভাবেই প্রোগ্রামিং মুখস্ত করতে যাবি না। মুখস্ত করে সুবিধাও করতে পারবি না; বরং পড়তে থাক, দেখতে থাক, আর ধুমাইয়া প্র্যাকটিস করতে থাক। করতে করতে কিছু জিনিস তোর থিঙ্কিংয়ে ঢুকে যাবে। আবার অনেক অনেক জিনিস ভুলে যাবি। ভুলে কেন গেছি, সেটাও চিন্তা করতে যাবি না। শুধু খেয়াল রাখবি, কোনো কিছু দরকার হলে সেটা আবার খুঁজে বের করতে পারবি কি না, সেই আইডিয়া থাকলেই হবে।

তাইলে প্রোগ্রামিং শিখতে গিয়ে কোনো প্রেশারই ফিল করবি না; বরং রিলাক্সে এনজয় করতে করতে সামনে এগুতে পারবি। মজাই মজা!!

Javascript naming Practice:

1. তুই একটা প্রোগ্রাম লিখে দেখ, যেখানে তুই ভেরিয়েবল ডিক্লেয়ার করবি camelCase ব্যবহার করে। ধর, তুই তোর প্রিয় খাবার নামে একটা স্ট্রিং ভেরিয়েবল ডিক্লেয়ার কর। আর সেটার মান দে।

2. তুই দেখ, ভেরিয়েবলের নাম case-sensitive কি না। একটা প্রোগ্রাম লিখে দুইটা ভেরিয়েবল ডিক্লেয়ার করবি, একটার নাম "city", আরেকটার নাম "City"। প্রথমটার মান "Chittagong" আর দ্বিতীয়টার মান "Dhaka" দে। console.log() দিয়ে দুইটা আউটপুট দেখ।

3. তুই userName নামে একটা ভেরিয়েবল ডিক্লেয়ার করবি এবং তার মান Johan দে। এবার username নামে আরেকটা ভেরিয়েবল ডিক্লেয়ার করবি এবং তার মান Jovan দে। দুইটা আউটপুট দেখ console.log() দিয়ে।

4. আমার বাসার ঠিকানা (বাসরের ঠিকানা বলি নাই কিন্তু) নামে ইংরেজিতে একটা ভেরিয়েবল ডিক্লেয়ার করবি। camelCase ব্যবহার করে ভেরিয়েবল ডিক্লেয়ার করবি। তারপর এইটার স্ট্রিং একটা মান সেট করবি।

5. সুপার ওভারে কত রান হইছে, সেটার জন্য super নামে একটা ভেরিয়েবল ডিক্লেয়ার কর এবং মান সেট কর। করার পর যে আউটপুট দেখতে পাচ্ছস, সেটা কি ঠিক আছে নাকি কোনো সমস্যা আছে।

6. তুই কোন ক্লাসে পড়স, সেটা লেখার জন্য class নামে একটা ভেরিয়েবল লিখ। তারপর আউটপুট এ দেখ, কী দেখায়।

7. সেকেন্ড পজিশনে কে ব্যাট করবে, সেটার জন্য 2ndPosition নামে একটা ভেরিয়েবল লিখে সেখানে একজন ব্যাটসম্যানের নাম লিখে দে। দেখ আউটপুট দেখায় কি না। যদি সমস্যা করে, তাহলে কী করা লাগে, সেটা কমেন্ট করে ভেরিয়েবলের ওপরে লিখ।

3-5: Parse-এর ভিতর নানরুটি (NaN)

সবার আম্মুর পার্স থেকে টাকা বের হয়। আম্মুর যতই টাকা নাই, টাকা নাই বলুক না কেন, পোলাপান একটু বেশি কাচুমাচু করলে, কান্নাকাটির ভাব ধরলে কিংবা চোখ থেকে দুই ফোঁটা পানি বের করতে পারলে দেখবি, ঠিকই আম্মুর পার্স থেকে টাকা বের হচ্ছে। এমনকি তুই পার্স খুলে যদি সেখানে প্রচুর টুকরা-টাকরা কাগজপত্র, সাজগোজের জিনিস দেখলেও ঠিকই আম্মু টাকা বের করে ফেলতে পারে।

একইভাবে জাভাস্ক্রিপ্টে যদি ঠিক টাইপের জিনিস না হয়, তখন সেটাকে ঠেলেঠুলে পার্সের (parse) ভিতরে ঢুকাতে পারলে ঠিকই লাইনে চলে আসে। আবার ভুলভাল জিনিস ঢুকালে সেটা নানরুটি হয়ে যায়।

— কীসব আবোল-তাবোল বলতেছস, দোস্ত। তোর কি ঘুমে মাথা আউলায় গেছে।

মাঝেমধ্যে মাথা না আউলাইলে কেমনে বুঝবি, মাথার ভিতরে ঘিলু বাড়তেছে নাকি কমতেছে। দাঁড়া বাথরুমে গিয়ে একটু চোখেমুখে পানি দিয়ে এসে তোকে বিস্তারিত বলতেছি। (কিছুক্ষণ পরে ফিরে এসে জাভেদ বলতে শুরু করল)

মাঝেমধ্যে এমন হয়, বিশেষ করে আমরা যখন ওয়েবসাইট থেকে কোনো ডাটা ইউজারের কাছ থেকে নেই। ধর, কারো বয়স বা ওজন বা তার কাছে বইয়ের সংখ্যা ইত্যাদি তখন ওয়েবসাইটে সেই সংখ্যাটাকে সংখ্যা হিসেবে দিবে না, দিবে স্ট্রিং হিসেবে।

স্ট্রিং হিসেবে দেয়ার কারণ হচ্ছে, ওয়েবসাইট কাজটা সিম্পল রাখতে চায়। সবকিছু স্ট্রিং হিসেবে ধরে নিলে তার জন্য কাজটা সহজ হয়ে যায়। পরে যে কোডিং করতেছে, সে তার মতো সঠিকভাবে ডাটাকে কনভার্ট করে নিতে পারবে।

তারমানে তুই যদি ওয়েবসাইট 20 ইনপুট হিসেবে দিস, সেটা জাভাস্ক্রিপ্টের কাছে সংখ্যা 20 হিসেবে আসবে না। আসবে স্ট্রিং '20' হিসেবে। এখন স্ট্রিং '20' হিসেবে আসলে তুই সেটাকে যদি অন্য কারো সাথে যোগ করস, তখন খুবই গড়বড় লেগে যাবে। ধর, বাপের বয়স 50, সেটা ইনপুট নিলে হয়ে যাবে স্ট্রিং '50', তারপর বাপের সাথে পুত্রের বয়স যোগ করলে স্ট্রিং '50'-এর সাথে স্ট্রিং '20' যোগ করলে সেটা 70 না হয়ে 5020 হয়ে যাবে।

const fatherAge = "50";
const sonAge = "20";
const totalAge = fatherAge + sonAge;
console.log(totalAge);

Output: "5020";

এইটা কিন্তু ঠিক না। তাই এই সমস্যা এড়ানোর জন্য যখনই কোনো ইনপুট স্ট্রিং হিসেবে আসবে, তখন সেটাকে সংখ্যায় রূপান্তর করে নিতে হয়।

কিছুই না, জাস্ট প্রথমে parseInt লিখবি, তারপর ব্র্যাকেট দিয়ে সেটার ভিতরে স্ট্রিংওয়ালা সংখ্যাটাকে পাঠিয়ে দিবি নিচের মতো করে। তুই চাইলে সরাসরি সংখ্যা দিতে পারস, আবার স্ট্রিংওয়ালা সংখ্যা যদি কোনো একটা ভেরিয়েবলে থাকে, সেটাকেও দিতে পারস।

const sugar = parseInt("20");
console.log(sugar);

Output: 20;

এর মাধ্যমে string টা int-এ কনভার্ট হয়ে যাবে। এইবার স্ট্রিংওয়ালা সংখ্যা যদি কোনো একটা ভেরিয়েবলে থাকে, সেটাকে কনভার্ট কর।

const fatherAge = "50";
const fatherAgeNumber = parseInt(fatherAge);
console.log(fatherAgeNumber);

Output: 50;

তবে সব সময় যে স্ট্রিংয়ের ভিতরে সংখ্যা থাকবে, সেই গ্যারান্টি নাই। মাঝেমধ্যে ইউজার ভুল করে সংখ্যার আগে কোনো একটা কিছু চলে আসতে পারে। যেমন, হয়তো 20 লিখতে গিয়ে তার আগে x চলে আসতে পারে। তখন '20' না হয়ে 'x20' হয়ে গেলে আর স্ট্রিংকে সংখ্যায় রূপান্তর করতে পারবে না। তখন নানরুটি হয়ে যাবে।

const input = "x20";
const num = parseInt(input);
console.log(num);

Output: NaN;

আর যদি ইচ্ছা করে সংখ্যার জায়গায় হাবিজাবি স্ট্রিং বা কোনো সঠিক স্ট্রিং বা সংখ্যাকে লিখিত আকারে দিয়ে দেয়, সেটাকেও কিন্তু সংখ্যায় রূপান্তর করতে পারবে না; বরং নানরুটি বানায় ফেলবে নিচের মতো করে।

const age = parseInt('adfasdfasdf');
const weight = parseInt('twenty');
console.log(age, weight);

Output: NaN  NaN

তবে স্ট্রিংয়ের শুরুতে সংখ্যা, তারপর কোনো স্ট্রিং থাকলে সে এক এক করে যতক্ষণ সংখ্যা পায়, ততক্ষণ পর্যন্ত নিতে থাকে এবং সেটাকে সংখ্যায় রূপান্তর করে ফেলে। কোনো অক্ষর বা বর্ণ পেলে সে স্টপ করে ফেলে। আর যদি স্ট্রিং শুরুই হয় বর্ণ দিয়ে, তাহলে সে সংখ্যা বানানোর কিছুই পেল না। তখন সেটাকে সে নানরুটি বানিয়ে ফেলে।

const age = parseInt('50f');
const weight = parseInt('9twenty');
const address = parseInt('tom60');
console.log(age, weight, address);

Output: 50  9  NaN

এই NaN কিন্ত নানরুটি না। আবার নানাও না; বরং Not A Number-এর সংক্ষিপ্ত রূপ। এই NaN দিয়ে বুঝায়, তুই এমন একটা জিনিসকে সংখ্যায় রূপান্তর করার চেষ্টা করছিস, যেটাকে সংখ্যা বানানো সম্ভব না। যেটাকে সংখ্যায় রূপান্তর করা যাবে না। সেটাকে বলে দিবে Not A Number ওরফে NaN।

ধর, তোর একটা ভ্যালু ভগ্নাংশ আকারে আছে। তখন তুই তাকে integer-এ কনভার্ট করার জন্য এই parseInt() ব্যবহার করতে পারিস。

const sugar = parseInt("1.22222");
console.log(sugar);

Output: 1;

parseInt করলে সে integer বা পূর্ণসংখ্যায় রূপান্তর করে ফেলবে। আমরা যদি স্ট্রিংয়ে আছে, এমন কোনো সংখ্যাকে ভগ্নাংশ হিসেবে দেখতে চাই, তাহলে parseInt-এর খালাতো ভাই parseFloat ইউজ করবি।

const sugar = parseFloat("1.22222");
console.log(sugar);

Output: 1.22222;

এখন আবার যদি তোর কোনো আউটপুট দশমিকের পর এক ঘর বা দুই ঘর বা তিন ঘর ইত্যাদি প্রয়োজন হয়, অর্থাৎ দশমিকের পর তুই একটা বা দুইটা বা তিনটা অঙ্ক (সংখ্যা) রাখতে চাস, তখন সংখ্যার পর toFixed লিখে দুইটা ব্র্যাকেট দিবি। আর ব্র্যাকেটের ভিতরে তুই দশমিকের পর কয় অঙ্ক চাস, সেটা বলে দিবি। যদি 2 অঙ্ক চাস, তাহলে 2 বলে দিবি নিচের মতো করে।

const first = 12.13568;
const second = 31.22564;
const total = first + second;
console.log(total.toFixed(2));

Output: "43.36";

toFixed()-এর ভিতরে তুই দশমিকের পর যত ঘর পর্যন্ত আউটপুট চাস, তা লিখে দিতে পারিস।

এখানে একটি সমস্যা আছে, সেটা হচ্ছে toFixed করলে total-এর valueটা আবার string type-এ কনভার্ট হয়ে যায়। আবার স্ট্রিং হয়ে গেলে পরে যোগ-বিয়োগ বা এই টাইপের কিছু করতে গেলে সমস্যা হতে পারে। তাই এটাকে আবার তুই parseFloat()- দিয়ে সংখ্যাকে কনভার্ট করতে পারিস। যেমন:

const first = 12.13568;
const second = 31.22564;
const total = first + second;
const totalNumber = parseFloat(total.toFixed(2));
console.log(totalNumber);

Output: 43.36;

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

JavaScript Parse Practice:

1. ধর তুই একটা মজার অঙ্ক করছিস। তুই '20' লিখে ফেললি, কিন্তু সেটা স্ট্রিং আকারে। স্ট্রিং থেকে আসল সংখ্যায় কনভার্ট করে তার সাথে 10 যোগ করতে পারবি?

2. তোর কাছে একটা ভগ্নাংশ আকারে মান আছে, যেমন '3.14159'। এই মানটা পূর্ণসংখ্যায় রূপান্তর করার জন্য একটা প্রোগ্রাম লিখ।

3. তুই 'premikBoy' নামের একটা স্ট্রিংকে সংখ্যা বানানোর চেষ্টা কর। দেখ কী আউটপুট দেয়।

4. তুই 3.456 আর 2.789 যোগ করলি। আউটপুটে তুই দশমিকের পর মাত্র 2 ঘর পর্যন্ত দেখতে চাস। কীভাবে দেখাবি? একটা প্রোগ্রাম লিখ।

5. ধর, তুই '56.78' আর '12.34' স্ট্রিং আকারে পাইলি। এখন এই দুইটা যোগ করে কীভাবে আসল সংখ্যা বের করবি? সেটা বের করার একটা প্রোগ্রাম লিখ।

6. ধর, তোর কাছে '10.5678' আর '5.4321' আছে। তুই আউটপুটে দশমিকের পর 1 ঘর পর্যন্ত দেখতে চাস। সেটা কীভাবে দেখাবি?

7. এখন '42.45689754'-কে দশমিকের পর 3 ঘর পর্যন্ত রাউন্ড কর।