গত পর্বে জাভাস্ক্রিপ্ট কোড ফরম্যাটিং নিয়ে আমি আমার একটি স্বৈরাচারী মতামতের কথা উল্লেখ করেছিলাম। এই পর্বে আলোচনা করবো আরেকটি মতামত নিয়ে।

ট্রেইলিং কমা ব্যবহার করা

জাভাস্ক্রিপ্টে ট্রেইলিং কমা বলতে বোঝায় মাল্টিলাইন অবজেক্ট, অ্যারে, ফাংশান প্যারামিটারস্‌, ইমপোর্ট-এক্সপোর্ট এর সর্বশেষ আইটেমের পর একটা অতিরিক্ত কমা ব্যবহার করা। উদাহরণ হিসেবে নিচের কোডটি দেখুন:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]', //<- trailing comma
};

একেবারে শুরু থেকেই জাভাস্ক্রিপ্টে অ্যারে-তে ট্রেইলিং কমার সাপোর্ট ছিলো। পরবর্তীতে ECMAScript 5 এ অবজেক্ট লিটারার্লসে (উপরের কোডটি) এবং সম্প্রতি ECMAScript 2017 এ ফাংশান প্যারামিটার্সে এর সাপোর্ট যোগ করা হয়েছে।

এর একটি অন্যতম সুবিধা হলো গিট ডিফারেন্স পরিচ্ছন্ন থাকা। নিচের অবজেক্টটির ক্ষেত্রে গিট ডিফারেন্স লক্ষ করুন:

// মূল অবজেক্ট
const person = {
  firstName: 'John',
  lastName: 'Doe',
};

এই অবজেক্টে email key যোগ করার পর:

//git diff without trailing comma
const person = {
     firstName: 'John',
-    lastName: 'Doe'
+    lastName: 'Doe',
+    email: '[email protected]'
};

//git diff with trailing comma
const person = {
     firstName: 'John',
     lastName: 'Doe',
+    email: '[email protected]',
};

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

ট্রেইলিং কমা ব্যবহারের আরেকটি উপকারিতা হলো অবজেক্ট বা অ্যারে-তে নতুন আইটেম যোগ করা কিংবা আইটেমগুলো রি-অ্যারেঞ্জ করার সময় ভুল কম হওয়া। নিচের উদাহরণগুলো লক্ষ করুন:

const person = {
  firstName: 'John',
  lastName: 'Doe' //এখানে কমা দেয়া হয়নি
  email: '[email protected]'
};

const person = {
  email: '[email protected]' //রি-অ্যারেঞ্জ করার সময় এখানে কমা দেয়া হয়নি
  firstName: 'John',
  lastName: 'Doe',
};

তাছাড়া airbnb স্টাইল গাইডেও এটাকে গুড প্র্যাক্টিস বা ভালো অভ্যাস বলে উল্লেখ করা হয়েছে।

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

// .prettierrc
"trailingComma": "es5" // all ও দিতে পারেন যদি আপনার প্রজেক্টে babel বা অন্য কোনো ট্রান্সপাইলার থাকে

ওহ্‌হো! একটা কথা বলতে ভুলে গেছি। এই নিয়মটি কেবল মাল্টিলাইন অবজেক্ট, অ্যারে, ফাংশান প্যারামিটারস্‌, ইমপোর্ট-এক্সপোর্ট এর ক্ষেত্রে প্রযোজ্য, সিঙ্গেল লাইনের জন্য নয়।