Why classes are introduced in Javascript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple object using a class.

Javascript

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

const p = new Person('Alice');
console.log(p.name);

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

APerson

B'name'

Cname

Dthis.name

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around name like 'name' assigns a string instead of the parameter value.

Using this.name on the right side causes a reference error because it is not yet defined.

The constructor receives a parameter name. To assign it to the object property, we use this.name = name.

2fill in blank

medium

Complete the code to add a method that returns a greeting.

Javascript

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return 'Hello, ' + [1] + '!';
  }
}

const p = new Person('Bob');
console.log(p.greet());

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

Athis.name

Bname

C'name'

DPerson.name

Attempts:

3 left

💡 Hint

Common Mistakes

Using just 'name' refers to a variable not defined in the method scope.

Using quotes 'name' returns the string 'name' instead of the property value.

The method accesses the object's property using this.name to get the name.

3fill in blank

hard

Fix the error in the class method to correctly access the property.

Javascript

class Car {
  constructor(model) {
    this.model = model;
  }
  showModel() {
    console.log([1]);
  }
}

const c = new Car('Tesla');
c.showModel();

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

Amodel

Bthis.model

CCar.model

D'model'

Attempts:

3 left

💡 Hint

Common Mistakes

Using just 'model' causes a reference error because it's not defined in the method.

Using 'Car.model' tries to access a static property which does not exist.

To access the object's property inside a method, use this.model.

4fill in blank

hard

Fill both blanks to create a class with a method that updates and returns the age.

Javascript

class Animal {
  constructor(age) {
    this.age = age;
  }
  birthday() {
    this.age [1] 1;
    return this.[2];
  }
}

const a = new Animal(3);
console.log(a.birthday());

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

A+=

B-=

Cage

Dage()

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-=' subtracts instead of adding.

Returning age() calls a function that does not exist.

The birthday method adds 1 to this.age using += and returns the updated age property.

5fill in blank

hard

Fill all three blanks to create a class that stores a name, updates it, and returns a greeting.

Javascript

class User {
  constructor([1]) {
    this.name = [2];
  }
  greet() {
    return `Hi, [3]!`;
  }
}

const u = new User('Eve');
console.log(u.greet());

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

Aname

Cthis.name

D'name'

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around 'name' assigns a string instead of the parameter value.

Not using this inside the method causes undefined errors.

The constructor receives name as a parameter and assigns it to this.name. The greet method returns a greeting using this.name.

Practice

1. Why were classes introduced in JavaScript?

easy

A. To remove the need for variables

B. To replace all functions with a new syntax

C. To make JavaScript run faster

D. To group data and related actions together in one place

Solution

1. Step 1: Understand the purpose of classes

   Classes help organize data and functions that belong together, making code easier to manage.

2. Step 2: Compare options with class purpose

   Only grouping data and actions matches the reason classes were introduced.

3. Final Answer:

   To group data and related actions together in one place -> Option D

4. Quick Check:

   Classes group data and actions = D [OK]

Hint: Classes bundle data and actions together [OK]

Common Mistakes:

• Thinking classes make code run faster
• Believing classes remove variables
• Confusing classes with replacing all functions

2. Which of the following is the correct way to define a class in JavaScript?

easy

A. var Car = () => { }

B. function Car() { }

C. class Car { constructor() { } }

D. class Car() { }

Solution

1. Step 1: Recall class syntax in JavaScript

   The correct syntax uses the keyword class followed by the class name and curly braces.

2. Step 2: Check each option

   class Car { constructor() { } } uses correct syntax with class Car { constructor() { } }. class Car() { } has wrong parentheses after class name.

3. Final Answer:

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

4. Quick Check:

   Correct class syntax = A [OK]

Hint: Class syntax uses 'class Name { constructor() {} }' [OK]

Common Mistakes:

• Adding parentheses after class name
• Using function syntax instead of class
• Confusing arrow functions with classes

3. What will be the output of this code?

class Dog {
  constructor(name) {
    this.name = name;
  }
  bark() {
    return `${this.name} says woof!`;
  }
}
const dog1 = new Dog('Buddy');
console.log(dog1.bark());

medium

A. "Buddy says woof!"

B. "dog1 says woof!"

C. undefined says woof!

D. Error: bark is not a function

Solution

1. Step 1: Understand class and method usage

   The class Dog sets the name property via constructor and bark() returns a string using that name.

2. Step 2: Trace the code execution

   dog1 is created with name 'Buddy'. Calling dog1.bark() returns 'Buddy says woof!'.

3. Final Answer:

   "Buddy says woof!" -> Option A

4. Quick Check:

   dog1.bark() = "Buddy says woof!" [OK]

Hint: Constructor sets name; bark() uses it in string [OK]

Common Mistakes:

• Expecting dog1 as name instead of 'Buddy'
• Thinking bark() is undefined
• Confusing method call syntax

4. Find the error in this class definition:

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log('Hello, ' + name);
  }
}
const p = new Person('Alice');
p.greet();

medium

A. Missing 'this' before 'name' inside greet() method

B. Constructor is missing parentheses

C. Class name should be lowercase

D. greet() method should return a string, not console.log

Solution

1. Step 1: Check variable usage inside greet()

   The method uses name without this., so it looks for a local variable which does not exist.

2. Step 2: Identify correct property access

   It should use this.name to access the instance property.

3. Final Answer:

   Missing 'this' before 'name' inside greet() method -> Option A

4. Quick Check:

   Use this.name to access property [OK]

Hint: Use 'this.' to access class properties inside methods [OK]

Common Mistakes:

• Forgetting 'this' keyword
• Thinking constructor syntax is wrong
• Believing method must return instead of console.log

5. You want to create many similar objects representing books with title and author. Why is using a class better than creating separate objects manually?

hard

A. Classes make the code run faster than objects

B. Classes let you create many objects easily with shared structure and behavior

C. Classes automatically save objects to a database

D. Classes prevent any changes to the objects after creation

Solution

1. Step 1: Understand the benefit of classes for similar objects

   Classes provide a blueprint to create many objects with the same properties and methods easily.

2. Step 2: Compare options with class benefits

   Only Classes let you create many objects easily with shared structure and behavior correctly states that classes simplify creating many similar objects with shared structure and behavior.

3. Final Answer:

   Classes let you create many objects easily with shared structure and behavior -> Option B

4. Quick Check:

   Classes simplify creating many similar objects = A [OK]

Hint: Classes are blueprints for many similar objects [OK]

Common Mistakes:

• Thinking classes speed up code execution
• Believing classes save data automatically
• Assuming classes make objects immutable