জাভাস্ক্রিপ্ট সিনট্যাক্স: শুরুতেইদের জন্য একটি গাইড

আপনি যদি জাভাস্ক্রিপ্ট লিখতে শিখতে চান, আপনি সঠিক জায়গায় এসেছেন।

প্রতিটি প্রোগ্রামিং ল্যাঙ্গুয়েজের নিজস্ব নিয়মের সেট থাকে, ঠিক ইংরেজির মতো। একটু চিন্তা করুন। যখন আপনি প্রাইমারি স্কুলে ছিলেন, আপনি বাক্য গঠন করতে ব্যাকরণের নিয়ম শিখেছিলেন।

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

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

সিনট্যাক্স কেন গুরুত্বপূর্ণ?

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

এটি কম্পিউটার এবং মানুষের মধ্যে একটি গুরুত্বপূর্ণ পার্থক্য নির্দেশ করে: মানুষ যেকোনো ত্রুটি চেনে সেটি উপেক্ষা করতে পারে, কিন্তু কম্পিউটার যেকোনো প্রোগ্রামিং ল্যাঙ্গুয়েজে কোড রান করার সময় একই কাজ করতে পারে না। তাই আপনি যে প্রোগ্রামিং ল্যাঙ্গুয়েজে কাজ করছেন তার সিনট্যাক্স ব্যবহার করে কোড লিখা গুরুত্বপূর্ণ।

সিনট্যাক্স আপনার কোডকে আরও রিডেবলও করে। যখন সবাই একই সিনট্যাক্স ব্যবহার করে, অন্যের প্রোগ্রাম ইন্টারপ্রেট করা সহজ হয়। ইংরেজির মতো, একবার বেসিক নিয়মগুলো জানলে, কোডের কোনো লাইন পড়তে আপনি অক্ষম নন।

এই গাইডে, আমরা সিনট্যাক্সের নিচের ফিচারগুলোতে ফোকাস করব:

81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.

The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.

• Whitespace
• Naming Variables
• Indentation
• Comments
• Semicolons

শুরু করা যাক!

Whitespace

প্রোগ্রামাররা whitespace নিয়ে বারবার বিতর্ক করে। এটি একটি অনেক কনট্রোভার্সিয়াল টপিক। সেই বিতর্কগুলো একপক্ষে রাখি এক মিনিটের জন্য, জাভাস্ক্রিপ্টে সিনট্যাক্স নিয়ে একটা কী রুল মনে রাখতে হবে: আপনার ভেরিয়েবলগুলোর মাঝে, এবং প্যarethেসিসের আগে এবং পরে স্পেস থাকা উচিত।

ধরা যাক আপনি একটি for লুপ লিখছেন:

for (var i = 0; i < 4; i++) { console.log(i); } 

