Arrays & Objects Deep Dive
Arrays — ordered collections
An array holds a list of values in order:
JavaScript
const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // "apple"
console.log(fruits.length); // 3Essential array methods
These are the methods you'll use every day:
map() — transform every element:JavaScript
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8]filter() — keep elements that pass a test:JavaScript
const ages = [12, 18, 25, 8, 30];
const adults = ages.filter(age => age >= 18);
// [18, 25, 30]find() — get the first match:JavaScript
const users = [
{ name: 'Alice', role: 'admin' },
{ name: 'Bob', role: 'user' },
];
const admin = users.find(u => u.role === 'admin');
// { name: 'Alice', role: 'admin' }reduce() — accumulate values into one result:JavaScript
const prices = [10, 20, 30];
const total = prices.reduce((sum, price) => sum + price, 0);
// 60some() and every() — test conditions:JavaScript
const scores = [85, 92, 78, 95];
scores.some(s => s > 90); // true — at least one is over 90
scores.every(s => s > 70); // true — all are over 70Chaining methods
These methods return new arrays (they don't mutate the original), so you can chain them:
JavaScript
const products = [
{ name: 'Shirt', price: 25, inStock: true },
{ name: 'Pants', price: 50, inStock: false },
{ name: 'Hat', price: 15, inStock: true },
{ name: 'Jacket', price: 100, inStock: true },
];
const affordableInStock = products
.filter(p => p.inStock)
.filter(p => p.price < 50)
.map(p => p.name);
// ['Shirt', 'Hat']Adding and removing elements
JavaScript
const arr = [1, 2, 3];
arr.push(4); // add to end → [1, 2, 3, 4]
arr.pop(); // remove from end → [1, 2, 3]
arr.unshift(0); // add to beginning → [0, 1, 2, 3]
arr.shift(); // remove from beginning → [1, 2, 3]
arr.splice(1, 1); // remove 1 item at index 1 → [1, 3]Spread operator
JavaScript
const a = [1, 2, 3];
const b = [4, 5, 6];
const merged = [...a, ...b]; // [1, 2, 3, 4, 5, 6]
const copy = [...a]; // shallow copyObjects — key-value pairs
Objects store named properties:
JavaScript
const user = {
name: 'Alice',
age: 28,
email: 'alice@example.com',
isAdmin: false,
};
console.log(user.name); // "Alice"
console.log(user['email']); // "alice@example.com"Destructuring
Pull values out of objects (and arrays) into variables:
JavaScript
const { name, age, email } = user;
console.log(name); // "Alice"
// With renaming
const { name: userName } = user;
// With default values
const { role = 'viewer' } = user;
// Array destructuring
const [first, second] = ['a', 'b', 'c'];
// first = 'a', second = 'b'Object spread
JavaScript
const defaults = { theme: 'light', language: 'en', notifications: true };
const userPrefs = { theme: 'dark' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', language: 'en', notifications: true }Later properties overwrite earlier ones — perfect for merging defaults with user preferences.
Iterating over objects
JavaScript
const scores = { math: 90, science: 85, english: 92 };
Object.keys(scores); // ['math', 'science', 'english']
Object.values(scores); // [90, 85, 92]
Object.entries(scores); // [['math', 90], ['science', 85], ['english', 92]]
for (const [subject, score] of Object.entries(scores)) {
console.log(`${subject}: ${score}`);
}Optional chaining
Safely access deeply nested properties without crashing:
JavaScript
const user = { address: { city: 'London' } };
console.log(user.address.city); // "London"
console.log(user.address?.zip); // undefined (no crash)
console.log(user.contact?.phone); // undefined (no crash)Without
?., accessing user.contact.phone would throw a TypeError because contact is undefined.Nullish coalescing
JavaScript
const value = null;
const result = value ?? 'default'; // "default"
const zero = 0;
const check = zero ?? 'default'; // 0 (not "default" — ?? only triggers on null/undefined)Key takeaway
Arrays and objects are JavaScript's fundamental data structures. Master
map, filter, find, and reduce for arrays. Use destructuring, spread, optional chaining, and Object.entries for objects. These aren't just convenience features — they're how modern JavaScript code is written.