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>

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)}
`;

• In objects, instantiated from a class, all methodes are visible under _proto_
  (This was not the case with object literals!)

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>

// 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;

References

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