Why classes are introduced in Javascript - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use classes instead of functions?

In JavaScript, why were classes introduced when we already had functions?

A To replace all functions with a new syntax that does not support inheritance.

B To provide a clearer and simpler syntax for creating objects and handling inheritance.

C To make JavaScript run faster by removing prototypes.

D To prevent the use of objects and only allow primitive data types.

💡 Hint

Think about how classes help organize code and reuse features.

Classes give a simpler and more readable way to create objects and manage inheritance compared to using functions and prototypes directly.

❓ Predict Output

intermediate

Output of class vs function object creation

What is the output of this code?

Javascript

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return `Hello, ${this.name}`;
};

class Animal {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hi, ${this.name}`;
  }
}

const p = new Person('Alice');
const a = new Animal('Dog');
console.log(p.greet());
console.log(a.greet());

A

Hello, Alice
Hello, Dog

B

Hi, Alice
Hello, Dog

C

Hello, Alice
Hi, Dog

D

Hi, Alice
Hi, Dog

💡 Hint

Look at how greet() is defined in each case.

The function Person uses prototype to define greet which returns 'Hello, name'. The class Animal defines greet as a method returning 'Hi, name'.

❓ Predict Output

advanced

What happens with inheritance in classes?

What is the output of this code?

Javascript

class Vehicle {
  constructor(type) {
    this.type = type;
  }
  describe() {
    return `This is a ${this.type}`;
  }
}

class Car extends Vehicle {
  constructor(type, brand) {
    super(type);
    this.brand = brand;
  }
  describe() {
    return `${super.describe()} of brand ${this.brand}`;
  }
}

const myCar = new Car('car', 'Toyota');
console.log(myCar.describe());

A TypeError: super.describe is not a function

B This is a Vehicle of brand Toyota

C This is a car

D This is a car of brand Toyota

💡 Hint

Check how super is used to call the parent method.

The Car class extends Vehicle and calls super.describe() to get 'This is a car', then adds 'of brand Toyota'.

🧠 Conceptual

advanced

Why classes improve code organization?

How do classes help organize code better compared to using only functions and objects?

A Classes group data and behavior together, making code easier to understand and reuse.

B Classes force all code to be written in one place, reducing modularity.

C Classes remove the need for variables and constants in code.

D Classes prevent the use of inheritance and polymorphism.

💡 Hint

Think about how classes bundle properties and methods.

Classes bundle related data (properties) and actions (methods) in one place, which helps keep code clean and easier to maintain.

❓ Predict Output

expert

Output of class with private fields and methods

What is the output of this code?

Javascript

class Counter {
  #count = 0;
  increment() {
    this.#count++;
  }
  getCount() {
    return this.#count;
  }
}

const c = new Counter();
c.increment();
c.increment();
console.log(c.getCount());
console.log(c.#count);

A

2
TypeError

B

2
undefined

C

2
0

D

2
SyntaxError

💡 Hint

Private fields cannot be accessed outside the class.

The private field #count can be accessed inside the class methods but trying to access c.#count outside causes a TypeError.