{
"cells": [
{
"cell_type": "raw",
"metadata": {},
"source": [
"---\n",
"title: Javascript Data Types/Lists\n",
"hide: True\n",
"description: A Tech Talk on javascript data types and how to use with lists\n",
"type: hacks\n",
"permalink: /basics/datatypes\n",
"comments: true\n",
"---"
]
},
{
"cell_type": "raw",
"metadata": {},
"source": [
"\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# string datatype\n",
"- We discussed that strings store text\n",
"- It is useful to know a few functions that can be used on string manipulation (see example below)\n",
"- We can see the type of data using `typeof` operator"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [
{
"data": {
"text/html": [
"\n"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%js\n",
"\n",
"// assign variable\n",
"var hello = \"Hello World\";\n",
"console.log(\"variable: hello\")\n",
"console.log(hello)\n",
"\n",
"// seeing the type of this data\n",
"console.log(\"variable: hello check typeof\")\n",
"console.log(typeof hello)\n",
"\n",
"// add strings together\n",
"console.log(\"string concatenation: hello + Rohan!\")\n",
"console.log(hello + \" Rohan!\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## .substring()"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [
{
"data": {
"application/javascript": "var hello = \"Hello World\";\n\n// getting a certain component of this text\n// (here the _ is a standin for the space character)\n// H e l l o _ W o r l d\n// 0 1 2 3 4 5 6 7 8 9 10\n// if we want the hello component, we want characters 0-4, so we use the following function\n// (note how we use 0 and 5 as arguments, the last character is NOT INCLUSIVE)\nconsole.log(\"substring: hello 0, 5\")\nconsole.log(hello.substring(0, 5))\n",
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%js\n",
"var hello = \"Hello World\";\n",
"\n",
"// getting a certain component of this text\n",
"// (here the _ is a standin for the space character)\n",
"// H e l l o _ W o r l d\n",
"// 0 1 2 3 4 5 6 7 8 9 10\n",
"// if we want the hello component, we want characters 0-4, so we use the following function\n",
"// (note how we use 0 and 5 as arguments, the last character is NOT INCLUSIVE)\n",
"console.log(\"substring: hello 0, 5\")\n",
"console.log(hello.substring(0, 5))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## .toUpperCase() and .toLowerCase()"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [],
"source": [
"%%js\n",
"var hello = \"Hello World\";\n",
"\n",
"// useful functions to make string lowercase or uppercase\n",
"console.log(\"string convert to upper case: hello toUpperCase\")\n",
"console.log(hello.toUpperCase())\n",
"console.log(\"string convert to lower case: hello toLowerCase\")\n",
"console.log(hello.toLowerCase())"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## .includes()"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [],
"source": [
"%%js\n",
"var hello = \"Hello World\";\n",
"\n",
"// useful function to check if one string is contained in another\n",
"console.log(\"string includes: hello includes Rohan\")\n",
"console.log(hello.includes(\"Rohan\"))\n",
"console.log(\"string includes: hello includes Hello\")\n",
"console.log(hello.includes(\"Hello\"))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# number datatype\n",
"- we discussed that numbers store numbers\n",
"- here are some useful ideas in javascript to deal with numbers"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [
{
"data": {
"text/html": [
"\n"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%js\n",
"console.log(\"Numbers info\")\n",
"\n",
"// assign numbers to varialbes\n",
"console.log(\"variable: num1\")\n",
"var num1 = 9\n",
"console.log(num1)\n",
"console.log(\"variable: num2\")\n",
"var num2 = 6\n",
"console.log(num2)\n",
"\n",
"\n",
"// simple operations with numbers\n",
"console.log(\"Operations\")\n",
"console.log(\"subtract: num1 - num2\")\n",
"console.log(num1 - num2)\n",
"console.log(\"add: num1 + num2\")\n",
"console.log(num1 + num2)\n",
"console.log(\"divide: num1 / num2\")\n",
"console.log(num1 / num2)\n",
"console.log(\"multiply: num1 * num2\")\n",
"console.log(num1 * num2)\n",
"console.log(\"remainder (modulo): num1 % num2\")\n",
"console.log(num1 % num2)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# number formatting"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [],
"source": [
"%%js\n",
"console.log(\"variable: num1\")\n",
"var num1 = 9\n",
"console.log(num1)\n",
"console.log(\"variable: num2\")\n",
"var num2 = 6\n",
"console.log(num2)\n",
"\n",
"// converting numbers to text\n",
"console.log(\"number convert string: num1\")\n",
"console.log(num1.toString())\n",
"\n",
"// rounding a number\n",
"console.log(\"round(num1 / num2)\")\n",
"console.log(Math.round(num1 / num2))\n",
"\n",
"// rounding a number to decimal palces\n",
"console.log(\"set decimals to 2 places (num1 / num2)\")\n",
"console.log((num1 / num2).toFixed(2))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Array datatype\n",
"- an array is just a list of other datatypes\n",
"- put all the items in square brackets\n",
"- some useful methods below"
]
},
{
"cell_type": "code",
"execution_count": 13,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%js\n",
"console.log(\"Array: assigning a list of strings\")\n",
"var str1 = \"1st string\"\n",
"var arr_data = [str1, \"2nd string\", \"3rd string\"]\n",
"// seeing what is in the array\n",
"console.log(arr_data)\n",
"\n",
"// getting one thing from an array\n",
"// \"A string\" \"Other Data\" \"more data\"\n",
"// 0 1 2\n",
"console.log(\"Array: referencing a cell #1\")\n",
"console.log([ arr_data[1] ]) // zero based counting: 1 is 2nd cell\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# array manipulation"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [],
"source": [
"%%js\n",
"console.log(\"Array: assigning a list of strings\")\n",
"var str1 = \"1st string\"\n",
"var arr_data = [str1, \"2nd string\", \"3rd string\"]\n",
"// seeing what is in the array\n",
"console.log(arr_data)\n",
"\n",
"// adding something new to the array\n",
"console.log(\"Array: adding to list\")\n",
"arr_data.push(\"4th string\")\n",
"console.log(arr_data)\n",
"\n",
"// removing the first element of array\n",
"console.log(\"Array: removing from front of list\")\n",
"arr_data.shift()\n",
"console.log(arr_data)\n",
"\n",
"// removing the last element of array\n",
"console.log(\"Array: removing from end of list\")\n",
"arr_data.pop()\n",
"console.log(arr_data)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Object datatype\n",
"\n",
"- store records as key-value pairs\n",
"- are defined by enclosing data in curly braces `{}`\n",
"- allow access and modification using dot `.` or square bracket `[]` notation"
]
},
{
"cell_type": "code",
"execution_count": 18,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [
{
"data": {
"text/html": [
"\n"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%js\n",
"console.log(\"Object: assigning key-value objects\")\n",
"var obj = {\n",
" name: \"Safin\",\n",
" age: 13\n",
"};\n",
"\n",
"// The following is stored in the object called \"obj\"\n",
"// {\n",
"// name: \"Safin\",\n",
"// age: 13\n",
"// }\n",
"//\n",
"// The key \"name\" is associated with the string value \"Safin\"\n",
"// The key \"age\" is associated with the number value 13\n",
"// Notice that keys are of the type \"string\"\n",
"\n",
"// print obj to the console\n",
"console.log(obj);\n",
"// -> { name: 'Safin', age: 13 }\n",
"// Notice that single quotes ' and double quotes \" can be used interchangeably"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# object access"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [],
"source": [
"%%js\n",
"console.log(\"Object: assigning key-value objects\")\n",
"var obj = {\n",
" name: \"Safin\",\n",
" age: 13\n",
"};\n",
"\n",
"// The following is stored in the object called \"obj\"\n",
"// {\n",
"// name: \"Safin\",\n",
"// age: 13\n",
"// }\n",
"//\n",
"// The key \"name\" is associated with the string value \"Safin\"\n",
"// The key \"age\" is associated with the number value 13\n",
"// Notice that keys are of the type \"string\"\n",
"\n",
"// print obj to the console\n",
"console.log(obj);\n",
"// -> { name: 'Safin', age: 13 }\n",
"// Notice that single quotes ' and double quotes \" can be used interchangeably\n",
"\n",
"// To access certain values within an object, also known as an object's fields,\n",
"// you can use the name of the object suffixed with a dot and the name of the field\n",
"// or using the square bracket notation shown below\n",
"console.log(\"Object: using key name to access the name value (key notation)\")\n",
"console.log(obj[\"name\"]);\n",
"console.log(\"Object: using key name to access the name value (dot notation)\")\n",
"console.log(obj.name);\n",
"// -> Safin\n",
"\n",
"// Fields of an object can be manipulated similar to variables\n",
"console.log(\"Object: mutating the key name from Safin to John\")\n",
"obj.name = \"John\"\n",
"console.log(obj);\n",
"console.log(obj.name);\n",
"// -> John\n",
"\n",
"// A key-value pair can be added to the object\n",
"console.log(\"Object: mutating the key name from Safin to John\")\n",
"obj[\"ghid\"] = \"jm1021\"\n",
"console.log(obj);\n",
"// Observe new key"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Hacks\n",
"Create a JavaScript snippet below with the following requirements:\n",
"- Create an object representing yourself as a person. The object should have keys for your name, age, current classes, interests, and two more of your choosing\n",
"- Your object must contain keys whose values are arrays. The arrays can be arrays of strings, numbers, or even other objects if you would like\n",
"- Print the entire object with console.log after declaring it\n",
"- Manipulate the arrays within the object and print the entire object with console.log as well as the specific changed key afterwards\n",
"- Perform mathematical operations on fields in your object such as +, -, /, % etc. and print the results with console.log along with a message contextualizing them\n",
"- Use typeof to determine the types of at least 3 fields in your object"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [
{
"data": {
"application/javascript": "// Create an object representing yourself\nvar person = {\n name: \"Hannah Reyes\",\n age: 17,\n currentClasses: [\"Statistics\", \"Computer Science P\", \"World Lit\", \"Ceramics\"],\n interests: [\"Painting\", \"Crocheting\", \"Reading\"],\n favoriteMovies: [\"Inception\", \"Pride & Prejudice\"],\n height: 62 //inches\n};\n\n// Print the entire object\nconsole.log(\"Original Object:\");\nconsole.log(person);\n\n// Manipulate the arrays within the object\nperson.currentClasses.push(\"World Lit\");\nperson.interests.splice(1, 1, \"Crocheting\");\n\n// Print the entire object after manipulation\nconsole.log(\"\\nObject After Manipulation:\");\nconsole.log(person);\n\n// Perform mathematical operations on fields\nvar bmi = person.weight / ((person.height / 100) ** 2); // Calculate BMI\nvar ageInDays = person.age * 365; // Calculate age in days\n\n// Print results with contextual messages\nconst halfAge = obj.age /2;\nconsole.log(\"\\nMathematical Operations:\");\nconsole.log(\"Half of Age:\", halfAge);\nconsole.log(\"Age in Days:\", ageInDays);\n\n// Use typeof to determine types of fields\nconsole.log(\"\\nData Types:\");\nconsole.log(\"Name is a\", typeof person.name);\nconsole.log(\"Age is a\", typeof person.age);\nconsole.log(\"Interests is an\", typeof person.interests);\n",
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%js\n",
"// Create an object representing yourself\n",
"var person = {\n",
" name: \"Hannah Reyes\",\n",
" age: 17,\n",
" currentClasses: [\"Statistics\", \"Computer Science P\", \"World Lit\", \"Ceramics\"],\n",
" interests: [\"Painting\", \"Crocheting\", \"Reading\"],\n",
" favoriteMovies: [\"Inception\", \"Pride & Prejudice\"],\n",
" height: 62 //inches\n",
"};\n",
"\n",
"// Print the entire object\n",
"console.log(\"Original Object:\");\n",
"console.log(person);\n",
"\n",
"// Manipulate the arrays within the object\n",
"person.currentClasses.push(\"World Lit\");\n",
"person.interests.splice(1, 1, \"Crocheting\");\n",
"\n",
"// Print the entire object after manipulation\n",
"console.log(\"\\nObject After Manipulation:\");\n",
"console.log(person);\n",
"\n",
"// Perform mathematical operations on fields\n",
"var bmi = person.weight / ((person.height / 100) ** 2); // Calculate BMI\n",
"var ageInDays = person.age * 365; // Calculate age in days\n",
"\n",
"// Print results with contextual messages\n",
"const halfAge = obj.age /2;\n",
"console.log(\"\\nMathematical Operations:\");\n",
"console.log(\"Half of Age:\", halfAge);\n",
"console.log(\"Age in Days:\", ageInDays);\n",
"\n",
"// Use typeof to determine types of fields\n",
"console.log(\"\\nData Types:\");\n",
"console.log(\"Name is a\", typeof person.name);\n",
"console.log(\"Age is a\", typeof person.age);\n",
"console.log(\"Interests is an\", typeof person.interests);"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.10.8"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
