Basic Object In Bengali JavaScript Series ⇾ Chapter Seven

আমরা এর আগে array সম্পর্কে জেনেছি ।আমরা জেনেছি array এমন একটি detatype যেখানে একটা ভেরিয়েবল এ অনেক ডাটা স্টোর করে রাখতে পারি ।এই পর্বে থাকছে অবজেক্ট নিয়ে ।আগে দেখে নেই কি কি বিষয় থাকছে আমাদের এই চ্যাপ্টার সেভেন এ :

• অবজেক্ট কি
• অবজেক্ট লিটেরাল এবং অবজেক্ট কন্সট্রাক্টর এর মধ্যে পার্থক্য
• কিভাবে অবজেক্ট প্রপার্টি acess করতে হয়
• Setting অবজেক্ট প্রপার্টি
• Remove অবজেক্ট প্রপার্টি
• দুইটা অবজেক্ট এর মধ্যে তুলনা
• Iterate অবজেক্ট প্রপার্টি
• এবং কিছু অবজেক্ট মেথড

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

051. What is an Object :

array তে element গুলোকে ইনডেক্স নাম্বার ধরে ধরে মনে রাখতে হয় ।একটার পর একটা সাজানো element আমরা কোন নাম ছাড়াই শুধু ইনডেক্স নাম্বার ধরে প্রিন্ট করি ।

var student1=[৪৫,৪৬,৯০,৫৪,৮৭] এই array তে একজন স্টুডেন্ট এর সাবজেক্ট আকারে নাম্বার মেনশন করা আছে । ধরা বাংলায় ৪৫,ইংলিশ ৪৬ ,অংকে ৯০ এভাবে সাজান আছে ।

এই array দেখে অন্য কেও কি বুজতে পারবে কোনটা কোন সাবজেক্ট এর নম্বর ? পারবে না ।

তাহলে আমরা কি সাবজেক্ট অনুযায়ী মার্ক গুলোকে সাজাতে পারব না ?এমন কি কোন সিস্টেম প্রোগ্রামিং এ নাই যেটা আমাদের key এবং value সহ ডাটা স্টোর করতে দিবে ?

এই প্রশ্নের সহজ সমাধানের জন্যই আছে অবজেক্ট ।অবজেক্ট আমাদের এমন একটা সমাধান দেয় যেখানে আমরা একটা বস্তুকে তার বিভিন্ন বৈশিষ্ট অনুযায়ী আলাদা করতে পারি ।

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

var car={
name:"Toyota",
color:"black",
while:4
}

ঠিক তেমনি আমরা স্টুডেন্ট আলাদা করতে পারি

var student1={
bangla:45,
english:46,
math:90
}

এই যে সিস্টেম এ আমরা একজন স্টুডেন্ট কে আলাদা করলাম তার key এবং value দিয়ে এটাই মূলত অবজেক্ট ।আর প্রথমে var কীওয়ার্ড ব্যবহার করে অবজেক্ট এর নাম দিয়েছি ।then { } সেকেন্ড ব্রাকেট ব্যবহার করে বডি শুরু করেছি ।বৈশিষ্ট বা প্রপার্টি লিখেছি এবং প্রত্যেকটা বৈশিষ্টকে আমরা আলাদা করেছি , কমা ব্যবহার করে ।

052. Object Literal vs Constructor :

তুমি একটা empty অবজেক্ট ডিক্লের করতে পার ।ঠিক array এর মত ।আমরা এখন দেখে আশি অবজেক্ট এর কাঠাম :

var obj ={}

উপরে তুমি প্রথমে একটা ভেরিয়েবল ডিক্লের করেছ ।তারপরে একটা {} সেকেন্ড ব্রাকেট দিয়েছ ।জাভাস্ক্রিপ্ট এ এই রকম কার্লি ব্রাকেট মানেই অবজেক্ট ।এখন আমরা যদি empty অবজেক্ট না রাখতে চাই তাহলে এর মধ্যে প্রপার্টিস অ্যাড করতে পারি ।

