জাভাস্ক্রিপ্টে অবজেক্ট ডিসপ্লে করা মানে হলো অবজেক্টের তথ্যগুলো বিভিন্ন পদ্ধতিতে প্রদর্শন করা, যেমন কনসোল লগ, ওয়েব পেজে প্রদর্শন, বা ডিবাগিংয়ের জন্য। এটি ডেভেলপারদের অবজেক্টের প্রোপার্টি এবং মানগুলো সহজে দেখতে এবং বিশ্লেষণ করতে সাহায্য করে। নিচে কিছু সাধারণ পদ্ধতি ব্যাখ্যা করা হলো:
console.log()console.log() হলো সবচেয়ে সাধারণ এবং সহজ পদ্ধতি অবজেক্ট প্রদর্শনের জন্য। এটি ডেভেলপার কনসোলে অবজেক্টের মান দেখায়।
const person = {
name: "Alice",
age: 30,
isEmployed: true
};
console.log(person);
// আউটপুট: { name: "Alice", age: 30, isEmployed: true }
console.table()console.table() ব্যবহার করলে অবজেক্টের প্রোপার্টি এবং মানগুলো টেবিল ফর্ম্যাটে প্রদর্শিত হয়, যা পড়তে আরও সহজ হয়।
const users = [
{ name: "Alice", age: 30 },
{ name: "Bob", age: 25 },
{ name: "Charlie", age: 35 }
];
console.table(users);
// আউটপুট: একটি টেবিল যেখানে প্রতিটি অবজেক্টের প্রোপার্টি এবং মান দেখানো হবে
JSON.stringify() মেথড ব্যবহার করে অবজেক্টকে স্ট্রিং ফর্ম্যাটে রূপান্তর করা যায়, যা প্রিন্ট বা লোগ করার জন্য উপযুক্ত।
const car = {
make: "Toyota",
model: "Corolla",
year: 2020
};
const carString = JSON.stringify(car, null, 2);
console.log(carString);
/* আউটপুট:
{
"make": "Toyota",
"model": "Corolla",
"year": 2020
}
*/
null অর্থাৎ কোন পরিবর্তন নেই)।2 স্পেস ইনডেন্টেশন এর জন্য)।জাভাস্ক্রিপ্টের মাধ্যমে অবজেক্টের প্রোপার্টি ও মানগুলো HTML এলিমেন্টে রেন্ডার করা যায়।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Object Display</title>
</head>
<body>
<div id="output"></div>
<script>
const product = {
name: "Laptop",
brand: "Dell",
price: 75000
};
const outputDiv = document.getElementById("output");
// অবজেক্টের প্রোপার্টি লুপ করে প্রদর্শন
for (const key in product) {
if (product.hasOwnProperty(key)) {
const para = document.createElement("p");
para.textContent = `${key}: ${product[key]}`;
outputDiv.appendChild(para);
}
}
</script>
</body>
</html>
এই কোডটি একটি ডিভে অবজেক্টের প্রতিটি প্রোপার্টি এবং তার মান প্রদর্শন করবে।
টেমপ্লেট লিটারেল ব্যবহার করে অবজেক্টের মানগুলো HTML স্ট্রাকচারে সহজে ইন্টারপোলেট করা যায়।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Object Display with Template Literals</title>
</head>
<body>
<div id="product-info"></div>
<script>
const product = {
name: "Smartphone",
brand: "Samsung",
price: 50000
};
const productInfoDiv = document.getElementById("product-info");
productInfoDiv.innerHTML = `
<h2>Product Details</h2>
<p>Name: ${product.name}</p>
<p>Brand: ${product.brand}</p>
<p>Price: ${product.price} TK</p>
`;
</script>
</body>
</html>
এই পদ্ধতিতে, অবজেক্টের তথ্যগুলো সরাসরি HTML স্ট্রাকচারে প্রবেশ করানো হয়।
for...of লুপfor...of লুপ ইটারেবল অবজেক্টগুলোর জন্য ব্যবহৃত হয়, যেমন অ্যারে। অবজেক্টের প্রোপার্টি লুপ করতে Object.keys(), Object.values(), অথবা Object.entries() ব্যবহার করতে হয়।
const user = {
name: "Diana",
age: 28,
role: "Developer"
};
// Object.entries() ব্যবহার করে [key, value] পেয়ার পেতে
for (const [key, value] of Object.entries(user)) {
console.log(`${key}: ${value}`);
}
// আউটপুট:
// name: Diana
// age: 28
// role: Developer
ব্রাউজারের ডেভেলপার টুলস (যেমন Chrome DevTools) ব্যবহার করে অবজেক্টের ডিটেইলড ভিউ দেখা যায়, যা ডিবাগিংয়ের জন্য অত্যন্ত উপকারী।
F12 প্রেস করুন অথবা রাইট-ক্লিক করে "Inspect" নির্বাচন করুন।console.log() ব্যবহার করুন।const user = {
name: "Eve",
age: 35,
skills: ["JavaScript", "React", "Node.js"]
};
console.log(user);
কনসোলে এই অবজেক্ট ক্লিক করলে তার সব প্রোপার্টি ও মানগুলো বিস্তৃতভাবে দেখা যাবে।
hasOwnProperty()অবজেক্টের নির্দিষ্ট প্রপার্টি আছে কিনা যাচাই করতে hasOwnProperty() মেথড ব্যবহার করা হয়।
const book = {
title: "JavaScript Basics",
author: "John Doe",
pages: 350
};
console.log(book.hasOwnProperty("title")); // আউটপুট: true
console.log(book.hasOwnProperty("publisher")); // আউটপুট: false
Object.keys(), Object.values(), Object.entries()এই মেথডগুলি অবজেক্টের প্রোপার্টি, মান, এবং কী-ভ্যালু জোড়া অ্যারে আকারে প্রদান করে।
const employee = {
id: 101,
name: "Frank",
department: "HR"
};
const keys = Object.keys(employee);
const values = Object.values(employee);
const entries = Object.entries(employee);
console.log(keys); // আউটপুট: ["id", "name", "department"]
console.log(values); // আউটপুট: [101, "Frank", "HR"]
console.log(entries); // আউটপুট: [["id", 101], ["name", "Frank"], ["department", "HR"]]
জাভাস্ক্রিপ্টে অবজেক্ট ডিসপ্লে করার বিভিন্ন পদ্ধতি রয়েছে, যা ডেভেলপারদের অবজেক্টের তথ্য সহজে দেখতে এবং বিশ্লেষণ করতে সহায়তা করে। console.log() এবং console.table() কনসোলে অবজেক্ট প্রদর্শনের সহজ উপায়, JSON.stringify() অবজেক্টকে স্ট্রিং ফর্ম্যাটে রূপান্তর করে প্রদর্শন করতে সাহায্য করে। DOM ম্যানিপুলেশন ও টেমপ্লেট লিটারেল ব্যবহার করে ওয়েব পেজে অবজেক্টের তথ্য রেন্ডার করা যায়। এছাড়াও, ইটারেটর এবং লুপ ব্যবহার করে অবজেক্টের প্রোপার্টি লুপ করা যায়, যা ডেটা ম্যানিপুলেশনে সুবিধাজনক। ব্রাউজার ডেভেলপার টুলস ব্যবহার করে অবজেক্টের ডিটেইলড ভিউ দেখা যায়, যা ডিবাগিংয়ের জন্য অত্যন্ত উপকারী। সঠিক পদ্ধতি এবং টুলস ব্যবহার করে অবজেক্ট ডিসপ্লে করা কোডের রক্ষণাবেক্ষণ এবং বিশ্লেষণকে সহজ করে তোলে, যা উন্নত এবং কার্যকরী অ্যাপ্লিকেশন তৈরিতে সহায়ক হয়।
common.read_more
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
