Classless Objects

Overview and Objectives

In this lab, learners explore the fundamentals of JavaScript objects by creating, modifying, and enumerating object literals and understanding prototype-based inheritance. They practice accessing properties using dot and bracket notation, checking property existence, and adding methods to objects. By the end of this lab, learners will be able to:

• Create and manipulate JavaScript objects using literal syntax.
• Access and modify object properties with dot notation and bracket notation.
• Test for property existence and enumerate properties of an object.
• Understand object references and how assigning objects affects them.
• Define methods (functions) as object properties.
• Explore prototype-based object creation without using classes.

Tasks and Instructions

Task 1: Creating an Object Literal

• Define an object literal named person with at least three properties: for example, name, age, and hobby. Choose appropriate values for these properties (e.g., name as a string, age as a number, hobby as a string or array). Use the syntax { key: value, ... } to create the object.
  • Hint: For example: const person = { name: "Alice", age: 25, hobby: "painting" };.
  • After creation, use console.log(person) to print the entire object and verify its structure.

Task 2: Accessing and Modifying Properties

• Practice accessing properties using both dot notation and bracket notation.
  • Using dot notation, log the person’s name (e.g., console.log(person.name)). Using bracket notation, log the hobby (e.g., console.log(person["hobby"])).
  • Add a new property to the object using bracket notation. For instance, add a property email to person (e.g., person["email"] = "alice@example.com"). Then, output the updated object to confirm the new property was added.

Task 3: Property Existence Check

• Check whether certain properties exist in the person object.
  • Use the in operator to test for a property that exists (e.g., "name" in person) and one that doesn’t exist (e.g., "address" in person). Log the results (true/false) to the console.
  • Also use the .hasOwnProperty() method to check for one of the existing properties (e.g., person.hasOwnProperty("age")). This will confirm if the property is a direct member of the object. Log the result.

Task 4: Enumerating Properties

• Use a for...in loop to iterate over all enumerable properties of the person object. Inside the loop, print each property name and its value in the format "propertyName: value".
  • Hint: for (let key in person) { console.log(key + ": " + person[key]); }.
  • Verify that all expected properties (including the ones added) are listed. Note that inherited properties (if any) would also appear; in a plain object literal with no prototype changes, you should mostly see the properties you defined.

Task 5: Object References

• Create a new variable personRef and assign it to the person object (e.g., const personRef = person;). Then, use personRef to modify one of the properties (for example, change the age property). After modification, use console.log(person.age) to observe if the original object’s property has changed.
  • This step demonstrates that objects are assigned by reference, not copied. Both person and personRef should reflect the change because they point to the same object in memory.

Task 6: Adding a Method

• Add a function property (method) to the person object. For example, add a method greet that prints a greeting using the person’s name. You can define it as:

  person.greet = function() {
      console.log("Hello, my name is " + this.name + "!");
  };

  • Call person.greet() to ensure it outputs the expected greeting.
  • Try accessing the method with bracket notation as well (e.g., person["greet"]()).

Task 7: Prototype-based Creation

• Explore another way to create an object using a prototype. First, create a base object animal with a couple of properties (e.g., species and canFly). For example:

  const animal = { species: "generic", canFly: false };

  Now use Object.create(animal) to create a new object bird that uses animal as its prototype. Add a new property to bird such as species = "bird" and maybe canFly = true.
  • After creation, log bird.species and bird.canFly. Also log bird.hasOwnProperty("canFly") to check if canFly is an own property of bird or inherited from animal.
  • Modify a property on the prototype (e.g., set animal.canFly = false or change animal.species) and then log the corresponding property on bird to observe how the prototype change reflects in the derived object. This demonstrates JavaScript’s prototype-based inheritance without using classes.

Task 8: Using Object.defineProperty

• As an additional exploration, use Object.defineProperty to add a new property to person (or modify an existing one) with specific descriptors (like making it read-only or non-enumerable). For example, define a property nickname on person that cannot be changed once set. (This optional step is for you to explore property configuration; it is not required to complete the lab but builds deeper understanding.)

Submission Criteria

Via a GitHub repository, submit the following via Canvas:

• Submit your JavaScript source file (e.g., lab1.js) containing the code for the above tasks. Ensure that each step’s code is executed in order (you can keep all code in one file, using comments to separate tasks).
• Your submission should include demonstration of results (for example, console.log outputs) for each task. You can either include the console output as comments in the code or submit a screenshot of the console showing your code’s output for verification.
• The code should run without errors in a Node.js environment or a web browser console. Make sure all object manipulations and outputs work as described.

Grading Rubric

Total Points: 40 points