নিত্যদিনের জাভাস্ক্রিপ্টঃ ডট নোটেশন এবং ব্র্যাকেট নোটেশন

আমরা জাভাস্ক্রিপ্ট এ কখনো কোনো অবজেক্ট থেকে কোনো প্রপার্টি অ্যাক্সেস করতে গেলে দুই উপারে সেটা করতে পারিঃ

• ডট নোটেশান (Dot Notation)
• ব্র্যাকেটস নোটেশান (Brackets Notation)

প্রথমেই আমরা একটা উদাহরণ দেখে নেই, তাহলে আসলে এদেরকে আমরা ঠিক কোথায় ইউজ করি সেটা বুঝে আসবে। ধরি আমাদের একটা অবজেক্ট আছেঃ

const obj = {
   property: 'value'
}

এখন এই অবজেক্ট থেকে যদি আমরা property টা অ্যাক্সেস করতে চাই, ডট নোটেশন ইউজ করলেঃ

obj.property

আর যদি ব্র্যাকেটস নোটেশন ইউজ করিঃ

obj['property']

তাহলে এদেরকে এখন দুইভাবেই অ্যাক্সেস করে প্রিন্ট করলেঃ

console.log(obj.property);
console.log(obj['property']);

দুইটা সেইমভাবেই আউটপুট দিবেঃ

তো এখন দুইটা যদি একই আউটপুট দেয়, তাহলে এই দুইটার দরকারটা কি? যেকোনো একটা রাখলেই তো হয়, নাকি?

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

ডট নোটেশন(Dot Notation):

ধরি আমাদের একটা অবজেক্ট আছেঃ

const person = {
   name: 'Zonayed Ahmed',
   age: 21,
   job: 'Student'
}

এখন যদি আমরা এই person অবজেক্ট থেকে name প্রপার্টিটা চাই তাহলে আমাদের ডট নোটশন ইউজ করে এভাবে এটাকে বের করতে হবেঃ

person.name

এখন এখানে person হচ্ছে আমাদের অবজেক্টটা, তারপর একটা ডট . মানে এর ভিতরে , তারপরে name হচ্ছে প্রপার্টির নাম। মোট কথা আমরা person অবজেক্ট এর ভিতরে name নামে একটা প্রপার্টি অ্যাক্সেস করতে চাচ্ছি। আর তাই এটা প্রিন্ট করলেঃ

console.log(person.name);

দেখবেন আপনার person অবজেক্ট এর name প্রপার্টির ভ্যালুটা বের হয়ে আসবে। এখানে ভ্যালুটা হচ্ছে Zonayed Ahmed । এখন ধরুন আপনাকে আপনার কোডের সরাসরি প্রপার্টির নাম দেওয়ার সুযোগ দেওয়া হলো না। বরং আপনার প্রপার্টির নাম একটা ভ্যারিয়েবলের ভিতরে আছে এরকমঃ

const personName = 'name';

এখন আপনি এই ভ্যারিয়েবল ইউজ করে আপনার person অবজেক্ট থেকে name প্রপার্টিটা বের করতে হবে। সোজাই তো ঠিক না? এরকম করলেই তো হবেঃ

person.personName

আচ্ছা দেখি তাহলে প্রিন্ট করেঃ

console.log(person.personName);

রেজাল্ট undefined দেখাচ্ছে! কিন্তু কেনো? হ্যাঁ এখানেই বুঝার ব্যাপার। আমরা যখন বলেছি আমরা person অবজেক্ট থেকে একটা প্রপার্টি অ্যাক্সেস করতে চাচ্ছি, তখন সেই প্রপার্টির নাম দিয়েছি personName । যদিও আমাদের এই সেইম নামেই একটা ভ্যারিয়েবল আছে। কিন্তু এখানে ডট দেওয়ার জাভাস্ক্রিপ্ট আপনার person অবজেক্ট এর ভিতর থেকে personName নামেই একটা প্রপার্টি খুঁজবে। কিন্তু আপনার অবজেক্ট এর ভিতরে তো এই নামে কোনো প্রপার্টিই নাই। আর তাই এটা undefined দেখাচ্ছে।

কিন্তু তাইলে আমরা যে personName নামে একটা ভ্যারিয়েবল নিলাম, আর সেই ভ্যারিয়েবলে প্রপার্টির নাম name স্টোর করলাম, এখন personName দিয়ে person থেকে name প্রপার্টি কিভাবে অ্যাক্সেস করবো? হ্যাঁ সেজন্যেই আমাদের এখন ব্র্যাকেটস নোটেশনের কাজ লাগবে।

ব্র্যাকেটস নোটেশন(Brackets Notation):

