Object-Oriented JavaScript
A brief introduction to OOP in JavaScript
Objects in JavaScript, as with many other programming languages, can be likened to objects in real life. A car is an example of a real world object. A car has properties, used to define the object’s characteristics, such as name or colour, and methods like accelerate or brake.
Objects group together a set of properties and methods to create a model. In JavaScript, properties can be seen as being similar to variables within an object, and methods are similar to functions.
Creating an object
Literal notation is often used when creating an object in JavaScript. Literal notation is used when creating a single object. The constructor notation can be used to create multiple objects. The properties and methods of an object are stored within a variable, this is used to identify the object.
In our example below, an object is created named hotel containing a number of properties containing values.
var hotel = {
name: "The Grand Hotel",
rooms: 104,
booked: 98
};Properties of an object can be accessed using dot notation. This uses the name of the object followed by a period — the member operator — followed by the name of the property.
var hotel = {
name: "The Grand Hotel",
rooms: 104,
booked: 98
};// The name of the hotel
var hotelName = hotel.name;
// The number of rooms
var hotelRooms = hotel.rooms;// OR square brackets can be used should you prefer
var hotelRooms = hotel['rooms'];
Properties within an object can also be updated or deleted from the object using dot notation or square brackets in a similar way to how we access the object properties.
var hotel = {
name: "The Grand Hotel",
rooms: 104,
booked: 98
};// The name of the hotel
var hotelName = hotel.name;// Change the name of the hotel
hotelName = "Park Hotel"
We may also want to delete a property or clear a property value from our hotel object, as below:
// Delete the property using the delete keyword
delete hotel.name;// Clear the value of the property
hotel.name = '';
Within the hotel object, a method will now be created to check for available rooms within the hotel. The method uses the keyword of this to indicate that the method is using the rooms and booked properties.
var hotel = {
name: "The Grand Hotel",
rooms: 104,
booked: 98, // Method to check room availability
checkAvailable: function() {
return this.rooms - this.booked;
}
};
The method within the object can be accessed using dot notation. This is similar to how we access the properties of an object.
var hotel = {
name: "The Grand Hotel",
rooms: 104,
booked: 98, // Method to check room availability
checkAvailable: function() {
return this.rooms - this.booked;
}
};// Call the method within the hotel object
var roomsAvailable = hotel.checkAvailable();
Objects — Constructor notation
Our previous object was created using Literal notation, which is fine should you just need the one object, but not if you need multiple objects. Constructor notation on the other hand, allows a JavaScript function to be used to make a template for creating multiple objects. Instances of the object can be created using the keyword new followed by a call to the function to create a new object.
The name of the constructor function usually begins with an uppercase letter, as with the example below:
function Hotel(name, rooms, booked) {
this.name = name;
this.rooms = rooms;
this.booked = booked; // Method to check room availability
this.checkAvailable = function() {
return this.rooms - this.booked;
};
}
An instance of this object can now be created to create two hotels that then inherit the properties and methods of the Hotel object. Values for each hotel property will be passed into the object within arguments. The keyword of this is used instead of the object name — Hotel — to indicate that the properties and methods belong to the object created from this function.
function Hotel(name, rooms, booked) {
this.name = name;
this.rooms = rooms;
this.booked = booked; // Method to check room availability
this.checkAvailable = function() {
return this.rooms - this.booked;
};
}// Create instance/instances of the Hotel object
var grandHotel = new Hotel("The Grand Hotel", 104, 98);
var parkHotel = new Hotel("Park Hotel", 98, 94);
Each time the function is called — using new Hotel — the values change as they are passed into the parameters of the function and then assigned to the properties. Both objects can then use the checkAvailable method defined within the function.
We can access the properties and methods using dot notation, as before.
function Hotel(name, rooms, booked) {
this.name = name;
this.rooms = rooms;
this.booked = booked; // Method to check room availability
this.checkAvailable = function() {
return this.rooms - this.booked;
};
}// Create instance/instances of the Hotel object
var grandHotel = new Hotel("The Grand Hotel", 104, 98);
var parkHotel = new Hotel("Park Hotel", 98, 94);// Properties of The Grand Hotel
var hotelOneName = grandHotel.name;
var hotelOneRooms = grandHotel.rooms;// Method of the The Grand Hotel to check room availability
var hotelOneAvailability = grandHotel.checkAvailable();
It’s now time to put everything together. Begin by creating a simple HTML webpage named index.html with the following code:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hotels example page</title>
</head>
<body><!-- Display hotel values from the js/hotels.js JavaScript file -->
<div id="hotel-name"></div>
<div id="hotel-rooms"></div>
<div id="hotel-available-rooms"></div><script src="js/hotels.js"></script>
</body>
</html>
The JavaScript code is now required to add the functionality to our page. Open a new folder in the same location as the index.html file just created. Name the folder js and add a new file named hotels.js within. This file needs to contain the JavaScript code, below. Refresh the HTML webpage to see the result.
// js/hotels.js
function Hotel(name, rooms, booked) {
this.name = name;
this.rooms = rooms;
this.booked = booked;
// Method to check room availability
this.checkAvailable = function() {
return this.rooms - this.booked;
};
}
// Create instance/instances of the Hotel object
var grandHotel = new Hotel("The Grand Hotel", 104, 98);
var parkHotel = new Hotel("Park Hotel", 98, 94);// Properties of The Grand Hotel
var hotelOneName = grandHotel.name; // Hotel name
var hotelOneRooms = grandHotel.rooms; // Hotel rooms// Method of the The Grand Hotel to check room availability
var hotelOneAvailability = grandHotel.checkAvailable();// Access the ID attribute of HTML elements and to display values
document.getElementById("hotel-name").innerHTML = hotelOneName;
document.getElementById("hotel-rooms").innerHTML = hotelOneRooms;
document.getElementById("hotel-available-rooms").innerHTML = hotelOneAvailability;
This has been a simple — and brief — introduction to Object-oriented JavaScript.
Happy coding :)
