3.3 Arrays

Step 1 — Name the first index: The first element of a JavaScript array is at index 0. Read the index as how far from the start rather than as a place in a queue: the first element is zero steps from the start, so it is arr[0].

Step 2 — Count what length counts: length counts elements, not indexes. An array of three elements has length 3, and its indexes are 0, 1, 2.

Step 3 — Put the two together: Because counting starts one place earlier than 1, every index is one less than the count that reaches it. The last of three elements is the third one, so its index is 3 - 1, which is 2.

Answer: The first element is at index 0. The last element is at length - 1 because length counts the elements while indexes count steps from the start — with n elements the indexes run 0 through n - 1, so the final index is always one less than the length.

Step 1 — Build the array: Write the three strings inside square brackets, separated by commas, and give the whole thing one name.

Step 2 — Find the slot to change: "green" is the second element, and the second element is one step from the start, so it is at index 1.

Step 3 — Assign to that slot: An element is assigned to just like a variable — put the indexed name on the left of the =. That is the one line the question asks for: colors[1] = "yellow";

▶ Press Run to see the output…

Output:

["red","yellow","blue"]

Answer: let colors = ["red", "green", "blue"]; creates the array, and colors[1] = "yellow"; is the single line that replaces "green". The array does not grow — the middle slot simply holds something else.

Step 1 — Read the first console.log: days holds three strings, so its indexes are 0, 1, and 2. days[2] is two steps from the start, which is the third and last element, "Wed".

Step 2 — Read the second console.log: days[7] asks for an element seven steps from the start. There is no such element — the array stops at index 2.

Step 3 — Say what JavaScript does about it: Reading past the end of an array is not an error in JavaScript. It does not stop the program and it does not report anything; it simply hands back undefined, the same "no value here" that a function without a return produces.

Answer: It prints Wed and then undefined. The second line is not an error because JavaScript treats an out-of-range index as a slot that merely has no value in it, not as an illegal request — which is exactly why this bug is so quiet. The undefined travels: add it to a number and you get NaN several lines later, in code that looks innocent.

Step 1 — Say what each one gives you: Both hand back the last element. days.pop() removes the last element and returns it. days.at(-1) reads the last element and returns it.

Step 2 — Ask what happens to the array: pop() shortens the array by one — that is its whole job, and returning the removed value is the bonus that lets you write let last = days.pop();. at(-1) touches nothing; the array is exactly as long after the call as before it.

Step 3 — Match each to a purpose: Use pop() when you want the element out of the array. Use at(-1) when you only want to look at it and leave the array alone.

Answer: days.pop() changes the array — it removes the last element and returns it. days.at(-1) only reads the last element and leaves the array untouched. They return the same value on the first call, but repeat them and they diverge immediately: a second pop() returns the new last element, while a second at(-1) returns the same one again.

Step 1 — Work out nums.at(-2): at() accepts negative positions and counts from the end: at(-1) is the last element, 50, so at(-2) is the one before it, 40.

Step 2 — Work out nums[nums.length - 2]: nums.length is 5, so nums.length - 2 is 3, and nums[3] is three steps from the start — 10, 20, 30, then 40.

Step 3 — Compare them: Both land on the same element by two different routes, one counting backward from the end and one counting forward from the start.

Answer: Both return 40. at(-2) says "second from the end" directly; nums[nums.length - 2] says "index 3", computed as 5 - 2. The bracket form is the older way of writing it, and at() is the shorter one — note that nums[-2] is not an alternative, since -2 is simply an index that does not exist and gives undefined.

Step 1 — Sort them by which end they work on: Two work at the end of the array: push and pop. Two work at the start: unshift and shift.

Step 2 — Sort them by add or remove: Within each pair, one adds and one removes. push(value) adds at the end; pop() removes from the end. unshift(value) adds at the start; shift() removes from the start.

Step 3 — Note what the removers give back: pop() and shift() both return the element they removed, so you can capture it: let served = line.shift();.

Answer:

The four cover every combination of which end and add or remove.

Step 1 — After let line = ["a", "b"];: line is ["a","b"], length 2.

Step 2 — After line.push("c");: push adds at the end, so line is ["a","b","c"], length 3.

Step 3 — After let gone = line.shift();: shift removes from the start and returns what it removed. It removed "a", so gone holds "a" and line is ["b","c"], length 2. Everyone left moved up an index — "b" is now at index 0.

Step 4 — Read the two prints: console.log(gone) prints a. console.log(line) prints the shortened array.

Answer: It prints a and then ["b","c"]. Traced: ["a","b"] → ["a","b","c"] after the push → ["b","c"] after the shift, with the removed "a" captured in gone. Note that shift took from the opposite end to push, which is what makes this pair behave like a waiting line rather than a stack.

Step 1 — Count the rounds the loop actually runs: arr has three elements, so arr.length is 3. The condition is i <= arr.length, which is true for i equal to 0, 1, 2, and 3 — four rounds.

Step 2 — Work out what the fourth round reads: The valid indexes are 0, 1, 2. On the fourth round i is 3, so the body evaluates arr[3], which is past the end. That is not an error; it is undefined, and console.log dutifully prints it.

Step 3 — Fix the condition: The loop should stop before length, not at it. Changing <= to < makes the last round run with i equal to 2, which is the last real index.

