let user = {
    nickname: "pronix74", // Nickname
    age: 46, // Age
    admin: false, // admin rights
    print: function() { // "function()" is optional
        console.log("Nickname : " + this.nickname);
        console.log("Age    : " + this.age);
        console.log("Admin    : " + this.isAdmin());
    },
    isAdmin: function() {
        return this.admin ? "Yes" : "No";
    }
};
user.print(); 

Listing 18.18     /examples/chapter018/18_4_1/script.js

In this example, you can see one of several ways to create an object with JavaScript using the object literal notation. Here, you can see that objects in JavaScript are implemented using key-value pairs. Key and value are separated by a colon. You can use the key to access the corresponding values. A value itself can in turn be a literal, a function, or some other object. The key is the identifier for the property or method of the object.

Everything after the assignment to let user between the curly brackets is the content of the object. In the example, there are three data properties, that is, nickname, alter, and admin, and two methods, print and isAdmin. In JavaScript, methods are also introduced with the keyword function. Since ES6, however, the keyword can also be omitted. You must separate the individual properties and methods of an object with commas, and the value of a property or method must be written after a colon.

Here’s a constructor function from which you can subsequently create any number of objects:

function User(nickname, age, admin) {
    this.nickname = nickname;
    this.alter = age;
    this.admin = admin;
    this.printUser = function() {
        console.log("Nickname : " + this.nickname);
        console.log("Age    : " + this.age);
        console.log("Admin    : " + this.isAdmin());
    }
    this.isAdmin = function() {
        return this.admin ? "Yes" : "No";
    }
};

let user01 = new User("pronix74", 46, false);
let user02 = new User("halwa66", 52, true);
user01.printUser();
user02.printUser(); 

Listing 18.19     /examples/chapter018/18_4_2/script.js

To turn a function into a constructor function, you must first call it using the keyword new. The function then creates a new object and returns it. You don’t need to use return for a constructor function because the new object gets returned implicitly. The properties and methods within the constructor function are accessed via the keyword this.

18.4.3    Creating Objects via the Class Syntax

class User {
    constructor(nickname, age, admin) {
        this.nickname = nickname;
        this.alter = age;
        this.admin = admin;
    }
    print() {
        console.log("Nickname : " + this.nickname);
        console.log("Age    : " + this.age);
        console.log("Admin    : " + this.isAdmin());
    }
    isAdmin() {
        return this.admin ? "Yes" : "No";
    }
};

let user01 = new User("pronix74", 46, false);
let user02 = new User("halwa66", 52, true);
user01.print();
user02.print(); 

Listing 18.20     /examples/chapter018/18_4_3/script.js

The constructor() method is called implicitly when you create a new object instance of the corresponding class. Basically, the constructor() method corresponds to the constructor function from the previous section. Again, no return is required because the object instance is returned implicitly. Apart from that, creating a new object works the same way as with the constructor function with new, which implicitly calls the constructor() method of the class.

18.4.4    Accessing the Object Properties and Methods: Setters and Getters

You can use the dot notation or the bracket notation as you like. The only thing I’d recommend is that you keep it consistent. I personally prefer the dot notation. Nevertheless, there are individual cases in which you must use the bracket notation. This happens when properties or methods contain a hyphen, for example. Without the square bracket notation an error would occur because the minus sign would be interpreted as a subtraction operator.

In this way, you could now also change the properties of an object directly. If you want to change the nickname, for example, this could be done as follows:

user01.nickname = "woafu1974";
user01.age = "I won't tell";
user01.admin = "root"; 

You can already see from the example that it would now also be possible to enter any nonsense. In OOP, setter methods are usually used to change individual properties, while getter methods are used to retrieve individual properties. Especially with the setter methods, you can then still check the passed value for its validity.

Listing 18.21     /examples/chapter018/18_4/script.js

18.4.5    The Keyword “this”