JavaScript Data Types! :]

In this lesson we will be reviewing how diffrent data types are used in JS!

We will be reviewing: Integers/floats, strings, booleans, and arrays

Integers and Floats

In javascript vs python you do not have to define integers vs floats

%%html

<script>
//here we define the number (temperature) and log it into the console!
temperature = 76;

console.log("number: ", temperature);
element.append("number: " + temperature);
</script>

Strings

In JavaScript a string is used to represent text. Strings are defined by closing a set of charecters in quotes (single or double but not both!)

%%html

<script>
//here we define the string (fruit) and log it into the console!
let fruit = "mango";
let test = "test";
console.log("String: ", fruit);
element.append("String: " + fruit );
</script>

Booleans

a boolean represents a true or false value, they are usually used in if then statments. Stating that if something is true/false, then something else will occour!

%%html

<script>
//here we define the boolean (isSkyBlue) and log it into the console!
let isSkyBlue = true;
console.log("Boolean: ", isSkyBlue);
element.append("Boolean: " + isSkyBlue);

//if the sky is blue it will come up as true in the consle 
//if not it will say false!
</script>

Arrays

Arrays are used to store multiple values in a single variable! all the values in an array are called elements, these elements can be any diffrent data type!

%%html

<script>
//here we create an array of strings (berries) and log it to the console!
let berries = ["strawberry", "blueberry", "raseberry", "blackberry"];
console.log("Array: ", berries);
element.append("Array: " + berries.join(", "));
</script>

Popcorn Hack: create your own array using two or more diffrent data types we throughout the lesson!

Dictionaries (Objects)

In Javascript, objects are like dictionaries, where the keys correspond with values. To access the data of an object, we can use dot notation or bracket notation.

Example:

For this specific example, we will declare an object and iterate through its key-value pairs.

%%html

<script>
// Example of a JavaScript object (dictionary)
let studentInfo = {
  name: "Kushi Gade",
  age: 25,
  grade: 10,
  interests: ["Sleeping", "Reading", "Cooking"]
};


// Traversing the object using a for...in loop
for (let key in studentInfo) {
  console.log(key + ": " + studentInfo[key]); // Logs each key and its associated value
  element.append(key + ": " + studentInfo[key] + "<br>");
}
</script>

Addition and Concatenation

We can also use addition and concatenation, just like in Python

%%html

<script>
// Addition of two integer variables

let int1 = 3;
let int2 = 4;
// Concatenation between two non-strings in a print statement will EVALUATE them.
console.log(int1 + int2); // This will add the two numbers.
console.log("Notice how they get ADDED together.");
console.log();

// Concatenation of two string variables

let string1 = "3";
let string2 = "4";
// Concatenation between two strings in a print statement will CONNECT them.
console.log(string1 + string2); // This will concatenate (connect) the strings.
console.log("Notice how this CONNECTS the variables");
</script>

Hack #2

Create a average grade calculator using integers and addition. input scores as variables, add them together, and average them out. Using that data create an array of student info (ex: name/age) and average grade.

  • choose either Js (using an array/object) or python (using a list)
  • Use comments to explain your code and thought process.
  • log your work/print with consle

Submit homework here.