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

// Create an object representing myself
const myInfo = {
    name: "Anvay Yadav",
    age: 15,
    currentClasses: ["Spanish 6", "Ap CSP", "Ap Calc", "Ap Bio", "Honors Humanities 1"],
    interests: ["volunteering", "hiking", "programming", "playing sports", "playing piano"],
    favoriteFoods: ["Pizza", "Sushi", "Burgers", "Ice Cream", "Tacos"],
    favoriteVideoGames: ["The Legend of Zelda: Breath of the Wild", "Minecraft", "Overwatch", "Rocket League", "Among Us"]
  };
  
  // Print the entire object
  console.log("My Info:");
  console.log(myInfo);
  
  // Manipulate the arrays within the object
  myInfo.age += 1;
  myInfo.currentClasses.push("Art History");
  myInfo.interests.splice(2, 1, "cooking");
  myInfo.favoriteFoods.pop();
  myInfo.favoriteVideoGames.shift();
  
  // Print the entire object after manipulation
  console.log("My Info after manipulation:");
  console.log(myInfo);
  
  // Perform mathematical operations
  const ageIn5Years = myInfo.age + 5;
  const classesCount = myInfo.currentClasses.length;
  const interestsCount = myInfo.interests.length;
  const averageAgeOfClassmates = 16;
  const ageDifference = myInfo.age - averageAgeOfClassmates;
  const favoriteFoodsCount = myInfo.favoriteFoods.length;
  
  console.log(`In 5 years, I will be ${ageIn5Years} years old.`);
  console.log(`I am currently taking ${classesCount} classes.`);
  console.log(`I have ${interestsCount} interests.`);
  console.log(`The age difference between me and my classmates is ${ageDifference} years.`);
  console.log(`I have ${favoriteFoodsCount} favorite foods.`);
  
  // Use typeof to determine the types of fields
  console.log(`The type of 'name' is ${typeof myInfo.name}`);
  console.log(`The type of 'age' is ${typeof myInfo.age}`);
  console.log(`The type of 'currentClasses' is ${typeof myInfo.currentClasses}`);
  

<IPython.core.display.Javascript object>

Javascript Data Types/Lists • 20 min read

Description

string datatype

.substring()

.toUpperCase() and .toLowerCase()

.includes()

number datatype

number formatting

Array datatype

array manipulation

Object datatype

object access

Hacks