JavaScript Objects for Absolute Beginners: A Fun Introduction

যদি তুমি JS এর exciting world এ entry নিয়ে থাক, তাহলে “Object” এই term টি তোমার শোনার কথা। Don’t worry যদি প্রথম দেখায় Object কে তোমার confusing মনে হয়। JavaScript এর খুবই fundamental একটা concept হল Object যা data organizing and managing এর ক্ষেত্রে খুব গুরুত্বপূর্ণ ভুমিকা পালন করে। In this article, we’ll take you on a fun ride to understand JavaScript objects, with plenty of examples to help you grasp the concept quickly. Don’t worry it’s an easy ride not any roller coaster ride!

Real Life Objects

Regular life এ তুমি pencil, book, bag, board, apple ইত্যাদি অনেক কিছুর সাথেই পরিচিত, এখানে সব কিছুর ই কিন্তু নিজের একটা বৈশিষ্ট্য (property) আছে যা দিয়ে তুমি জিনিসটা identify করতে পারো।

Javascript এও প্রতিটা Object এর এরকম আলাদা আলাদা property আছে যা দিয়ে তাকে অন্য object থেকে আলাদা করা যায়।

What are Objects?

Imagine তোমার একটা magic box আছে যাার মধ্যে অনেক গুলো জিনিস আছে। Box এর মধ্যে সব গুলো জিনিসের কিন্তু একটা নিজস্ব unique label আছে, যার কারনে জিনিসগুলো খুব সহজে একটা থেকে আরেকটা আলাদা করা যায়।JavaScript objects work much the same way! এগুলো container এর মত যা অনেকগুলো information কে একসাথে hold করে রাখে, এগুলোকে বলা হয় properties. প্রত্যেক property এর নিজস্ব একটা name (also known as a key) এবং একটা value থাকে।

JavaScript এ object কে represent করা হয় curly braces {} দিয়ে। Let's create a simple object with some properties:

const person = {
  name: "John Doe",
  age: 30,
  isStudent: true
};

উপরের example এ আমাদের কাছে একটা Object আছে যার নাম person with three properties: name, age, and isStudent. Property নামগুলো হল name, age, and isStudent, এবং তাদের corresponding value গুলো হল "John Doe", 30, and true.

Accessing Object Properties

কোন object এর property access করার জন্য আমরা use করি dot notation অথবা square brackets (যখন যেটা দরকার):

console.log(person.name);      // Output: "John Doe"
console.log(person["age"]);    // Output: 30
console.log(person.isStudent); // Output: true

You can see that person.name, person["age"], and person.isStudent all give us access to the values of the respective properties.

Adding and Modifying Properties

তোমার magic box থেকে যেভাবে তুমি কোনও item বাদ দিতে পারো/ নতুন item যোগ করতে পারো, একইরকমভাবে javaScript এ object এর property কেও সেভাবে যোগ করতে পারো / modify করতে পারো।

person.gender = "male";
person.age = 31;

Here, we added a gender property with the value "male" and updated the age property to 31.

Removing Properties

তুমি কোনও property বাদ ও দিতে পারো delete keyword use করে।

delete person.isStudent;

এই delete keyword টি সাহায্য করেছে person object থেকে isStudent property কে remove করতে।

Objects can Hold Different Types

One cool thing about objects is that একটা object এর মধ্যে different types of values একসাথে থাকতে পারে object এর property হিসেবে, including strings, numbers, booleans, arrays, and even other objects!

const car = {
  brand: "Toyota",
  year: 2022,
  isElectric: false,
  features: ["GPS", "Bluetooth", "Backup Camera"],
  owner: {
    name: "Alice",
    age: 28
  }
};

এই example এ car object টির অনেকগুলো property আছে, including a string, a number, a boolean, an array of features, and an object representing the owner.

Looping through Object Properties

To loop through all the properties of an object, you can use the for...in loop:

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

This loop will display all the properties and their values from the person object. এখানে console এর ভেতর template string use করা হয়েছে। আরেকটা জিনিস object কে loop করতে কিন্তু for…in… use করা হয়। অপরপক্ষে, array কে loop করতে use করা হয় for…of… তুমি normal for loop দিয়েও এই সব গুলো কাজই কিন্তু করতে পারবে।

A real world example in JS Object

এখানে javascript object এর একটা real-world example দেওয়া হল যা student’s information কে represent করছে।

const student = {
  name: "John Doe",
  age: 20,
  gender: "Male",
  grade: "A",
  subjects: ["Mathematics", "Science", "English"],
  address: {
    street: "123 Main Street",
    city: "New York",
    zipCode: "10001"
  },
  contact: {
    email: "john.doe@example.com",
    phone: "555-123-4567"
  }
};

এই example এstudent object এর various properties আছে যা ঐ student সম্পর্কে বিভিন্ন information provide করেঃ

• name: The student's full name is "John Doe."
• age: The student's age is 20.
• gender: The student's gender is male.
• grade: The student's current grade is "A."
• subjects: An array containing the student's favorite subjects - Mathematics, Science, and English.
• address: An object representing the student's address with properties for street, city, and zip code.
• contact: An object representing the student's contact information with properties for email and phone number.

This object can be used to organize and access the student’s information in a structured manner. For example:

console.log(student.name);           // Output: "John Doe"
console.log(student.age);            // Output: 20
console.log(student.subjects[0]);    // Output: "Mathematics"
console.log(student.address.city);   // Output: "New York"
console.log(student.contact.email);  // Output: "john.doe@example.com"

কোন একটা real-world scenario তে, তুমি এই object কে use করতে পারবে ওয়েবসাইট এ কোনও student এর profile দেখাতে অথবা pass student এর information দেখাতে সহ আরও অনেক ক্ষেত্রে। It provides a convenient way to group related data together and makes it easy to access and manipulate the student’s details.

Objects are Everywhere in JavaScript

Objects are one of the building blocks of JavaScript, and you’ll find them used extensively in web development, data manipulation, and beyond. Understanding objects is essential for becoming a proficient JavaScript developer.

Congratulations! You’ve now taken your first steps into the fascinating world of JavaScript objects. You’ve learned how to create, access, modify, and remove properties from an object, and even how to loop through its properties. Keep practicing, and soon you’ll be creating complex and powerful applications using JavaScript objects!

Happy coding! 🚀