2b:null 2c:["$","title",null,{"children":"Simplify your JavaScript – Use .map(), .reduce(), and .filter() | Jake B | Observable"}] 31:[] 2f:{"id":"1ae84c51fca2f505","slug":null,"title":"Simplify your JavaScript – Use .map(), .reduce(), and .filter()","thumbnail":"2c7ee95944cf9b2ca8ea4c07d8d0fa3b9c94fc54a37707a73e7dc2885fe42eef","access_level":"public","create_time":"$D2024-09-15T20:30:55.349Z","update_time":"$D2024-09-16T16:06:12.732Z","view_time":null,"first_public_time":"$D2024-09-16T14:55:29.503Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"5a9ac850accc0178","login":"cake-dev","name":"Jake B","avatar_url":"https://avatars-next.observableusercontent.com/a7d47fb45c877841ea48659aeb46d11bbe909d07d4d6be4a45fe99b33ecc6398","tier":"starter_2024"},"version":193,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02f28052cc95d87e","login":"cake-dev","name":"Jake B","avatar_url":"https://avatars-next.observableusercontent.com/a7d47fb45c877841ea48659aeb46d11bbe909d07d4d6be4a45fe99b33ecc6398","tier":null}],"members":[{"type":"individual","id":"02f28052cc95d87e","login":"cake-dev","name":"Jake B","avatar_url":"https://avatars-next.observableusercontent.com/a7d47fb45c877841ea48659aeb46d11bbe909d07d4d6be4a45fe99b33ecc6398","tier":null,"role":"editor"},{"type":"team","id":"5a9ac850accc0178","login":"cake-dev","name":"Jake B","avatar_url":"https://avatars-next.observableusercontent.com/a7d47fb45c877841ea48659aeb46d11bbe909d07d4d6be4a45fe99b33ecc6398","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Simplify your JavaScript – Use .map(), .reduce(), and .filter()","cells":[{"id":0,"value":"# Simplify your JavaScript – Use .map(), .reduce(), and .filter()","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"If you’re starting in JavaScript, maybe you haven’t heard of .map(), .reduce(), and .filter(). For me, it took a while as I had to support Internet Explorer 8 until a couple years ago. But if you don’t need to be compatible with this very old browser, you have to become familiar with those methods.\n

\nTake note that this article most likely applies to whatever other programming language you might be using, as these are concepts that exist in many other languages.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"

.map()

\nLet me explain how it works with a simple example. Say you have received an array containing multiple objects – each one representing a person. The thing you really need in the end, though, is an array containing only the id of each person.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"// What you have\nofficers = [\n { id: 20, name: 'Captain Piett' },\n { id: 24, name: 'General Veers' },\n { id: 56, name: 'Admiral Ozzel' },\n { id: 88, name: 'Commander Jerjerrod' }\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"// What you need\n[20, 24, 56, 88]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"There are multiple ways to achieve this. You might want to do it by creating an empty array, then using .forEach(), .for(...of), or a simple .for() to meet your goal.\n\nIn Observable, we can use map instead\n

\nUsing .map()","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"officersIds = officers.map(function (officer) {\n return officer.id\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"We can even be more concise with arrow functions","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"officersIds2 = officers.map(officer => officer.id);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"So how does .map() work? Basically is takes 2 arguments, a callback and an optional context (will be considered as this in the callback) which I did not use in the previous example. The callback runs for each value in the array and returns each new value in the resulting array.\n

\nKeep in mind that the resulting array will always be the same length as the original array.\n

\n

.reduce()

\nJust like .map(, .reduce() also runs a callback for each element of an array. What’s different here is that reduce passes the result of this callback (the accumulator) from one array element to the other.\n

\nThe accumulator can be pretty much anything (integer, string, object, etc.) and must be instantiated or passed when calling .reduce().\n

\nTime for an example! Say you have an array with these pilots and their respective years of experience:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"pilots = [\n {\n id: 10,\n name: \"Poe Dameron\",\n years: 14,\n },\n {\n id: 2,\n name: \"Temmin 'Snap' Wexley\",\n years: 30,\n },\n {\n id: 41,\n name: \"Tallissan Lintra\",\n years: 16,\n },\n {\n id: 99,\n name: \"Ello Asty\",\n years: 22,\n }\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"We need to know the total years of experience of all of them. With .reduce(), it’s pretty straightforward:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"totalYears = pilots.reduce(function (accumulator, pilot) {\n return accumulator + pilot.years;\n}, 0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"Notice that I’ve set the starting value as 0. I could have also used an existing variable if necessary. After running the callback for each element of the array, reduce will return the final value of our accumulator (in our case: 82).\n

\nLet’s see how this can be shortened with ES6’s arrow functions:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"totalYears2 = pilots.reduce((acc, pilot) => acc + pilot.years, 0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"Now let’s say I want to find which pilot is the most experienced one. For that, I can use reduce as well:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"mostExpPilot = pilots.reduce(function (oldest, pilot) {\n return (oldest.years || 0) > pilot.years ? oldest : pilot;\n}, {});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"I named my accumulator oldest. My callback compares the accumulator to each pilot. If a pilot has more years of experience than oldest, then that pilot becomes the new oldest so that’s the one I return.\n

\nAs you can see, using .reduce() is an easy way to generate a single value or object from an array.\n

\n

.filter()

\nWhat if you have an array, but only want some of the elements in it? That’s where .filter() comes in!\n
\nHere’s our data:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"pilots2 = [\n {\n id: 2,\n name: \"Wedge Antilles\",\n faction: \"Rebels\",\n },\n {\n id: 8,\n name: \"Ciena Ree\",\n faction: \"Empire\",\n },\n {\n id: 40,\n name: \"Iden Versio\",\n faction: \"Empire\",\n },\n {\n id: 66,\n name: \"Thane Kyrell\",\n faction: \"Rebels\",\n }\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"Say we want two arrays now: one for rebel pilots, the other one for imperials. With .filter() it couldn’t be easier!","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"rebels = pilots2.filter(function (pilot) {\n return pilot.faction === \"Rebels\";\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"empire = pilots2.filter(function (pilot) {\n return pilot.faction === \"Empire\";\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"That’s it! And it’s even shorter with arrow functions:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"rebels2 = pilots2.filter(pilot => pilot.faction === \"Rebels\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"empire2 = pilots2.filter(pilot => pilot.faction === \"Empire\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"Basically, if the callback function returns true, the current element will be in the resulting array. If it returns false, it won’t be.\n

\n

Combining .map(), .reduce(), and .filter()

\nSince all three are called on arrays and since .map() and .filter() both return arrays, we can easily chain our calls.\n

\nLet’s check out another example. Here’s our data:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"personnel = [\n {\n id: 5,\n name: \"Luke Skywalker\",\n pilotingScore: 98,\n shootingScore: 56,\n isForceUser: true,\n },\n {\n id: 82,\n name: \"Sabine Wren\",\n pilotingScore: 73,\n shootingScore: 99,\n isForceUser: false,\n },\n {\n id: 22,\n name: \"Zeb Orellios\",\n pilotingScore: 20,\n shootingScore: 59,\n isForceUser: false,\n },\n {\n id: 15,\n name: \"Ezra Bridger\",\n pilotingScore: 43,\n shootingScore: 67,\n isForceUser: true,\n },\n {\n id: 11,\n name: \"Caleb Dume\",\n pilotingScore: 71,\n shootingScore: 85,\n isForceUser: true,\n },\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"Our objective: get the total score of force users only. Let’s do it step by step!\n
\nFirst, we need to filter out the personnel who can’t use the force:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"jediPersonnel = personnel.filter(function (person) {\n return person.isForceUser;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"With that we have 3 elements left in our resulting array. We now need to use map to create an array containing the total score of each Jedi.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"jediScores = jediPersonnel.map(function (jedi) {\n return jedi.pilotingScore + jedi.shootingScore;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"And let’s use reduce to get the total:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"totalJediScore = jediScores.reduce(function (acc, score) {\n return acc + score;\n}, 0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"And now here’s the fun part… we can chain all of this to get what we want in a single line:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"totalJediScore2 = personnel\n .filter(function (person) {\n return person.isForceUser;\n })\n .map(function (jedi) {\n return jedi.pilotingScore + jedi.shootingScore;\n })\n .reduce(function (acc, score) {\n return acc + score;\n }, 0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"And look how pretty it is with arrow functions:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"totalJediScore3 = personnel\n .filter(person => person.isForceUser)\n .map(jedi => jedi.pilotingScore + jedi.shootingScore)\n .reduce((acc, score) => acc + score, 0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"# Notes on Map, Filter, and Reduce in JavaScript\n\n## 1. Map\n\n- **Purpose**: Transforms each element in an array and creates a new array with the results.\n- **Syntax**: `array.map(callback(currentValue, index, array))`\n- **Key points**:\n - Always returns a new array of the same length as the original\n - Doesn't modify the original array\n - Useful for data transformation and formatting\n \nExample:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"numbers = [1, 2, 3, 4, 5]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"doubled = numbers.map(num => num * 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"## 2. Filter\n\n- **Purpose**: Creates a new array with all elements that pass a test (provided as a function)\n- **Syntax**: `array.filter(callback(element, index, array))`\n- **Key points**:\n - Returns a new array that may be shorter than the original\n - Doesn't modify the original array\n - Useful for selecting specific items based on criteria\n \nExample:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"numbers10 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"evenNumbers = numbers.filter(num => num % 2 === 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"## 3. Reduce\n\n- **Purpose**: Reduces an array to a single value by applying a function to each element\n- **Syntax**: `array.reduce(callback(accumulator, currentValue, index, array), initialValue)`\n- **Key points**:\n - Very versatile - can be used to implement map and filter functionality\n - The accumulator can be any data type (number, string, object, array)\n - Initial value is optional but recommended to avoid errors\n\nExample:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"numbers2 = [1, 2, 3, 4, 5]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"sum = numbers2.reduce((acc, num) => acc + num, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"## 4. Chaining\n\n- These methods can be chained together for more complex operations\n- Example: `array.filter().map().reduce()`\n\nExample:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"numbers10_2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"result = numbers10_2\n .filter(num => num % 2 === 0)\n .map(num => num * 2)\n .reduce((acc, num) => acc + num, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"## 5. Observable-specific notes\n\n- Observable's reactive runtime makes these methods particularly powerful for data manipulation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"numbers3 = [1, 2, 3, 4, 5]\n// The values of filtered, mapped, and reduced will update reactively","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"filtered = numbers3.filter(n => n > 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"mapped = filtered.map(n => n * 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"reduced = mapped.reduce((acc, n) => acc + n, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"All in one:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"result2 = numbers3.filter(n => n > 2).map(n => n*10)\n .reduce((acc, n) => acc + n, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"## Common pitfalls to address\n\n- Forgetting to return a value in the callback function\n- Not providing an initial value for reduce when working with non-numeric data\n- Modifying the original array instead of creating a new one\n\n## Advanced topics\n\n- Using arrow functions for more concise syntax\n- Implementing map and filter using reduce\n- Performance considerations for large datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"Replacing Filter and Map with Reduce","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"