WDD 131: Dynamic Web Fundamentals

W04 Learning Activity: JavaScript Objects

Overview

JavaScript objects are a way to group related data and functions together. Objects are a core concept in JavaScript and are used extensively in the language. In this activity, you will learn how to create and use objects in JavaScript.

Prepare

Instead of storing related data in complex parallel or multi-dimensional arrays, related data can be stored using objects which are more readable, stable, and maintainable.

This is an example of a JavaScript object literal (a collection of key-value pairs) representing a person in a concise and readable format.

let person = {
  name: "Antonia Francesca",
  age: 30,
  profession: "Software Engineer",
  hobbies: ["reading", "playing guitar", "hiking"],
  address: {
    street: "123 Camino Real",
    city: "Santa Rosa",
    country: "Honduras"
  },
  isEmployed: true,
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

• The person object includes properties name, age, profession, hobbies, address, and isEmployed.
• It also includes a greet method that logs a greeting message to the console using the person's name.
• The address property is an object itself, containing nested properties: street, city, and country.
• You can access and modify the properties and invoke the methods of the person object using bracket [] or dot notation.

✓ Determine the output of the following statements given the person object defined above.

1. console.log(person['isEmployed']);   // bracket notation

2. console.log(person.hobbies[0]);   // dot notation

3. console.log(person.age);   // dot notation

4. console.log(person['address'].city);   // combined notation

Updating a value works like you expect.

person.age = 31;

Activity Instructions

Use objects and encapsulation to create a representation of a typical college course schedule.

1. Given the following object literal for a course,

   let aCourse = {
     code: "WDD131",
     title: "Dynamic Web Fundamentals",
     credits: 2,
   };

   add a sections property to the object. Since the course may have more than one section, make this sections an array of at least two (2) items with the following properties:
   • section
   • enrolled
   • instructor
   Check Your Understanding

   let aCourse = {
     code: "WDD131",
     title: "Dynamic Web Fundamentals",
     credits: 2,
     sections : [
       { section: "001", enrolled: 95, instructor: "Roberto Diaz Rodriguez" },
       { section: "002", enrolled: 80, instructor: "Sarah Gobble" }
     ]
   };

2. Create a function to set the name and number of the course in HTML. Pass the course object as a parameter into your function. Use dot notation to access the parts of the object that you need to build the output in the element with an id of courseName.
   Check Your Understanding

   function setCourseInformation(course) {
     document.querySelector("#courseName").innerHTML = `${course.code} – ${course.title}`;
   }

3. Create another function that will output the sections into a table with an id of sections as individual rows of data.
   Check Your Understanding

   function renderSections(course) {
     const tbody = document.querySelector("#sections tbody");
     let rows = "";
     for (const section of course.sections) {
       rows += `<tr>
         <td>${section.section}</td>
         <td>${section.enrolled}</td>
         <td>${section.instructor}</td>
       </tr>`;
     }
     tbody.innerHTML = rows;
   }