var obj={}
obj.x= 90

console.log(obj)

সহজ ভাষায় প্রপার্টিস মানে হলো ,যে নাম দিয়ে তুমি ভ্যালু কে নাম করন করবা ।অনেকে এটাকে key বলে থাকে ।আর ভ্যালু মানে তো বুজেছো ।

তো আমরা এখানে কি করলাম x নামে একটা প্রোপার্টিকে obj অবজেক্ট এর মধ্যে বসিয়ে দিলাম ।এবার তুমি যদি অবজেক্ট কনসোল লগ কর তাহলে দেখতে পাবে :

এই যে আমরা . ব্যবহার করে প্রপার্টি বানালাম এটাকে বলে ডট নোটেশন ।

আবার আমরা : ক্লোন নোটেশন ব্যবহার করেও অবজেক্ট প্রপার্টি বানাতে পারি ।

var obj2 = {
  x: 90
};
console.log(obj2);

আউটপুট :

same আউটপুট দিয়েছে আমরা দুই ভাবেই অবজেক্ট প্রপার্টি create করতে পারি ।

অবজেক্ট এ কিন্তু কোন ইনডেক্স নম্বর থাকে না আমরা এই প্রপার্টি ধরেই ভ্যালু খুঁজে বের করব ।array তে যেমন করতাম ইনডেক্স ধরে ।

আমরা যদি দুইটা প্রপার্টি ডিক্লার করতে চাই সেক্ষেত্রে আমরা কমা ব্যবহার করব ।

var point = {
  x: 20,
  y: 30,
};

console.log(point);

আউটপুট :

এবারে আমরা যদি চাই তাহলে সেই আগের দেখান . ডট নোটেশন ব্যবহার করে স্পেসিফিক অবজেক্ট এর মধ্যে প্রপার্টি ভ্যালু ইন্সার্ট করতে পারি ।

var point = {
  x: 20,
  y: 30,
};

point.z = 9;
console.log(point);

দেখো খেয়াল করে আমরা নতুন প্রপার্টি এন্ড ভ্যালু ইন্সার্ট করে ফেলেছি point নামক অবজেক্ট এ ।

আমরা উপরে যে সিস্টেম অবজেক্ট ডিক্লের করলাম এটাকে বলাহয় অবজেক্ট literal ।

এছাড়াও আমরা অবজেক্ট Constructor ব্যবহার করেও অবজেক্ট ডিক্লেয়ার করতে পারি । সেক্ষেত্রে আমাদের Object() Constructor এর সাহায্য নিতে হবে ।

var conObj = Object();

conObj.a = 50;

console.log(conObj);

এখানেও আমরা Object() ব্যবহার করে empty অবজেক্ট ডিক্লের করতে পারি ।এবং ডট নোটেশন ব্যবহার করে প্রপার্টি insert করতে পারি ।

আউটপুট :

053. Accessing Object Properties in Javascript :

একটা অবজেক্ট এ মূলত দুই ভাবে আমরা acess নিতে পারি ।

• ডট নোটেশন .
• array নোটেশন []

প্রথমেই আমরা দেখব dot নোটেশন দিয়ে কিভাবে আমরা একটা অবজেক্ট এ acess নিতে পারি ।

create acessobject.js in your chapterSeven folder

প্রথমেই একটা অবজেক্ট litaral ব্যবহার করে অবজেক্ট create করে নিচ্ছি :

var obj = {
  x: 10,
  y: 20,
  z: 30,
};

console.log(obj.x);

console.log(obj.y);

console.log(obj.x + obj.z);

এখানে আমরা obj নাম একটা অবজেক্ট ডিক্লের করেছি যার প্রপার্টি হিসেবে রয়েছে x,y,z । আমরা চাচ্ছি কনসোল এ x,y ,x+z এর acess নিবো বা আউটপুট দেখব ।

