Class syntax in Javascript

Introduction

Classes help you create blueprints for objects. They make it easy to organize and reuse code for things that share the same features.

When you want to create many similar objects, like multiple users or cars.

When you want to group related data and functions together.

When you want to make your code easier to read and maintain.

When you want to use inheritance to create new objects based on existing ones.

Syntax

Javascript

class ClassName {
  constructor(parameters) {
    // initialize properties
  }

  methodName() {
    // method code
  }
}

The constructor is a special method that runs when you create a new object.

Methods inside the class define actions the objects can do.

Examples

This class creates a person with a name and age, and a method to say hello.

Javascript

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

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

This class creates a car with make and model, and a method to show its details.

Javascript

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  display() {
    console.log(`Car: ${this.make} ${this.model}`);
  }
}

Sample Program

This program defines an Animal class with a name and a speak method. It creates a dog object and calls speak.

Javascript

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

const dog = new Animal('Dog');
dog.speak();

Important Notes

Use this to refer to the current object inside methods.

Class names usually start with a capital letter to show they are blueprints.

You can create many objects from one class using the new keyword.

Summary

Classes are blueprints for creating objects with shared properties and methods.

The constructor sets up new objects when created.

Use methods inside classes to define what objects can do.

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