29:null 2a:["$","title",null,{"children":"Introduction to code | Diego Portillo's Workspace | Observable"}] 2f:T420,md`To understand reactivity, think of each cell as a function. For example, the cell \`sum = a + b\` becomes a function that takes \`a\` and \`b\` as arguments, returning their sum; the runtime waits for the value of \`a\` and \`b\` to resolve and then invokes the \`sum\` function. The runtime invokes \`sum\` again whenever \`a\` or \`b\` change. If a cell contains a \`yield\` statement, the runtime creates a [generator function](https://observablehq.com/@observablehq/introduction-to-generators) instead of a normal function. Likewise if the definition uses \`await\`, the runtime creates an [async function](https://observablehq.com/@observablehq/introduction-to-asynchronous-iteration). Reactivity greatly simplifies how you build user interfaces, script animations, and consume realtime data. If you want to learn more about generators and asynchronous functions, follow the links in the previous paragraph. Or, return to the main Observable [documentation page](https://observablehq.com/documentation) to browse other topics that interest you!`30:[{"id":"569b08d95240191ad286c1f0e06854b30f4562fff08950308f2125164a4a18740a1edd7d3a1355dd889377244326a1f5aaa6b172c861843f1650faab5093fc96","href":"https://static.observableusercontent.com/files/569b08d95240191ad286c1f0e06854b30f4562fff08950308f2125164a4a18740a1edd7d3a1355dd889377244326a1f5aaa6b172c861843f1650faab5093fc96","name":"cell_naming.mp4","type":"video/mp4","lastModified":1698322127094.269,"size":258977}] 2d:{"id":"d13421548ece2b10","slug":null,"title":"Introduction to code","thumbnail":"63d2d70e5879881347270b76cec8bbf9a36e5c12e26d9372dc051bc9a99daa12","access_level":"public","create_time":"$D2023-10-26T12:08:47.094Z","update_time":"$D2023-10-26T12:09:41.692Z","view_time":null,"first_public_time":"$D2023-10-26T12:08:47.094Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"087cdaa68d01705d","login":"diego-portillo-ws","name":"Diego Portillo's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/b973b6636db38caab8973769fe1942d0bd1846c5a2dd9d5cffcbfe1f9386360f","tier":"starter_2024"},"version":537,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ff508336fffec480","login":"diego-portillo","name":"Diego Portillo","avatar_url":"https://avatars-next.observableusercontent.com/5fac581100c8fdb04415f6364b22c1ef1793734d887ab5a57918d5c930831b5d","tier":null}],"members":[{"type":"individual","id":"ff508336fffec480","login":"diego-portillo","name":"Diego Portillo","avatar_url":"https://avatars-next.observableusercontent.com/5fac581100c8fdb04415f6364b22c1ef1793734d887ab5a57918d5c930831b5d","tier":null,"role":"editor"},{"type":"team","id":"087cdaa68d01705d","login":"diego-portillo-ws","name":"Diego Portillo's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/b973b6636db38caab8973769fe1942d0bd1846c5a2dd9d5cffcbfe1f9386360f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Introduction to code","cells":[{"id":0,"value":"# Introduction to code\n\nYou can definitely write your own Observable notebook; to do that, you'll be writing code. Let's cover some fundamental ideas that you need to know when writing code in Observable.\n\nObservable notebooks are written in [JavaScript](https://developer.mozilla.org/docs/Web/JavaScript), the Web’s native language, but [with a few changes](/@observablehq/observables-not-javascript). It's helpful if you have some JavaScript experience, but don’t panic if you’re rusty or not an expert! Instead, try tinkering with the code to get a feel for how it works. Even the most wizened developer may yet learn by trial and error. (If you *are* an experienced JavaScript developer, definitely look at [Observable JavaScript](/@observablehq/observable-javascript).)\n`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":509,"value":"notebooksMadeOfCells = md `## Notebooks are made of cells`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"This notebook, and every Observable notebook, is composed of *cells*. You might be familiar with cells in spreadsheets. Observable cells are similar: they are basic building blocks for the entire document, and can contain text, charts, images, and more. Your code for the notebook is contained in cells, so you need to know how to open, close, and evaluate them. A quick refresher in case you haven't been through one of our tutorials:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"md ` ### Opening and closing cells`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"To open a cell, move your mouse pointer over the cell. At the left of the cell, a column of three dots appears. This is the cell menu. Click the three dots to display the cell menu, then choose **Edit**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"md `To close the cell, click on the cell menu again, then choose **Close**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"md ` ### Evaluating cells\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"md `To have the results of your edits appear, click the Play (\\`▶︎\\`) button, or type Shift-Enter.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"cellsHeading = md `## Cells - for expressions, variable definitions, blocks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"md`Cells come in two primary forms: *expressions* and *blocks*. **Expression** cells are concise and are intended for simple definitions, such as basic arithmetic:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"// Notice that the result of the multiplication expression below is shown above.\n\n3 * 3 * 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"22/7","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"md `or **variable** definitions:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"approximately_two_pi = (22/7) * 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"md `Variables can also be strings of text:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"nameOfFish = \"trout\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"nameOfPerson = \"Mike\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`**Blocks** are surrounded by curly braces (\\`{\\` \\`}\\`) and are intended for more complex definitions, such as ones involving local variables or loops:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"{\n let x = 0;\n for (let i = 1; i <= 100; ++i) {\n x += i;\n }\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md `\n|||Note: Shaded cells|\n| --- |--- | --- |\n|||Any cell that you see with visible shading is _pinned_. This leaves the cell open so that the code is visible. A blue pushpin symbol appears in the left margin when you mouseover the cell.|\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"variables = md `## Variables inside blocks are *local* to a cell`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`Local variables, like the \\`x\\` seen in the block above, can’t be referenced from other cells; trying to reference an unknown variable results in a runtime error.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"x + 2 // x is not accessible here!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"Notice, however, that this error is localized to the broken cell—the rest of the notebook is able to run happily.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"md `And, you *are* able to access variables that are not inside blocks:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"nameOfFish","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"objectLiterals = md `## Special case: Object Literals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"literalObject = md`Using curly braces is necessary not only when you are defining a block, but also when you are defining an [object literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"An [object literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals) is an object with a set of name-value pairs that define properties of the object:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"({oilOrAcrylic: \"oil\", name: \"Cobalt Blue\", sizeInMl: 40, priceInUSD: 58.46})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"Notice the curly braces (like a block), but with parentheses surrounding the curly braces (unlike a block). If you want to define a cell as an object literal, you must wrap the literal in parentheses to disambiguate it from a block.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"functionHeading = md `## Functions - for sharing code between cells`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`To repeat operations or share code between cells without copying and pasting, define a **function**:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"function greet(name) {\n return `Hello, ${name}!`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`This \\`greet\\` function now can be called from other cells to display cheery greetings:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"greet(\"Alice\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"greet(nameOfPerson)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"namingCells = md `## Naming Cells - allows cells' values to be referenced`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`While local variables are not visible across cell boundaries, you can name cells to reference their values. Here’s a cell named \\`color\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"color = \"red\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"(This looks identical to a standard JavaScript assignment, but it’s not—it’s *reactive*! More on that [in a bit](#reactivity).) Here’s another cell named `letters`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"letters = { return \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\"); }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"md`\n|

Note: split()

| \n| --------------------------------------- |\n| You can read more about split() here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split |\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md`You can refer to \\`letters\\` (or any other named cell) from other cells:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"letters.map(l => l.toLowerCase())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"md `\n|

Note: map() and toLowerCase()

| \n| --------------------------------------- |\n|More about map(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map|\n|More about toLowerCase(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase|\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`You needn’t define named cells before you reference them: order your cells however you like, and Observable will automatically execute them in topological order. Out-of-order execution is especially helpful for improving the narrative flow of your notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"fullName = `${firstName} ${lastName}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"lastName = \"Lovelace\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"firstName = \"Ada\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"Cells can also be (re)named via the cell toolbar, as demonstrated in the video below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":511,"value":"

\n \n

(Re)naming cells via the toolbar.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":471,"value":"reactivity = md `## Reactivity - cells re-evaluate automatically`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`A cell that references other cells is re-evaluated automatically whenever the referenced values change. Try editing the \\`firstName\\` or \\`lastName\\` cell above, then click the play button (\\`▶︎\\`) to commit your change; \\`fullName\\` updates automatically.\n\nThis *reactivity* is similar to live reload, with an important difference: when a value changes, *only* referencing cells are re-evaluated, rather than the entire notebook. This makes editing more responsive—notebooks update rapidly in response to changes—and you don’t lose independent transient state.\n\nFor example, the cell below computes a random walk, the next cell strokes a line based on the values of the random walk, and the third cell, named \\`stroke\\`, defines the color of the line. If you edit the \\`stroke\\` cell, the random walk will change color, but the shape of the line remains the same. A new walk is only computed if you edit the \\`randomWalk\\` cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"randomWalk = {\n let y = 16, values = [y];\n for (let x = 0; x < width; ++x) values.push(y = y + (Math.random() - 0.25) * 3 + (16 - y) * 0.1);\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"{\n const context = DOM.context2d(width, 33);\n context.beginPath();\n context.moveTo(0, randomWalk[0]);\n for (let x = 0; x < width; ++x) context.lineTo(x, randomWalk[x]);\n context.lineJoin = context.lineCap = \"round\";\n context.strokeStyle = stroke;\n context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"stroke = color","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"(See what happens if you set `stroke` equal to the named cell `color` from the [Naming Cells](#namingCells) section above. Remove the quotation marks if you try this!)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"md `### More about reactivity\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"