তাই console.log(obj.x) অবজেক্ট এর নাম লিখে . ব্যবহার করে যে প্রোপার্টিটা পেতে চাই সেটা লিখে দিয়েছি । এই যে ডট ব্যবহার করে প্রোপার্টি acess করলাম এটাকেই access with dot নোটেশন বলে ।

আউটপুট :

এছাড়াও আমার array নোটেশন ব্যবহার করেও প্রপার্টি acess করতে পারি । array নোটেশন দিয়ে acess করতে আমরা [] ব্যবহার করব এবং অবশ্যই প্রোপার্টিটাকে স্ট্রিং আকারে provide করব ।

var obj = {
  x: 10,
  y: 20,
  z: 30,
};
console.log(obj["x"]);

console.log(obj["y"]);

console.log(obj["x"] + obj["y"]);

আউটপুট :

এখন প্রশ্ন হতে পারে কখন আমরা ডট নোটেশন ব্যবহার করব এবং এখন array নোটেশন ব্যবহার করব ?

যখন বাইরে থেকে ক্লায়েন্ট কোন ডাটা স্ট্রিং আকারে দিবে এবং সেটা কোন ভেরিএবলে স্টোর করতে হবে তখনি আমরা ব্যবহার করব array নোটেশন । এছাড়া বাকি সব জায়গায় ডট নোটেশন দিয়ে acess করব ।

var obj = {
  x: 10,
  y: 20,
  z: 30,
};

var show = "x";

console.log(obj.show);
console.log(obj[show]);

ধর ক্লায়েন্ট আমাদের একটা ইনপুট দিয়েছে যেটা show ভেরিএবলে স্টোর হয়েছে ।এখন আমরা যদি ডট নোটেশন দিয়ে acess করতে চাই তাহলে undifined আউটপুট দিচ্ছে ।কিন্তু আমরা যদি array নোটেশন এ ভ্যারিয়েবল acess করতে চাই তাহলে ঠিক আউটপুট দিবে যেটা আমাদের অবজেক্ট এ ম্যাচ করবে ।

আউটপুট :

054. Setting Object Properties in Javascript:

আমরা একটা অবজেক্ট এ ডট নোটেশন ব্যবহার করে আপডেট করতে পারি ।ধর আমাদের একটা অবজেক্ট আছে point নামে ।এবং তার মধ্যে প্রপার্টি আছে x,y,z যার ভ্যালু ১০,১৫,২০ ।এখন আমরা চাচ্ছি x এর ভ্যালু আপডেট হয়ে হয়ে যাবে ৪০।

var point = {
  x: 10,
  y: 15,
  z: 20,
};

point.x = 40;

console.log(point);

দেখো x এর মান dot নোটেশন ব্যবহার করে ৪০ করে দিয়ে যদি পয়েন্ট অবজেক্ট কে কনসোল করি তাহলে আউটপুট আসবে :

আউটপুট :

{ x: 40, y: 15, z: 20 }

আগের প্রপার্টি ভ্যালু রিপ্লেস করে দিয়েছে ।কিন্তু আমরা যদি এমন চাই যে প্রোপার্টিটা নেই সেটা ইন্সার্ট করতে চাই ।তাহলে just point.a = 50 করে দিলে নতুন a নামে প্রপার্টি create হবে যার ভ্যালু ৫০ ।

আবার ধরো তুমি এমন একটা অবজেক্ট প্রপার্টি acess করতেচাচ্ছ যেটা নেই ।সেক্ষেত্রে অন্য ল্যাঙ্গুয়েজ error জেনারেট করত ।কিন্তু জাভাস্ক্রিপ্ট আমাদের updefined রিটার্ন করবে ।

var point = {
  x: 10,
  y: 15,
  z: 20,
};

console.log(point.c);

আউটপুট :

undefined

আমরা যেভাবে ডট নোটেশন ব্যবহার করে প্রপার্টি আপডেট ,create কিংবা acess করতে পারি ঠিক তেমনি array নোটেশন ব্যবহার করেও same কাজ গুলো করতে পারি ।

