string datatype

We discussed that strings store text
It is useful to know a few functions that can be used on string manipulation (see example below)
We can see the type of data using typeof operator

%%js

// assign variable
var hello = "Hello World";
console.log("variable: hello")
console.log(hello)

// seeing the type of this data
console.log("variable: hello check typeof")
console.log(typeof hello)

// add strings together
console.log("string concatenation: hello + Tucker!")
console.log(hello + " Tucker!")

<IPython.core.display.Javascript object>

.substring()

%%js
var hello = "Hello World";

// getting a certain component of this text
// (here the _ is a standin for the space character)
// H  e  l  l  o  _  W  o  r  l  d
// 0  1  2  3  4  5  6  7  8  9  10
// if we want the hello component, we want characters 0-4, so we use the following function
// (note how we use 0 and 5 as arguments, the last character is NOT INCLUSIVE)
console.log("substring: hello 0, 5")
console.log(hello.substring(0, 5))

.toUpperCase() and .toLowerCase()

%%js
var hello = "Hello World";

// useful functions to make string lowercase or uppercase
console.log("string convert to upper case: hello toUpperCase")
console.log(hello.toUpperCase())
console.log("string convert to lower case: hello toLowerCase")
console.log(hello.toLowerCase())

.includes()

%%js
var hello = "Hello World";

// useful function to check if one string is contained in another
console.log("string includes: hello includes Tucker")
console.log(hello.includes("Tucker"))
console.log("string includes: hello includes Hello")
console.log(hello.includes("Hello"))

number datatype

we discussed that numbers store numbers
here are some useful ideas in javascript to deal with numbers

%%js
console.log("Numbers info")

// assign numbers to varialbes
console.log("variable: num1")
var num1 = 9
console.log(num1)
console.log("variable: num2")
var num2 = 6
console.log(num2)


// simple operations with numbers
console.log("Operations")
console.log("subtract: num1 - num2")
console.log(num1 - num2)
console.log("add: num1 + num2")
console.log(num1 + num2)
console.log("divide: num1 / num2")
console.log(num1 / num2)
console.log("multiply: num1 * num2")
console.log(num1 * num2)
console.log("remainder (modulo): num1 % num2")
console.log(num1 % num2)

<IPython.core.display.Javascript object>

number formatting

%%js
console.log("variable: num1")
var num1 = 9
console.log(num1)
console.log("variable: num2")
var num2 = 6
console.log(num2)

// converting numbers to text
console.log("number convert string: num1")
console.log(num1.toString())

// rounding a number
console.log("round(num1 / num2)")
console.log(Math.round(num1 / num2))

// rounding a number to decimal palces
console.log("set decimals to 2 places (num1 / num2)")
console.log((num1 / num2).toFixed(2))

Array datatype

an array is just a list of other datatypes
put all the items in square brackets
some useful methods below

%%js
console.log("Array: assigning a list of strings")
var str1 = "1st string"
var arr_data = [str1, "2nd string", "3rd string"]
// seeing what is in the array
console.log(arr_data)

// getting one thing from an array
// "A string" "Other Data" "more data"
//    0           1            2
console.log("Array: referencing a cell #1")
console.log([ arr_data[1] ])  // zero based counting: 1 is 2nd cell

array manipulation

%%js
console.log("Array: assigning a list of strings")
var str1 = "1st string"
var arr_data = [str1, "2nd string", "3rd string"]
// seeing what is in the array
console.log(arr_data)

// adding something new to the array
console.log("Array: adding to list")
arr_data.push("4th string")
console.log(arr_data)

// removing the first element of array
console.log("Array: removing from front of list")
arr_data.shift()
console.log(arr_data)

// removing the last element of array
console.log("Array: removing from end of list")
arr_data.pop()
console.log(arr_data)

Object datatype

store records as key-value pairs
are defined by enclosing data in curly braces {}
allow access and modification using dot . or square bracket [] notation