এই লুপ ০ থেকে ৪ রেঞ্জের সব নাম্বার কনসোলে প্রিন্ট করে। আপনি দেখতে পাচ্ছেন, আমাদের for কী এবং for লুপের ওপেনিং ব্র্যাকেটের মাঝে একটি স্পেস আছে। আমাদের ক্লোজিং করলি ব্র্যাকেট (() এবং ওপেনিং করলি ব্রেস ({)-র মাঝেও একটি স্পেস আছে। এই ব্র্যাকেটের ভেতরের সব স্টেটমেন্টের মাঝেও স্পেস আছে:

• var i = 0;
• i < 4;

যখন আপনি for লুপের বাইরে একটি ভেরিয়েবল অ্যাসাইন করছেন, আপনি একই পদ্ধতি ব্যবহার করবেন:

var cookie = "Raspberry Chocolate Chip";


আপনার ভেরিয়েবলগুলোর মাঝে স্পেস যোগ করলে আপনার কোড পড়া সহজ হয়। 

Indentation

অন্যান্য প্রোগ্রামিং ল্যাঙ্গুয়েজের विपরীতে, আপনি একটি জাভাস্ক্রিপ্ট প্রোগ্রাম এক লাইনে লিখতে পারেন। এটি ভালো আইডিয়া নয় – চিন্তা করুন আপনার কোড পড়া কতটুকু কঠিন হবে – কিন্তু আপনি এটা করতে পারেন।

একটি কোড ব্লকের ভেতরে থাকা প্রতিটি স্টেটমেন্ট – যেমন একটি if কন্ডিশনাল স্টেটমেন্ট বা একটি ক্লাস – ইন্ডেন্টেড হওয়া উচিত। ইন্ডেন্টেশন বলতে আপনার কোডের শুরুতে দুই স্পেস, চার স্পেস বা একটি ট্যাব যোগ করা। প্রোগ্রামাররা এই বিষয়ে কী ভালো তার ওপর অনেক বিতর্ক করে, কিন্তু যতক্ষণ আপনি আপনার কোড জুড়ে কনসিস্টেন্সি রক্ষা করেন, আপনার কোনো সমস্যা হবে না।

এখানে একটি ইন্ডেন্টেড for লুপ:

for (var i = 0; i < 4; i++) { console.log(i); } 

আপনি দেখতে পাচ্ছেন console.log() টার্মটি একটি ট্যাব ব্যবহার করে ইন্ডেন্ট করা হয়েছে। কারণ এটি আমাদের করলি ব্রেসের ভেতরে রয়েছে। এটি আমাদের for লুপের কন্টেন্টকে আমাদের বাকি কোড থেকে আলাদা করতে সাহায্য করে। যদি আমাদের কোডে আরেকটি কোড ব্লক থাকত, যেমন একটি if স্টেটমেন্ট, আমরা তার কন্টেন্ট আরও বেশি ইন্ডেন্ট করতাম:

for (var i = 0; i < 4; i++) { if (i === 3) { console.log(i); } } 

এই কোড i এর ভ্যালু প্রিন্ট করে যদি সেটি ৩-এর সমান হয়। অন্যথায়, কিছুই হয় না। এই স্নিপেটে, আমাদের if স্টেটমেন্ট এক ট্যাব দ্বারা ইন্ডেন্ট করা হয়েছে কারণ এটি আমাদের for লুপে আছে। আমাদের console.log() স্টেটমেন্ট দুটি ট্যাব দ্বারা ইন্ডেন্ট করা হয়েছে কারণ এটি আমাদের if স্টেটমেন্টের ভেতরে আছে, যা নিজে আমাদের for স্টেটমেন্টের ভেতরে আছে।

Comments

কমেন্টস হল ডেভেলপাররা ডেভেলপারদের জন্য লিখিত স্টেটমেন্ট। সেগুলো টেকনিক্যালি জাভাস্ক্রিপ্ট দ্বারা পড়া হয়, কিন্তু সেগুলো এক্সিকিউট হবে না।

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

জাভাস্ক্রিপ্টে, কমেন্টস ডবল স্ল্যাশ ব্যবহার করে লিখা হয়, তারপর কমেন্ট:

// This is a comment that will be skipped over by JavaScript! 

ডবল স্ল্যাশের পরের সকল ক্যারেক্টার কমেন্ট হিসেবে বিবেচনা হয়। একটি কমেন্ট একাধিক লাইনে ছড়িয়ে রাখতে, আপনি এই সিনট্যাক্স ব্যবহার করতে পারেন:

/* This is a comment that spans multiple lines. */ 

/* এবং */ এর মাঝে থাকা যেকোনো টেক্স্ট জাভাস্ক্রিপ্ট কম্পাইলার দ্বারা উপেক্ষা করা হবে।

ভেরিয়েবল নামকরণ

একটি ভেরিয়েবল নামকরণের অনেক পদ্ধতি আছে। তিনটি সবচেয়ে জনপ্রিয় পদ্ধতি হলো আপার ক্যামেল কেস, লোয়ার ক্যামেল কেস এবং আন্ডারস্কোর ব্যবহার করা।

জাভাস্ক্রিপ্টে, অধিকাংশ ডেভেলপার ভেরিয়েবল নামকরণে লোয়ার ক্যামেল কেস পছন্দ করেন:

firstName, surname, isAdmin


জাভাস্ক্রিপ্টে ভেরিয়েবল ঘোষণা এরকম দেখে:

var firstName = "Tony";


আপনি যে টাইপের ভেরিয়েবল ব্যবহার করছেন (এই কেসে var) তার পর ভেরিয়েবলের নাম, তারপর একটি ইকুয়াল সাইন, তারপর আপনি যে ভ্যালু ভেরিয়েবলে সংরক্ষণ করতে চান।

একটি ভেরিয়েবলের প্রথম শব্দ ছোট হাতের অক্ষরে শুরু হওয়া উচিত, এমনকি যদি ভেরিয়েবলে শুধু এক শব্দ থাকে। দ্বিতীয় শব্দ এবং পরবর্তী সকল শব্দ বড় হাতের অক্ষরে শুরু হওয়া উচিত, যেমন উপরে দেখানো হয়েছে।

আপনি যদি অন্যান্য পদ্ধতিতে ভেরিয়েবল লিখেন (যেমন আন্ডারস্কোরে "first_name" বা আপার ক্যামেল কেসে "FirstName"), জাভাস্ক্রিপ্টে সেটি তত সাধারণ নয়।

জাভাস্ক্রিপ্টে ভেরিয়েবলস কেস সেনসিটিভ। এর মানে firstName এবং firstname, একই বেসিক ক্যারেক্টার থাকা সত্ত্বেও, আলাদা ভাবে ট리트 করা হবে।

কয়েকটি শব্দ আছে যাকে "রিজার্ভড ওয়ার্ডস" বলা হয় যা আপনি ভেরিয়েবল নাম হিসেবে ব্যবহার করতে পারবেন না। এগুলো জাভাস্ক্রিপ্টে একটি স্পেশাল ফাংশন ধারণ করে। উদাহরণস্বরূপ, আপনি একটি ভেরিয়েবল "class" বা "for" নামে রাখতে পারবেন না, কারণ এগুলো ইতিমধ্যে ল্যাঙ্গুয়েজে ব্যবহৃত হয়।

মজিলা ডেভেলপার নেটওয়ার্কে রিজার্ভড জাভাস্ক্রিপ্ট কীওয়ার্ডের লিস্ট পাবেন।

Semicolons

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

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

var cookie = "Chocolate Fudge";


আপনি যেকোনো ব্লক স্টেটমেন্টের পর সেমিকোলন স্পেসিফাই করতে হবে না। এগুলো হলো class, switch, do, if এবং for এর মতো স্টেটমেন্ট। এই স্টেটমেন্টগুলো তাদের কোড সংরক্ষণ করতে করলি ব্র্যাকেট ব্যবহার করে:

function addNumbers(one, two) { return one + two; } 

এই কোডে, আপনি দেখতে পাচ্ছেন আমরা আমাদের return স্টেটমেন্টটি একটি সেমিকোলন দিয়ে শেষ করেছি। কারণ এটি আমাদের ফাংশনে আছে। আমাদের ফাংশনটি সেমিকোলন দিয়ে শেষ হয় না।

উপসংহার

জাভাস্ক্রিপ্ট প্রোগ্রামিং ল্যাঙ্গুয়েজে অনেক রুল আছে। এই নিয়মগুলো 각각 নিশ্চিত করে যে আপনি কোড লিখছেন যেটি আপনি এবং ব্রাউজার উভয় পড়তে পারেন। আপনি যদি একটি টিমে কাজ করেন, জাভাস্ক্রিপ্টের সিনট্যাক্স রুল মেনে চলা বিশেষভাবে গুরুত্বপূর্ণ।

আমরা যে প্রধান রুলগুলো কভার করেছি তার রিক্যাপ:

• একটি ভেরিয়েবল ডিক্লেরেশন বা "for" বা "if" মতো কীওয়ার্ডের পরের সকল স্টেটমেন্ট হোয়াইটস্পেস দ্বারা পৃথক হওয়া উচিত।
• একটি কোড ব্লকের ভেতরে সংরক্ষিত স্টেটমেন্টগুলো (যেমন "if", "else") ইন্ডেন্টেড হওয়া উচিত।
• ভেরিয়েবল নাম লোয়ার ক্যামেল কেস ব্যবহার করা উচিত এবং যেকোনো রিজার্ভড কীওয়ার্ডের সমান হওয়া উচিত না।
• ব্লক স্টেটমেন্ট ছাড়া সকল স্টেটমেন্ট সেমিকোলন দিয়ে শেষ হওয়া উচিত।
• // ব্যবহার করে সিঙ্গল-লাইন কমেন্ট এবং /* */ ব্যবহার করে মাল্টি-লাইন কমেন্ট লিখা যায়।

এখন আপনি জাভাস্ক্রিপ্টে কোডিং প্রফেশনাল ডেভেলপারের মতো শুরু করতে পারবেন!