জাভাস্ক্রিপ্টে console.dir এবং console.log-এর পার্থক্য কী?

console.log vs console.dir: আউটপুট ফরম্যাটের পার্থক্য

দউই মেথডই কনসোলে আউটপুট দেখায়, কিন্তু তথ্য উপস্থাপনের ধরন ভিন্ন।

console.log()

• অবজেক্টের toString() রিপ্রেজেন্টেশন বা মানব-পঠনযোগ্য স্ট্রিং দেখায়।
• প্রাইমিটিভ মান (স্ট্রিং, নম্বর, বুল) সরাসরি প্রিন্ট করে।
• অবজেক্টের জন্য সাধারণত সংক্ষিপ্ত স্ট্রিং আকারে দেখায় (ব্রাউজার অনুযায়ী)।
• একসাথে একাধিক আর্গুমেন্ট নেয় এবং স্পেস দিয়ে জুড়ে দেয়।

console.log({a: 1, b: 2}); 
// আউটপুট (Chrome): {a: 1, b: 2} (ইন্টারঅ্যাক্টিভ নয়, স্ট্রিং রিপ্রেজেন্টেশন)

console.dir()

• অবজেক্টের ইন্টারঅ্যাক্টিভ, হায়ারার্কিক্যাল লিস্টিং দেখায়।
• প্রপার্টি, প্রোটোটাইপ, ফাংশন সিগনেচার — সব এক্সপ্যান্ড/কোল্যাপসIBLE ট্রি ফরম্যাটে।
• DOM এলিমেন্টের জন্য খুবই উপযোগী (সকল প্রপার্টি, ইভেন্ট লিসেনার, স্টাইল দেখায়)।
• শুধু একটি আর্গুমেন্ট নেয় (প্রথমটি)।

console.dir({a: 1, b: 2}); 
// আউটপুট: ▼ {a: 1, b: 2}  (ক্লিক করে এক্সপ্যান্ড করা যায়)

তুলনামূলক উদাহরণ

const user = {
  name: 'Rahim',
  age: 25,
  greet() { console.log('Hello'); }
};

console.log(user);
// আউটপুট: {name: 'Rahim', age: 25, greet: ƒ} (স্ট্রিং রিপ্রেজেন্টেশন)

console.dir(user);
// আউটপুট: ইন্টারঅ্যাক্টিভ ট্রি — name, age, greet, __proto__ এক্সপ্যান্ড করতে পারবেন

DOM এলিমেন্টের ক্ষেত্রে পার্থক্য স্পষ্ট

const btn = document.querySelector('button');

console.log(btn); 
// ... (HTML রিপ্রেজেন্টেশন)

console.dir(btn); 
// HTMLButtonElement { ... সকল প্রপার্টি: id, className, style, onclick, parentNode ... }

কোনটি কখন ব্যবহার করবেন?

প্রো টিপ: console.log-এ অবজেক্ট ইন্সপেক্ট করুন

অধিকাংশ আধুনিক ব্রাউজার (Chrome, Firefox, Edge) console.log(obj)-এও ক্লিকযোগ্য ইন্টারঅ্যাক্টিভ অবজেক্ট দেখায়। তবে console.dir গ্যারান্টি দেয় যে ট্রি ভিউই मिलবে।