Arrays & Objects
The two core composite types, plus destructuring, spread, and the trio map/filter/reduce.
Arrays
An array is an ordered, mutable list of values. Unlike many languages, JS arrays are heterogeneous — you can mix types in the same array (though you usually shouldn't).
const nums = [3, 1, 4, 1, 5, 9, 2, 6];
console.log(nums.length); // 8
console.log(nums[0]); // 3
console.log(nums.at(-1)); // 6 — like Python\u2019s nums[-1]
nums.push(8); // add to end
nums.unshift(0); // add to start
nums.pop(); // remove from end
nums.shift(); // remove from start
console.log(nums);map, filter, reduce — the three you must know
These three array methods replace most uses of for loops in modern JS. They take a callback and return a new value, leaving the original array untouched (immutable style).
const nums = [1, 2, 3, 4, 5];
// map: transform each element → new array of same length
const squared = nums.map(n => n * n);
console.log(squared); // [1, 4, 9, 16, 25]
// filter: keep only elements where the callback is truthy
const evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]
// reduce: collapse the array down to a single value
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15`reduce` is the most powerful — and most-feared — of the three. The callback takes an accumulator and the current item, and returns the next accumulator. The second argument to `reduce` is the initial accumulator value.
Other useful array methods
- `find(fn)` — return the first matching element (or undefined).
- `some(fn)` / `every(fn)` — true if any / all match.
- `includes(x)` — true if x is in the array (uses ===).
- `indexOf(x)` — first index of x, or -1.
- `sort(fn)` — sort in place. Default sort is alphabetical — pass a comparator for numbers!
- `slice(a, b)` — copy a portion (non-mutating).
- `splice(...)` — remove/insert in place (mutating). Confusingly named cousin of `slice`.
Objects
An object is an unordered collection of key-value pairs. Keys are strings (or symbols); values can be anything. Objects are JS's all-purpose data container — used as records, configs, hash maps, namespaces, and more.
const user = {
name: "Ada",
age: 36,
role: "engineer",
};
console.log(user.name); // dot notation
console.log(user["age"]); // bracket notation (needed for dynamic keys)
user.email = "ada@example.com"; // add
delete user.age; // remove
for (const [key, value] of Object.entries(user)) {
console.log(key, "=", value);
}Destructuring
Destructuring lets you pull values out of arrays and objects into variables in one line.
// Object destructuring
const { name, age } = user;
console.log(name, age);
// Renaming and defaults
const { name: userName, country = "unknown" } = user;
console.log(userName, country);
// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first, second, rest);Spread and rest
The `...` operator spreads an array or object into individual values, or in a function signature, collects extra arguments. It's the same syntax for both jobs — context decides which.
// Spread arrays
const a = [1, 2, 3];
const b = [...a, 4, 5]; // [1, 2, 3, 4, 5]
// Spread objects (shallow merge — later values win)
const defaults = { color: "blue", size: "M" };
const custom = { ...defaults, color: "red" }; // { color: "red", size: "M" }
// Rest in functions
function logAll(first, ...others) {
console.log("first:", first);
console.log("rest:", others);
}
logAll(1, 2, 3, 4);