2c:null 2d:["$","title",null,{"children":"Week 4 Lab: JavaScript Essentials Prior to D3.js | rk2546 | Observable"}] 32:T492,### `let` v.s. `var` v.s. `const`

JavaScript Allows Type-inference

JavaScript uses **type inference** to determine what data type a variable is. Therefore, you don't have to directly state if a variable is a `string`, `int`, etc.

```js const example : string = "Hello world"; ``` is the same as: ```js const example = "Hello world"; ```

JavaScript Requires Scope Declarations

However, JavaScript still requires you to define the scope of your variables within their block.

- `let` and `const` are **block-scoped**; they are restricted to the closest curly brackets they are surrounded by. - `let` declares that a variable can be reassigned a value within its scope. - `const` declares that a variable _cannot_ be reassigned a value. - `var` is **function-scoped** and **global-scoped**; they can leak out of `if` statements or other kinds of loops. - `var` declares that a variable can be reassigned a value. - Try to avoid `var` as much as possible. 33:T8ec,**TypeScript** is a _SuperSet_ of JavaScript. It contains all the properties and characteristics of pure JavaScript, while also extending it further. You code in TypeScript, and then when you deploy your code your IDE will convert your TypeScript back into normal JavaScript. |Feature|JavaScript|TypeScript| |:-|:-|:-| |Typing|loose/dynamically typed|static typed| |Tools|Limited built-in tooling|Comes with IDEs, code editors| |Compatibility|Cannot run TypeScript in JavaScript files|Backwards-compatible with JavaScript| |Extension|`.js`|`.ts`| Most JavaScript you write will STILL be valid even in TypeScript. Why even care about TypeScript then? ### Stricter Typing TypeScript's stricter type inference can be leveraged to catch erroneous (re)assignments that pure JavaScript would be happy to compile. ```js const age = 25; age = "Twenty-Five"; // JavaScript: _Allowed_ // TypeScript: **Error!** ``` ### Type Declaring TypeScript allows you (but doesn't require you) to explicitly declare a variable's _type_. This cannot be done in JavaScript, as JS is a **dynamically typed** language. ```js let age: number = 25; let name: string = "Alice"; let active: boolean = true; const scores: number[] = [85, 90, 72]; function add(a: number, b: number): number { return a + b; } const student: { name: string; score: number; } = { name: "Alice", score: 95 }; ``` ### New Reusable Types TypeScript introduces `interface` and _aliases_ that are reusable. If you are aware of the specific qualities of your variables, then you can use this to ensure that your functions compile properly. ```js // Example: Interface interface Student { name: string, grade: number } const students : Student[] = [ { name: "Alice", grade: 96 }, { name: "Jim", grade: 97 } ] // Example: Alias type PriceTier = "Low" | "Medium" | "High"; let tier : PriceTier = "Medium"; let tier2 : PriceTier = "Expensive"; // <- ERROR ```

Be careful about typing!

Even if you explicitly declare your variables' types, those checks will disappear after your TypeScript is compiled. These explicit typings are only for YOUR benefit, to make more robust code. When your code is actually deployed, your type checks will no longer work.

