Class syntax in Javascript - Mini Project: Build & Apply

Class syntax

📖 Scenario: Imagine you are creating a simple program to keep track of pets in a pet store. Each pet has a name and an age.

🎯 Goal: You will create a class called Pet to represent each pet. Then you will create an object from this class and display its details.

📋 What You'll Learn

Create a class named Pet with a constructor that takes name and age as parameters

Inside the constructor, set the name and age properties

Create an object called myPet from the Pet class with the name Buddy and age 3

Print the pet's name and age using console.log

💡 Why This Matters

🌍 Real World

Classes help organize data and behavior for things like pets, users, or products in real apps.

💼 Career

Understanding classes is key for many programming jobs, especially in JavaScript frameworks and backend development.

1

Create the Pet class

Write a class named Pet with a constructor that takes name and age as parameters and sets them as properties.

Javascript

// Your code here

Hint

Use the class keyword to create a class. Inside it, write a constructor method that sets this.name and this.age.

2

Create a Pet object

Create an object called myPet from the Pet class with the name Buddy and age 3.

Javascript

class Pet {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// Your code here

Hint

Use new Pet("Buddy", 3) to create the object and assign it to myPet.

3

Access pet properties

Use console.log to print the name and age properties of myPet.

Javascript

class Pet {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const myPet = new Pet("Buddy", 3);

// Your code here

Hint

Use console.log(myPet.name) and console.log(myPet.age) to show the values.

4

Display the pet details

Print a message using console.log that says: "Buddy is 3 years old." using the properties of myPet and a template string.

Javascript

class Pet {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const myPet = new Pet("Buddy", 3);

console.log(myPet.name);
console.log(myPet.age);

// Your code here

Hint

Use a template string with backticks: `${myPet.name} is ${myPet.age} years old.`

Practice

1. What is the main purpose of a class in JavaScript?

easy

A. To create blueprints for objects with shared properties and methods

B. To execute code immediately

C. To store data in a database

D. To style HTML elements

Solution

1. Step 1: Understand what a class represents

   A class is a blueprint or template for creating objects that share properties and behaviors.

2. Step 2: Compare options with the definition

   Only To create blueprints for objects with shared properties and methods correctly describes the purpose of a class in JavaScript.

3. Final Answer:

   To create blueprints for objects with shared properties and methods -> Option A

4. Quick Check:

   Class purpose = blueprint for objects [OK]

Hint: Classes define object templates, not immediate actions [OK]

Common Mistakes:

• Confusing classes with functions that run immediately
• Thinking classes store data like databases
• Mixing classes with styling or HTML

2. Which of the following is the correct syntax to define a class named Car with a constructor?

easy

A. class Car() { constructor() { } }

B. function Car() { constructor() { } }

C. class Car { function constructor() { } }

D. class Car { constructor() { } }

Solution

1. Step 1: Recall correct class syntax

   A class is declared with the keyword class, followed by the class name and curly braces. The constructor is a method inside without the function keyword.

2. Step 2: Check each option

   Only class Car { constructor() { } } is correct. The other options have syntax errors such as parentheses after the class name, using function Car() declaration, or using the function keyword for the constructor.

3. Final Answer:

   class Car { constructor() { } } -> Option D

4. Quick Check:

   Class syntax = class Name { constructor() {} } [OK]

Hint: Class constructor has no 'function' keyword inside class [OK]

Common Mistakes:

• Adding parentheses after class name
• Using 'function' keyword inside class methods
• Defining constructor outside class body

3. What will be the output of the following code?

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}!`;
  }
}
const p = new Person('Anna');
console.log(p.greet());

medium

A. Hello, Anna!

B. Hello, undefined!

C. Hello, !

D. Error: greet is not a function

Solution

1. Step 1: Understand object creation and constructor

   The Person class constructor sets this.name to the passed argument. Here, 'Anna' is passed, so this.name becomes 'Anna'.

2. Step 2: Call the greet method

   The greet method returns a string using this.name. Since this.name is 'Anna', the returned string is 'Hello, Anna!'.

3. Final Answer:

   Hello, Anna! -> Option A

4. Quick Check:

   Method uses this.name = 'Anna' [OK]

Hint: Constructor sets properties; methods use them with this [OK]

Common Mistakes:

• Forgetting to pass argument to constructor
• Expecting greet to print instead of return
• Confusing this.name with undefined

4. Identify the error in the following class code:

class Animal {
  constructor(type) {
    this.type = type;
  }
  speak() {
    console.log('I am a ' + type);
  }
}
const a = new Animal('Dog');
a.speak();

medium

A. Incorrect class declaration syntax

B. Missing constructor keyword

C. Using undefined variable 'type' inside speak method

D. Cannot create instance with new keyword

Solution

1. Step 1: Check variable usage inside speak method

   The method uses type directly, but type is not defined in its scope. It should use this.type to access the instance property.

2. Step 2: Confirm other parts are correct

   The constructor and class syntax are correct, and creating an instance with new is valid.

3. Final Answer:

   Using undefined variable 'type' inside speak method -> Option C

4. Quick Check:

   Use this.type to access property inside methods [OK]

Hint: Use this.property inside class methods to access instance data [OK]

Common Mistakes:

• Using variable name without this inside methods
• Forgetting to use new keyword when creating instance
• Misnaming constructor method

5. Given the class below, what will be the output of console.log(car.getDescription());?

class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
  getDescription() {
    return `${this.make} ${this.model}`;
  }
}
class Car extends Vehicle {
  constructor(make, model, year) {
    super(make, model);
    this.year = year;
  }
  getDescription() {
    return `${this.year} ${super.getDescription()}`;
  }
}
const car = new Car('Toyota', 'Corolla', 2020);
console.log(car.getDescription());

hard

A. Toyota Corolla

B. 2020 Toyota Corolla

C. Corolla Toyota 2020

D. Error: super.getDescription is not a function

Solution

1. Step 1: Understand inheritance and super calls

   The Car class extends Vehicle. The Car constructor calls super(make, model) to initialize those properties in the parent class.

2. Step 2: Analyze getDescription method in Car

   The Car class overrides getDescription and calls super.getDescription() to get the parent class description, then prepends the year.

3. Step 3: Substitute values

   super.getDescription() returns 'Toyota Corolla'. Adding this.year (2020) before it results in '2020 Toyota Corolla'.

4. Final Answer:

   2020 Toyota Corolla -> Option B

5. Quick Check:

   super.method() calls parent method [OK]

Hint: Use super.method() to call parent class methods inside subclass [OK]

Common Mistakes:

• Forgetting to call super() in subclass constructor
• Not using super.getDescription() inside overridden method
• Mixing order of make and model in output