3.7 Array Methods

Step 1 — Apply the callback to each element: .map() calls (n) => n * n once per item, collecting each return value.

Step 2 — Explain why it is not a single number: .map() does not combine results; it collects them. Each callback call returns one value, and the method gathers all of those values into a new array of the same length as the original. Combining elements into one value is the job of .reduce(), not .map().

Answer: [1, 4, 9] — an array, because .map() always returns a new array of the same length as the input, never a single combined number.

Step 1 — Recall what .map() guarantees: .map() builds and returns a new array; it never modifies the array it was called on. That is why the result must be assigned to a variable (b) to be kept at all.

Step 2 — State the consequence for a: Since a is only read from (its elements are passed to the callback), nothing about a changes. If a was [3, 5], after the line it still holds [3, 5], while b holds [6, 10].

Answer: a is unchanged — .map() is non-mutating and returns a brand-new array.

Step 1 — Difference in mutation: a.push(b) changes a in place — it modifies the array it is called on. a.concat(b) leaves both arrays alone and returns a new array instead.

Step 2 — Difference in nesting: push adds its argument as a single item, so if b is an array it ends up nested inside: a.push(b) on a = [1, 2], b = [3, 4] gives [1, 2, [3, 4]]. concat flattens array arguments one level, adding their elements individually: a.concat(b) gives [1, 2, 3, 4].

▶ Press Run to see the output…

Output:

[1,2,3,4]
[1,2,[3,4]]

Answer: push mutates a and nests b as one element; concat leaves everything unchanged and returns a new flat array with b's elements added individually.

Step 1 — Diagnose the failure: Math.max expects separate numeric arguments, e.g. Math.max(3, 9, 4). Called as Math.max([3, 9, 4]), it receives exactly one argument that happens to be an array. It tries to convert that array to a number to compare it, conversion fails, and the result is NaN.

Step 2 — Apply the fix: The spread operator unpacks the array into individual arguments:

▶ Press Run to see the output…

Output:

9

Now the call is equivalent to Math.max(3, 9, 4), which correctly returns 9.

Answer: It fails because Math.max got one array argument rather than numbers; spreading it — Math.max(...numbers) — fixes the call.

Step 1 — Read the literal left to right: { ...base, size: 10 } first copies every property of base into the new object (size: 4, color: "red"), then processes the later entry size: 10.

Step 2 — Apply the "later entry wins" rule: When two entries share a key, the one written last overwrites the earlier one. Duplicate keys are not an error in JavaScript object literals. So the copied size: 4 is replaced by size: 10, while color survives untouched.

Answer: { size: 10, color: "red" } — a new object; base itself is unchanged.

Step 1 — Write the mapping: Supply the given formula as the callback so .map() applies it to each Celsius temperature:

▶ Press Run to see the output…

Step 2 — Check each value: \(0 \cdot 9/5 + 32 = 32\), \(100 \cdot 9/5 + 32 = 212\), \(37 \cdot 9/5 + 32 = 66.6 + 32 = 98.6\).

Output:

[32,212,98.6]

Answer: [32, 212, 98.6] — produced by celsius.map((c) => c * 9 / 5 + 32).

Step 1 — Take the first three days: slice(0, 3) copies indices 0 through 2 (the end index is excluded), giving "Mon", "Tue", "Wed".

Step 2 — Take the last two days: With seven days, the weekend starts at index 5. Omitting the end index means "run to the finish", so slice(5) gives "Sat" and "Sun".

▶ Press Run to see the output…

Output:

["Mon","Tue","Wed"]
["Sat","Sun"]

Answer: week.slice(0, 3) prints ["Mon","Tue","Wed"] and week.slice(5) prints ["Sat","Sun"].

Step 1 — Recall the reference problem from Section 3.6: Arrays are objects, so assignment copies a reference, not the contents. Writing const copy = week; would give two names for the same array, and any change made through one name would be visible through the other.

