Classes ES6

Question 1

What is a class?

Answer 1

Classes are basically a compact syntax for setting up prototype chains.

Note that we don’t need classes to create objects. We can also do so via object literals. That’s why the singleton pattern isn’t needed in JavaScript and classes are used less than in many other languages that have them.

“The essentials of classes” (exploringjs.com). Retrieved November 11, 2024.

Question 2

What is the class body?

Answer 2

The body of a class is the part that is in curly braces {}. This is where you define class members, such as methods or constructor.

The body of a class is executed in strict mode even without the "use strict" directive.

A class element can be characterized by three aspects:

• Kind: Getter, setter, method, or field
• Location: Static or instance
• Visibility: Public or private

“Class body” (MDN Web Docs). Retrieved November 11, 2024.

Question 3

What is the class constructor?

Answer 3

The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name “constructor” in a class — a SyntaxError is thrown if the class contains more than one occurrence of a constructor method.

A constructor can use the super keyword to call the constructor of the super class.

You can create instance properties inside the constructor:

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

Alternatively, if your instance properties’ values do not depend on the constructor’s arguments, you can define them as class fields.

“Class body” (MDN Web Docs). Retrieved November 11, 2024.

Question 4

What is a static initialization block?

Answer 4

Static initialization blocks are declared within a class. It contains statements to be evaluated during class initialization. This permits more flexible initialization logic than static properties, such as using try...catch or setting multiple fields from a single value. Initialization is performed in the context of the current class declaration, with access to private state, which allows the class to share information of its private properties with other classes or functions declared in the same scope

Syntax

class ClassWithSIB {
  static {
    // …
  }
}

Without static initialization blocks, complex static initialization might be achieved by calling a static method after the class declaration:

class MyClass {
  static init() {
    // Access to private static fields is allowed here
  }
}

MyClass.init();

However, this approach exposes an implementation detail (the init() method) to the user of the class. On the other hand, any initialization logic declared outside the class does not have access to private static fields. Static initialization blocks allow arbitrary initialization logic to be declared within the class and executed during class evaluation.

A class can have any number of static {} initialization blocks in its class body. These are evaluated, along with any interleaved static field initializers, in the order they are declared. Any static initialization of a super class is performed first, before that of its sub classes.

The scope of the variables declared inside the static block is local to the block. This includes var, function, const, and let declarations. var declarations will not be hoisted out of the static block.

“Static initialization blocks - JavaScript | MDN” (MDN Web Docs). Retrieved November 12, 2024.

Question 5

What are static methods and fields?

Answer 5

The static keyword defines a static method or field for a class. Static properties (fields and methods) are defined on the class itself instead of each instance. Static methods are often used to create utility functions for an application, whereas static fields are useful for caches, fixed-configuration, or any other data that doesn’t need to be replicated across instances.

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static displayName = "Point";
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.displayName; // undefined
p1.distance; // undefined
p2.displayName; // undefined
p2.distance; // undefined

console.log(Point.displayName); // "Point"
console.log(Point.distance(p1, p2)); // 7.0710678118654755

“Static methods and fields” (MDN Web Docs). Retrieved November 12, 2024.