Class in Java

Class is a concept in OOP(object oriented programming) languages. But ECMAScript 2015 (also known as ES6) introduces Class in JavaScript, and TypeScript added some extra features to Class in JavaScript and made it more similar to Class in Java.

We can consider Class as a blue print for houses. Many actual houses can be built using one blue print. And these actual houses are called instances, or objects. The blue print can define there must be doors for one house, but different houses (instances) can have different number of doors.

Constructor

We use the keyword class to define a new class, and the keyword new to instantiate a new instance based on that Class. Every time the new key word is used, the constructor is called. Which constructor is called depends on what parameters we pass to the constructor.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Define the class in Java:
public class Circle() {
    private double radius;
    private String color;
    public Circle(double radius, String color) {
        this.radius = radius;
        this.color = color;
    }
    public Circle(double radius) {
        this.radius = radius;
        this.color = "red";
    }
    public static double getPI () {
        return Math.PI;
    }
    public double getArea () {
        return radius * radius * Math.PI;
    }
}

// Create new Circle instance:
Circle circle1 = new Circle (3.5, "blue"); //Call the first constructor.
Circle circle2 = new Circle (2.0); //Call the second Constructor.

Methods

For methods in the class, there are different types: static one and instance one. The static method means we can call it without instantiate a new instance, and we call it directly on the class: on the class name (The first letter is capital). But for instance, we can only call it on specific instances.

Here is the example of two different methods:

1
2

System.out.println(circle1.getArea()); // getArea is an instance method
System.out.println(Circle.getPI()); // getPI is a static method

Getters and Setters

Getters and setters are just functions in Java Class. But it’s usually used to get and set the value of Class fields. In this way, we can easily sanitize the data we get and avoid unexpected modification of data directly. It’s naming convention is usually is getAttributeName and setAttributeName. And in order to make the modification of data possible, we usually use the public access modifier.

1
2
3
4
5
6

public void setRadius (double radius) {
    this.radius = radius;
} // setter
public double getRadius() {
    return this.radius;
}// getter

Class in JavaScript

We don’t have class in JavaScript until ES6. Class in JavaScript has a lot of similarities with Java, but they are different in some subtle way.

1. Since JavaScript doesn’t support define data type first, we don’t need to do so.
2. JavaScript will return undefined if nothing is returned, so we don’t need to specify returned data type.

Constructor

JavaScript doesn’t have access modifier and everything is public. But ES6 introduces a symbol # to solve this problem. Using # as the variable name outside the class will cause errors.

Constructor in JavaScript is just regular function but with the name of constructor to tell JavaScript that this is a constructor, please call this function when there is the new keyword. But unlike Java, JavaScript doesn’t support constructor overloading. We can only have one constructor for one Class.

1
2
3
4
5
6
7
8
9

class Square {
    #color;
    #side;

    constructor(color, side) {
        this.color = color;
        this.side = side;
    }
}

Methods

Methods in JS are just like how we write constructor.

1
2
3
4
5

calculate() {
    return this.side * this.side;
}
square1 = new Square("blue", 4);
console.log(square1.calculate()); // print 16

Getters and Setters

TBC…

Class in TypeScript

Since TypeScript is built on JavaScript, it has all the features of JavaScript, but with type checking. Check the data type can help us to avoid many common weird bugs in JavaScript.

From what I understand, I believe TypeScript combines the “good” features of JavaScript and Java. This combination makes JavaScript even more powerful and easy to use.

For TypeScript, all we need to do is write regular JS code, but only with extra type definition. As for Class, TypeScript also adds the access modifier to it.

Constructor

1
2
3
4
5
6
7
8

class Circle {
    private color: string;
    private radius: number;
    public constructor(color: string, radius: number) {
        this.color = color;
        this.radius = radius;
    }
}

Methods

For methods, we can define the return type in TypeScript, it seems very like the regular methods in Java

1
2
3

public calculate(): number {
    return this.radius * this.radius * Math.PI;
}

Getters and Setters

TBC…