Objects and Arrays are the containers of JavaScript. Mastering them means mastering data structure manipulation.
Objects (Key-Value Pairs)
javascript
const user = {
name: "Jane Doe",
age: 28,
role: "Admin"
};
// Dot Notation (Clean)
console.log(user.name);
// Bracket Notation (Dynamic)
const propToCheck = "role";
console.log(user[propToCheck]);Destructuring (Unpacking)
The Suitcase Analogy
Imagine an Object is a packed Suitcase.
Destructuring is opening the suitcase and taking items out into your hands immediately.
javascript
const settings = {
theme: "dark",
fontSize: 16,
wifi: true
};
// OLD WAY: Repetitive
// const theme = settings.theme;
// const fontSize = settings.fontSize;
// PRO WAY: Destructuring
const { theme, fontSize } = settings;
console.log(theme); // "dark"The Spread Operator (...)
This "explodes" an object or array into its individual parts. It's essential for React.
javascript
const baseUser = { name: "John", age: 30 };
// Create a NEW object, copy everything from baseUser, and add a property
const updatedUser = { ...baseUser, isActive: true };
console.log(updatedUser);
// { name: "John", age: 30, isActive: true }Arrays & Methods
javascript
const stack = ["HTML", "CSS", "JS"];
// Array Destructuring
const [first, second] = stack;
console.log(first); // "HTML"
// Array Spread (Merging)
const backend = ["Node", "SQL"];
const fullStack = [...stack, ...backend];
console.log(fullStack);