উপরের এরকম সিচুয়েশনে এখন আমরা একটা ভ্যারিয়েবল থেকে প্রপার্টির নাম নিয়ে যদি কোনো অবজেক্ট থেকে কোনো প্রপার্টি অ্যাক্সেস করতে চাই, তাহলে আমাদের এই ব্র্যাকেটস নোটেশনের সাহায্য নিতে হবেঃ

person[personName]

এখন এটাকে প্রিন্ট করলেঃ

console.log(person[personName]);

এটা একদম ঠিক আমরা যেভাবে চেয়েছি সেভাবেই প্রিন্ট করবেঃ

এখানেই আমাদের এই ব্র্যাকেটস নোটেশনের খেলা। ব্র্যাকেটস নোটেশনে এভাবে আপনি ভ্যারিয়েবল পাস করতে পারবেন। মূলত এখানে আপনি স্ট্রিং পাস করতে পারবেন। উপরের কাজটা এভাবেও করা যেতো ডট নোটেশনের বদলেঃ

console.log(person['name']);

এটাও একইরকম আউটপুট দিবেঃ

যদিও এই সিচুয়েশনে ডট নোটেশনেই কাজ করে, তাই ডট নোটেশনই ইউজ করা উচিত। কারণ ডট নোটেশন দেখতেও সুন্দর, আর কোডও অনেকটা পরিষ্কার দেখা যায়।

এখন ব্র্যাকেটস নোটেশনের আরো কিছু কাজ দেখি। ধরি আমাদের আরেকটা অবজেক্ট আছেঃ

const anyObj = {
   Student: 'A property name to match with previous one'
}

এখানে anyObj এর প্রপার্টির নামটা ঠিক এভাবে দিয়েছি কারণ আগের আমাদের person অবজেক্ট এ একটা প্রপার্টির ভ্যালু Student আমরা ঐ ভ্যালুটা ইউজ করে এখানের এই Student প্রপার্টিটাকে অ্যাক্সেস করতে পারি কিনা দেখিঃ

anyObj[person.job]

এখানে আমরা anyObj থেকে ব্র্যাকেটস নোটেশন ইউজ করে একটা প্রপার্টি অ্যাক্সেস করতে চাচ্ছি। এখন সেই প্রপার্টিটা কি? সেটা হচ্ছে person.job । এখন তাহলে দেখতে হবে person.job এর ভ্যালু কি। person.job এর ভ্যালু হচ্ছে Student । তার মানে আমরা আসলে anyObj এর Student নামে কোনো প্রপার্টির ভ্যালু খুঁজছিঃ

console.log(anyObj[person.job]);

এবং ঠিক যেভাবে বলা সেভাবেই কাজঃ

এখন ডট নোটেশনের কাজ তো জানলামই। বরং আমরা বেশীরভাবে ক্ষেত্রেই ডট নোটেশন নিয়েই কাজ করবো। কিন্তু ব্র্যাকেটস নোটেশন কখন ইউজ করবো? হ্যাঁ এখন for লুপ ইউজ করে অবজেক্ট থেকে যদি সব প্রপার্টির ভ্যালু অ্যাক্সেস করতে চাই তাহলে এই ব্র্যাকেটস নোটেশন কাজে লাগে। ধরি আমরা উপরের person অবজেক্ট এর সবগুলো প্রপার্টির ভ্যালুগুলো প্রিন্ট করতে চাচ্ছিঃ

for(aVal in person) {
   console.log(`aVal is here: ${aVal}`);
}

দেখেন এই লুপ ইউজ করে আমরা প্রপার্টি কী গুলোর নাম পাচ্ছি। কিন্তু তাহলে ভ্যালুগুলো কিভাবে পেতে পারি? হ্যাঁ এই কীগুলোর নামই ব্র্যাকেটস নোটেশন ইউজ করে ভ্যালুগুলোও পেতে পারি এভাবেঃ

for(aVal in person) {
   console.log(`Value: ${person[aVal]}`);
}

একদম পার্ফেক্টঃ

এটা যদি আমরা ডট নোটেশন দিয়ে ট্রাই করি তাহলে কাজ করবে নাঃ

for(aVal in person) {
   console.log(`Value: ${person.aVal}`);
}

এখানে দেখবেন সেই undefined ই।

কেনো এরকম প্রিন্ট করলো সেটা হয়তো বুঝে ফেলেছেন এতোক্ষনে। আর তাই এক্ষেত্রে ডট নোটেশনের পরবর্তিতে ব্র্যাকেটস নোটেশন কাজ করবে।

শুধুমাত্র for লুপের ক্ষেত্রেই না, আরো অনেক কাজেও এটা লাগতে পারে। তাই জেনে রাখা ভালো। আশা করি এরকম পরিস্থিতিতে পড়লে এটা আপনার কাজে আসবে।