You remember that we talked about simple objects earlier in this course. For example, a user object that has a name and an age:
1
2
3
4
5
6
let user = {
name: "Garrit",
age: 38,
};
console.log(user.name);
Simple objects combine multiple variables that belong together in a single object. This object gives a context to the variables.
But variables are not the only thing we can have in an object, we can also add functions to an object. And we will have a closer look at this after some theory.
An object has attributes and methods. That means, and object can contain variables and functions.
Every object belongs to a class. You can think of a class as a template or a blueprint for objects. And from this class, you can create an object. This process is called instantiation or construction. In contrast to this, classes are defined, not created.
Rememeber:
- Objects are created
- Classes are defined
Objects are instances of a specific class, and you can instantiate a class as often as necessary. That means, you can create as many objects from a class as you need.
That means, an object is instantiated from a class.
Object-oriented programming
Let’s have have a closer look at some terms that are used often when talked about object-oriented programming.
Abstraction
That means, you should hide or remove all data that is not necessary to reduce complexity. If you want to create an object for a spaceship for example, you don’t need everything that a real spaceship has. You can just use what you need to achieve your goal.
Encapsulation
Encapsulation means that you putting everything you need for your object together in the same context. The functions and the variables. By doing that, you create an interface for other objects to use. For example, methods that another object can call.
It should be build in a way that an object from the outside, doesn’t need to understand how it works internally.
Modularity
This is the process of decomposing a bigger problem, for example your program, or a part of your program, into smaller modules. This reduces the complexity of the problem you are trying to solve.
An example could be our Lunar Lander, by making it modular, we can think about the spaceship independently of the rest of the program.
Inheritance
A class can be the children of another class. That means it can inherit methods and attributes from the parent class.
An example could be different cars. You start with a generic class that represents a car and next you create a race car and a truck that both inherits from the generic car class.
Object-oriented programming in JavaScript
After the theory, let’s have a look at how to use object-oriented programming in JavaScript.
In this example, we will create a class for a Person, that will have a firstName and a lastName attribute.
1
2
3
4
5
6
7
8
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
let me = new Person("Garrit", "Schaap");
If you look at the example, you notice some new keywords. First, the class keyword. This will define a new class. After the keyword, we write the class name. It will be UpperCamelCase, always starting with an uppercase letter, to distinguish it from variables. After the class name, we use the curly braces to open up the body of the class. Every thing inside the curly braces will belong to the class.
Next we use the constructor keyword to define the construction method. This method is called, when an object is initialized from a class. Here we need to define all attributes (our variables inside a class), even if they are not used as parameters.
Inside the constructor, we don’t define a variable with the let, const or var keyword, as we use to do outside of a class, but instead we are using the keyword this. The keyword this refers to the context of a specific object that will be created from this class. Everytime we want to use a variable inside of our class that we defined in the constructor, we have to use this to refer to it.
Last but not least, we can create a new object of our class by using the new keyword followed by the class name and the opening and closing brackets. If our constructor awaits parameters, we have to fill them inside the brackets, as you know it from calling a function. You already saw the new keyword in the chapter about loading data.
Creating mulitple objects
As mentioned earlier, you can create as many objects from a class as you want. In this example, we create two objects me and donald:
1
2
3
4
5
6
7
8
9
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
let me = new Person("Garrit", "Schaap");
let donald = new Person("Donald", "Duck");
Attributes
Lets have a closer look at attributes.
- An object has a given attribute
- An attribute is also called property
- And a property is a variable that belongs to a specific object
These definitions can vary between different programming languages. But you can think of an attribute as a variable that belongs to a specific object.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
email() {
return this.firstName + "." + this.lastName + "@ju.se";
}
}
let me = new Person("Garrit", "Schaap");
console.log(me.firstName);
As you can see in the example above, you can access an attribute with the dot syntax that you already know.
Methods
I told you that an object has attributes and methods. Methods are functions that are in the context of an object.
- An object can execute a certain method
- Objects can communicate with the help of methods
In this example, I add a method to return an email from a specific person:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
email() {
return this.firstName + "." + this.lastName + "@ju.se";
}
}
let me = new Person("Garrit", "Schaap");
let donald = new Person("Donald", "Duck");
console.log(me.email());
console.log(donald.email());
As you notice, we don’t use the function keyword in front of a method name. The rest of the syntax stays the same.
If we want to access a variable inside a function, we have to use the this keyword. If we want to use a variable just in the context of the function, for example a counter variable for a loop, we can use the let or const keyword to define it.
Inheritance
As a last thing, we want to take a look at how inheritance works in JavaScript.
If we use the Person class from the previous examples, and we want to create a new class, that just have a small change or addition, but otherwise shares all of the rest with our Person class, we can use inheritance.
After using the keyword class to define the class followed by its name, we use the extends keyword followed by the class that should be extended. That is our parent class. In this example, we define the class Student that extends the class Person. Student is now a child-class of Person and inherits all of its functionality.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.personType = "person";
}
email() {
return this.firstName + "." + this.lastName + "@ju.se";
}
}
class Student extends Person {
constructor(firstName, lastName) {
super(firstName, lastName);
this.personType = "student";
}
}
In the example above, we just change the new introduced personType to student. But we can also override a method. In the next example, we override the email method to return a student email address.
1
2
3
4
5
6
7
8
9
10
11
12
class Student extends Person {
constructor(firstName, lastName) {
super(firstName, lastName);
}
email() {
return this.firstName + "." + this.lastName + "@student.ju.se";
}
}
let teacher = new Person("Garrit", "Schaap");
let student = new Student("Some", "Name");