▶ Press Run to see the output…

Output:

5
6
7

Answer: The loop runs four times instead of three because i <= arr.length is still true when i is 3, and arr[3] does not exist, so the fourth line prints undefined. The corrected header is for (let i = 0; i < arr.length; i++). This is the classic off-by-one error, and the cure is to say the condition aloud as a sentence: "keep going while i is a real index."

Step 1 — Say what each loop hands you: for...of hands you the value of each element, one per round. A counting for loop hands you the index, and you fetch the value yourself with arr[i].

Step 2 — Pick the case where for...of wins: When the body only needs the values, for...of is shorter and has no counter, no condition, and therefore no off-by-one to get wrong. Printing every name, adding up every price, testing every temperature — all of these want for...of.

Step 3 — Pick the cases where it cannot do the job: Two things for...of cannot give you. It does not tell you where you are, so any body that needs the position — "Score 0: 88", or comparing an element to its neighbour — needs the counting form. And it hands you a copy of each value rather than a way back into the slot it came from, so you cannot modify elements in place through it; arr[i] = … needs the i.

Answer: Choose for...of whenever the body needs only the values — it is shorter and cannot run off the end. You could not use it when you need the element's position (printing an index, comparing neighbours) or when you want to change elements in place, because for...of gives you a copy of the value with no route back to the slot. Both loops visit every element; the choice is decided by what the body needs, not by preference.

Step 1 — Work out what "inside the loop" would mean: Statements inside the loop body run once per round. So let total = 0; placed inside would reset total to 0 at the start of every single round, throwing away everything added so far.

Step 2 — Trace the damage: With [4.5, 2.25, 8.25], the loop would set total to 0, add 4.5, then reset to 0, add 2.25, then reset to 0 and add 8.25. After the loop you would have 8.25 — the last price, not the total.

Step 3 — Say why it cannot simply be left out: Declaring it before the loop but with no value is no better. total would be undefined, and undefined + 4.5 is NaN, which then poisons every later addition.

Answer: A running total has to be set to 0 before the loop because the loop body runs once per element — setting it inside would wipe the accumulated value on every round and leave you with only the last element. Setting it before the loop gives the additions something to build on, and setting it to 0 specifically (rather than leaving it undefined) keeps the first addition a real number instead of NaN. This is the accumulator shape: declare before, change inside, use after.

Step 1 — Reuse the shape from highest: Hold a "best so far" in a variable, walk every element, and replace the best whenever you find something better. For the smallest, "better" means lower, so the comparison flips from > to <.

Step 2 — Choose the starting value: Start best at numbers[0] — a real element from the list.

Step 3 — Return it after the loop, not inside: The answer is only known once every element has been checked, so the return goes after the loop closes.

▶ Press Run to see the output…

Output:

3
-9
7

Answer: Starting from numbers[0] is safer than starting from 0 because 0 is not necessarily in the list. Watch the second call: every temperature there is below freezing, and none of them is lower than 0, so a function starting at best = 0 would never replace it and would answer 0 — a number that was never in the array. Beginning with a real element guarantees the answer is one of the values you were actually given.

Step 1 — Recognise the pattern: This is the build-a-new-array shape from Example 3.3.3 — make an empty array, loop, push what qualifies, return it.

Step 2 — Write the test: word.length works on a string just as it does on an array, counting characters instead of elements. "More than four characters" is word.length > 4, so a four-letter word does not qualify.

Step 3 — Return result after the loop:

▶ Press Run to see the output…

Output:

["elephant","giraffe"]
[]

Answer: Build an empty result, loop over words with for...of, push each word whose length is greater than 4, and return result. "bird" is excluded because four is not more than four — the boundary is where this kind of function usually goes wrong. When nothing qualifies the function returns [], an empty array rather than undefined, so the caller can loop over the result without checking first.

Step 1 — Read matrix[2][0] left to right: matrix[2] picks the element two steps from the start of the outer array, which is the third inner array, [5, 6]. Then [0] takes that inner array's first element, 5.

Step 2 — Read matrix.length: The outer array holds three elements, and each one happens to be an array. length counts those outer elements, so it is 3.

**Step 3 — Notice what length does not count:** There are six numbers in the grid, but matrix.length is not 6. The outer array knows only how many rows it holds; it knows nothing about how long any row is. To count a row you would ask matrix[0].length.

Answer: matrix[2][0] returns 5 and matrix.length returns 3. The 3 is the number of rows, not the number of numbers — a nested array's length describes only its own top level.

Step 1 — Recall what Section 3.3.6 showed: That section's Context Pause draws the line: a number handed to a function is copied, so the function cannot change the caller's copy. An array is not copied — the function receives a way back to your array.

Step 2 — Apply it to a push: Because the function is holding a route back to the caller's array rather than a copy of it, a push inside the function adds to the very same array the caller is holding. There is only ever one array involved.

Step 3 — Note the way around it: Example 3.3.3 sidesteps this deliberately by building a brand-new result array and leaving the input untouched. That is the habit to keep: if a function should not disturb its caller's data, have it build and return something new rather than modify what it was handed.

Answer: Yes — the caller will see the pushed value, because an array is not copied when it is passed to a function; the function receives a way back to the caller's own array. Section 3.6 explains the rule in full, under pass by value versus pass by reference.