Submodule 13.2: JavaScript classes

Introduction to JavaScript classes

Until now you have heard of classes only in the context of CSS. It is what we use to style multiple elements on a page.

However, JavaScript classes have nothing to do with style.

They introduced in the ES6 version of JavaScript and in general their role is to provide us with a more convenient syntax to create constructor functions. 

Using JavaScript classes, we can encapsulate all the "characteristics" of an object inside them.

You can imagine them as the template to create multiple objects.

Syntax of JavaScript classes

There are two ways to define a JavaScript class. 

The first way is by the so-called class declaration. In order to define a class with this way, you start by the keyword class followed by a name.

Example:

class Dishes {
constructor(category, price) {
    this.category = category;
    this.price = price;
  }
}

As you see, inside the class we have the constructor function. Inside the constructor is the place where we will initialize the properties of the object.

The constructor function is compulsory in the JavaScript classes. Even if you don't put it, the JavaScript will automatically create an empty one for you.

The second way to define a JavaScript class is by using the class expression. To do that, we create a variable to which we assign our class. A class expression can either be named or not.

Example of a named class expression:

 let myDishes = class Dishes {
constructor(category, price) {
    this.category = category;
    this.price = price;
  }
};

Example of unnamed class expression:

 let myDishes = class {
constructor(category, price) {
    this.category = category;
    this.price = price;
  }
};

Create objects with JavaScript classes

In the previous chapter, we saw the syntax to define a class. 

In order to actually create objects, we have to call the class. This is done in similar way with what we show on "Submodule 6.3: Constructor functions". We use the new keyword followed by a call to the class name.

For example, in order to create an object for the class we created in the previous chapter:

class Dishes {
constructor(category, price) {
    this.category = category;
    this.price = price;
  }
}

we will write:

 let dish1;
dish1 = new Dishes  ("sweets", 5);

Using the above syntax, we can create as many new objects as we want. They will all have the properties defined inside their class.

What do you think will be the output of the console if you type dish1;? To find the answer, go to your console and copy/paste both the class and the new object created.

Answer:

Methods inside JavaScript classes

Since JavaScript classes act as the template to create new objects, they can also contain methods.

An example of a class with a method would be:

class Dishes {
constructor(category, price) {
    this.category = category;
    this.price = price;
  }
output (){
console.log("This belongs to" + " " +this.category + " " + "and costs" + " " + this.price);
}
}

From the above example, we see that the methods inside classes do not start with function. We define methods just by giving them a name followed by (). 

In order to call the method in an object that we have created, the syntax is:

objectName.methodName();

For example, for our previous example:

 let dish1;
dish1 = new Dishes  ("sweets", 5);

We can call the output method by writing:

 dish1.output();

What do you think, will be the console output of the above code?

Answer:

Examples

• Classes, Properties and Methods
• Arrays of objects

See more about JavaScript classes

Exercise

Exercise

1. Right click to Download the file and save it as exersice13.2.html in the folder "yourNameWEB2JS". Open the file in your browser to see the results.
2. Open the file in your editor, and replace the loop statement with other statements (for, while etc). You can also apply the for ... of statement. We want to have the same results.

Answer:

for (let i=0; i<users.length; i++) {
  let y=new User (users[i])
  y.sayHi();
  console.log(y);
 }