Hey buddy! 👋 I’m Vikas Sankhla, a Full Stack Developer and founder of Web Codder. Today, let’s explore two superheroes of JavaScript: Arrays and Objects.
They help you work with data like a boss 🦸♂️.
Let’s break it all down in simple English — like I’m teaching my younger cousin. 😄
🚀 Why Arrays and Objects Matter?
Imagine you’re collecting your favorite ice cream flavors 🍨 or your school friends’ details 📒. You can use arrays for lists and objects for grouped information.
Think of it like:
- Array = Box 📦 of ordered items
- Object = Cabinet 🗄️ with labeled drawers
🔢 Creating and Using Arrays
Arrays store items in a list.
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]); // Apple
🎯 Common Array Methods
| Method | What It Does | Example |
|---|---|---|
push() | Add at the end | fruits.push("Orange") |
pop() | Remove last item | fruits.pop() |
shift() | Remove first item | fruits.shift() |
unshift() | Add at the start | fruits.unshift("Grapes") |
map() | Transform each item | numbers.map(n => n * 2) |
filter() | Keep items that match | ages.filter(age => age > 18) |
reduce() | Combine all into one value | nums.reduce((a, b) => a + b) |
📌 These methods make data magic happen 🔮.
🧱 What are Objects?
Objects store key-value pairs.
let student = {
name: "Aryan",
age: 14,
grade: "9th"
};
console.log(student.name); // Aryan
🛠️ Accessing and Updating Object Data
student.age = 15; // Update
student.city = "Delhi"; // Add new
You can also use bracket notation:
console.log(student["name"]); // Aryan
🧭 Object Methods
Objects can also have functions (called methods):
let user = {
name: "Sara",
greet: function() {
console.log("Hi, I’m " + this.name);
}
};
user.greet(); // Hi, I’m Sara
🔄 Loops: Going Through Arrays and Objects
✅ For Loop (Traditional)
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
🔁 for…of (Array Friendly)
for (let fruit of fruits) {
console.log(fruit);
}
🔍 for…in (Great for Objects)
for (let key in student) {
console.log(key + ": " + student[key]);
}
🧠 What’s a Prototype?
Every object in JavaScript has a hidden helper object called a prototype.
It lets you inherit features:
let car = {};
car.__proto__.wheels = 4;
console.log(car.wheels); // 4
That’s like getting free superpowers from your parents 💪.
📊 Infographic: Arrays vs Objects
🧩 Arrays
- Ordered
- Use index (0, 1, 2…)
- Great for lists
🗂️ Objects
- Unordered
- Use keys (name, age)
- Great for structured data
![Insert Infographic Placeholder Here]
🧪 Real-Life Example
let users = [
{ name: "Vikas", age: 21 },
{ name: "Ankit", age: 19 },
{ name: "Riya", age: 24 }
];
let adults = users.filter(user => user.age >= 20);
console.log(adults);
👀 See? Combining arrays and objects is super powerful!
🏁 Conclusion
Arrays and objects are the building blocks of JavaScript.
They let you store, organize, and work with data easily.
🎯 Learn them well and your code will look pro!
👉 Don’t forget to subscribe and follow us:
- 🔴 YouTube: Web Codder
- 📘 Blog: webcodder.dev/automation
- 💬 WhatsApp: webcodder.dev/whatsapp
See you in the next lesson! 💡