34:[] 30:{"id":"0923f7a7b4231a79","slug":"2026-infovis-cse_week-4-lab","title":"Week 4 Lab: JavaScript Essentials Prior to D3.js","thumbnail":"5a1580b50ce1a394225e5d11b62c520e0a6ca79501dd96c58adab1058f7d58ac","access_level":"public","create_time":"$D2026-09-14T23:16:15.090Z","update_time":"$D2026-09-16T13:44:54.725Z","view_time":null,"first_public_time":"$D2026-09-25T09:47:49.322Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024","bio":""},"version":193,"publish_version":193,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddc2916ccfd28b14","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/a17ba87a2618a0219160d264d7e13fdef2d4fb8bd902ae457541c60e7498fc11","tier":null,"bio":""}],"members":[{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 4 Lab: JavaScript Essentials Prior to D3.js","cells":[{"id":1,"value":"# Week 4 Lab: JavaScript Essentials Prior to D3.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"## Lab Goals:\n\n- Introduction to D3.js... kinda\n- Introduction to JavaScript Essentials\n- Data Manipulation (mapping, filtering)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"---\n## Part 1: Core JavaScript Elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"### Why JavaScript First?\n\n> **D3.js is mostly JavaScript**. Before we even start with D3.js, we have to have a solid grasp on JavaScript fundamentals.\n\nJavaScript is:\n\n- (relatively) lightweight as a standalone language (though the JavaScript ecosystem is getting heavier with each new library released).\n- a \"Just-In-Time\" compiler (Read more here).\n- used both in and outside of the web browser (e.g. Node.js, React).\n- _loosely-typed_ (or _weakly-typed_, _dynamically-typed_, etc.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"### Reassignment v.s. Redeclaration\n\nThere's a difference between **reassignment** and **redeclaration**:\n\n- **Reassignment**: Setting a new value to an existing variable\n- **Redeclaration**: Usually accidentally, even if the variable already exists, you create another variable with the same name.\n\n|Scope|Reassignment|Redeclaration|\n|:-:|:-|:-|\n|`var`|Can be updated|Can be redeclared|\n|`let`|Can be updated|Cannot be redeclared|\n|`const`|Cannot be updated|Cannot be redeclared|\n\n

[Note]

If you set a const variable as an object, though you cannot reassign a new value to it, you can still modify the object's properties and values.

\n\n_Source_: W3Schools\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"---\n## Part 2: JavaScript v.s. TypeScript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"---\n## Part 3: JavaScript Objects and Data Storage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"Below is an example of a dataset stored as both a JavaScript Object (specifically, an array of items) and as a `.csv` table\n\n- The dataset is simply an `Array` storing multiple objects in order.\n- Each item in the dataset is an `Object`.\n- Each `Object` is a collection of **keys**/**properties** and **values**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const students = [\n {name: \"Alice\", major: \"CS\", score: 82},\n {name: \"Bob\", major: \"Biology\", score: 91},\n {name: \"Carol\", major: \"CS\", score: 76},\n {name: \"David\", major: \"Physics\", score: 88}\n];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"The equivalent `.csv` table for this will look like:\n\n|name|major|score|\n|:-|:-|:-:|\n|Alice|CS|82|\n|Bob|Biology|91|\n|Carol|CS|76|\n|David|Physics|88|","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"

[TO-Do]

\n Given the students array before, what will each of these return?\n

students[0]
students[0].name
students[2].score
students.map(d => d.name)
students.map(d => d.score)
students.filter(d => d.score >= 85)

\n Feel free to use the empty code block below to experiment.\n

\n\n

[Note]:

To print out values and such on Observable, use display(VARIABLE HERE).

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"// TO-DO\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"---\n## Part 4: JavaScript Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"### Traditional v.s. Arrow Functions\n\nThere are two types of JavaScript functions:\n\n- **Traditional Functions**\n- **Arrow Functions**\n\n```js\n// Traditional function\nfunction multiply(num1, num2) {\n const result = num1 * num2\n return result\n}\n\n// Arrow function\nconst multiply = (num1, num2) => {\n const result = num1 * num2\n return result\n}\n```\n\nThere are certain intricacies that differentiate arrow functions from traditional functions (e.g. the scope of `this`). However, for most operations, an arrow function is all you need.\n\nIf your arrow function occupies only one line, then you can use a specific syntax and basically turn your arrow function into a one-liner:\n\n```js\nconst multiply = (num1, num2) => num1 * num2\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"### `map()` v.s. `filter()` v.s. `reduce()`\n\nJavaScript provides some in-built functions.\n\n- `map()`: Keep the same length, but re-\"map\" values into something else.\n- `filter()`: Keep values the same, but \"filter\" out items that don't match a provided criteria\n- `reduce()`: Combination of `map()` and `filter()`, literally \"reduces\" an array into something else.\n\nWe won't use `reduce()` a lot, but you may need `map()` and `filter()` in order to manipulate data in JavaScript.\n\n```js\n// map()\nconst mapped = data.map( item => {\n item.price += 10;\n return item;\n})\n```\n\n```js\n// filter()\nconst filtered = data.filter( item => {\n return item.price >= 20;\n})\n```\n\n```js\n// reduce()\nconst initial_price = 0\nconst reduced = data.reduce(\n (accumulator, item) => accumulator + item.price,\n initial_price\n);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"

[TO-DO]

\n The Gapminder dataset is the focus of this exercise. With it, and using JavaScript's in-built `map()`, `filter()`, and/or `reduce()`, produce the following:\n

An array with only life expectancy values
All records including and after 1990
All records from France only
(Bonus) An array of all unique countries present within the Gapminder data
(Bonus) The average population size of each country

\n\n

Bonus Tip

The two bonus questions may require you to search for concepts in JavaScript we haven't discussed so far. You may want to look at Sets for starters.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// Do not modify\nconst data = await d3.json(\"https://vega.github.io/vega-lite/data/gapminder.json\")\ndisplay(Inputs.table(data))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"// [TO-DO]: An array with only life expectancy values\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"// [TO-DO]: All records including and after 1990\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// [TO-DO]: All records from France only\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"// [BONUS]: An array of all unique countries present within the Gapminder data\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"// [BONUS]: The average population size of each country\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import { css } from \"@rk2546/infovis-cse-backend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"css","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 31:"$30:body"