Objects & arrays

Object literals

const user = {
  name: "Ana",
  age: 29,
  isAdmin: false,
  address: {                    // objects nest freely
    city: "Pune",
  },
};

Two ways to reach a property, and they're not interchangeable. Dot notation needs a literal, valid identifier known when you write the code. Bracket notation takes any expression — a variable, a computed string, a key with a space in it.

user.name;              // "Ana" — the key is a literal you typed
user["name"];           // same thing, spelled differently

const key = "age";
user[key];              // 29 — dot notation CAN'T do this; user.key would look for a property literally named "key"
user["favorite color"]; // dot notation can't have a space in it at all

As a reminder from the types chapter: an object variable holds a reference, not the data itself — copying the variable copies the pointer, not the object.

Assignment copies the reference, not the object

const original = { count: 1 };
const alias = original;        // alias points at the SAME object — nothing was copied

alias.count = 99;
console.log(original.count);   // what happens?

99 — original and alias are two names for the exact same object in memory, so mutating one mutates the other; there was only ever one object. This is true for arrays too, and it's the single most common source of "I only changed one variable, why did this other one change too" bugs. Comparing them tells the same story:

const a = { x: 1 };
const b = { x: 1 };
console.log(a === b);   // false — same shape, DIFFERENT objects
console.log(a === a);   // true — same object, obviously

Shorthand and computed keys

const name = "Ana", age = 29;
const user2 = { name, age };            // shorthand — same as { name: name, age: age }

const field = "role";
const user3 = { [field]: "admin" };     // computed key — the property is named by field's VALUE
console.log(user3);                     // { role: "admin" }, not { field: "admin" }

Arrays — indexed, ordered, still objects underneath

const nums = [10, 20, 30];
nums[0];          // 10 — indexing starts at 0
nums.length;       // 3
nums[nums.length - 1];  // 30 — the standard "last element" idiom
nums[10];          // undefined — out of range, not an error

typeof [] is "object" and Array.isArray() is the only reliable check — both covered back in the types chapter. What actually makes an array useful is the ordered, numerically-indexed methods below.

Mutating methods — they change the array in place

console.log([10, 1, 2].sort());              // what happens?
console.log([10, 1, 2].sort((a, b) => a - b)); // what happens?

Without a comparator, sort() converts everything to a string and sorts lexicographically — so 10 comes before 2, because "1" sorts before "2". A comparator that returns negative/zero/positive is the only reliable way to sort numbers.

Non-mutating methods — they read, they don't touch

console.log([NaN].indexOf(NaN));   // what happens?
console.log([NaN].includes(NaN));  // what happens?

-1, then true. indexOf compares with ===, and NaN === NaN is false — so indexOf can never find a NaN, no matter how many are in the array. includes uses a different algorithm (SameValueZero) that treats NaN as equal to itself. It's a small detail with a real consequence: includes is the safer default unless you specifically need the index back.

map / filter / find / forEach / reduce

Five methods that all walk the array element by element — the difference is entirely in what each one hands back.

const cart = [
  { name: "Pen", price: 20, qty: 3 },
  { name: "Book", price: 150, qty: 1 },
  { name: "Eraser", price: 5, qty: 0 },
];

cart.map(item => item.name);              // ["Pen", "Book", "Eraser"]
cart.filter(item => item.qty > 0);         // Pen and Book only
cart.find(item => item.price > 100);      // the Book object itself
cart.forEach(item => console.log(item.name)); // logs 3 times, returns undefined
cart.reduce((total, item) => total + item.price * item.qty, 0); // 210

Dry run: cart.reduce building up the total

total is the one value that survives from call to call — reduce hands back whatever the callback returned last time as the next call's total. The final 210 is just the last row's "total after," nothing more mysterious than that.

some, every, and findIndex — checking, not collecting

Three more array walkers, and none of them build a new array — they answer a yes/no or "where" question instead.

cart.some(item => item.qty === 0);     // true — the Eraser is out of stock
cart.every(item => item.price > 0);    // true — nothing is free
cart.findIndex(item => item.name === "Book");   // 1 — position, not the item itself

.find() and .findIndex() are the same walk, different return value — reach for .find() when you need the element, .findIndex() when you need its position (to splice it out, say). Their mirror images, .findLast() and .findLastIndex() — covered with the rest of the newer array methods in Objects deeply — walk from the end instead.

Destructuring

Unpacking values out of an object or array into their own named variables, in one line instead of one assignment per field.

// Object destructuring — order doesn't matter, names must match
const { name, age } = user;
const { name: fullName } = user;         // rename while unpacking
const { role = "guest" } = user;         // default when the key is missing
const { address: { city } } = user;      // nested, straight to "city"

// Array destructuring — position IS the match, gaps are allowed
const [first, , third] = [10, 20, 30];   // skips index 1
const [head, ...tail] = [1, 2, 3, 4];    // head = 1, tail = [2, 3, 4]

let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y);   // what happens?

2 1 — swapped, with no temporary variable. The right side builds a whole new array [y, x] first, then destructuring unpacks it back into x and y in one step.

Destructuring is everywhere a value shows up, including function parameters — a very common way to accept an options object:

function createUser({ name, age = 18 }) {
  return name + " is " + age;
}
createUser({ name: "Ana" });   // "Ana is 18"

Spread — the opposite of destructuring

... on the way in (an array/object literal, a function call) expands a collection into its individual elements.

const a = [1, 2, 3];
const b = [...a, 4, 5];        // [1, 2, 3, 4, 5] — a new array

const base = { name: "Ana", age: 29 };
const patched = { ...base, age: 30 };  // { name: "Ana", age: 30 } — later keys win

Math.max(...a);                // spreads the array into 3 separate arguments

const original = { nested: { count: 1 } };
const copy = { ...original };
copy.nested.count = 99;
console.log(original.nested.count);   // 99 — same nested object, not a copy of it

What comes next

The rest of the toolbox is Objects deeply: getters and setters, the Object statics, shallow versus deep copying, Map and Set and their weak versions, sort stability, JSON with a replacer and reviver, and the array methods this chapter did not reach. It is written to follow directly from here.