function logItType(output) {
    console.log(typeof output, ";", output);
}
console.log("Looking at dynamic nature of types in JavaScript")
logItType("This is a string"); // String
logItType(8000);    // Number
logItType(["Lots", "of", "Strings"]);  // Object is generic for this Array, which similar to Python List

Looking at dynamic nature of types in JavaScript
string ; This is a string
number ; 8000
object ; [ 'Array', 'of', 'Strings' ]

function Team(name, driver1, driver2) {
    this.name = name;
    this.driver1 = driver1;
    this.driver2 = driver2;
    this.role = "";
}

// define a setter for role in Team data
Team.prototype.setRole = function(role) {
    this.role = role;
}

// define a JSON conversion "method" associated with Person
Team.prototype.toJSON = function() {
    const obj = {name: this.name, driver1: this.driver1, driver2: this.driver2, role: this.role};
    const json = JSON.stringify(obj);  // json/string is useful when passing data on internet
    return json;
}

// make a new Person and assign to variable teacher
var firstCar = new Team("Red Bull", "Verstappen", "Perez");  // object type is easy to work with in JavaScript
logItType(firstCar);  // before role
logItType(firstCar.toJSON());  // ok to do this even though role is not yet defined

// output of Object and JSON/string associated with Teacher
firstCar.setRole("firstCar");   // set the role
logItType(firstCar); 
logItType(firstCar.toJSON());

object ; Team {
  name: 'Red Bull',
  driver1: 'Verstappen',
  driver2: 'Perez',
  role: '' }
string ; {"name":"Red Bull","driver1":"Verstappen","driver2":"Perez","role":""}
object ; Team {
  name: 'Red Bull',
  driver1: 'Verstappen',
  driver2: 'Perez',
  role: 'firstCar' }
string ; {"name":"Red Bull","driver1":"Verstappen","driver2":"Perez","role":"firstCar"}

var cars = [ 
    new Team("Alphatauri", "Gasly", "Tsunoda"),
    new Team("Mercedes", "Hamilton", "Russell"),
    new Team("Ferrari", "Leclerc", "Sainz"),
    new Team("McLaren", "Norris", "Riccardo"),
    new Team("Alfa Romeo", "Bottas", "Zhou")
];

// define a classroom and build Classroom objects and json
function League(firstCar, cars){ // 1 teacher, many student
    // start Classroom with Teacher
    firstCar.setRole("First Car");
    this.firstCar = firstCar;
    this.league = [firstCar];
    // add each Student to Classroom
    this.cars = cars;
    this.cars.forEach(car => { car.setRole("Car"); this.league.push(car); });
    // build json/string format of Classroom
    this.json = [];
    this.league.forEach(person => this.json.push(person.toJSON()));
}

// make a CompSci classroom from formerly defined teacher and students
f1 = new League(firstCar, cars);

// output of Objects and JSON in CompSci classroom
logItType(f1.league);  // constructed classroom object
logItType(f1.league[0].name);  // abstract 1st objects name
logItType(f1.json[0]);  // show json conversion of 1st object to string
logItType(JSON.parse(f1.json[0]));  // show JSON.parse inverse of JSON.stringify

object ; [ Team {
    name: 'Red Bull',
    driver1: 'Verstappen',
    driver2: 'Perez',
    role: 'First Car' },
  Team {
    name: 'Red Bull',
    driver1: 'Verstappen',
    driver2: 'Perez',
    role: 'Car' },
  Team {
    name: 'Mercedes',
    driver1: 'Hamilton',
    driver2: 'Russell',
    role: 'Car' },
  Team {
    name: 'Ferrari',
    driver1: 'Leclerc',
    driver2: 'Sainz',
    role: 'Car' },
  Team {
    name: 'McLaren',
    driver1: 'Norris',
    driver2: 'Riccardo',
    role: 'Car' },
  Team {
    name: 'Alfa Romeo',
    driver1: 'Bottas',
    driver2: 'Zhou',
    role: 'Car' } ]
string ; Red Bull
string ; {"name":"Red Bull","driver1":"Verstappen","driver2":"Perez","role":"First Car"}
object ; { name: 'Red Bull',
  driver1: 'Verstappen',
  driver2: 'Perez',
  role: 'First Car' }

League.prototype._toHtml = function() {
  // HTML Style is build using inline structure
  var style = (
    "display:inline-block;" +
    "border: 2px solid grey;" +
    "box-shadow: 0.8em 0.4em 0.4em grey;"
  );

  // HTML Body of Table is build as a series of concatenations (+=)
  var body = "";
  // Heading for Array Columns
  body += "<tr>";
  body += "<th><mark>" + "Name" + "</mark></th>";
  body += "<th><mark>" + "Driver 1" + "</mark></th>";
  body += "<th><mark>" + "Driver 2" + "</mark></th>";
  body += "</tr>";
  // Data of Array, iterate through each row of compsci.classroom 
  for (var row in f1.league) {
    // tr for each row, a new line
    body += "<tr>";
    // td for each column of data
    body += "<td>" + f1.league[row].name + "</td>";
    body += "<td>" + f1.league[row].driver1 + "</td>";
    body += "<td>" + f1.league[row].driver2 + "</td>";
    // tr to end line
    body += "<tr>";
  }

   // Build and HTML fragment of div, table, table body
  return (
    "<div style='" + style + "'>" +
      "<table>" +
        body +
      "</table>" +
    "</div>"
  );

};

// IJavaScript HTML processor receive parameter of defined HTML fragment
$$.html(f1._toHtml());

Name	Driver 1	Driver 2
Red Bull	Verstappen	Perez
Red Bull	Verstappen	Perez
Mercedes	Hamilton	Russell
Ferrari	Leclerc	Sainz
McLaren	Norris	Riccardo
Alfa Romeo	Bottas	Zhou