Javascript Classes & Objects (Object Oriented Programming) Tutorial
In this Javascript tutorial we learn how to group data and behavior into single entities called classes.
We cover what classes and their objects are, how to declare a class, create a new instance of a class and how to access the members of a class.
We also cover class expressions, how to declare and use them.
Object Oriented Programming is a difficult topic for new programmers to understand. It’s okay if this section of the course takes you longer to understand than the others.
Object Oriented Programming: Classes & Objects
A popular approach to solving problems in most programming languages, is objected oriented programming, or OOP for short.
Object oriented programming is when we treat both data and behavior as a single, reusable unit. We try to model our application after entities in the real world by using classes and objects.
What is a class
A class is a blueprint, or recipe for an object. A class defines what every instance of it should contain. As an example, let’s consider a pizza.
This is our recipe, our class for a pizza. Not every pizza (instance of our class) will have the same toppings, but it will have toppings.
Classes may contain attributes (properties), as well as methods (functions). As an example, let’s consider a database of users.
Every user has attributes like:
- A name
- An age
- An address
- A profile picture
- An email
- A password etc.
Every user has functionality available to them, like:
We combine our attributes and functionality into this single entity, a class. Every instance of a user will follow the pattern set up in the class but with different attributes.
What is an object
When we use the term object, we’re referring to an instance of a class. A single pizza, or user, that was created from the class blueprint.
Consider an array, an array is a class. When we create an array, we’re actually creating an instance, or object, of the array class.
Once we’ve created an object, we have access to the properties and functions that Javascript has declared inside the array class. Like array.length or array.splice().
In the example above, we’ve created an instance of the array class, an object called shopping_list. Now that we have an object, we have access to its properties and methods. We can create as many instances of a class as we need, each with their own different values, and each having the array.length property. How to create a class
To create a class we use the class keyword, followed by a unique name and a code block.
In the example above, we declare a class called Employee, with one attribute and one method (function). We should note two conventions typically used when naming classes:
- We name our classes in the singular. Instead of a class named Cars, we call it Car
- We use Pascal casing. The first letter of the name is uppercase and each new word in the name has its first letter in uppercase. We don’t separate words with underscores.
We don’t have to name our classes this way but it is a good convention to follow. Some enterprises may require you to follow conventions such as these, or their own. In this tutorial series we will be using this convention.
How to instantiate an object
To create an object instance of a class, we use the new keyword, followed by the name of the class and a pair of open and close parentheses. We assign the new instance of the class to a variable to be able to use it.
The parentheses are used with a class constructor, we we explain in more detail further along in this tutorial.
In the example above we create a new object of the Person class called p1. The variable can now be used to access the properties and methods of the person class. Unlike functions, classes need to be declared before they can be instantiated or used. The instantiation simply needs to be below the declaration to avoid errors.
How to access class properties & methods (members)
We access class properties or methods with dot notation. First we write the object name, followed by a dot operator ( . ) and the property or method we want to access.