2b:null 2c:["$","title",null,{"children":"Intro to JavaScript | CS 181AP Data Visualization | Observable"}] 31:T556,# Intro to JavaScript This notebook provides a chaotic introduction to JavaScript for students with programming experience that need just enough understanding to produce visualizations in Observable Notebooks. JavaScript started as a functional, interpreted, scripting language run by web browsers to produce dynamic content on web pages ([MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript)). It has since expanded beyond web browsers, although that is beyond this introduction. You can open up the [console](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#opening_the_console) in a modern web browser and immediately start executing JavaScript code. I also recommend the [MDN Playground](https://developer.mozilla.org/en-US/play) as a place to practice JavaScript, HTML, and CSS. Of course, you can also add JavaScript directly into a [JavaScript cell](https://observablehq.com/documentation/cells/javascript) in Observable Notebooks! *While the syntax is similar to Java (both borrow C-style syntax), the name "JavaScript" was chosen as a marketing ploy as Java was a popular language at the time ([Wikipedia](https://en.wikipedia.org/wiki/JavaScript)). While JavaScript was not directly related to Java when it started, Oracle now develops Java and owns the JavaScript trademark.*32:T53e,## Observable Quirks The *dialect* of JavaScript supported by Observable Notebooks [has some quirks](https://observablehq.com/documentation/cells/observable-javascript) that make it a little different. 1. Every JavaScript cell is essentially a separate script that can run independently. 2. Since each cell is its own script, local variables are only visible within the cell they are created. 3. We can [name a cell](https://observablehq.com/documentation/cells/javascript#naming-referencing-cells) to create variables accessible by other cells, but there are [some differences](https://observablehq.com/documentation/cells/observable-javascript#named-cells-are-declarations-not-assignments) to variable assignment. 4. Blocks of code must be surrounded by `{` `}` curly braces. 5. Cells also do *not* run from top to bottom in Observable Notebooks. They run in [topological order](https://observablehq.com/@observablehq/how-observable-runs) based on what cells need the output of other cells and often [update automatically](https://observablehq.com/documentation/cells/javascript#reactivity) when something it references changes. Also, JavaScript uses **`;`** semicolons to separate statements, but they are only *required* when there are multiple statements within a block. That is why you will only see them *sometimes* in the code!33:T475,In addition to the above, there is a [`NaN`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN) value for not-a-number values (often when number conversion fails or the result of a math operation is not a real number). There is also an [`undefined`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined) value for variables that have not yet been assigned a value or functions that do not return a value. The `String` type has many built-in functions like [String.toLowerCase()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase), and the [Math](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) and [Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) objects have many methods for dealing with number types. JavaScript also supports [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) with `String` types, which makes it easy to plug in values using the \` backtick characters:34:T401,## Functions There are multiple ways to create and use [functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) in JavaScript. As a [functional language](https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function), functions in JavaScript can be passed as arguments to other functions, returned from functions, and assigned to variables or object properties. Function arguments in JavaScript are **passed by value**, so most modification within a function does not affect the values outside of the function. However, mutating object properties will cause **side effects**, meaning that change will be visible outside of the function. ### Declaring Functions Using the `function` keyword are [hoisted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#function_hoisting) by JavaScript to the top of the scope. That means it doesn't matter *where* you declare the function, you can use it anywhere within that same scope (not just after the declaration). 35:[] 2f:{"id":"94e1944cfafe4160","slug":"intro-to-javascript","title":"Intro to JavaScript","thumbnail":"49e245e30bb7cae86172eb2af3de65ddb2b76d9ec920223d8841f789788eb7fa","access_level":"public","create_time":"$D2025-09-04T01:12:19.971Z","update_time":"$D2025-09-04T21:45:56.759Z","view_time":null,"first_public_time":"$D2025-10-02T18:44:51.778Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e602a4cc91f94fe5","login":"hmc-datavis-fall2025","name":"CS 181AP Data Visualization","avatar_url":"https://avatars-next.observableusercontent.com/24bcc4609d77ce717ddd7dc599710360ba00df258ffd8c54b83a2798539fb4b1","tier":"pro_2024"},"version":787,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cd2851261031ef7e","login":"sjengle","name":"Sophie Engle","avatar_url":"https://avatars-next.observableusercontent.com/ba843dbbe22e6effd001e1baf75052c3b58b856ba20f2250b1152f6fc72c5648","tier":null}],"members":[{"type":"individual","id":"cd2851261031ef7e","login":"sjengle","name":"Sophie Engle","avatar_url":"https://avatars-next.observableusercontent.com/ba843dbbe22e6effd001e1baf75052c3b58b856ba20f2250b1152f6fc72c5648","tier":null,"role":"editor"},{"type":"team","id":"e602a4cc91f94fe5","login":"hmc-datavis-fall2025","name":"CS 181AP Data Visualization","avatar_url":"https://avatars-next.observableusercontent.com/24bcc4609d77ce717ddd7dc599710360ba00df258ffd8c54b83a2798539fb4b1","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Intro to JavaScript","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":430,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"## Types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"The [Learn Just Enough JavaScript: Introduction](https://observablehq.com/@observablehq/learn-javascript-introduction) notebook as a handy breakdown of data types in JavaScript:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"typesTable = Inputs.table(dataTypes, {\n maxWidth: 650,\n width: { Type: 60, Example: 200 },\n align: {\n Type: \"left\",\n Description: \"left\",\n Example: \"left\"\n },\n format:{\n Example: snippet\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":534,"value":"`Today is: ${new Date(now)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"There are many many more types in JavaScript, like [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set), and many more. We'll leave discussion of those for when we need them.\n\nThe [`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) and [`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) types, however, require a bit more explanation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":266,"value":"### Arrays\n\nAn array type represents an indexed sequence of elements and are enclosed in `[` and `]` square brackets. They come with a `Array.length` property to represent how many elements are stored. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"abcArray = [\"a\", \"b\", \"c\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"abcArray.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"emptyArray = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"emptyArray.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"Commas in arrays matter!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":437,"value":"[\"a\", \"b\", \"c\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"[\"a\",, \"b\", \"c\"] // double comma!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"[\"a\", \"b\", \"c\",] // trailing comma!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"Arrays can have mixed types and nested.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"mixedArray = [\n \"hello\",\n 42,\n abcArray,\n false\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"Arrays can be indexed using the `[` `]` square bracket and an index:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":473,"value":"mixedArray[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"mixedArray[2][0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"Array types have many [built-in functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array):\n\n- [concat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) - merge two or more arrays\n- [includes()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) - tests whether an array includes a value\n- [push()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) - add an element to the end of an array\n\nThere are many more that take **arrow functions** as parameters, which we will illustrate later.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"### Objects\n\nAn [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) in JavaScript is similar to a dictionary in Python or map in Java, but there are important differences.\n\nObjects store key/value pairs, which can represent properties or functions. They are usually defined using the `{` and `}` curly brace syntax with `key: value` pairs within. For example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"helloObject = {\n let helloObject = {\n hello: \"world\",\n value: -1\n }\n\n // we can access existing properties\n helloObject.value = 42;\n helloObject[\"hello\"] = \"howdy\";\n\n // or add new ones\n helloObject.type = \"object\";\n helloObject[\"two words\"] = Math.PI;\n\n // and even have nested objects\n helloObject.nested = { a: \"ant\", b: \"bat\" }\n\n return helloObject;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"There are also several handy methods for objects:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":488,"value":"Object.entries(helloObject)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"Object.keys(helloObject)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"Object.hasOwn(helloObject, \"value\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"Object.hasOwn(helloObject, \"world\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"Many datasets in JavaScript are loaded as an array of objects, like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"alphabet","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"## Variables\n\nJavaScript is not a typed language, so you only need to declare the type when creating a variable. However, you do have to decide between three different [declaration keywords](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#declarations):\n\n- `var` to declare a variable (context-dependent scope)\n- `let` to declare a local variable (block-scoped)\n- `const` to declare a read-only constant (block-scoped)\n\nThe `let` and `const` declarations are **block-scoped** meaning they are only valid within the `{` and `}` curly braces where they are declared. This is often what we think of as a local variable in other languages.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":408,"value":"{\n if (Math.random() > 0.5) {\n let hello = \"hello\";\n return hello;\n }\n else {\n let hello = \"world\";\n return hello;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"{\n if (true) {\n let hello = \"hello\";\n }\n\n return hello; // error\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"{\n let hello = \"hello\";\n let hello = \"world\"; // error\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"The `var` keyword creates variables are often considered **global** variables, but it depends on the context they are created. \n\nThese variables are [hoisted](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) to the top of the function or global scope that they are created, so they are accessible even before they have been declared in the code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"{\n if (true) {\n var hello = \"hello\";\n }\n\n return hello;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"{\n console.log(hello); // whoa!\n\n if (Math.random() > 0.5) {\n var hello = \"hello\";\n } else {\n var hello = \"world\"; // redeclared?\n }\n\n return hello;\n\n // Due to hoisting, the code is rewritten\n // to be closer to this:\n /*\n var hello;\n\n if (Math.random() > 0.5) {\n hello = \"hello\";\n } else {\n hello = \"world\";\n }\n */\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"You can reassign variables declared with the `var` or `let` keywords, but not those with the `const` keyword.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":427,"value":"{\n let hello = \"hello\";\n hello = \"world\";\n\n const world = \"world\";\n world = \"hello\"; // error\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Boolean Logic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"One unique feature of JavaScript is the notion of [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) values when values are \"coerced\" to boolean values. Specifically:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"viewof truthyTable = {\n let width = 80;\n\n return Inputs.table(truthy, {\n rows: truthy.length + 1,\n columns: [\"Type\", \"Label\", \"Coersion\"],\n header: { \"Label\": \"Value\" },\n width: {\"Type\": width, \"Label\": width * 2, \"Coersion\": width},\n maxWidth: width * 5,\n format:{\n Label: snippet,\n Coersion: blackout\n },\n select: true,\n required: false,\n layout: \"fixed\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"truthySummary = html`\n

