%%js

const personObject = {
    
    Name: "Ryan Liu",
    Age: 15,
    Birthday: "December 27, 2007",
    Grade: 10,
    CurrentClasses: ["AP Physics: Mechanics", "AP Computer Science Principles", "AP World History", "Honors Humanities", "AP Calculus BC"],
    Interests: ["Tennis", "Traveling", "National Parks", "Video Games", "Spending time with family", "Exploring", "Music"],
    FavoriteTennisPlayers: [
      {
        name: "Novak Djokovic", 
        age: "36 years",
        ranking: "#1",
      },
      {
        name: "Daniil Medvedev",
        age: "27 years",
        ranking: "#3",
      },
      {
        name: "Ben Shelton",
        age: "20 years",
        ranking: "#20",
      },
    ],
    favoriteSongs: [
      {
        artist: "Travis Scott",
        song: "MY EYES"
      },
      {
        artist: "Drake",
        song: "Search & Rescue",
      },
      {
        artist: "The Weeknd",
        song: "The Hills",
      },
    ],
  };
  
  // This is to print the initial version of my database before making any changes like add or pull.
  
  console.log("Before manipulating data:");
  console.log(personObject);
  
  // Manipulating the objects already in the data requires one to pull or push, and by the requirement in the rubric, two changes have been made to the original code, a new song is added and a tennis player is taken out of the results on the console.
  
  personObject.FavoriteTennisPlayers = personObject.FavoriteTennisPlayers.filter(tennisplayer => tennisplayer.name !== "Daniil Medvedev");
  personObject.favoriteSongs.push({ artist: "24kGoldn", song: "VALENTINO" });
  
  // These code lines below detail a few mathematical functions created using data from above.
  
  const ageInDays = personObject.Age * 365;
  const ageInDecades = personObject.Age / 10;
  const yearsUntilGraduate = 12 - personObject.Grade + 1;
  const yearsUntilAlcohol = 21 - personObject.Age;
  const whatsTheRemainder = 0.5 % 1;
  
  // This prints out the output after the mild data manipulation done above to the existing inputs.
  
  console.log("\nThis is after manipulation:");
  console.log(personObject);
  
  // This prints out all the mathematical functions, the five functions that have been coded above.
  
  console.log("Age in days:", ageInDays);
  console.log("Age in decades:", ageInDecades);
  console.log("Years until I graduate:", yearsUntilGraduate);
  console.log("How many years until I can legally drink alcohol:", yearsUntilAlcohol);
  console.log("What's the remainder of 0.5 divided by 1:", whatsTheRemainder);

  
  // Below here the command typeof is used to determine the types of data.
  
  console.log("\nData Types:");
  console.log("Name:", typeof personObject.Name);
  console.log("Age:", typeof personObject.Age);
  console.log("Birthday:", typeof personObject.Birthday);
  console.log("Grade:", typeof personObject.Grade);
  console.log("Current Classes:", typeof personObject.CurrentClasses);
  console.log("Interests:", typeof personObject.Interests);
  console.log("Favorite Tennis Players:", typeof personObject.FavoriteTennisPlayers);
  console.log("Favorite Songs:", typeof personObject.favoriteSongs);

<IPython.core.display.Javascript object>

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 + Rohan!")
console.log(hello + " Rohan!")

.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 Rohan")
console.log(hello.includes("Rohan"))
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)

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: "Safin",
    age: 13
};

// The following is stored in the object called "obj"
// {
//     name: "Safin",
//     age: 13
// }
//
// 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

object access

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

// The following is stored in the object called "obj"
// {
//     name: "Safin",
//     age: 13
// }
//
// 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

// 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);
// -> Safin

// Fields of an object can be manipulated similar to variables
console.log("Object: mutating the key name from Safin 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 Safin to John")
obj["ghid"] = "jm1021"
console.log(obj);
// Observe new key

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)

<IPython.core.display.Javascript object>

Javascript Data Types/Lists • 23 min read

Description

string datatype

.substring()

.toUpperCase() and .toLowerCase()

.includes()

number datatype

number formatting

Array datatype

array manipulation

Object datatype

object access

Hacks