var point = {
  x: 10,
  y: 15,
  z: 20,
};


point["x"] = 40;

console.log(point["c"]);

var prop = "z";

point[prop] = 80;
console.log(point);

অবশ্যই array নোটেশন ব্যবহারের ক্ষেত্রে আমাদের স্ট্রিং আকারে প্রপার্টি নাম দিতে হবে ।

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

আউটপুট :

undefined
{ x: 40, y: 15, z: 80 }

055. Remove Object Properties in JavaScript :

আমাদের অনেকসময় প্রোপার্টি রিমুভ করার প্রয়োজন হয়ে থাকে ।সেক্ষেত্রে আমরা প্রথমেই একটা obj নামে অবজেক্ট ডিক্লের করে নিতে পারি যার প্রপার্টি যথাক্রমে x,y,z এবং তার ভ্যালু 20,30,40। এবারে আমাদের আর x প্রপার্টি এর দরকার নাই ।মানে আমরা x কে রিমুভ করে দিব ।

var obj = {
  x: 20,
  y: 30,
  z: 40,
};

delete obj.x;

console.log(obj);

জাস্ট ডট নোটেশন ব্যবহার করে তার আগে delete কথাটা ব্যবহার করলেই হয়ে যাবে ।তার পরে যদি কনসোল লগ করো তাহলেই দেখবে x প্রপার্টি আর boj নামের অবজেক্ট এ নাই ।কমপ্লেটেলি ডিলিট হয়ে গেছে । এই delete হচ্ছে জাভাস্ক্রিপ্ট এর স্পেশাল ফিচার / অপারেটর ।

আউটপুট :

056. How to Compare Two Objects in Javascript:

আমরা এর আগে প্রিমিটিভ টাইপ ডাটা যেমন ,স্ট্রিং ,নাম্বার বা বুলিয়েন তুলনা করে দেখেছি । তবে দুইটা অবজেক্ট কে তুলনা করাটা একটু diffrent । প্রথমে আমরা দুইটা অবজেক্ট নিয়ে তাদের প্রপার্টি এবং ভ্যালু same রেখে compare করে দেখি ।

var obj = {
  a: 20,
  b: 10,
};

var obj2 = {
  a: 20,
  a: 10,
};
console.log(obj === obj2)

আমরা জানি দুইটা ডাটা যদি সমান হয় তবে true রিটার্ন করে দিবে ।আমাদের আউটপুট বলছে :

আউটপুট :

সমান না আর তাই false দিচ্ছে ।কিন্তু আমরা কোড পড়ে দেখতে পাচ্ছি দুইটাই সমান একই প্রপার্টি এবং একই ভ্যালু ।তাহলে false কেন দিচ্ছে ? false দেয়ার কারণ হচ্ছে দুইটা অবজেক্ট এর memory location আলাদা ।আমাদের কম্পিউটার দুটোকে আলাদা আলাদা জায়গায় স্টোর করে রাখছে ।

এখন প্রশ্ন হচ্ছে আমরা তাহলে কিভাবে দুইটা অবজেক্ট কে তুলনা করব ?

আমরা মূলত তুলনা করব অবজেক্ট গুলোর মধ্যে প্রপার্টি গুলোকে ।তাহলেই সঠিক উত্তর পাব ।এবং সেটা আমরা করতে পারি conditional স্টেটমেন্ট ব্যবহার করে ।

var obj = {
  a: 20,
  b: 10,
};

var obj2 = {
  a: 20,
  b: 10,
};

if (obj.a === obj2.a && obj.b === obj2.b) {
  console.log(true);
} else {
  console.log(false);
}

যদি দুইটাই সত্য হয় তবে true আসবে নাহয় false ।

আউটপুট

057. How to Iterate Object Properties in Javascript :

