29:null 2a:["$","title",null,{"children":"JavaScript with Data, Dissected - Example 2 | Observable | Observable"}] 2f:T4b4,In words: this function expects a single input parameter `d` (each object we iterate over in our array), which accesses the `COMMON_NAME` value from each object using [dot notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors), and asks _Does this exactly match “Painted Greenling”?_ Whoa, whoa, whoa. You use THREE equal signs for an equality operator (`===`)? Well, we _can_. There are actually two versions of the equality operator that ask “does this match?” in JavaScript: the [strict equality operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality) (`===`), and the [equality operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality) (`==`). As the name implies, the strict equality operator is more strict: values must match in both value _and type_ to return TRUE. In comparison, the equality operator (sometimes called the loose equality operator) will try to coerce values to the same type before doing the comparison. Below, we show what happens when we compare 2 (a number) and “2” (a string) using the loose and strict equality operators:30:[{"id":"74eb153344d02cfaf5343fb9d24a9a9efaca26dfc9c3cdcc6c4ee23e85cd6a6945338f185f539cbeee66ab3dc4f2d31ace31db260916ea19779a659341c4b229","href":"https://static.observableusercontent.com/files/74eb153344d02cfaf5343fb9d24a9a9efaca26dfc9c3cdcc6c4ee23e85cd6a6945338f185f539cbeee66ab3dc4f2d31ace31db260916ea19779a659341c4b229","name":"image.png","type":"image/png","lastModified":1686190541248.226,"size":2305050},{"id":"409071048de6d4d019c435366fe42dd4d1c6409da59387acae67860e4c9487b4dcb612d8396306035c7656ab8a776c762ece57f288b38262473dbd6af07473f6","href":"https://static.observableusercontent.com/files/409071048de6d4d019c435366fe42dd4d1c6409da59387acae67860e4c9487b4dcb612d8396306035c7656ab8a776c762ece57f288b38262473dbd6af07473f6","name":"image@1.png","type":"image/png","lastModified":1686223269928.725,"size":244803},{"id":"409071048de6d4d019c435366fe42dd4d1c6409da59387acae67860e4c9487b4dcb612d8396306035c7656ab8a776c762ece57f288b38262473dbd6af07473f6","href":"https://static.observableusercontent.com/files/409071048de6d4d019c435366fe42dd4d1c6409da59387acae67860e4c9487b4dcb612d8396306035c7656ab8a776c762ece57f288b38262473dbd6af07473f6","name":"image@2.png","type":"image/png","lastModified":1686223322092.867,"size":244803},{"id":"704dfe2cfe04fdc3c15e976908d1994705c946436902e6746c58b5d815858b67e6c20cd1aed1a23e1e138ccab9e7f5d8f7f1de1b2752a35a21d113fe1b7738a9","href":"https://static.observableusercontent.com/files/704dfe2cfe04fdc3c15e976908d1994705c946436902e6746c58b5d815858b67e6c20cd1aed1a23e1e138ccab9e7f5d8f7f1de1b2752a35a21d113fe1b7738a9","name":"sbc-lter-fishes.csv","type":"text/csv","lastModified":1686019985542.402,"size":16966996}] 2d:{"id":"660a86caa1a45a38","slug":"javascript-dissections-example-2","title":"JavaScript with Data, Dissected - Example 2","thumbnail":"f5a7fe58eb16978215c7240134c58ae4866d1f8608d64b0362d8c3ad43bfe863","access_level":"public","create_time":"$D2023-05-23T02:20:06.986Z","update_time":"$D2023-06-08T20:33:17.420Z","view_time":null,"first_public_time":"$D2023-06-08T19:41:01.998Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":616,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b71e24965feea6d8","login":"allisonhorst","name":"Allison Horst","avatar_url":"https://avatars-next.observableusercontent.com/323c217177f0f20e4e8ed3aa302fec1408cf22b57cbd726e37e76182d5f82a65","tier":null}],"members":[{"type":"individual","id":"4530d0072aa49b47","login":"erinn","name":"Erinn Wong","avatar_url":"https://avatars-next.observableusercontent.com/9119ac38e4f1c92d50b28822c47306212f06e085b7d1416e851a1c397194e2d4","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"JavaScript with Data, Dissected - Example 2","cells":[{"id":0,"value":"# JavaScript with Data, Dissected - Example 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"Welcome back for the second example in this series, where we dissect JavaScript into tiny bits to learn some essential skills for working with data! In this example, we will create a subset of larger dataset¹ on fish observations limited to records for painted greenlings (_Oxylebius pictus_) at two locations along the Santa Barbara Channel, California: Naples and Carpinteria Reef.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":388,"value":"Our final code will look like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"fishes.filter(d => d.COMMON_NAME === \"Painted Greenling\" && [\"NAPL\", \"CARP\"].includes(d.SITE))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"But there’s a lot going on in that one line! Here is a visual explanation of the different pieces we’ll walk through:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":406,"value":"image1 = FileAttachment(\"image@1.png\").image({width: 800})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"¹Santa Barbara Coastal LTER, D. Reed, and R. Miller. 2023. SBC LTER: Reef: Long-term experiment: Kelp removal: Fish abundance ver 22. Environmental Data Initiative. https://doi.org/10.6073/pasta/02f4e99ca9d972cb4b0db05da9354716 (Accessed 2023-06-03)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"## 1. Start with an array of objects called _fishes_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":419,"value":">> `fishes``.filter(d => d.COMMON_NAME === \"Painted Greenling\" && [\"NAPL\", \"CARP\"].includes(d.SITE))`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"The code we’re dissecting today starts with _fishes_, an array of objects with observations for different fishes at five study sites within the Santa Barbara Channel. We have already imported _fishes_ into this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"An array of objects is a common way that data are stored and used in JavaScript. Click on the black arrow to the left of “Array” in the cell below to reveal the first 20 objects in the array. Notice that each object is within curly braces, which are together within square brackets to create the array that holds them together.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":475,"value":"fishes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"There are a bunch of variables in the dataset (see [full metadata here](https://portal.edirepository.org/nis/metadataviewer?packageid=knb-lter-sbc.30.22)), but we’ll just use two in our example: \n\n- **SITE**: A four character abbreviation of the different study sites\n- **COMMON_NAME**: The common name for recorded fish species","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":165,"value":"## 2. Use `filter` to keep or exclude objects (rows)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":431,"value":">> `fishes``.filter``(d => d.COMMON_NAME === \"Painted Greenling\" && [\"NAPL\", \"CARP\"].includes(d.SITE))`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"Here, we want to create a new subset with records of painted greenlings recorded at two sites: Naples Reef (NAPL) and Carpinteria Reef (CARP). That means for a row (object) to remain in our new subset, two conditions must be met: \n\n1. The common name (`COMMON_NAME`) matches “Painted Greenling”\n2. The site (`SITE`) is either “NAPL” or “CARP”","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"We will keep objects that satisfy both conditions using the [**Array `filter`**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) method, which iterates through each element of an array and returns a _new_ array that only keeps an element if the output of a function testing that element in the original array is true. \n\nThat’s a mouthful. Let’s look at a smaller example. Consider this array: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"myArray = [1, 2, 5, 10, 4, 6, 18]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"Below, I use `filter` to create a new array that only contains elements from myArray that are greater than 8: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":191,"value":"myArray.filter(val => val > 8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"What is `val => val > 8` doing? That is a concise way of writing a function (using an [arrow function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)) with a single input parameter `val` (this could be anything...often you’ll see `d` used to indicate elements in an array), which returns the output of a conditional statement `val > 8`. So that little function gets applied to each element in the array. If the function returns TRUE (when the current element in the iteration _is_ greater than 8), that element is retained in the new array. If it returns FALSE, the element is omitted from the new array.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"Now we know that `filter` will iterate over each object in our array, and keep it in our new subset if our function returns TRUE. Let’s add our conditions to filter _fishes_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":216,"value":"## 3 & 4. Add conditional statements within `filter`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":221,"value":"As a reminder, in our new subset we only want objects where: \n\n1. The common name (`COMMON_NAME`) matches “Painted Greenling”\n2. The site (`SITE`) is either “NAPL” or “CARP”","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"We need to write a function that returns TRUE or FALSE to test those conditions. Let's break it down.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"### 3. Keep painted greenlings...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":444,"value":">> `fishes.filter(``d => d.COMMON_NAME === \"Painted Greenling\"` `&& [\"NAPL\", \"CARP\"].includes(d.SITE))`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":254,"value":"To keep painted greenlings in our new array, we will write a function that returns TRUE if the `COMMON_NAME` property of the object exactly matches “Painted Greenling” (note that this is case sensitive — since the name is in title case in the data, we will want to match that exactly). So, we can start writing our function within to check that condition for each object that we iterate over: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":258,"value":">> `d => d.COMMON_NAME === \"Painted Greenling\"`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":265,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"2 == \"2\" // Converts to the same type before comparing values using the loose equality operator","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"2 === \"2\" // Must originally match in type and value using the strict equality operator","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"In our example, we could use either of the operators and expect the same thing. But, now you know that you will sometimes see these different equality operators in JavaScript, and how they differ.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"Here is an adorable painted greenling:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":378,"value":"image = FileAttachment(\"image.png\").image({width: 400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"_[Photo](https://upload.wikimedia.org/wikipedia/commons/4/44/PaintedGreenling2007.jpg): Aleph1, [CC BY 3.0](https://creativecommons.org/licenses/by/3.0) via Wikimedia Commons_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"### 4. And only keep records from Naples Reef and Carpinteria Reef","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":450,"value":">> `fishes.filter(d => d.COMMON_NAME === \"Painted Greenling\" ` `&& [\"NAPL\", \"CARP\"].includes(d.SITE))`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"We’ll use the [**Array `includes`**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) method return TRUE if the site abbreviation matches either “NAPL” or “CARP”. While we could write separate conditions to check for either of the sites, `includes` gives us a way to more efficiently ask “does this match _any_ value in an array?” \n\nHere’s what that looks like for our example: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":310,"value":">> `&& [\"NAPL\", \"CARP\"].includes(d.SITE)`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":313,"value":"Note: the double ampersand (`&&`) is how we write intersection (AND) conditional statements. We can write OR statements using `||`.\n\nSo what is the line above doing? It asks: _Does the value of SITE in the current object exist in the array `[\"NAPL\", \"CARP\"]`_? In other words: is the value of `SITE` for the current row either “NAPL” or “CARP”? If yes, keep that row in the new array; if no, omit it. In summary: the `includes` method gives us a way to check if a value matches _any_ values in an array.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":333,"value":"## Putting it all together","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":335,"value":"When we put all of those pieces together, we have our code to create a new subset from _fishes_ that only contains records for painted greenlings recorded at two sites: Naples and Carpinteria Reef:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"fishes.filter(d => d.COMMON_NAME === \"Painted Greenling\" && [\"NAPL\", \"CARP\"].includes(d.SITE))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"image2 = FileAttachment(\"image@2.png\").image({width: 800})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"Play around with the code to see if you can create other subsets. Can you create a subset for Island Kelpfish at Isla Vista Reef and Arroyo Quemado (“IVEE” and “AQUE”)? Have fun tinkering with this code to reinforce the essentials that we’ve dissected in this example.\n\nSee you soon for the next _JavaScript with Data, Dissected_ example! In case missed it, here is [Example 1](https://observablehq.com/@observablehq/javascript-dissections-example-1).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"fishes = FileAttachment(\"sbc-lter-fishes.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"