Data Types - Complex

Use Javascript to explore primitive data types in the console.

by ow3n

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="container">

  <h3>Data Types - Complex</h3>
  Open the Javascript Console and click each below to see the data

  <div class="my-2">

    <button class="btn btn-light" id="array">Boolean</button>
    <button class="btn btn-light" id="object">integer</button>

  </div>
</div>

JavaScript

window.onload = function() {

  // array
  document.getElementById('array').onclick = function() {
    console.log("### array ###");
    console.log([], typeof []); // an empty array
    var numbers = [4, 3, 2, 1];
    console.log(numbers, typeof numbers);
    var greeting = ["hello", "world"];
    console.log(greeting, typeof greeting);
    console.log(greeting[1], typeof greeting[1]);
    var cars = [
      ["make", "model", "year"],
      ["Pontiac", "Vibe", 2009],
      ["Honda", "Fit", 2007],
      ["Chevrolet", "Blazer", 2000],
      ["Toyota", "RAV4", 1999]
    ];
    console.log(cars, typeof cars);
  }

  // object
  document.getElementById('object').onclick = function() {
    console.log("### object ###");
    console.log({}, typeof {}); // an empty object
    var person = { // a "person" object 
      "firstName": "John",
      "lastName": "Doe",
      "age": 25
    };
    console.log(person, typeof person);
    var singer = { // a multi-dimensional object
      "name": "Bruce Springsteen",
      "albums": [{
        "name": "Born to Run",
        "year": 1975
      }, {
        "name": "Born in the U.S.A.",
        "year": 1984
      }, {
        "name": "The Ghost of Tom Joad",
        "year": 1995
      }]
    };
    console.log(singer, typeof singer);
    console.log(singer.name, typeof singer.name);

  }

}