Class syntax in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of method call in a class

What is the output of this code when calling obj.greet()?

Javascript

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

A SyntaxError

B "Hello, undefined!"

C TypeError: obj.greet is not a function

D "Hello, Alice!"

💡 Hint

Remember how the constructor sets the name property and how methods access it with this.

The constructor sets this.name to 'Alice'. The greet method returns a string using this.name, so the output is 'Hello, Alice!'.

❓ Predict Output

intermediate

Output of static method call

What will this code output when calling MathHelper.square(4)?

Javascript

class MathHelper {
  static square(x) {
    return x * x;
  }
}
console.log(MathHelper.square(4));

A 16

B NaN

C TypeError: MathHelper.square is not a function

D undefined

💡 Hint

Static methods are called on the class itself, not on instances.

The static method square multiplies the input by itself. Calling MathHelper.square(4) returns 16.

❓ Predict Output

advanced

Output of inheritance and method override

What is the output of this code?

Javascript

class Animal {
  speak() {
    return 'Animal sound';
  }
}
class Dog extends Animal {
  speak() {
    return 'Woof!';
  }
}
const pet = new Dog();
console.log(pet.speak());

A "Woof!"

B "Animal sound"

C TypeError: pet.speak is not a function

D undefined

💡 Hint

Child classes can replace methods from parent classes.

Dog overrides the speak method from Animal. Calling pet.speak() returns 'Woof!'.

❓ Predict Output

advanced

Output of private field access

What happens when this code runs?

Javascript

class Counter {
  #count = 0;
  increment() {
    this.#count++;
  }
  getCount() {
    return this.#count;
  }
}
const c = new Counter();
c.increment();
c.increment();
console.log(c.getCount());

A 0

B SyntaxError

C 2

D TypeError: Cannot access private field

💡 Hint

Private fields start with # and are only accessible inside the class.

The private field #count starts at 0. Calling increment twice adds 2. getCount returns 2.

❓ Predict Output

expert

Output of method using super in subclass

What is the output of this code?

Javascript

class Vehicle {
  start() {
    return 'Starting vehicle';
  }
}
class Car extends Vehicle {
  start() {
    return super.start() + ' and car engine';
  }
}
const myCar = new Car();
console.log(myCar.start());

A TypeError: super.start is not a function

B "Starting vehicle and car engine"

C undefined

D "Starting vehicle"

💡 Hint

super calls the method from the parent class.

Car's start method calls Vehicle's start using super, then adds text. The output is 'Starting vehicle and car engine'.

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