Javascript Classes

Question 1

What is a class expression?

Answer 1

A class expression is when a class declaration (named or unnamed) is assigned to a variable.

You can access the classes name using the name property.

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"

// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle2"

Question 2

What are classes?

Answer 2

Classes are a template for creating objects. They encapsulate data with code that works on that data.

Question 3

What is a class declaration and how would you create one?

Answer 3

This is the standard way a class is created in most programming languages. To create a class declaration you use the class keyword.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Question 4

Does a class need to be defined before it can be used?

Answer 4

Yes. Class declarations and expressions do not get hoisted.

Question 5

How do you instantiate an object?

Answer 5

You use the new keyword.

myRectangle = new Rectangle(300, 500);
console.log(myRectangle);

Output:
{
    "height": 300,
    "width": 500
}

Question 6

How can you view a classes definition?

Answer 6

Just console.log() the classname.

console.log(Rectangle)

Output: 
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Question 7

What is a class constructor method?

Answer 7

The constructor method is a special method for creating and initialising an object created with a class. In the example below the constructor is used to set the values of the height and width properties of the object ‘myRectangle’ when it is instantiated.

let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

myRectangle = new Rectangle(300, 500);

Question 8

Can you have more than one constructor method in a class declaration ?

Answer 8

No you can only have one constructor method. More than one will throw an error.

Question 9

How do you declare a private property in a class?

Answer 9

You precede the property name with a hashtag.

class Rectangle {
  #height = 0;
  #width;
  constructor(height, width) {
    this.#height = height;
    this.#width = width;
  }
}

Question 10

What is a super class?

Answer 10

A super class is the class that is the parent of your new class.

Question 11

In the following code what is the super class and what is the sub class ?

class Animal {
  constructor(name) {
    this.name = name;
  }

speak() {
console.log(${this.name} makes a noise.);
}
}

class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

speak() {
console.log(${this.name} barks.);
}
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

Answer 11

The super class is Animal, this is because Dog extends from Animal. The sub class is Dog, this is because Dog is extending from the super class Animal.

Parent - Super class
Child - Sub class

Question 12

If a super class has a constructor what must the sub class do in its constructor?

Answer 12

The sub class must call the super class’s constructor. This is done using the super class constructor.

class Animal {
  constructor(name) {
    this.name = name;
  }

speak() {
console.log(${this.name} makes a noise.);
}
}

class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

speak() {
console.log(${this.name} barks.);
}
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.
  speak() {
    console.log(`${this.name} barks.`);
  }
}

Question 13

How do you create a method in a class?

Answer 13

Within the class body you state the method name parenthesis and function body.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.calcArea() ); // 100

Question 14

How do you create a getter in a class and how do you access it?

Answer 14

You create it just like a method but add the ‘get’ keyword in front of the method. When you call the getter you call it without parenthesis as if it is an object property.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  // Getter
  get calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.calcArea ); // No parenthesis