Objects & Arrays
JavaScript లో Objects అనేవి key-value pairs ఆధారంగా డేటాను స్టోర్ చేయడానికి ఉపయోగపడతాయి. Arrays అనేవి values యొక్క collection మరియు index ఆధారంగా access చేయవచ్చు. ఈ Chapter లో Objects & Arrays పై పూర్తిస్థాయిలో తెలుసుకుందాం.
🔹 1. Object Properties & Methods
JavaScript
let person = {
name: "Rahul",
age: 25,
greet: function() {
return "Hello, " + this.name + "!";
}
};
console.log(person.greet());Output: Hello, Rahul!
💡 Explanation:
name, age→ Object లోని properties.greet()→ Object method, ఇదిthis.nameద్వారా object లోని డేటాను access చేస్తుంది.
🔹 2. Array Methods (map, filter, reduce)
map() Method
JavaScript
let numbers = [1, 2, 3, 4];
let squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers);Output: [1, 4, 9, 16]
💡 Explanation:
map()method ప్రతి array element పై operation చేసి కొత్త array ను return చేస్తుంది.
filter() Method
JavaScript
let scores = [10, 45, 60, 75];
let highScores = scores.filter(score => score > 50);
console.log(highScores);Output: [60, 75]
💡 Explanation:
filter()method ద్వారా కొంతమంది elements ని filter చేయవచ్చు.
reduce() Method
JavaScript
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum);Output: 10
💡 Explanation:
reduce()method మొత్తం array values ను ఒకే value గా combine చేస్తుంది.
🔹 3. Iterating Objects & Arrays
Object Iteration (for…in loop)
JavaScript
let car = {brand: "Toyota", model: "Camry", year: 2022};
for (let key in car) {
console.log(key + ": " + car[key]);
}Output:
JavaScript
brand: Toyota
model: Camry
year: 2022💡 Explanation:
for...inloop ప్రతి property ను access చేయడానికి ఉపయోగిస్తారు.
Array Iteration (forEach loop)
JavaScript
let fruits = ["Apple", "Banana", "Cherry"];
fruits.forEach(fruit => console.log(fruit));Output:
JavaScript
Apple
Banana
Cherry💡 Explanation:
forEach()ప్రతి array item ను iterate చేయడానికి ఉపయోగపడుతుంది.
🌟 Real-Time Project: Employee Data Management
🔹 Step 1: HTML Code
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Data</title>
</head>
<body>
<h2>Employee Details</h2>
<button onclick="showEmployees()">Show Employees</button>
<ul id="employeeList"></ul>
<script src="script.js"></script>
</body>
</html>🔹 Step 2: JavaScript Code (script.js)
JavaScript
let employees = [
{ name: "Rahul", age: 28, department: "IT" },
{ name: "Sita", age: 32, department: "HR" },
{ name: "Amit", age: 25, department: "Finance" }
];
function showEmployees() {
let list = document.getElementById("employeeList");
list.innerHTML = "";
employees.forEach(emp => {
let li = document.createElement("li");
li.textContent = `${emp.name}, Age: ${emp.age}, Dept: ${emp.department}`;
list.appendChild(li);
});
}🔹 Step 3: Run the Code
- HTML & JavaScript ఫైళ్లను save చేయండి.
- HTML file ను browser లో open చేయండి.
- Show Employees బటన్ క్లిక్ చేయండి.
- Employee Details ను చూస్తారు.
Expected Output:
✅ Clicking ‘Show Employees’ Button:
JavaScript
Rahul, Age: 28, Dept: IT
Sita, Age: 32, Dept: HR
Amit, Age: 25, Dept: Finance📓 Next Chapter: JavaScript Events – User Interaction & Event Handling! Stay Tuned! 🚀