%%js
console.log("Object: assigning key-value objects")
var obj = {
    name: "Tucker",
    age: 16
};

// The following is stored in the object called "obj"
// {
//     name: "Tucker",
//     age: 16
// }
//
// The key "name" is associated with the string value "Safin"
// The key "age" is associated with the number value 13
// Notice that keys are of the type "string"

// print obj to the console
console.log(obj);
// -> { name: 'Safin', age: 13 }
// Notice that single quotes ' and double quotes " can be used interchangeably

<IPython.core.display.Javascript object>

object access

%%js
console.log("Object: assigning key-value objects")
var obj = {
    name: "Tucker",
    age: 16
};

// The following is stored in the object called "obj"
// {
//     name: "Tucker",
//     age: 16
// }
//
// The key "name" is associated with the string value "Safin"
// The key "age" is associated with the number value 13
// Notice that keys are of the type "string"

// print obj to the console
console.log(obj);
// -> { name: 'Tucker', age: 16 }
// Notice that single quotes ' and double quotes " can be used interchangeably

// To access certain values within an object, also known as an object's fields,
// you can use the name of the object suffixed with a dot and the name of the field
// or using the square bracket notation shown below
console.log("Object: using key name to access the name value (key notation)")
console.log(obj["name"]);
console.log("Object: using key name to access the name value (dot notation)")
console.log(obj.name);
// -> Tucker

// Fields of an object can be manipulated similar to variables
console.log("Object: mutating the key name from Tucker to John")
obj.name = "John"
console.log(obj);
console.log(obj.name);
// -> John

// A key-value pair can be added to the object
console.log("Object: mutating the key name from Tucker to John")
obj["ghid"] = "jm1021"
console.log(obj);
// Observe new key

<IPython.core.display.Javascript object>

Hacks

Create a JavaScript snippet below with the following requirements:

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
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
Print the entire object with console.log after declaring it
Manipulate the arrays within the object and print the entire object with console.log as well as the specific changed key afterwards
Perform mathematical operations on fields in your object such as +, -, /, % etc. and print the results with console.log along with a message contextualizing them
Use typeof to determine the types of at least 3 fields in your object

%%js
// put your javascript code here (make sure to run it and check your outputs in the console)

// Create an object representing yourself
const person = {
    name: "Tucker Golpariani",
    age: 16,
    currentClasses: ["AP Computer Science Principles", "AP Statistics", "American Literature", "U.S. History", "Advanced Functional Analysis"],
    interests: ["Friends", "Hiking/Nature", "Video Games", "Geography"],
    favoriteFoods: ["Pizza", "Sushi", "Pasta", "Steak"],
    geographyIdeas: ["Leaderboards", "Locations", "Photos"],
    hometown: "San Diego",
  };
  
  console.log("Original Object:");
  console.log(person);
  
  person.currentClasses.push("AP Computer Science Principles");
  person.interests.pop();
  person.favoriteFoods[0] = "Pizza";
  
  console.log("\nObject after Manipulation:");
  console.log(person);
  
  const ageInFiveYears = person.age + 5;
  const halfAge = person.age / 2;
  const moduloAge = person.age % 2;
  
  console.log("\nMathematical Operations:");
  console.log(`Age in five years: ${ageInFiveYears}`);
  console.log(`Half of age: ${halfAge}`);
  console.log(`Age modulo 2: ${moduloAge}`);
  
  console.log("\nData Types:");
  console.log(`Type of name: ${typeof person.name}`);
  console.log(`Type of age: ${typeof person.age}`);
  console.log(`Type of currentClasses: ${typeof person.currentClasses}`);

<IPython.core.display.Javascript object>

Javascript Data Types/Lists • 19 min read

Description

string datatype

.substring()

.toUpperCase() and .toLowerCase()

.includes()

number datatype

number formatting

Array datatype

array manipulation

Object datatype

object access

Hacks