Class syntax in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a class named Person.

Javascript

class [1] {
  constructor(name) {
    this.name = name;
  }
}

Drag options to blanks, or click blank then click option'

APerson

Bperson

CpersonClass

DMyClass

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase class names like 'person' which is not a convention.

Using unrelated names like 'MyClass' or 'personClass'.

The class name should start with a capital letter and match the intended name. Here, Person is the correct class name.

2fill in blank

medium

Complete the code to add a method named greet that returns a greeting string.

Javascript

class Person {
  constructor(name) {
    this.name = name;
  }
  [1]() {
    return `Hello, my name is ${this.name}`;
  }
}

Drag options to blanks, or click blank then click option'

Agreeting

BsayHello

Chello

Dgreet

Attempts:

3 left

💡 Hint

Common Mistakes

Using method names like 'sayHello' or 'hello' which do not match the instruction.

Forgetting to define the method inside the class.

The method name should be greet as requested to return the greeting string.

3fill in blank

hard

Fix the error in the constructor to correctly assign the name property.

Javascript

class Person {
  constructor(name) {
    this.[1] = name;
  }
}

Drag options to blanks, or click blank then click option'

Anmae

Bname

Cnam

DName

Attempts:

3 left

💡 Hint

Common Mistakes

Using capitalized 'Name' which is different from the parameter.

Typos like 'nam' or 'nmae' cause errors.

The property name should be exactly name to match the parameter and be consistent.

4fill in blank

hard

Fill both blanks to create an instance of Person and call the greet method.

Javascript

const person = new [1]('Alice');
console.log(person.[2]());

Drag options to blanks, or click blank then click option'

APerson

Bgreet

CsayHello

Dperson

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong class names like 'person' (lowercase).

Calling a method that does not exist like 'sayHello'.

To create an instance, use the class name Person. To call the greeting method, use greet.

5fill in blank

hard

Fill all three blanks to add an age property, a method to get age, and create an instance with age.

Javascript

class Person {
  constructor(name, [1]) {
    this.name = name;
    this.[2] = [3];
  }
  getAge() {
    return this.age;
  }
}

Drag options to blanks, or click blank then click option'

Aage

Cyears

DageValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names like 'years' or 'ageValue' causing confusion.

Not matching the parameter and property names.

The constructor parameter and property should both be named age to store the age value properly.

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