25:["$","title",null,{"children":"Javascript Tutorial | Jaemin Jo | Observable"}] 4b:T52e,md` Here a list of methods we just learned and other useful methods for arrays (click to see specification): - [*array.push*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) - [*array.filter*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) - [*array.forEach*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) - [*array.map*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) - [*array.findIndex*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex) - [*array.includes*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) - [*array.reduce*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) - [*array.slice*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) - [*array.concat*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) - [*array.sort*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) The methods mentioned above will cover 95% of array manipulation in practice. `4c:[] 47:{"id":"b45a6f3b5b6809f0","slug":"javascript-tutorial","title":"Javascript Tutorial","thumbnail":"44eebbd04eda394eeb4c15db28749a5eb171c2183cd373e9c3d7980b4d5e8736","access_level":"public","create_time":"$D2021-01-30T01:22:46.004Z","update_time":"$D2021-03-18T07:10:46.409Z","view_time":null,"first_public_time":"$D2021-01-30T11:57:28.037Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"e06a1dfc3d2b7367","login":"e-","name":"Jaemin Jo","avatar_url":"https://avatars-next.observableusercontent.com/3ec284efe9deef5c57f99828c604a1bcd228a4a858450a7dba430cc6b76567d3","tier":"starter_2024","bio":"Associate Professor at Sungkyunkwan University","following":false},"version":1056,"publish_version":1056,"role":null,"authored":false,"authors":[{"type":"individual","id":"669fe9972c6f7cf1","login":"e-","name":"Jaemin Jo","avatar_url":"https://avatars-next.observableusercontent.com/3ec284efe9deef5c57f99828c604a1bcd228a4a858450a7dba430cc6b76567d3","tier":null,"bio":"Associate Professor at Sungkyunkwan University","following":false}],"members":[{"type":"individual","id":"669fe9972c6f7cf1","login":"e-","name":"Jaemin Jo","avatar_url":"https://avatars-next.observableusercontent.com/3ec284efe9deef5c57f99828c604a1bcd228a4a858450a7dba430cc6b76567d3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Javascript Tutorial","cells":[{"id":0,"value":"md`# Javascript Tutorial`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`\nWelcome to [VISLab](https://vis-skku.github.io/)'s Javascript Tutorial.\nWe, the members of VISLab, developed and are maintaining this tutorial to provide a guide on Javascript for SKKU students, future members of VISLab, and hopefully others on the web who want to learn Javascript.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`\nYou can freely modify and reuse the content in this tutorial, but when you want to make changes and redistribute this page under a different name, please cite this page by including a link to this page.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`\nIn this tutorial, we will learn about the following topics:\n1. Observable\n2. Primitive Types\n3. Variables\n4. If, For, While statements\n5. Array\n6. Object and JSON\n7. Function\n8. Useful methods for arrays and objects \n9. Quiz\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`\n

\n## 1. What is Observable?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`\nThe website that you are at now is called Observable.\nWith Observable, you can build interactive dashboards using Javascript and its libraries (e.g., d3.js). \n\nDocuments in Observable (like this document) are called **notebooks**. \nA notebook consists of **cells**, and a cell is essentially a code snippet written in Javascript. \n\nBelow is an example of loading an external visualization.\nA text box control and a visualization are imported.\nNote that these two components are tightly coupled.\n**Change the year in the text box to see how the phases of the moon change!**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"import { chart, viewof year } from '@mbostock/phases-of-the-moon'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"viewof year","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`\nBelow is a cell that shows my favorite color, red. \n\n**Modify the string *red* to *green* in the code (there are two \"red\"s) and run the cell by clicking on the play icon next to it.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"html`\n

\nMy favorite color is red.\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`\nHere are few things that you should know about Observable, adapted from [here](https://observablehq.com/@observablehq/observable-for-jupyter-users).\n\n- **Cell outputs are shown *above* the code.**\nIn Observable, the output of a cell is shown above the code. See the below cell; the gray area is the code. This may be the biggest difference from other notebooks such as Jupyter. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"2 * 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`\n- **You can show or hide the code** by toggling the pin icon next to it (shortcut: Ctrl + Shift + p). For readability, most of the code in this notebook is hidden by default. Click on the left empty space of this cell to see the underlying code!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"md`\n- ** There are keyboard shortcuts.**\n - Navigate through cells: Shift + Alt + (Up or Down).\n - Run a cell: Shift + Enter\n - Add a cell below the focused cell: Ctrl + Enter\n - For more shortcuts, see [this](https://observablehq.com/@observablehq/keyboard-shortcuts).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`\n- ** Cells are reactive. ** You don't have to re-run all the cells that depend on the modified cell.\nObservable will automatically check the dependencies between cells and re-run the cells that depend on your modification.\n\n Below are two cells that initialize variable *a* to *1* and *b* to *a + 1* (thus *2* for now).\n\n ** Initialize *a* to *2* and see how the output of the second cell changes.**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"a = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"b = a + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md`\nThat's all for now! If you want to know more about Observable, see [the official tutorial](https://observablehq.com/tutorials).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"md`\n

\n## 2. Primitive Types\n\nThere are five primitive types in Javascript that you must know:\n- Number (e.g., *1*, *-2*, and *3.141529*)\n- String (e.g., *\"Hello\"*, *\"Come in!\"*, and *\"\"*)\n- Boolean (e.g., *true* and *false*)\n- Undefined (*undefined*)\n- Null (*null*)\n\n*undefined* typically means a variable has been declared but not defined yet, and *null* explicitly means nothing.\n\nBelow are several examples of primitive types and operations on them.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"3 + 5 + 1 / 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"\"abc\".concat(\"def\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"3 > 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"3 === 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"md`\nWhen compare two variables or expression, ** ALWAYS USE === not ==**.\n== doesn't work as you expect. See the example below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"0 == \"\" // 0 is not \"\", but this evaluates to true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`\nPrimitive types are **immutable**. This is sometimes confusing, especially for strings.\nYou cannot modify a string using array subscription.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"{\n let string = \"abc\";\n string[0] = \"b\"; // assign \"b\" to the first character, which throws an exception.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"md`\n

\n## 3. Variables\n\nIn Javascript, variables are defined using the *let* keyword.\nYou can define multiple variables at once using commas as in other programming languages and initialize them using the assignment operator *=*.\n\nTo run Javascript codes in Observable, you need to put them in a block defined by curly braces *{}*. Here are some examples of variable definition.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"{\n let x; // x is set to undefined by default\n let y = 2;\n let a = \"first\",\n b = \"second\";\n let c = false;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"md`\n### 3.1. Variables in Observable\n\nVariables defined in a block, such as an example above, are only accessible in that block.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"{\n let localVariable = 3;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"localVariable","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"md`\nIf you want to define a variable that can be accessed anywhere in the notebook, define the variable without the *let* keyword like this:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"globalVariable = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"globalVariable","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"md`\nThe variable name must be unique throughout the notebook since it is a global variable.\n\nNote that in this way, you cannot define multiple global variables at once. You need to define them in separate cells. This is a rule of Observable.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"md`\n### 3.2. Printing out a Variable in Observable\n\nFor a global variable, you can type its name in a cell to see its value. See the example of *globalVariable* above.\n\nFor a local variable defined in a block, you can check its value by returning it at the end of the block.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"{\n let localVariable = \"check this value\";\n return localVariable;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md`\nIf you want to investigate a variable in the middle of a block, use the *console.log* function to print out its value. This is possible for both a local variable and a global variable.\n\nThe output of the *console.log* function is not shown in the notebook.\nYou need to open the developer tool of your web browser (Ctrl + Shift + I or F12 in Chrome) and check out the console tab.\n\n** Open the developer tool and go to the console tab. Then, re-run the cells below to see if the output is logged in the tab.**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"console.log(\"value of globalVariable is\", globalVariable)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"{\n let a = 1;\n console.log(a);\n a = 2;\n console.log(a);\n a = 3;\n console.log(a);\n a = 4;\n return a;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"md`\n

\n## 4. If, For, and While Statements\n\nLike other programming languages, Javascript also has If, For, and While statements. \nThe syntax is most similar to C or C++.\nSee the examples below. \nNote that to use these statements, you need to put your code into a block *{}*.\nThis is how you run a Javascript code in Observable.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"{\n let a = 1;\n if(a === 1) return \"a is one.\"\n else return \"a is not one.\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"{\n let a = \"abc\";\n if(typeof a === \"string\") return \"a is a string.\"\n return \"a is not a string.\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"{\n let sum = 0;\n for(let i = 0; i < 10; i++) {\n sum += i;\n if(i >= 5) break;\n }\n return sum\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"log = {\n let x = 64;\n let count = 0;\n while(x > 1) {\n x = x >> 1;\n count++;\n }\n return count;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"md`\nNote the in the example right above, the returned value of a block (6) is assigned to a global variable *log*.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"md`\n

\n\n## 5. Array\n\nAn array is a sequence of values. \nIn contrast to C, Javascript supports an array of values with different types. \nYou can create an array using square brackets, *[]*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"arr = {\n let emptyArray = [];\n let numbers = [1, 2, 3];\n let strings = [\"a\", \"b\", \"c\"];\n let heterogenous = [1, \"a\", undefined, null, 5];\n return heterogenous;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"md`\n*Array.length* indicates the length of an array. You can use this value to iterate over an array.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"{\n let sumOfNumbers = 0;\n for(let i = 0; i < arr.length; i++) { // arr is the array that we assigned in the above cell.\n if(typeof arr[i] === \"number\")\n sumOfNumbers += arr[i];\n }\n return sumOfNumbers;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"md`\nThe *typeof* operator returns a string \"object\" for arrays. \nTo check if a variable has an array, use the *Array.isArray* function.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"typeof arr","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"Array.isArray(arr)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"md`\n

\n\n## 6. Objects\n\nAn object in Javascript is a key-value store. \nIt is initialized with an object literal, *{}*.\nAn object consists of keys and values that are associated with keys. \nYou can separate keys and values with a colon *:*.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"{\n let me = { name: \"John\", age: \"25\" }; // define an object\n\n me.id = 153; // associate a value 153 with a key \"id\"\n me[\"id\"] = 153;\n\n delete me.age;\n\n return me;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"md`\nObjects and arrays can be nested to describe a complex data structure.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"visLab = ({\n director: {\n name: \"Jaemin Jo\"\n },\n students: [\n {name: \"John\", id: 111},\n {name: \"Zoey\", id: 112},\n {name: \"Chen\", id: 113, graduated: true},\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"md`\n### 6.1. Objects in Observable\n\nIn Javascript, curly braces *{}* are used for both defining a block and creating an object.\nFor most situations, the Javascript interpreter distinguishes these two different uses.\nOne exception in Observable is when you assign an object to a global variable as in the above cell.\nYou must wrap the object with parentheses *()* to resolve the ambiguity.\nSee the *visLab* variable above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"md`\n### 6.2. Arrays and Objects are NOT Copied when Assigned!\n\nOne common mistake that students make is that they assign an object to another variable to clone the object.\nBut values other than primitive values, such as *number*, *string*, and *boolean*, are not copied, but their reference is passed. This is similar to the call-by-reference method in other programming languages.\n\nGenerally, cloning a complex object is ill-defined in many programming languages. If you really want to clone an object, see [this](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"{\n let a = false;\n let b = a;\n a = true;\n return b; // false in a is copied to b. Since the value is copied, modifying a does not affect b.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"{\n let a = {bee: 5}\n let b = a;\n a.bee = 6;\n return b; // a and b are referring to the same object. Modifying the object through a affects the value of b.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"{\n let a = { bee: 5 };\n let b = a;\n a = 5;\n return b; // Assigning a different value to a does not affect the value of b. The object remains intact.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"md`\n### 6.3. JavaScript Object Notation or JSON\n\nSince Javascript's method to representing a complex data structure, using objects and arrays, is so light-weight, convenient, and expressive, this notation is nowadays used as a standard data interchange format, called JSON.\nMany datasets on the web are provided in the JSON format (with .json extension). \n\nJavascript provides two convenient functions, *JSON.stringify* and *JSON.parse*, for JSON manipulation.\n*JSON.stringify* encodes an object to a JSON string while *JSON.parse* decodes a JSON string back to an object.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"visLabJSON = JSON.stringify(visLab)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"JSON.parse(visLabJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"md`\nYou can load an external JSON dataset using the *fetch* function that your browser provides. \nIn this case, you don't have to call *JSON.parse* since the *.json()* method does this internally.\n\nIn the example below, we used the *await* keyword, but leave it for now.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"url = \"https://raw.githubusercontent.com/altair-viz/vega_datasets/master/vega_datasets/_data/cars.json\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"cars = (await fetch(url)).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`\n

\n\n## 7. Functions\n\nA function abstracts logic. It takes parameters and returns a value after running its body.\nA function is defined with the *function* keyword and called with parentheses *()*.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"function add(a, b) { return a + b;}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"add(5, 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"md`\nJavascript provides a convenient way to define a function. Here is the second definition of *add*.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"(a, b) => {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"md`\nThe middle part *=>* indicates that this is a function definition. \nThe *=>* symbol looks like an arrow, so functions defined in this way are called **arrow functions**.\n\nThe left part *(a, b)* indicates that the function takes two parameters, *a* and *b*;\n\nThe right part is a block defined by curly braces *{}*. Inside the block, there goes the body of the function (the code executed when the function is invoked).\nNow, it just returns the sum of the two parameters.\n\nNote that the function above does not have a name. Functions without names are called **anonymous functions**.\nWhy do we define such anonymous functions? We will see examples later.\nFor now, let's name it by assigning it to a variable, *add2*.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"add2 = (a, b) => {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"add2(3, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"md`\nIf a function has only a *return* statement in its body, we can omit the curly braces *{}* and the return keyword.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"add3 = (a, b) => a + b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"md`\nThe function below takes no parameters and returns nothing (actually, it returns *undefined*).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"() => {}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"md`\n

\n\n## 8. Useful Methods for Arrays and Objects\n\nArrays and objects provide many useful methods for data manipulation, and getting used to these methods is **REALLY IMPORTANT** for you to become a Javascript expert. \n\n### 8.1. Array Methods\nHere are two functions that create a subarray only with string elements in a target array.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"stringOnly = (arr) => {\n let result = [];\n for(let i = 0; i < arr.length; i++) {\n if(typeof arr[i] === 'string') \n result.push(arr[i]);\n }\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"stringOnlyShort = (arr) => arr.filter((ele) => typeof ele === 'string')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"stringOnly(['abc', 3, 4, null, 'def'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"stringOnlyShort(['abc', 3, 4, null, 'def'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"md`\n\nThe *stringOnly* function uses a traditional way to filter out elements: it iterates over each array element, checks if the element is a string, and pushes it to a result array if it is a string. \nThe code is long and hard to read.\n\nIn contrast, the *strongOnlyShort* function uses a member method *filter*.\n*array.filter* accepts a function that returns a boolean value that indicates whether each element should be included in a new array or not.\nThis function is applied to each element (therefore, called *array.length* times), and the elements for which the function returned *true* are collected and returned as a result.\n\nThere are a lot of array methods, but here we will cover the most important methods as follows.\n- *array.push(ele1, ele2)*\n- *array.forEach(f)*\n- *array.filter(f)*\n- *array.map(f)*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"md`\n**array.push** appends a new element at the end of an array.\nThis function is **destructive**: once you call this method of an array, the method will *change* the array itself by adding a new element.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"{\n let arr = [1, 2, 3];\n arr.push(4);\n arr.push(5, 6); // pushing two elements at the same time\n return arr;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"md`\n**array.forEach** takes a function *f* and applies it to each element of *array*.\narray.forEach returns nothing (or returns *undefined*).\nThe function *f* expresses logic that is executed for each element, and the return value of *f* it ignored.\n\n*f* can have three parameters *(ele, i, arr)* where *ele* is the current element, *i* is the index of *ele*, and *arr* is the array that *f* is being applied to.\n\nBelow, we log whether each element is odd or even. Open the developer tool and see the logs in the console tab.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"[1, 6, -3, 4, 0].forEach((ele, i) => {\n if(ele % 2 === 0) console.log('Element', i, 'is', ele, 'which is even.') \n else console.log('Eelement', i, 'is', ele, 'which is odd.');\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"md`\n**array.filter** creates a subarray with only the elements in *array* that satisfied a certain condition.\nThe condition can be specified by its first parameter *f*.\n*f* is applied to each element of the array, and if *f* returns *true*, the corressponding element is included in the result. Otherwise, it is not included in the array.\n\n*f* can take up to three parameters *(ele, i, arr)* as the same as *array.forEach*.\n\n*array.filter* is **NOT DESTRUCTIVE**. This means that the original array that *filter* is called on does not change after filtering. This method creates *a new array* with the selected elements. If you want to change the original array, you must assign the result of *array.filter* to the variable (see the examples below).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"[1, 2, 3, 4, 5].filter(ele => ele % 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"[\"cat\", \"call\", \"cone\", \"cell\"].filter(ele => ele[1] === \"a\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"[\"ant\", \"bed\", \"cat\", \"dinner\"].filter((ele, i) => i <= 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"{\n let arr = [1, 2, 3];\n arr.filter(ele => ele % 2); // filter is called but arr does not change. filter returns a new array with odd elements in arr but not modifies arr.\n\n arr = arr.filter(ele => ele % 2); // to change the array itself, assign the result of filter to a variable\n return arr;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"md`\n**array.map** takes a function *f*, applies it to every element of *array*, and collects the value returned from each *f* function call.\n*array.map* can be seen as transforming each element to other and creating a new element with the transformed elements. \nAll elements in *array* are mapped to values; therefore, the return value of *array.map* is an array of exact *array.length* elements.\n\n*f* takes *(ele, i, arr)*. \n*f* **MUST** return a value. If it returns nothing, all array elements will be mapped to *undefined*, so the return value of *array.map* will be an array of *undefined*, which is not useful.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"[1, 2, 3].map(ele => ele * 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"[{name: \"Cat\"}, {name: \"Dog\"}, {name: \"Tiger\"}].map(ele => ele.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"[1, 2, 3].map(ele => {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"md`\n### 8.2. Object Methods\n\nThere are three functions that you should remembmer about objects: *Object.keys(obj)*, *Object.values(obj)*, and *Object.entries(obj)*. \n\n*Object.keys(obj)* returns the keys in *obj* as an array, *Object.values(obj)* returns the values in *obj* as an array, and *Object.entries(obj)* returns both the keys and values in *obj* as a zipped array. \n\nNote that these functions are not methods of an object instance but belong to a global name *Object* (starts with a capital 'G'). You must call these functions like *Object.values(obj)* not *obj.values()*.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"obj = ({\n title: \"Intro to Javascript\",\n numStudents: 50,\n classtime: \"Every Thursday\",\n isOpen: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"Object.keys(obj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"Object.values(obj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"Object.entries(obj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"md`\n### 8.3. Method Chaining\n\nMethods can be chained in a single statement without requiring variables to store the intermediate results.\nFor example, *array.map* returns an array, and we can apply other array methods, such as *array.filter*, directly to the return value of *array.map*. See the example below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"[1, 2, 3, 4, 5]\n .map(ele => ele * 2)\n .filter(ele => ele > 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"md`\nWe can do similar things to the return value of *Object* functions.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"Object.keys(obj)\n .filter(ele => ele.length > 8)\n .map(ele => \"Key: \" + ele)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"md`\nMethod chaining is a very powerful tool since you can describe complex logic in a single statement.\nYou cannot continue method chaining if the chain ends with a function call that does not return an object.\n\nFor example, *array.forEach* returns nothing, so the chain must end there.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"[1, 2, 3]\n .map(ele => ele * 2)\n .map(ele => ele - 1)\n .forEach(ele => {\n console.log(ele);\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"md`\n

\n## 9. Quiz\n\nThat's it for today! Let's pratice what we learned by solving the following quizzes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"md`\n### Q1. Arrow Functions\n\nHere is a function named *oldFunction*. Define an arrow function named *newFunction* that does the same thing. \nYou don't have to modify the body of the function.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"function oldFunction(op, a, b) {\n if(op === 'add') return a + b;\n return a - b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"newFunction = () => {}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"oldFunction('add', 3, 5) === newFunction('add', 3, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"md`\n### Q2. Sort\n\nBelow is an array of numbers. Sort the array in **decreasing** order.\nUse [*array.sort*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"[1, 5, -2, 3, 0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"md`\n### Q3. Compute the Sum\n\nBelow is an array of numbers. Compute the sum of this array.\nWrite three pieces of code with different styles.\n\n1. Compute the sum using a for loop and *array.length*.\n2. Compute the sum using *array.forEach*.\n3. Compute the sum using [*array.reduce*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"arrayForSum = [3, 5, 8, 2, 1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"// Style 1 - Use a for loop and array.length\n{\n let i, sum = 0;\n // Code here \n return sum;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"// Style 2 - Use array.forEach\n{\n let sum = 0;\n \n // Modify the code below\n arrayForSum.forEach(() => {})\n \n return sum;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"// Style 3 - Use array.reduce\narrayForSum.reduce(/* Fill here */)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"md`\n### Q4. Wide-form to Long-form\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"wideForm = ({\n Date: ['2007-10-01', '2007-11-01', '2007-12-01'],\n AAPL: [189.95, 182.22, 198.08],\n AMZN: [89.15, 90.56, 92.64],\n GOOG: [707.00, 693.00, 691.48]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"md`\nAbove is a small stock dataset.\nWe have three timestamps (2007-10-01, 2007-11-01, and 2007-12-01) and three tickers (AAPL, AMZN, and GOOG).\nThe dataset can be shown as a table like this:\n\n| Date | AAPL | AMZN | GOOG\n| --- | -- | --- | --- | --- |\n| 2007-10-01 | 189.95 | 89.15 | 707.00|\n| 2007-11-01 | 182.22 | 90.56 | 693.00|\n| 2007-12-01 | 198.08 | 92.64 | 691.48 |\n\nNote that the metadata (tickers) are stored as columns. This form of data is called **wide-form data**.\n\nWide-form data is usually **inefficient** because it can grow both horizontally and vertically.\nFor example, if we add more tickers, such as MSFT, the data grows horizontally (more columns).\nOn the other hand, if we add more timestamps, such as 2008-01-01, the data grows vertically (more rows).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"md`\nWide-form data can be converted to **long-form data** like this:\n\n| Date | Ticker | Price |\n| --- | -- | --- |\n| 2007-10-01 | AAPL | 189.95|\n| 2007-10-01 | AMZN | 89.15 |\n| 2007-10-01 | GOOG | 707.00|\n| 2007-11-01 | AAPL | 182.22 |\n| 2007-11-01 | AMZN | 90.56 |\n| 2007-11-01 | GOOG | 693.00 |\n| 2007-12-01 | AAPL | 198.08 |\n| 2007-12-01 | AMZN | 92.64 |\n| 2007-12-01 | GOOG | 691.48 |\n\nThis representation is better since it is guaranteed that there are only three columns; adding more timestamps and tickers expands the data only vertically.\n\nThis long-form data can be represented as an array of objects as follows:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"longForm = [\n {Date: '2007-10-01', Ticker: 'AAPL', Price: 189.95},\n {Date: '2007-10-01', Ticker: 'AMZN', Price: 89.15},\n {Date: '2007-10-01', Ticker: 'GOOG', Price: 707.00},\n {Date: '2007-11-01', Ticker: 'AAPL', Price: 182.22},\n {Date: '2007-11-01', Ticker: 'AMZN', Price: 90.56},\n {Date: '2007-11-01', Ticker: 'GOOG', Price: 693.00},\n {Date: '2007-12-01', Ticker: 'AAPL', Price: 198.08},\n {Date: '2007-12-01', Ticker: 'AMZN', Price: 92.64},\n {Date: '2007-12-01', Ticker: 'GOOG', Price: 691.48},\n] ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"md`\n**Write a function that returns the long-form version of the small stock dataset.**\nYou can assume that there are only three tickers: AAPL, AMZN, and GOOG.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"wideForm","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"wideToLong = (wide) => {\n /* Fill here */\n return [];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"wideToLong(wideForm) // check if wideToLong works as expected","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"md`\n

\n\n## 10. Extra Materials\n\n- [MDN Javascript Tutorials](https://developer.mozilla.org/en-US/docs/Web/Tutorials#javascript-tutorials)\n- [Array Specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)\n- [Object Specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)\n- [Codecademy](https://www.codecademy.com/)\n- I also wrote some blog posts in Korean. See [here](https://jaeminjo.tumblr.com/).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null