Constructors in classes in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this class constructor code?

Consider the following JavaScript class with a constructor. What will be printed when creating a new instance?

Javascript

class Person {
  constructor(name) {
    this.name = name;
    console.log(`Hello, ${this.name}!`);
  }
}

const p = new Person('Alice');

A Hello, Alice!

B undefined

C Hello, undefined!

D TypeError

💡 Hint

Look at what the constructor does with the name parameter and the console.log statement.

The constructor receives 'Alice' as the name argument, assigns it to this.name, and then logs 'Hello, Alice!'.

❓ Predict Output

intermediate

What will be the value of the property after creating an instance?

Look at this class and what happens when we create an instance. What is the value of obj.age?

Javascript

class Animal {
  constructor(age) {
    this.age = age + 1;
  }
}

const obj = new Animal(4);

A NaN

B 4

C undefined

D 5

💡 Hint

The constructor adds 1 to the age parameter before assigning.

The constructor adds 1 to the input age (4), so this.age becomes 5.

❓ Predict Output

advanced

What error does this class code produce?

This class tries to use a constructor but has a mistake. What error will happen when running this code?

Javascript

class Car {
  constructor() {
    this.brand = 'Toyota';
  }
}

const myCar = new Car();

A No error

B TypeError

C SyntaxError

D ReferenceError

💡 Hint

Check the syntax of the constructor declaration.

The constructor is missing parentheses '()' after the word constructor, causing a SyntaxError.

❓ Predict Output

advanced

What is the output of this class with multiple constructor calls?

What will be printed when creating two instances of this class?

Javascript

class Counter {
  constructor() {
    if (!Counter.count) {
      Counter.count = 0;
    }
    Counter.count++;
    console.log(`Count is ${Counter.count}`);
  }
}

new Counter();
new Counter();

A Count is 0\nCount is 1

B Count is 1\nCount is 2

C Count is 1\nCount is 1

D undefined\nundefined

💡 Hint

Look at how the static property Counter.count is used and updated.

Counter.count starts undefined, so first instance sets it to 0 then increments to 1. Second instance increments to 2.

🧠 Conceptual

expert

Which option will cause an error when creating an instance?

Given these class definitions, which one will cause an error when you try to create a new instance?

A class B { constructor(x) { this.x = x.toString(); } } const b = new B();

B class A { constructor() { this.x = 1; } } const a = new A();

C class C { constructor() { return {}; } } const c = new C();

D class D { constructor() { this.x = 1; return 5; } } const d = new D();

💡 Hint

Consider what happens if you call a constructor that expects a parameter but you don't provide one.

Option A causes a TypeError because no argument is passed, so x is undefined, and undefined.toString() throws "Cannot read properties of undefined (reading 'toString')". Option A has no required parameter. Option A returns an object (allowed, overrides 'this'). Option A returns a primitive (ignored).

Practice

1. What is the main purpose of a constructor in a JavaScript class?

easy

A. To create static properties for the class

B. To define methods that all objects share

C. To initialize new objects with default or given values

D. To delete objects when they are no longer needed

Solution

1. Step 1: Understand the role of a constructor

   A constructor is a special method in a class that runs automatically when a new object is created.

2. Step 2: Identify what constructors do

   Constructors set initial values for the object's properties using this.

3. Final Answer:

   To initialize new objects with default or given values -> Option C

4. Quick Check:

   Constructor = initialize object [OK]

Hint: Constructors always set up new objects [OK]

Common Mistakes:

• Confusing constructors with regular methods
• Thinking constructors delete objects
• Believing constructors create static properties

2. Which of the following is the correct syntax to define a constructor inside a JavaScript class?

easy

A. constructor() { this.name = 'John'; }

B. function constructor() { this.name = 'John'; }

C. def constructor() { this.name = 'John'; }

D. constructor = () => { this.name = 'John'; }

Solution

1. Step 1: Recall JavaScript class constructor syntax

   In JavaScript classes, the constructor is defined as a method named constructor without the function keyword.

2. Step 2: Check each option

   constructor() { this.name = 'John'; } uses the correct syntax: constructor() { ... }. Options B and C incorrectly use keywords from other languages or function syntax. constructor = () => { this.name = 'John'; } uses arrow function syntax, which is invalid for constructors.

3. Final Answer:

   constructor() { this.name = 'John'; } -> Option A

4. Quick Check:

   Constructor method = constructor() { } [OK]

Hint: Constructor is a method named exactly 'constructor' [OK]

Common Mistakes:

• Adding 'function' keyword before constructor
• Using arrow functions for constructors
• Using other language syntax like 'def'

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('Alice');
console.log(p.greet());

medium

A. Hello, undefined!

B. Hello, Alice!

C. Hello, !

D. TypeError: p.greet is not a function

Solution

1. Step 1: Understand object creation with constructor

   The Person class constructor sets this.name to the passed argument. Here, 'Alice' is passed, so p.name becomes 'Alice'.

2. Step 2: Evaluate the greet method output

   The greet method returns a string using this.name, which is 'Alice'. So, p.greet() returns 'Hello, Alice!'.

3. Final Answer:

   Hello, Alice! -> Option B

4. Quick Check:

   Constructor sets name, greet uses it = Hello, Alice! [OK]

Hint: Constructor sets property, method uses it [OK]

Common Mistakes:

• Forgetting to pass argument to constructor
• Expecting undefined because of missing this
• Thinking greet is not a method

4. Identify the error in this class definition:

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

medium

A. Properties should be assigned using this, like this.make = make;

B. The class name should be lowercase

C. The constructor should not have parameters

D. The constructor must return an object explicitly

Solution

1. Step 1: Review property assignment in constructor

   Inside a constructor, to assign values to the object's properties, you must use this.propertyName. Simply writing make = make; assigns the parameter to itself, which does nothing.

2. Step 2: Identify the correct fix

   Using this.make = make; and this.model = model; correctly assigns the values to the new object's properties.

3. Final Answer:

   Properties should be assigned using this, like this.make = make; -> Option A

4. Quick Check:

   Use this.property = parameter [OK]

Hint: Always use this.property to assign inside constructor [OK]

Common Mistakes:

• Assigning parameters to themselves
• Not using this to set properties
• Thinking constructor must return explicitly

5. You want to create a Book class where each book has a title and an optional author. If no author is given, it should default to 'Unknown'. Which constructor correctly implements this behavior?

hard

A. constructor(title, author) { this.title = title; if (author) this.author = author; }

B. constructor(title, author) { this.title = title; this.author = author || 'Unknown'; }

C. constructor(title) { this.title = title; this.author = 'Unknown'; }

D. constructor(title, author = 'Unknown') { this.title = title; this.author = author; }

Solution

1. Step 1: Understand optional parameters in constructors

   Use default parameter values for optional arguments. constructor(title, author = 'Unknown') { this.title = title; this.author = author; }: constructor(title, author = 'Unknown') sets author to 'Unknown' if not provided or undefined, but keeps passed falsy values like empty string.

2. Step 2: Check other options

   B uses ||, which defaults falsy values (not just missing). C has no author param. D sets only if truthy, else undefined.

3. Final Answer:

   constructor(title, author = 'Unknown') { this.title = title; this.author = author; } -> Option D

4. Quick Check:

   Optional param: param = default [OK]

Hint: Default params for optional constructor args [OK]

Common Mistakes:

• Using logical OR (||) which treats falsy as missing
• Omitting the optional parameter entirely
• Not providing a default, leaving undefined