Two similar objects on one page
I'm working through the JavaScript book and am currently looking at creating objects with Literal Notation.
I am given this code:
var hotel = {
name: 'Quay',
rooms: 40,
booked:25,
checkAvailability: function() {
return this.rooms - this.booked;
}
}
var hotelName = document.getElementById('hotel-name');
hotelName.textContent = hotel.name;
var freeRooms = document.getElementById('free-rooms');
freeRooms.textContent = hotel.checkAvailability();
I understand this perfectly.
Then he tells me, "If you had two objects on the same page, you would create each one using the same notation, but store them in variables with different names."
I tried to create this in JSFiddel but doesn't seem to work and I'm not sure why. Can someone please post a quick example and explanation. This would be very helpful.
EDIT :: I'm not sure if it tells me that I will write another object in enirly, or put some variables inside an existing object that reference the name / rooms, etc.
Thanks in advance.
Help: John Duckett - JavaScript and JQuery
source to share
You can use this as a class so that you can reuse the hotel object by typing new Hotel(name, rooms, booked)
function Hotel(name, rooms, booked) {
this.name = name;
this.rooms = rooms;
this.booked = booked;
}
Hotel.prototype = {
checkAvailability: function() {
return this.rooms - this.booked;
}
}
var hotel = new Hotel('Quay', 40, 25);
var hotel2 = new Hotel('Hotel2', 50, 45);
var hotelName = document.getElementById('hotel-name-1');
hotelName.textContent = hotel.name;
var freeRooms = document.getElementById('free-rooms-1');
freeRooms.textContent = hotel.checkAvailability();
var hotelName = document.getElementById('hotel-name-2');
hotelName.textContent = hotel2.name;
var freeRooms = document.getElementById('free-rooms-2');
freeRooms.textContent = hotel2.checkAvailability();
<div id='hotel-name-1'></div>
<div id='free-rooms-1'></div>
<br>
<div id='hotel-name-2'></div>
<div id='free-rooms-2'></div>
source to share
Well, you can store an object that is the same in a structure, but with different values. Let me explain this by wrapping your example object in a function that pumps out different hotels, with the same structure
function hotel(name, rooms, booked) {
var hotel = {
name: name,
rooms: rooms,
booked: booked,
checkAvailability: checkAvailability
};
return hotel;
}
//lets seperate the checkAvailability function from the function so it can be reused.
function checkAvailability() {
return this.rooms - this.booked;
}
var hotel1 = hotel("quay", 40, 25);
var hotel2 = hotel("Ocean View", 50, 20);
console.log(hotel1);
console.log(hotel2);
console.log(hotel1.checkAvailability());
console.log(hotel2.checkAvailability());
source to share
And another example of using your hotel with different instances via es6 classes:
class Hotel {
constructor(name, rooms, booked) {
this.name = name;
this.rooms = rooms;
this.booked = booked;
}
get checkAvailability() {
return this.rooms - this.booked;
}
}
const hotelOne = new Hotel('First', 44, 21),
hotelTwo = new Hotel('Second', 21, 5);
console.log(hotelOne.checkAvailability);
console.log(hotelTwo.checkAvailability);
source to share