জাভাস্ক্রিপ্ট অবজেক্ট
জাভাস্ক্রিপ্ট অবজেক্ট
জাভাস্ক্রিপ্টে অবজেক্ট হলো মূল। আপনি যদি অবজেক্ট বুঝতে পারেন, তাহলে পুরো জাভাস্ক্রিপ্ট বুঝতে পারবেন।
জাভাস্ক্রিপ্টে প্রায় সবকিছুই অবজেক্ট।
- বুলিয়ান অবজেক্ট হতে পারে
- নম্বর অবজেক্ট হতে পারে
- স্ট্রিং-ও অবজেক্ট হতে পারে
- তারিখ সবসময় অবজেক্ট
- ম্যাথ সবসময় অবজেক্ট
- রেগুলার এক্সপ্রেশন সবসময় অবজেক্ট
- অ্যারে সবসময় অবজেক্ট
- ফাংশন সবসময় অবজেক্ট
- অবজেক্ট সবসময় অবজেক্ট
জাভাস্ক্রিপ্টে প্রিমিটিভ ভ্যালু ব্যতীত সকল ভ্যালুই অবজেক্ট।
প্রিমিটিভ ভ্যালু হলোঃ স্ট্রিং("Azizur Rahman"), নম্বর(৩.১৪), true, false, null এবং undefined
অবজেক্ট ভ্যারিয়েবল ধারনকারী ভ্যারিয়েবল
জাভাস্ক্রিপ্ট ভ্যারিয়েবলে মাত্র একটি মান রাখা যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p>একটি জাভাস্ক্রিপ্ট ভেরিয়েবল তৈরী করুন</p>
<p id="demo"></p>
<script>
var person = "আজিজুর রহমান";
document.getElementById("demo").innerHTML = person;
</script>
</body>
</html>
ফলাফল
অবজেক্টও ভ্যারিয়েবল, কিন্তু অবজেক্টে অনেক মান রাখা যায়।
ভ্যালুগুলো name : value জোড়ায় জোড়ায় লিখা হয়(name এবং value কোলনের মাধ্যমে আলাদা করা হয়)।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p>একটা জাভাস্ক্রিপ্ট অবজেক্ট তৈরী</p>
<p id="demo"></p>
<script>
var person = {
firstName : "আজিজুর",
lastName : "রহমান",
age : 32,
eyeColor : "কালো"
};
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট অবজেক্টে ভ্যালুর একটি নাম থাকে।
অবজেক্ট প্রোপার্টি
জাভাস্ক্রিপ্ট অবজেক্টের নামযুক্ত এইসব ভ্যালুকে প্রোপার্টি বলে।
| প্রোপার্টি | ভ্যালু |
|---|---|
| firstName | Azizur |
| lastName | Rahman |
| age | 32 |
| eyeColor | black |
অবজেক্ট মেথড
মেথড হলো অবজেক্টের কার্যক্রম যা অবজেক্টের মাধ্যমে সম্পাদিত হয়।
অবজেক্ট প্রোপার্টিগুলো প্রিমিটিভ ভ্যালু, অবজেক্ট এবং ফাংশন হতে পারে।
অবজেক্ট মেথড হলো একটি অবজেক্ট প্রোপার্টি যার মধ্যে ভ্যালু হিসেবে একটি ফাংশন ডেফিনেশন থাকে।
| প্রোপার্টি | ভ্যালু |
|---|---|
| firstName | Azizur |
| lastName | Rahman |
| age | 32 |
| eyeColor | black |
| fullName | function() {return this.firstName + " " + this.lastName;} |
জাভাস্ক্রিপ্ট অবজেক্ট তৈরি
জাভাস্ক্রিপ্টে অবজেক্ট তৈরি করার কয়েকটি উপায় রয়েছেঃ
- অবজেক্ট লিটারাল ব্যবহার করে একটি অবজেক্ট তৈরি করা যায়।
- new কি-ওয়ার্ড ব্যবহার করে একটি অবজেক্ট তৈরি করা যায়।
- অবজেক্ট কনস্ট্রাক্টর ডিফাইন করে তারপর ঐ কনস্ট্রাক্টর টাইপ থেকে অবজেক্ট তৈরি করা যায়।
- ES5-এ Object.create() ফাংশনের মাধ্যমে অবজেক্ট তৈরি করা যায়।
অবজেক্ট লিটারাল ব্যবহার করে অবজেক্ট তৈরি
জাভাস্ক্রিপ্ট অবজেক্ট তৈরি করার এটিই সবচেয়ে সহজ পদ্বতি।
অবজেক্ট লিটারাল ব্যবহার করে একটি স্টেটমেন্টে অবজেক্ট ডিফাইন এবং তৈরি করা যায়।
অবজেক্ট লিটারাল হলো দ্বিতীয় বন্ধনীর {} মধ্যে কিছু name:value এর জোড়ার লিস্ট।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p>একটি জাভাস্ক্রিটপ ভেরিয়েবল তৈরী করি</p>
<p id="demo"></p>
<script>
var person = {firstName:"আজিজুর", lastName:"রহমান", age:32, eyeColor:"নীল"};
document.getElementById("demo").innerHTML =
person.firstName + " এর বয়স " + person.age + " বছর ";
</script>
</body>
</html>
ফলাফল
new কী-ওয়ার্ড ব্যবহার করে অবজেক্ট তৈরি
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="demo"></p>
<script>
var person = new Object();
person.firstName = "আজিজুর";
person.lastName = "রহমান ";
person.age = 32;
person.eyeColor = "কালো";
document.getElementById("demo").innerHTML =
person.firstName + " এর বয়স " + person.age + " বছর ";
</script>
</body>
</html>
ফলাফল
উপরের দুটি উদাহরণ একই রকম কাজ করে। তাই new Object() ব্যবহার করার প্রয়োজন নেই।
অবজেক্ট কনস্ট্রাক্টর ব্যবহার করে অবজেক্ট তৈরি
উপরের পদ্ধতিগুলোর কিছু সীমাবদ্ধতা আছে। কারন এগুলোর মাধ্যমে শুধুমাত্র একটি অবজেক্ট তৈরি করা যায়।
মাঝে মাঝে আমাদের একই ধরনের অনেক অবজেক্টের প্রয়োজন হতে পারে। তাই আমরা একটি অবজেক্ট টাইপ ব্যবহার করতে পারি।
অবজেক্ট টাইপ তৈরি করার আদর্শ পদ্ধতি হলো কনস্ট্রাক্টর ফাংশন ব্যবহার করাঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="demo"></p>
<script>
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
var myFather = new person("আজিজুর", "রহমান", 32, "blue");
var myMother = new person("নীলা", "খাতুন", 24, "green");
document.getElementById("demo").innerHTML =
"আমার বাবার বয়স " + myFather.age + আমার মায়ের বয়স " + myMother.age;
</script>
</body>
</html>
ফলাফল
উপরের ফাংশনটি একটি অবজেক্ট কনস্ট্রাক্টর।
আপনার একটি অবজেক্ট কনস্ট্রাক্টর থাকলে আপনি একই টাইপের অনেক অবজেক্ট তৈরি করতে পারবেনঃ
var myFather = new person("Azizur", "Rahman", 32, "black");
var myMother = new person("Nila", "Khatun", 24, "black");
this কি-ওয়ার্ড
জাভাস্ক্রিপ্টে, যে অবজেক্টের কোডের মধ্যে this কি-ওয়ার্ড থাকে মূলত এই this এর মাধ্যমে ঐ অবজেক্টকে বুঝায়।
যদি কোন অবজেক্টের ফাংশনে this ব্যবহার করা হয়,তাহলে this এর ভ্যালু হচ্ছে ঐ ফাংশনটি যে অবজেক্টে রয়েছে।
যখন অবজেক্টের মধ্যে this ব্যবহার করা হয়, এর ভ্যালু ঐ অবজেক্টটি।
অবজেক্ট কনস্ট্রাক্টরের মধ্যে this কি-ওয়ার্ডের কোন ভ্যালু থাকে না।
অবজেক্ট তৈরি করার জন্য যখন অবজেক্ট কনস্ট্রাক্টর ব্যবহার করা হয় তখন this এর ভ্যালু হয় নতুন অবজেক্টটি।
this কোন ভ্যারিয়েবল নয়। এটি একটি কী-ওয়ার্ড। আপনি this এর ভ্যালু পরিবর্তন করতে পারবেন না।
বিল্ট-ইন জাভাস্ক্রিপ্ট কনস্ট্রাক্টর
জাভাস্ক্রিপ্টের কিছু বিল্ট-ইন কনস্ট্রাক্টরের উদাহরণ নিচে দেওয়া হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="demo"></p>
<script>
var x1 = new Object(); // A new Object object
var x2 = new String(); // A new String object
var x3 = new Number(); // A new Number object
var x4 = new Boolean(); // A new Boolean object
var x5 = new Array(); // A new Array object
var x6 = new RegExp(); // A new RegExp object
var x7 = new Function(); // A new Function object
var x8 = new Date(); // A new Date object
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>";
</script>
<p> String(), Number(), Boolean(), Array(), এবং RegExp() ব্যবহার করার দরকার নেই। </p>
</body>
</html>
ফলাফল
Math() অবজেক্টটি এই লিস্টের মধ্যে নেই। Math একটি গ্লোবাল অবজেক্ট। Math অবজেক্টে new কি-ওয়ার্ডটি ব্যবহার করা যায় না।
জাভাস্ক্রিপ্ট অবজেক্টগুলো মিউটেবল
জাভাস্ক্রিপ্ট অবজেক্টকে তার ভ্যালুর মাধ্যমে পরিচয় করা হয় না, এর নামের মাধ্যমে করা হয়।
var x = person;
উপরের উদাহরণটিতে person যদি একটি অবজেক্ট হয়,তাহলে উপরের এসাইনমেন্টটির মাধ্যমে আমরা person অবজেক্টকেই x এর মধ্যে রাখলাম,আমরা person এর মত হুবহু আরেকটি অবজেক্ট তৈরি করিনি। এখন person কে আমরা x এর মাধ্যমে এক্সেস করতে পারবো। x এর মধ্যে পরিবর্তন করলে person এর মধ্যেও পরিবর্তন হবে, কারণ তারা একই অবজেক্ট।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="demo"></p>
<script>
var person = {firstName:"আজিজুর", lastName:"রহমান", age:32, eyeColor:"নীল"}
var x = person;
x.age = 32;
document.getElementById("demo").innerHTML =
person.firstName + " এর বয়স " + person.age + " বছর";
</script>
</body>
</html>
ফলাফল
নোটঃ জাভাস্ক্রিপ্ট ভ্যারিয়েবল মিউটেবল নয়। শুধুমাত্র অবজেক্ট মিউটেবল।