Pocket’s expenses are a list, and almost every feature is a question about that list. Which ones are refunds? What do they look like formatted as dollars? Is there anything over $100? You can answer all of these with the loops from section 2, but arrays come with methods that answer them in one readable line each.
\nAn array is an ordered list of values. You saw the basics already: square brackets, positions from 0, and length.
const amounts = [450, 1220, 270];\n\namounts.push(899); // add to the end\nconsole.log(amounts);\nconst last = amounts.pop(); // remove from the end, and get it back\nconsole.log(last, amounts);\namounts[0] = 500; // replace an item by index\nconsole.log(amounts, amounts.includes(1220), amounts.indexOf(270));Wait: amounts is a const, yet it changed three times. That is not a contradiction. const means the name always points at the same array. It says nothing about what is inside the array. push, pop and index assignment all change the contents of that one array, so they are allowed. Only amounts = [...], pointing the name at a different array, would throw.
This idea, that a name points at a list and several operations change the list itself, is the reason to know which methods mutate:
\n| Changes the array | \nReturns something new, array untouched | \n
|---|---|
push, pop, shift, unshift | \nslice, concat | \n
splice | \nmap, filter | \n
sort, reverse | \ntoSorted, toReversed | \n
Mutating is not wrong, but it surprises people when two parts of a program share one array. The methods in the rest of this lesson never mutate, which is a large part of why they are so popular.
\nThe pair that confuses everyone is slice and splice, one letter apart and opposite in behaviour:
const amounts = [450, 1220, 270, 899];\n\nconst firstTwo = amounts.slice(0, 2); // copy of indexes 0 and 1\nconsole.log(firstTwo, amounts); // original untouched\n\nconst removed = amounts.splice(1, 1); // remove 1 item at index 1\nconsole.log(removed, amounts); // original changedslice(start, end) works exactly like the string method of the same name: it copies a piece and leaves the original alone. splice(start, count) cuts items out of the array itself and returns what it removed. If you ever need to remove an item without changing the original, use filter instead, which you are about to meet.
map calls a function for each item and collects the return values into a new array of the same length:
const amounts = [450, 1220, 270];\nconst formatMoney = (cents) => `$${(cents / 100).toFixed(2)}`;\n\nconst labels = amounts.map(formatMoney);\nconsole.log(labels);\nconsole.log(amounts); // unchangedIt is the built-in version of the applyToAll function you wrote in the functions lesson. Use map whenever the question is “turn each X into a Y”: cents into dollar strings, dollars into cents, raw form values into clean ones. The callback receives each item in turn and must return the new version of it. Whatever it returns lands at the same position in the result, so the output always has exactly as many items as the input.
filter calls a test function for each item and returns a new array of only the items for which the test returned a truthy value:
const amounts = [450, -300, 1220, -50, 270];\nconst spending = amounts.filter((a) => a > 0);\nconst refunds = amounts.filter((a) => a < 0);\nconsole.log(spending, refunds);The result can be shorter than the original, or even empty, but filter never changes the items themselves.
Four methods answer search questions, and each stops as soon as it knows the answer:
\nconst amounts = [450, 12000, 1220, 15000];\n\nconsole.log(amounts.find((a) => a >= 10000)); // first match: 12000\nconsole.log(amounts.findIndex((a) => a >= 10000)); // its position: 1\nconsole.log(amounts.some((a) => a < 0)); // any refunds? false\nconsole.log(amounts.every((a) => a > 0)); // all positive? truefind returns the item itself, or undefined if nothing matches. findIndex returns its position, or -1. some and every return booleans: “at least one” and “all of them”.
Because filter and map both return arrays, you can call one on the result of the other:
const amounts = [450, -300, 12000, 1220];\nconst bigOnes = amounts\n .filter((a) => a >= 1000)\n .map((a) => `$${(a / 100).toFixed(2)}`);\nconsole.log(bigOnes);Read it top to bottom like a recipe: start with all amounts, keep the ones of $10 or more, format them. Each step gets the previous step’s output. Putting each step on its own line, starting with the dot, keeps long chains readable.
\n\n\nSo far the arrays hold plain numbers. Real expenses have a label, an amount and a category together, which calls for objects, the subject of the next lesson.
\n","toc":[{"id":"sec-1","text":"Making and changing arrays","level":2},{"id":"sec-2","text":"map: transform every item","level":2},{"id":"sec-3","text":"filter: keep only some items","level":2},{"id":"sec-4","text":"find, some and every: searching","level":2},{"id":"sec-5","text":"Chaining: reading a pipeline","level":2}],"takeaways":["const stops a name from pointing at a different array, but the array’s contents can still change with push, pop or index assignment.","Some methods mutate the array (push, pop, splice, sort); others return a new value and leave it untouched (slice, map, filter).","map returns a new array of the same length with each item transformed; filter returns a new array of only the items that pass a test.","find returns the first matching item or undefined; some and every answer yes/no questions about the whole list."],"further":[{"title":"Array (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array"},{"title":"Array.prototype.map() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map"},{"title":"Array.prototype.filter() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter"}],"quiz":[{"q":"What does this log?
\nconst amounts = [450, 1220];\namounts.push(270);\nconsole.log(amounts.length);amounts is a const.","why":"const only forbids pointing the name at another value. push changes the array the name already points at, which is allowed."},{"text":"3","why":"Correct. push adds 270 to the end of the same array, so it now has three items."},{"text":"2","why":"push mutates the array in place; it does not return a copy and leave the original alone."}],"answer":1},{"q":"const amounts = [450, -300, 1220]; What does amounts.find((a) => a > 5000) return?
[]","why":"An empty array is what filter returns when nothing matches. find returns a single item or nothing."},{"text":"-1","why":"-1 is what findIndex and indexOf return for “not found”. find returns the item itself."},{"text":"undefined","why":"Correct. find returns the first item that passes the test, and undefined when none does."},{"text":"false","why":"A boolean answer comes from some or every. find gives you the matching item."}],"answer":2},{"q":"What does this log?
\nconst out = [450, 1220].map((c) => {\n c / 100;\n});\nconsole.log(out);[undefined, undefined]","why":"Correct. The callback has braces but no return, so it returns undefined for each item, and map collects those."},{"text":"[4.5, 12.2]","why":"That needs (c) => c / 100 or an explicit return inside the braces."},{"text":"[450, 1220]","why":"map always builds its result from what the callback returns, never from the original items."}],"answer":0},{"q":"You need to know whether every expense in a list has a category. Which method fits?
","options":[{"text":"filter","why":"filter would give you a new array, and you would still have to compare lengths. every answers the question directly."},{"text":"some","why":"some is true if at least one item passes. You need all of them to pass."},{"text":"every","why":"Correct. every returns true only if the test passes for all items, and stops at the first failure."},{"text":"map","why":"map transforms items; it does not answer a yes/no question about the list."}],"answer":2}],"exercise":{"kind":"web","mode":"js","starter":{"js":"const amounts = [450, -300, 12000, 1220, -50, 15000];\nconst formatMoney = (cents) => `$${(cents / 100).toFixed(2)}`;\n\n// Use array methods, not for loops, and never change the array you receive.\n\n// Only the positive amounts\nfunction spendingOnly(amounts) {\n return amounts;\n}\n\n// Every amount formatted with formatMoney\nfunction formatAll(amounts) {\n}\n\n// The first amount of 10000 cents or more, or undefined\nfunction firstBig(amounts) {\n}\n\n// true if any amount is negative\nfunction hasRefund(amounts) {\n return false;\n}\n\nconsole.log(spendingOnly(amounts), formatAll(amounts));\n"},"solution":{"js":"const amounts = [450, -300, 12000, 1220, -50, 15000];\nconst formatMoney = (cents) => `$${(cents / 100).toFixed(2)}`;\n\nfunction spendingOnly(amounts) {\n return amounts.filter((a) => a > 0);\n}\n\nfunction formatAll(amounts) {\n return amounts.map(formatMoney);\n}\n\nfunction firstBig(amounts) {\n return amounts.find((a) => a >= 10000);\n}\n\nfunction hasRefund(amounts) {\n return amounts.some((a) => a < 0);\n}\n\nconsole.log(spendingOnly(amounts), formatAll(amounts));\n"},"checks":[{"id":"spending","test":"const arr = [450, -300, 12000, 1220, -50];\nconst out = spendingOnly(arr);\nreturn Array.isArray(out) && out.join() === '450,12000,1220' && arr.length === 5;\n"},{"id":"format","test":"const out = formatAll([450, -300, 5]);\nreturn Array.isArray(out) && out.join('|') === '$4.50|$-3.00|$0.05';\n"},{"id":"first-big","test":"return firstBig([450, 12000, 15000]) === 12000 && firstBig([10000]) === 10000 && firstBig([1, 2]) === undefined;\n"},{"id":"refund","test":"return hasRefund([450, -1]) === true && hasRefund([450, 0]) === false && hasRefund([]) === false;\n"},{"id":"no-mutation","test":"const arr = [450, -300, 12000];\nspendingOnly(arr); formatAll(arr); firstBig(arr); hasRefund(arr);\nreturn arr.join() === '450,-300,12000';\n"}],"title":"Ask questions about a list","prompt":"Fill in four functions using array methods instead of for loops. None of them may change the array they receive.
spendingOnly(amounts) returns a new array with only the positive amounts.formatAll(amounts) returns every amount formatted with the provided formatMoney.firstBig(amounts) returns the first amount of 10000 cents or more, or undefined.hasRefund(amounts) returns true if any amount is negative.filter, transform each is map, first match is find, any match is some.","You can pass formatMoney straight to map, without parentheses: amounts.map(formatMoney).","Each body is one line, for example return amounts.filter((a) => a > 0);."],"explanation":"Each question maps onto one method. filter keeps items whose callback returns something truthy, map builds a same-length array from the callback’s return values, find returns the first matching item itself (or undefined), and some returns true as soon as one item passes. None of these methods mutate, so the caller’s array is exactly as it was. Passing formatMoney directly to map works because map calls it with each item as the first argument.
spendingOnly returns only positive amounts","format":"formatAll formats every amount","first-big":"firstBig returns the first amount of 10000 or more, or undefined","refund":"hasRefund detects negative amounts","no-mutation":"None of the functions change the input array"}},"words":699,"readMinutes":3}