Truthy Values:

\n ${truthy.filter(d => d.Coersion).map(d => d.Label).join(\", \")}\n

\n\n

Falsy Values:

\n ${truthy.filter(d => !d.Coersion).map(d => d.Label).join(\", \")}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"This can often be convenient. For example, a condition like:\n\n~~~js\nif (d.value) { ... }\n~~~\n\n...is often done to only perform an action on \"valid\" data that is not undefined, null, or empty. However, this only works when `0` is not considered a valid value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"JavaScript also has [**loosely equal**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality) using `==` and `!=` operators, versus [**strictly equal**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality) using the `===` or `!==` operators.\n\n - The **strictly equal** operators are closer to other languages: two elements are strictly equal if the operands are of the same type and have the same value (or they are the same object).\n\n - The **loosely equal** operator attempts to convert operands of different types before comparing.\n\nWe can see the differences below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"equalityTable = {\n let width = 80;\n function revealItem(element) {\n element.classList.remove('blackout');\n }\n\n return Inputs.table(equality, {\n rows: equality.length + 1,\n columns: [\"Comparison\", \"Loosely\", \"Strictly\"],\n header: {Loosely: \"== Loosely\", Strictly: \"=== Strictly\"},\n width: {\"Loosely\": width, \"Strictly\": width},\n align: {\"Loosely\": \"center\", \"Strictly\": \"center\"},\n maxWidth: width * 2.5 + 275,\n format:{\n Comparison: snippet,\n Loosely: blackout,\n Strictly: blackout\n },\n select: false,\n layout: \"fixed\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"getGreeting(\"world\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"function getGreeting(name) {\n return `Hello, ${name}!`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"### Assigning Functions\n\nFunctions can also be assigned to variables or object properties. Function names cannot be changed, but a variable or property assigned to a function can be reassigned to something different later.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"sayHello = function() {\n return \"Hello!\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"sayHello();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"### Arrow Functions\n\nAn [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) is a compact anonymous functions. It uses the `=>` symbol to map function input to function output. These have some constraints on how they can be used, but they are useful for passing one-time functions as parameters to other functions.\n\nThe `(` and `)` parentheses for input parameters, `{` and `}` curly braces for the function body, and `return` statement are only provided when required.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"sayGoodbye = () => \"Goodbye!\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"sayGoodbye();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"getLabel = (d, defaultLabel) => d.label ? d.label : defaultLabel;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"getLabel({label: \"Hello\"}, undefined);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"getLabel(\"Hello\", \"World\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"We can use arrow functions to do neat things with arrays:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":320,"value":"{\n let values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n return values.filter((x) => x % 2 == 0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"And we can use arrow functions to do neat things with arrays of objects:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"{\n let values = [\n { label: \"one\", value: 1 },\n { label: \"two\", value: 2 },\n { label: \"three\", value: 3 },\n { label: \"four\", value: 4 }\n ];\n\n return values.map((d) => d.label);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"alphabet","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"Object.groupBy(alphabet, d => {\n if (\"AEIOU\".includes(d.letter)) {\n return \"vowel\";\n }\n\n return \"consonant\"\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"### Asynchronous Functions\n\nJavaScript supports [asynchronous programming](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS) as well. Most code you have worked with thus far is **synchronous**, where the code is run one line or statement at a time in the order encountered.\n\nHowever, what happens if a web page must download a very large image? Should *everything* else on the web page wait to load? No! Instead, we can trigger the download and then specify a **callback** function. That callback function will be called once the image is loaded and can figure out how to handle it. \n\nYou have already been dealing with asynchronous code in Observable Notebooks! However, this is an advanced topic that we will cover as needed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":272,"value":"## Loops\n\nThere are many forms of [loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) in JavaScript depending on what we want to do and the types we are working with. \n\n### for (initalization; condition; iteration)\n\nThis type of `for` loop works well with any [**indexed**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections) collection like `Array` types or to perform an operation a specific number of times. For example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"{\n let values = [];\n\n // perform an action n times\n for (let i = 0; i < 10; i++) {\n values.push(i);\n }\n\n // access an indexed collection\n for (let i = 0; i < values.length; i++) {\n console.log(i); // check the log!\n }\n\n // reverse access of an indexed collection\n for (let i = values.length - 1; i >= 0; i--) {\n console.log(i); // check the log!\n }\n\n return values;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"### for (variable of iterable)\n\nThis type of statement is great for anything iterable (arrays, String) when you want to simply iterate through every single item in order:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"{\n let values = [0, 1, 2, 3, 4];\n let hello = \"hello\";\n\n for (let value of values) {\n console.log(value);\n }\n\n for (let letter of hello) {\n console.log(letter);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"### for (variable in object)\n\nThis is a type of loop specific to iterating through properties in an object. For example:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":527,"value":"{\n let example = {\n hello: \"hello\",\n value: 42\n };\n\n for (let property in example) {\n console.log(`property: ${property}, value: ${example[property]}`);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"### forEach(callback)\n\nIf you have an array, you can also use the [forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) function and arrow functions to create a compact loop.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":539,"value":"{\n let values = [1, 2, 3, 4, 5];\n values.forEach((x) => console.log(x));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"## Working with HTML\n\nSince JavaScript was created for web pages, it also supports directly manipulating HTML elements as well.\n\nFor example, we can create an HTML list directly from JavaScript:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":546,"value":"{\n let values = [\"ant\", \"bat\", \"cat\", \"dog\"];\n\n let ol = document.createElement(\"ol\");\n ol.setAttribute(\"type\", \"a\");\n\n for (let value of values) {\n let li = document.createElement(\"li\");\n let text = document.createTextNode(value);\n\n li.appendChild(text);\n ol.appendChild(li);\n }\n\n return ol;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"We can also select existing elements and modify them:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":558,"value":"

Hello
World

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":561,"value":"{\n // wait until this cell is visible to run this code\n await visibility(); \n \n let ol = document.getElementById(\"modifyme\");\n let items = ol.getElementsByTagName(\"li\");\n\n for (let li of items) {\n li.setAttribute(\"type\", \"i\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"## Disclosures\n\nThis notebook references information from the following websites:\n\n- [Notebooks Documentation](https://observablehq.com/documentation/notebooks/) by Observable\n\n- [MDN](https://developer.mozilla.org/en-US/) by Mozilla\n\n- [JavaScript](https://en.wikipedia.org/wiki/JavaScript) on Wikipedia\n\nThis notebook also references information from the following notebooks:\n\n- [Learn Just Enough JavaScript: Introduction](https://observablehq.com/@observablehq/learn-javascript-introduction) by Paul Buffa","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"## Configuration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"import {dataTypes} from \"@observablehq/learn-javascript-introduction\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"dataTypes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"snippet = {\n return d => md`~~~js\n${d}\n~~~`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"blackout = d => html`${d}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"truthy = {\n let values = [\n { Value: false },\n { Value: true },\n { Value: undefined, Label: \"undefined\" },\n { Value: null, Label: \"null\" },\n { Value: NaN },\n { Value: -1 },\n { Value: 0 },\n { Value: 1 },\n { Value: 42 },\n { Value: \"\", Label: \"ε (empty)\" },\n { Value: \"hello\", Label: \"\\\"hello\\\"\" },\n { Value: \"false\", Label: \"\\\"false\\\"\" },\n { Value: { hello: \"world\" }, Label: \"{ hello: \\\"world\\\" }\" }\n ];\n\n for (let value of values) {\n value.Coersion = Boolean(value.Value);\n value.Label = value.Label ? value.Label : `${value.Value}`\n value.Type = typeof value.Value;\n }\n\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"equality = {\n let values = [\n { a: 1, b: 1 },\n { a: 1, b: \"1\" },\n { a: 1, b: true },\n { a: 0, b: false },\n { a: 0, b: null },\n { a: 0, b: undefined },\n { a: null, b: undefined },\n { a: \"hello\", b: \"hello\" },\n { a: \"hello\", b: \"HELLO\" },\n { a: \"hello\", b: new String(\"hello\"), Comparison: \"\\\"hello\\\" to new String(\\\"hello\\\")\" },\n { a: 3, b: new Number(3), Comparison: \"3 to new Number(3)\"},\n { a: new Number(3), b: new Number(3), Comparison: \"new Number(3) to new Number(3)\"}\n ]\n\n let labeler = function(d) {\n if (typeof d == \"string\") {\n return `\"${d}\"`;\n }\n\n if (d === undefined || d === null) {\n return `${d}`;\n }\n\n if (typeof d == \"object\") {\n return JSON.stringify(d);\n }\n \n return d;\n };\n\n for (let value of values) {\n value.Comparison = value.Comparison ? value.Comparison : labeler(value.a) + \" to \" + labeler(value.b);\n value.Loosely = value.a == value.b;\n value.Strictly = value.a === value.b;\n }\n\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"revealStyle = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"truthyTable","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"