প্রথমেই আমরা শিখে নিব কোড লিখতে কি কি লাগে।
স্টেটমেন্ট হল কাজ করার জন্য নির্দেশনা দেয়ার উপায়।
আমরা ইতিমধ্যেই একটি স্টেটমেন্ট দেখেছি, alert('হ্যালো, ওয়ার্ল্ড!'), যা এই ম্যাসেজটি দেখায় - "হ্যালো, ওয়ার্ল্ড!".
যতগুলি ইচ্ছা ততগুলি স্টেটমেন্ট আমরা আমাদের কোডে রাখতে পারি। প্রতিটি স্টেটমেন্ট সেমিকোলন দিয়ে বিভক্ত করা যায়।
যেমন, এখানে আমরা "হ্যালো ওয়ার্ল্ড" - কে দুটি আলাদা alert এ দেখাচ্ছিঃ
alert('হ্যালো'); alert('ওয়ার্ল্ড');সাধারণত, স্টেটমেন্টগুলোকে বোঝার সুবিধার্থে আলাদা লাইনে লেখা হয়ঃ
alert('হ্যালো');
alert('ওয়ার্ল্ড');অধিকাংশ ক্ষেত্রে লাইনের শেষে সেমিকোলনকে ঊহ্য রাখা যায়।
যেমন এটাও কাজ করবেঃ
alert('হ্যালো')
alert('ওয়ার্ল্ড')এখানে, জাভাস্ক্রিপ্ট লাইনের শেষে একটি "ঊহ্য" সেমিকোলন আছে বলে ধরে নেয়। এটাকে বলা হয় স্বয়ংক্রিয় ভাবে সেমিকোলন যুক্ত করন.
অধিকাংশ সময়, নতুন লাইন মানেই একটি সেমিকোলন। কিন্তু "অধিকাংশ সময়" মানে "সবসময়" নয়!
কিছু ক্ষেত্রে নতুন লাইন মানেই সেমিকোলন নয়। যেমনঃ
alert(3 +
1
+ 2);<<<<<<< HEAD
উপরের কোডের আউটপুট 6 কারণ জাভাস্ক্রিপ্ট এখানে সেমিকোলন ব্যবহার করবে না। এটি খুবই স্পষ্ট বোঝা যাচ্ছে, যেহেতু লাইন "+" দিয়ে শেষ হয়েছে, সেহেতু এটি একটি "অসম্পূর্ণ এক্সপ্রেশন", সুতরাং সেমিকোলনের প্রয়োজন নেই। এবং এই ক্ষেত্রে কোডটি যেভাবে কাজ করা উচিত সেভাবেই কাজ করছে।
The code outputs 6 because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus "+", then it is an "incomplete expression", so a semicolon there would be incorrect. And in this case, that works as intended.
6236eb8c3cdde729dab761a1d0967a88a1a6197e
কিন্তু কিছু পরিস্থিতিতে যেখানে সেমিকোলন অবশ্যই প্রয়োজন, জাভাস্ক্রিপ্ট তা বুঝে নিতে ব্যর্থ হয়।
এরকম কারণে যেসব এরর তৈরি হয় তা খুঁজে বের করা এবং ঠিক করা বেশ কঠিন।
আপনি যদি এধরণের এররের একটি উদাহরণ দেখতে আগ্রহী হন, তাহলে এই কোডটি দেখুনঃ
```js run
alert("Hello");
[1, 2].forEach(alert);
```
<<<<<<< HEAD
`[]` এবং `forEach` এর মানে কি তা এখনই চিন্তা করার দরকার নেই। আমরা পরবর্তীতে তাদের নিয়ে জানব। আপাতত, শুধু মনে রাখুন এই কোডের আউটপুটঃ প্রথমে `1` এবং এরপর `2`।
এবার, কোডের শুরুতে একটি `alert` বসাই এবং সেমিকোলন ছাড়াই লাইনটি শেষ করিঃ
```js run no-beautify
alert("একটি এরর তৈরি হবে")
=======
No need to think about the meaning of the brackets `[]` and `forEach` yet. We'll study them later. For now, just remember the result of running the code: it shows `Hello`, then `1`, then `2`.
Now let's remove the semicolon after the `alert`:
```js run no-beautify
alert("Hello")
>>>>>>> 6236eb8c3cdde729dab761a1d0967a88a1a6197e
[1, 2].forEach(alert);
```
<<<<<<< HEAD
এখন যদি আমরা কোডটি রান করি, শুধুমাত্র শুরুর `alert` টি দেখায় এবং এরপর আমরা একটি এরর পাই!
কিন্তু আমরা যদি `alert` এর পর একটি সেমিকোলন দেই, তাহলে সব ঠিকঠাক কাজ করেঃ
```js run
alert("সবকিছু ঠিক আছে");
[1, 2].forEach(alert)
```
এখন আমরা "সবকিছু ঠিক আছে" বার্তাটি এবং তার সাথে `1` ও `2` পাই।
সেমিকোলন ছাড়া কোডে এরর হয়েছে তার কারণ জাভাস্ক্রিপ্ট তৃতীয় বন্ধনীর `[...]` আগে সেমিকোলন হবে তা অনুমান করতে পারে নি।
সুতরাং, যেহেতু সেমিকোলন স্বয়ংক্রিয়ভাবে বসানো হয়নি, তাই প্রথম উদাহরণের কোড পুরোটাই একটি স্টেটমেন্ট হিসেবে গণ্য করা হয়েছে। জাভাস্ক্রিপ্ট ইঞ্জিন কোডটাকে এভাবে দেখছেঃ
```js run no-beautify
alert("একটি এরর তৈরি হবে")[1, 2].forEach(alert)
```
কিন্তু এখানে একটি নয়, দুটো আলাদা স্টেটমেন্ট হবে। এভাবে একটি লাইনে যোগ করে ফেলাটা পুরোপুরি ভুল, তাই এররটি তৈরি হয়েছে। এমনটা আরও অনেক পরিস্থিতিতে হতে পারে।
=======
The difference compared to the code above is only one character: the semicolon at the end of the first line is gone.
If we run this code, only the first `Hello` shows (and there's an error, you may need to open the console to see it). There are no numbers any more.
That's because JavaScript does not assume a semicolon before square brackets `[...]`. So, the code in the last example is treated as a single statement.
Here's how the engine sees it:
```js run no-beautify
alert("Hello")[1, 2].forEach(alert);
```
Looks weird, right? Such merging in this case is just wrong. We need to put a semicolon after `alert` for the code to work correctly.
This can happen in other situations also.
>>>>>>> 6236eb8c3cdde729dab761a1d0967a88a1a6197e
আমরা স্টেটমেন্টের শেষে সেমিকোলন দিতে পরামর্শ দেই, এমনকি যদি স্টেটমেন্টগুলো আলাদা লাইনেও হয়ে থাকে। এই রুলটি কমিউনিটিতে ব্যাপকভাবে গ্রহণ করা হয়েছে। আরও একবার এভাবে বলা যায় -- অধিকাংশ সময় সেমিকোলন ঊহ্য রাখা সম্ভব। কিন্তু এটি ব্যবহার করা নিরাপদ -- বিশেষ করে শিক্ষানবিশ/অনভিজ্ঞদের জন্য।
সময়ের সাথে সাথে প্রোগ্রামগুলো অধিক থেকে অধিকতর জটিল হতে থাকে। কমেন্ট/মন্তব্য লিখার মাধ্যমে কোড কি কাজ করে এবং কেন করে তা প্রয়োজনীয় হয়ে দাঁড়ায়।
কমেন্ট স্ক্রিপ্টের যেকোনো জায়গায় লেখা যায়। কমেন্ট কোড এক্সিকিউশনে কোন প্রভাব ফেলে না কারণ জাভাস্ক্রিপ্ট ইঞ্জিন কমেন্টগুলো উপেক্ষা করে।
এক-লাইনের কমেন্টগুলো দুটি ফরওয়ার্ড স্লাশ ক্যারেক্টার // দিয়ে শুরু হয়।
লাইনের পরবর্তী অংশ একটি কমেন্ট। কমেন্ট নিজেই পুরো একটি লাইন নিয়ে নিতে পারে বা একটি স্টেটমেন্টের পরে বসতে পারে।
যেমনটা এখানেঃ
// এই কমেন্টটি নিজেই পুরো লাইন নিয়ে নিয়েছে
alert('হ্যালো');
alert('ওয়ার্ল্ড'); // এই কমেন্টটি স্টেটমেন্টের পরে বসেছেএকাধিক লাইনের কমেন্টগুলো একটি ফরওয়ার্ড স্লাশ ও একটি তারকাচিহ্ন /* দিয়ে শুরু হয় এবং একটি তারকাচিহ্ন ও একটি ফরওয়ার্ড স্লাশ */ দিয়ে শেষ হয়।
যেমনটা এখানেঃ
/* দুটো বার্তার একটি উদাহরণ
এটি একটি একাধিক লাইনের কমেন্ট
*/
alert('হ্যালো');
alert('ওয়ার্ল্ড');কমেন্টের বিষয়বস্তু উপেক্ষা করা হয়, তাই আমরা যদি /* ... */ এর ভেতরে কোড লিখি, তা কাজ করবে না।
মাঝে মাঝে কোডের কিছু অংশ সাময়িকভাবে অচল করার জন্য কমেন্ট খুব কাজে আসেঃ
/* কোডকে কমেন্ট করা হচ্ছে
alert('হ্যালো');
*/
alert('ওয়ার্ল্ড');অধিকাংশ এডিটরে, কোডের কোন অংশ কমেন্ট করতে, এক লাইনের কমেন্টের জন্য `key:Ctrl+/` হট-কী এবং একাধিক লাইনের কমেন্টের জন্য `key:Ctrl+Shift+/` হট-কী ব্যবহার করা হয় (কোডের অংশটি সিলেক্ট করে হট-কী প্রেস করা হয়)। ম্যাকের জন্য `key:Ctrl` এর পরিবর্তে `key:Cmd` ব্যবহার করে চেষ্টা করে দেখুন।
একটি `/*...*/` এর ভেতর আরেকটি `/*...*/` থাকবে না।
এধরণের কোড একটি এরর দিয়ে বন্ধ হয়ে যাবে।
```js run no-beautify
/*
/* নেস্টেড কমেন্ট ?!? */
*/
alert('ওয়ার্ল্ড');
```
দয়া করে কোডে কমেন্ট লিখতে দ্বিধাবোধ করবেন না।
যদিও কমেন্ট সম্পূর্ণ কোডকে ভারী করে, কিন্তু তা কোন সমস্যাই না। প্রোডাকশন সার্ভারে কোড পাবলিশ করার আগে কোড মিনিফাই করার জন্য অনেক টুল রয়েছে। এসব টুল কমেন্ট মুছে দেয়, তাই কমেন্টগুলো পাবলিশ করা কোডে থাকে না। সুতরাং, প্রোডাকশন এনভাইরনমেন্টে কমেন্টের কোন খারাপ প্রভাব নেই।
এই টিউটোরিয়ালে পরবর্তীতে একটি অধ্যায় info:code-quality থাকবে, যেখানে কিভাবে ভালো কমেন্ট লিখতে হয় তা নিয়ে আলোচনা করা হবে।