01
1. What Are Arrays and Objects?
In JavaScript, data is organized using two primary reference data structures:
Ordered ListArray:
Array: ["Rahul", "Priya", "Aman"]
An ordered sequence of items accessed by numerical position (index: 0, 1, 2...).
Key-Value EntityObject:
Object: { name: "Rahul", age: 22 }
A collection of named key-value properties describing an entity.
02
2. Arrays: Zero-Indexed Collections
// 1. Creating an Array
const colors = ["Crimson", "Teal", "Amber"];
// 2. Accessing Items by 0-based index
console.log(colors[0]); // "Crimson" (First element)
console.log(colors[1]); // "Teal"
console.log(colors[colors.length - 1]); // "Amber" (Last element)
// 3. Updating an item
colors[1] = "Cyan"; // Updates index 1 to "Cyan"
console.log(colors.length); // 3
const colors = ["Crimson", "Teal", "Amber"];
// 2. Accessing Items by 0-based index
console.log(colors[0]); // "Crimson" (First element)
console.log(colors[1]); // "Teal"
console.log(colors[colors.length - 1]); // "Amber" (Last element)
// 3. Updating an item
colors[1] = "Cyan"; // Updates index 1 to "Cyan"
console.log(colors.length); // 3
03
3. Essential Array Mutation & Search Methods
| Method | What It Does | Example |
|---|---|---|
.push(item) | Adds item to end of array | arr.push("New"); |
.pop() | Removes & returns last item | const last = arr.pop(); |
.unshift(item) | Adds item to beginning of array | arr.unshift("First"); |
.shift() | Removes & returns first item | const first = arr.shift(); |
.includes(val) | Returns true if value is found | arr.includes("Priya"); // true |
.indexOf(val) | Returns 0-based index or -1 if not found | arr.indexOf("Aman"); // 2 |
04
4. Looping Through Arrays
const students = ["Rahul", "Priya", "Aman"];
/* Modern for...of loop (Best for readability) */
for (const student of students) {
console.log("Student:", student);
}
/* Array.prototype.forEach() */
students.forEach((student, index) => {
console.log(`Index ${index}: ${student}`);
});
/* Modern for...of loop (Best for readability) */
for (const student of students) {
console.log("Student:", student);
}
/* Array.prototype.forEach() */
students.forEach((student, index) => {
console.log(`Index ${index}: ${student}`);
});
05
5. Objects: Key-Value Entity Models
const user = {
name: "Rahul",
age: 22,
city: "Mumbai",
greet: function() {
return `Hello, I am ${this.name} from ${this.city}!`;
}
};
// Accessing with dot notation & bracket notation
console.log(user.name); // "Rahul"
console.log(user["city"]); // "Mumbai"
console.log(user.greet()); // "Hello, I am Rahul from Mumbai!"
// Adding & deleting properties
user.isEmployed = true;
delete user.age;
name: "Rahul",
age: 22,
city: "Mumbai",
greet: function() {
return `Hello, I am ${this.name} from ${this.city}!`;
}
};
// Accessing with dot notation & bracket notation
console.log(user.name); // "Rahul"
console.log(user["city"]); // "Mumbai"
console.log(user.greet()); // "Hello, I am Rahul from Mumbai!"
// Adding & deleting properties
user.isEmployed = true;
delete user.age;
06
6. Objects Inside Arrays (Tabular Collections)
const products = [
{ id: 1, title: "Laptop Stand", price: 29.99 },
{ id: 2, title: "Wireless Mouse", price: 19.99 },
{ id: 3, title: "Mechanical Keyboard", price: 89.99 }
];
// Finding an item with .find()
const mouse = products.find(p => p.id === 2);
console.log(mouse.title); // "Wireless Mouse"
{ id: 1, title: "Laptop Stand", price: 29.99 },
{ id: 2, title: "Wireless Mouse", price: 19.99 },
{ id: 3, title: "Mechanical Keyboard", price: 89.99 }
];
// Finding an item with .find()
const mouse = products.find(p => p.id === 2);
console.log(mouse.title); // "Wireless Mouse"
07
7. Arrays Inside Objects (Rich Entity Models)
const developer = {
name: "Priya Patel",
skills: ["HTML", "CSS", "JavaScript", "React"],
experienceYears: 3
};
console.log(developer.skills[2]); // "JavaScript"
name: "Priya Patel",
skills: ["HTML", "CSS", "JavaScript", "React"],
experienceYears: 3
};
console.log(developer.skills[2]); // "JavaScript"
08
8. ES6 Destructuring: Clean & Readable Extraction
Array Destructuring
const coords = [40.7128, -74.0060];
const [lat, lng] = coords;
console.log(lat); // 40.7128
const [lat, lng] = coords;
console.log(lat); // 40.7128
Object Destructuring
const user = { name: "Rahul", age: 22 };
const { name, age } = user;
console.log(name); // "Rahul"
const { name, age } = user;
console.log(name); // "Rahul"
09
9. Arrays vs Objects: Decision Matrix
| Requirement | Use Array [] | Use Object {} |
|---|---|---|
| Order matters (queue, rankings, history) | ✅ Yes (0, 1, 2... ordered sequence) | ❌ No (Keys are unordered) |
| Named attributes describing one thing | ❌ No (Unclear what user[3] means) | ✅ Yes (user.email, user.avatar) |
| Collection of multiple similar records | ✅ Array of Objects ([user1, user2]) | Key-by-ID dictionary |
10
10. Common Beginner Mistakes
- Off-by-one errors: Trying to access
arr[arr.length]instead ofarr[arr.length - 1](evaluates toundefined). - Shallow Copy Reference Traps: Doing
const b = a;copies the memory pointer, not the contents! Modifyingbmutatesa. Always use spread:const copy = [...a];or{...obj}. - Accessing undefined nested keys:
user.location.citycrashes ifuser.locationis undefined. Always use optional chaining:user?.location?.city.
11
11. Practical Example: Search & Filter Pipeline
const developers = [
{ name: "Rahul", skill: "React", exp: 3 },
{ name: "Priya", skill: "Node", exp: 5 },
{ name: "Aman", skill: "React", exp: 2 }
];
// Filter all React developers with 2+ years experience
const seniorReactDevs = developers.filter(dev => dev.skill === "React" && dev.exp >= 2);
console.log(seniorReactDevs.map(d => d.name)); // ["Rahul", "Aman"]
{ name: "Rahul", skill: "React", exp: 3 },
{ name: "Priya", skill: "Node", exp: 5 },
{ name: "Aman", skill: "React", exp: 2 }
];
// Filter all React developers with 2+ years experience
const seniorReactDevs = developers.filter(dev => dev.skill === "React" && dev.exp >= 2);
console.log(seniorReactDevs.map(d => d.name)); // ["Rahul", "Aman"]
12
12. Clean Code Best Practices
- Use
constfor all arrays and objects. - Embrace immutability by using non-mutating methods like
.map(),.filter(), and the spread operator[...arr]. - Use object destructuring in function parameter signatures:
function renderCard({ title, badge }).