# Classes

(JavaScript) classes are just 'templates' for objects
If we have only one user or one campus, object literals are just fine
If we have 100 users or 10 campuses, object literals are not a good choice, especially if every object contains methods
For 100 users as a template literal, we also have 100 exactly the same methodes to write!
That's where classes come in action

# Basic class syntax

A class always starts with the class keyword, followed by the class name started with a uppercase letter
Always write the name of the class in the singular form, e.g: class User {...}, class Campus {...}
In a class, the contructor methode gets called first when creating a new instance of that class
Use the new keyword to instantiate (to create an object from) a class, e.g: new User {...}, new Campus {...}
Open es6/class/user.html and es6/class/user.js

<pre></pre>
 
        Copied!

class User {
    // properties (age has a default value of 25)
    constructor(name, surname, age = 25) {
        this.name = name;
        this.surname = surname;
        this.age = age;
        this.isAdult = this.age > 18;
    }

    // methodes
    greet() {
        return `Hi, ${this.name} ${this.surname}`;
    }
}

// instantiate the User class
const user1 = new User('John', 'Doe');
const user2 = new User('Jane', 'Doe', 17);

// log the user objects
console.log(user1.greet(), user1);
console.log(user2.greet(), user2);

// convert the user objects to a readable string
document.querySelector('pre').textContent = `
${JSON.stringify(user1)}
${JSON.stringify(user2)}
`;
 
        Copied!

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

# JavaScript class vs Java class

With a JavaScript class you do not (yet) have the same possibilities as with a real OOP-based programming language such as Java
A brief comparison:

description	JavaScript	Java
inheritance	x	x
getters/setters	x	x
static methodes	x	x
polymorphism	x	x
encapsulation	x	x
interfaces	-	x
private properties	-	x
private methodes	-	x

# Example

# Campuses Thomas More Kempen

<div class="row border-green"></div>
 
        Copied!

// Campus class
class Campus {
    constructor(name, street, lat, lng, zoom = 15) {
        this.name = name;
        this.address = {
            street, // shorthand for street = street
            geo: {
                lat,
                lng,
                zoom,
            },
        };
    }

    // methodes
    getMapUrl() {
        const lang = 'en_US';
        const layers = 'map';
        const zoom = this.address.geo.zoom;
        const size = '650,350';
        const marker = `${this.address.geo.lng},${this.address.geo.lat}`;
        const icon = 'pm2rdm1';
        return `https://static-maps.yandex.ru/1.x/?lang=${lang}&l=${layers}&z=${zoom}&size=${size}&pt=${marker},${icon}`;
    }
}

// campuses array
const campuses = [];

// push new campus to array (order is important)
campuses.push(new Campus('Campus Geel', 'Kleinhoefstraat 4', 51.16095, 4.96166));
campuses.push(new Campus('Campus Lier', 'Antwerpsestraat 99', 51.134006, 4.566427, 10));
campuses.push(new Campus('Campus Turnhout', 'Campus Blairon 800', 51.317004, 4.928719));
// you can also specify all properties separately (order is not important)
const turnhout = new Campus();
turnhout.name = 'Campus Vorselaar';
turnhout.address.street = 'Lepelstraat 2';
turnhout.address.geo.lat = 51.200987;
turnhout.address.geo.lng = 4.77261;
turnhout.address.geo.zoom = 16;
campuses.push(turnhout);

// create cards from array
let cards = '';
campuses.forEach((campus) => {
    console.log(campus);
    cards += `
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="card fluid">
                <h3>${campus.name}</h3>
                <p>${campus.address.street}</p>
                <img src="${campus.getMapUrl()}" alt="${campus.name}" />
            </div>
        </div>`;
});
document.querySelector('.border-green').innerHTML = cards;
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# References

Classes@Mozilla (opens new window)
Classes@W3Schools (opens new window)