আমরা array চ্যাপ্টার এ দেখে ছিলাম কিভাবে array কে ট্রাভের্স করা যায় ।মানে প্রথম element থেকে শুরু করে প্রত্যেকটা eliment কে touch করা যায় ।এবং সেখানে আমরা ব্যবহার করেছিলাম loop ।

কিন্তু যখন তুমি অবজেক্ট এ চলে আসবে তখন সাধারণ লুপ দিয়ে iterate করতে পারবে না ।অবজেক্ট কে ট্রাভের্স বা iterate করতে গেলে আমাদের একটা অপারেটর এর সাহায্য নিতে হবে যার নাম হচ্ছে in এবং এখানেই আসে for in লুপ ।অবজেক্ট iteration এই লুপ দিয়ে হয়ে থাকে ।

প্রথমে আমরা দেখে নিব in অপারেটর কি :

in হচ্ছে জাভাস্ক্রিপ্ট এর স্পেশাল একটা অপারেটর অন্য সব গুলো অপারেটরের মতোই ।other অপারেটর যেমন true false রিটার্ন করে ঠিক তেমনি in অপারেটর আমাদের true false রিটার্ন করে ।

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

var obj = {
  a: 20,
  b: 40,
  c: 50,
};

আমরা দেখতে চাচ্ছি obj অবজেক্ট এর মধ্যে c নামে প্রপার্টি আছে কি নাই ।

console.log("c" in obj);

সহজ বাংলায় আমরা কনসোল এ বলাম "c" কি obj এর মধ্যে আছে ।

অবশ্যই এক্ষেত্রে প্রপার্টি নাম স্ট্রিং হিসেবে দিতে হবে ।

আউটপুট :

আমাদের আউটপুট true দিয়েছে । না থাকলে false দিত ।

এবারে আমরা অবজেক্ট কে ট্রাভার্স করব for in লুপ ব্যবহার করে । for in লুপ দেখতে বা এর কাঠামো খুবই সহজ:

for (key in obj) {
  // code block to be executed
}

শুরুটা হবে for কীওয়ার্ড দিয়ে ।এর পরে () ফার্স্টব্রাকেট এর মধ্যে থাকবে অবজেক্ট এর key , in অপারেটর , object এর নাম এবং শেষে {} এর মধ্যে থাকবে body ।ব্যাস এইটুকু ।

var obj = {
  a: 20,
  b: 40,
  c: 50,
};

for (var i in obj) {
  console.log(i + ": " + obj[i]);
}

এখানে var i অবজেক্ট এর key গুলোকে বোঝায় ke যতক্ষণ শেষ না হবে ততক্ষন লুপ চলবে । বডি তে কনসোল লগ এ বলে দিয়েছি i মানে key এবং array নোটেশন ব্যবহার করে অবজেক্ট এর ভ্যালু বের করে নিয়ে এসেছি ।

আউটপুট :

আশা করি বুঝতে পেরেছি ।

058. Object Methods Provided by Javascript :

আমরা অবজেক্ট এর খুব বেসিক জিনিস গুলি এই চ্যাপ্টার এ দেখেছি ।পরবর্তীতে আমরা অবজেক্ট এর আরো ডিটেলস জানব ।অবজেক্ট oriantation সম্পর্কে জানব ।তবে এই সেকশন এ কিছু বহুল ব্যবহৃত মেথড দেখতে যাচ্ছি ।

var obj = {
  name: "tanvir",
  age: 26,
  city: "dhaka",
  homeTown: "Barisal",
};

// to see the keys in object
console.log("keys in object ", Object.keys(obj));

// to see thr values in a object
console.log("Values in a object ", Object.values(obj));

// give the entries of object
console.log("Entries of object ", Object.entries(obj));

// copy a object to another object

var obj2 = Object.assign({}, obj);
obj2.name = "Toru";
console.log("copy a object ", obj2);

আউটপুট :

এই চ্যাপ্টারটা আমরা এখানেই শেষ করছি দেখা হবে আগামী চ্যাপ্টার এ ফাঙ্কশন নিয়ে ।