4.1 Objects
An object is a collection of key-value pairs used to represent structured data and real-world entities. Keys (also called properties) are strings or symbols, and values can be any type — including primitives, nested objects, or functions (called methods when attached to an object).
Figure 4.1: The variable on the call stack holds a pointer reference to the mutable object stored inside the memory heap.
const person = {
name: "Sam",
age: 25,
greet() {
console.log(`Hi, my name is ${this.name}`);
}
};
person.greet(); // "Hi, my name is Sam"
console.log(person.age); // 254.2 Arrays
An array is an ordered, zero-indexed list of values. Unlike low-level languages with fixed contiguous memory buffers, JavaScript arrays are dynamically resizable objects that can hold heterogeneous data types.
Figure 4.2: Difference between non-mutating slice() (pure) and mutating splice() (in-place modification).
4.3 Array Methods (map / filter / reduce)
These three higher-order methods form the backbone of functional array data transformations in modern web applications, eliminating error-prone manual loops.
Figure 4.3: Transforming array [1, 2, 3, 4] into a doubled array using map, a filtered subset using filter, and an accumulated scalar sum via reduce.
4.4 Destructuring
Destructuring is an expressive ES6 syntax pattern allowing you to extract individual values from arrays or object properties into distinct variables in a single declarative line.
Figure 4.4: Object destructuring matches by property key name, while array destructuring unpacks items strictly by index position.
4.5 Spread & Rest Operators
Both spread and rest utilize the three-dot token (...), but perform inverse operations determined strictly by context: spread expands an iterable into elements, while rest gathers remaining items into an array.
Figure 4.5: Spread unpacks arrays and objects, while rest gathers arguments into real JavaScript Arrays.
