29:null 2a:["$","title",null,{"children":"JavaScript with Data, Dissected - Example 1 | Observable | Observable"}] 2f:T4b2,The code on the right hand side of the arrow function within `({ })` returns an object at each step of the iteration. We can see that what's returned is bookended by {curly braces}, which is expected to create a new object. But why are there those additional outer parentheses around everything on the right hand side of our arrow function? Now we’re getting into some weeds, folks... That extra set of parentheses is, admittedly, a bit weird — and the code doesn’t work without it! So what’s it doing? Well, in JavaScript there are multiple things that can start with a curly brace. For example, the body of a function. Or a multiline code block. Or (the one we want) — an object! To ensure that the arrow function doesn’t get confused about which of these we’re returning when it sees that curly brace, we wrap it in regular parentheses. This makes it clear to JavaScript that what’s getting returned is an object, and not one of the other things that can also begin with a curly brace. You can read more details [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body).30:T481,Now that we know that we’ll get back all of the original properties, let’s add something new! That’s what that second piece (`bodyMassKg: d.body_mass_g / 1000`) is doing. It creates a _new property_ named `bodyMassKg` within the returned object, and the value of that property will be the value of `body_mass_g` in each _penguins_ object, divided by 1000. That dot notation (`d.body_mass_g`) is one way we can access the value of an object property. For invalid property names, like those with spaces or unexpected punctuation, you can use bracket notation (e.g. `d["my property name"]`) to access a value instead. Learn more about [property accessors with dot and bracket notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors). Because these are in an arrow function within `map`, and the job of map is to iterate over each element of an array, do something (apply the function), then return what you asked it for in a new array, what we get is a new array containing all of the original properties within `penguins` _plus_ a new property with the body mass in kilograms (converted from grams).31:[{"id":"7441be00a6ebbc5b10d2fef172dea062ea406683625c033ac4259d99be6fe690e15afd75b70296cf1309f506bd8f3308ef1e96c0bacb80b69b2593223dc5c8f5","href":"https://static.observableusercontent.com/files/7441be00a6ebbc5b10d2fef172dea062ea406683625c033ac4259d99be6fe690e15afd75b70296cf1309f506bd8f3308ef1e96c0bacb80b69b2593223dc5c8f5","name":"image@1.png","type":"image/png","lastModified":1684352476164.684,"size":275775}] 2d:{"id":"e239620e1261fa40","slug":"javascript-dissections-example-1","title":"JavaScript with Data, Dissected - Example 1","thumbnail":"13707ec9b3d6aceceb1bccad6e847e0598f99fce14948b8044cf89bbc12e0da1","access_level":"public","create_time":"$D2023-05-16T20:44:57.344Z","update_time":"$D2023-05-19T22:06:27.409Z","view_time":null,"first_public_time":"$D2023-05-19T14:28:33.672Z","has_unpublished_edits":null,"fork":false,"stars":24,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":462,"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"JavaScript with Data, Dissected - Example 1","cells":[{"id":0,"value":"# JavaScript with Data, Dissected - Example 1\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"image2 = FileAttachment(\"image@1.png\").image({width: 800})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"When I was learning to work with data in JavaScript, I found that I could do _a lot_ of what I needed with only a few pieces of core JavaScript knowledge. In this series, I’ll walk through some short but mighty examples, explaining each in detail piece-by-piece. Welcome to Example 1!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"Here’s the line of code we’ll dissect in Example 1:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"penguins.map(d => ({...d, bodyMassKg: d.body_mass_g / 1000}))","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"This bit of code contains a LOT of essential JavaScript knowledge! Read on to learn about each piece. **Note:** the explanation in each section focuses on the highlighted bit of code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":441,"value":"---\n## 1. Start with an array of objects\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"`penguins` `.map(d => ({...d, bodyMassKg: d.body_mass_g / 1000}))`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":417,"value":"`penguins` is an **array of objects**. An [array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) lets you store multiple items within a single variable. An [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) is a data type that stores properties, which are combinations of key-value pairs. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"The `penguins` array contains one object for each of the 344 individual penguins recorded at islands near Palmer Archipelago, Antarctica, from 2007 - 2009. Each of the objects contain properties of the penguin, like which island it was on, species, sex, and body size measurements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"Click the black arrow to the left of `Array` below to expand the `penguins` array.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"penguins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"\nWith the array expanded, you can see that each object contains a set of key-value pairs, with the key describing the property (like a variable name) and the associated value for that property (e.g. `species: \"Adelie\"`).\n\nAn array of objects is a common way that data are stored and used in JavaScript. 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":167,"value":"Now we know we are starting from the `penguins` array of objects.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"## 2. Iterate over each element (object) in the array","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"`penguins``.map``(d => ({...d, bodyMassKg: d.body_mass_g / 1000}))`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"The [Array `map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) method iterates over each element in an array, doing what you ask it to for each element and returning the output in an array. In this example, the elements of the array are the 344 objects that contain data for each penguin. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"Now we know that we are starting from the `penguins` array of objects, and we will be iterating over each of those objects and asking for something in return. Next, we need to decide what gets returned at each step of the iteration.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"## 3. Write a function that returns something from each step of the iteration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":177,"value":"`penguins.map(``d => ``({...d, bodyMassKg: d.body_mass_g / 1000}))`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"Meet [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). Arrow functions give you a more concise way to write functions in JavaScript. \n\nWhatever is on the _left_ of the `=>` (in this case, _d_, but you can give it whatever valid name you like) is the expected function parameter (what is fed into the function). Whatever is on the _right_ of the arrow function operator is what the function returns. \n\nFor example, the code below creates a function called _addApples_, which takes an input parameter called _apples_, and returns the value of _apples_ plus 5:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"addApples = apples => apples + 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"addApples(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"So what is that arrow function doing in our penguins example? It is a function that takes some input parameter, _d_ (here, the current object in our array that `map` is iterating through), and _returns_ something for each element in the array. What is that new thing that’s getting returned from this arrow function? Keep reading to learn what’s happening in the expression on the right hand side! \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"## 4. Return a new object from each step of the iteration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"`penguins.map(d => ``({``...d, bodyMassKg: d.body_mass_g / 1000``})``)`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"## 5. So what’s in that new object being returned? ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"`penguins.map(d => ({``...d, bodyMassKg: d.body_mass_g / 1000``}))`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"There are two pieces of the new object: `...d`, and `bodyMassKg: d.body_mass_g / 1000`. What are each of these doing? \n\nFirst, `...d`. This is what’s called [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) in JavaScript. Essentially, this piece says “for each object I'm iterating over, return all of the same properties in a new object,” so all of the original object properties and values are copied into the new object that gets returned.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":260,"value":"Expand the array below to confirm it works as expected, and scroll to the right to see the new `bodyMassKg` property added! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"penguins.map(d => ({...d, bodyMassKg: d.body_mass_g / 1000}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"## Summary","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"There you have it! So many JavaScript essentials in one little example. To recap, in the line of code above we: \n\n1. Start with an array of objects called _penguins_\n2. Use the Array `map` method to iterate through each object in the array\n3. Create a concise function using the arrow function operator (`=>`) within `map`\n4. That arrow function will return a new object at each step in the iteration\n5. Each new object will contain a copy of all original object properties (thanks spread operator!), plus a new property named `bodyMassKg` with the original `body_mass_g` property value divided by 1000\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":376,"value":"image1 = FileAttachment(\"image@1.png\").image({width: 800})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"\nMore dissections coming soon!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"