Test your skills: Object basics

Object basics 1

In this task you are provided with an object literal, and we want you to do some work on it.

To complete the task:

1. Store the value of the name property inside the catName variable, using bracket notation.
2. Run the greeting() method using dot notation (it will log the greeting to the console).
3. Update the color property value to black.

<section></section>

* {
  box-sizing: border-box;
}

p {
  color: purple;
  margin: 0.5em 0;
}

const cat = {
  name: "Bertie",
  breed: "Cymric",
  color: "white",
  greeting: function () {
    console.log("Meow!");
  },
};

// Don't edit the code above here!

// Add your code here

// Don't edit the code below here!

const section = document.querySelector("section");
let para1 = document.createElement("p");
let para2 = document.createElement("p");
para1.textContent = `The cat's name is ${catName}.`;
para2.textContent = `The cat's color is ${cat.color}.`;
section.appendChild(para1);
section.appendChild(para2);

// ...
// Don't edit the code above here!

const catName = cat["name"];
cat.greeting();
cat.color = "black";

// Don't edit the code below here!
// ...

Object basics 2

In our next task, we want you to have a go at creating your own object literal to represent one of your favorite bands.

To complete the task:

1. Create an object literal called band, which contains the following properties:
   • name: A string representing the band name.
   • nationality: A string representing the country the band comes from.
   • genre: What type of music the band plays.
   • members: A number representing the number of members the band has.
   • formed: A number representing the year the band formed.
   • split: A number representing the year the band split up, or false if they are still together.
   • albums: An array representing the albums released by the band. Each array item should be an object containing the following members:
     • name: A string representing the name of the album.
     • released: A number representing the year the album was released.

       Note: Include at least two albums in the albums array.

2. Write a string to the variable bandInfo, which will contain a small biography detailing their name, nationality, years active, and style, and the title and release date of their first album.

let bandInfo;

// Don't edit the code above here!

// Add your code here

// Don't edit the code below here!

const section = document.querySelector("section");
let para1 = document.createElement("p");
para1.textContent = bandInfo;
section.appendChild(para1);

// ...
// Don't edit the code above here!

const band = {
  name: "Black Sabbath",
  nationality: "British",
  genre: "heavy metal",
  members: 4,
  formed: 1968,
  split: 2025,
  albums: [
    {
      name: "Black Sabbath",
      released: 1970,
    },
    {
      name: "Paranoid",
      released: 1970,
    },
    {
      name: "Master of Reality",
      released: 1971,
    },
    {
      name: "Vol. 4",
      released: 1972,
    },
  ],
};

bandInfo = `The ${band.nationality} ${band.genre} band ${band.name} were active between ${band.formed} and ${band.split}. Their first album, ${band.albums[0].name}, was released in ${band.albums[0].released}.`;

// Don't edit the code below here!
// ...

Object basics 3

In this task, we want you to return to the cat object literal from Object basics 1.

To complete the task:

1. Rewrite the greeting() method so that it logs "Hello, said Bertie the Cymric." to the browser's console, but in a way that will work across any cat object of the same structure, regardless of its name or breed.
2. Write your own object called cat2, which has the same structure and greeting() method, but a different name, breed, and color.
3. Call both greeting() methods to check that they log appropriate greetings to the console.

const cat = {
  name: "Bertie",
  breed: "Cymric",
  color: "white",
  greeting: function () {
    console.log("Meow!");
  },
};

// Don't edit the code above here!

// Add your code here

// ...
// Don't edit the code above here!

const cat2 = {
  name: "Elfie",
  breed: "Aphrodite Giant",
  color: "ginger",
  greeting: function () {
    console.log(`Hello, said ${this.name} the ${this.breed}.`);
  },
};

cat.greeting();
cat2.greeting();

Object basics 4

In the code you wrote for Task 3, the greeting() method and properties are defined twice, once for each cat. This isn't ideal: specifically, it violates a principle in programming called DRY or "Don't Repeat Yourself". In this task we want you to improve the code so the object members are only defined once.

To complete the task:

1. Create a JavaScript class that defines cat instances
2. Use your class along with the new keyword to create the cat and cat2 instances.

const cat = {
  name: "Bertie",
  breed: "Cymric",
  color: "white",
  greeting: function () {
    console.log(`Hello, said ${this.name} the ${this.breed}.`);
  },
};

const cat2 = {
  name: "Elfie",
  breed: "Aphrodite Giant",
  color: "ginger",
  greeting: function () {
    console.log(`Hello, said ${this.name} the ${this.breed}.`);
  },
};

// Don't edit the code below here!

cat.greeting();
cat2.greeting();

class Cat {
  constructor(name, breed, color) {
    this.name = name;
    this.breed = breed;
    this.color = color;
  }
  greeting() {
    console.log(`Hello, said ${this.name} the ${this.breed}.`);
  }
}

const cat = new Cat("Bertie", "Cymric", "white");
const cat2 = new Cat("Elfie", "Aphrodite Giant", "ginger");

// Don't edit the code below here!
// ...

• Previous
• Overview: Dynamic scripting with JavaScript
• Next