Step 2 — Show how .slice() solves it: week.slice() with no arguments copies from index 0 to the end — i.e. the whole array — but into a genuinely new array. Pushing onto the copy grows the copy's length while week.length stays at 7:

▶ Press Run to see the output…

Output:

8
7

Answer: .slice() with no arguments makes a true independent copy, avoiding the shared-reference aliasing problem from Section 3.6 — changes to the copy do not affect the original.

Step 1 — Find the midpoint: The list has 6 items, so Math.floor(list.length / 2) is Math.floor(3) = 3.

Step 2 — Cut with complementary slices: slice(0, mid) takes indices 0–2 (excluding 3), and slice(mid) takes everything from index 3 onward. Because the first slice excludes mid and the second includes it, the halves meet exactly with no gap or overlap.

▶ Press Run to see the output…

Output:

[8,3,5]
[1,9,2]
true

Answer: left = [8, 3, 5], right = [1, 9, 2], and list.length === left.length + right.length prints true, proving no item was lost or repeated.

Step 1 — Write the function with a rest parameter: In the definition, ...nums collects however many arguments are passed into an array called nums, which we can then loop over:

▶ Press Run to see the output…

Step 2 — Call it with four numbers: The four loose arguments are gathered into nums = [2, 4, 6, 8]; the loop sums them to 20, and dividing by nums.length gives \(20 / 4 = 5\).

▶ Press Run to see the output…

Output:

5

Answer: average(...nums) uses a rest parameter to gather all arguments into an array; average(2, 4, 6, 8) returns 5.

Step 1 — In a definition (rest parameter): In function total(...numbers), the three dots mean gather: collect all the arguments actually passed into a single array named numbers. The function can then treat numbers like any other array, looping over it or indexing into it, regardless of how many arguments were supplied.

Step 2 — At a call site (spread): In total(...values), the same three dots mean the opposite — spread: take the array values and expand it into separate individual arguments, as if each element had been written out by hand.

Answer: Same symbol, opposite directions: in a definition ...numbers collects arguments into an array (rest parameter); at a call site ...array unpacks an array into separate arguments (spread). Which side of the function it appears on tells you which.

Step 1 — Copy with fontSize overridden: Spread all of settings into a new object, then restate fontSize last so the later entry wins:

▶ Press Run to see the output…

Step 2 — Copy with a new property added: Adding a key that did not exist before works identically — spread everything in, then add the new entry:

▶ Press Run to see the output…

Output:

{"theme":"dark","fontSize":18}
{"theme":"dark","fontSize":14,"language":"en"}
{"theme":"dark","fontSize":14}

Answer: bigger = { theme: "dark", fontSize: 18 } and localized = { theme: "dark", fontSize: 14, language: "en" }, both built with object spread; the original settings is untouched.

Step 1 — Trace the order of operations: Object literals are processed top to bottom. { color: "blue", ...base } first sets color: "blue", but then the spread copies in all of base's properties — including its own color — afterwards.

Step 2 — Apply the "later entry wins" rule: Since the spread comes last, base's colour overwrites the blue one. For the override to stick, it must be written after the spread: { ...base, color: "blue" }.

Answer: It fails because the spread comes after the override, so base's existing color is copied in last and wins; the fix is to put the override after the spread.

Step 1 — Name one mutating and one non-mutating method: .push() changes the array it is called on, adding an element in place. .map() does not — it returns a brand-new array and leaves the original exactly as it was. (Other valid pairs: .sort() vs .slice(), .reverse() vs .concat().)

Step 2 — How to decide: Ask whether other parts of the program may still hold a reference to this array. If the caller's data must stay intact — or you simply want a transformed/copied result to assign elsewhere — use a non-mutating method (.map(), .slice(), .concat(), object/array spread). Use a mutating method only when you deliberately intend to modify the array in place and every holder of a reference should see the change.

Answer: .push() mutates; .map() does not. Choose based on whether the original data must be preserved for other holders of the reference — preserve it with non-mutating methods, change it in place only intentionally.