Introduction :
In any programming language when we need to code real-world entities, we make use of variables. For most of the scenarios, we need a variable that can hold data which represents the collection of properties.
For instance, if we have to create an online portal for the car industry, we have to model Car as an entity that can hold a group of properties.
Such type of variable in JavaScript is called an Object. An object consists of state and behavior.
State of an entity represents properties that can be modeled as key-value pairs.
The Behavior of an entity represents the observable effect of an operation performed on it and is modeled using functions.
Example: Car is an object.
State of Car object:
The behavior of Car object:
JavaScript objects are categorized as following :
Let us now continue learning how to create our own objects.
In JavaScript objects, the state and behavior is represented as a collection of properties
Each property is a [key-value] pair where key is a string and value can be any JavaScript primitive type value, an object or even a function.
JavaScript objects can be created using 2 different approaches.
Let's see each of them in detail.
Creating object using Literal notation :
Objects can be created using object literal notation. Object literal notation is a comma-separated list of name-value pairs wrapped inside curly braces. This promotes encapsulation of data in a tidy package. This is how the objects in JavaScript are created using literal notation:
Invocation :
Once the object has been created, it's variables or methods can be accessed in 2 different ways: dot operator or a bracket operator.
Demo :
<html>
<head>
<style>
div#maincontent {
height: 150px;
width: 500px;
border: 1px solid #CEE2FA;
text-align: left;
color: #08438E;
font-family: calibri;
font-size: 20;
padding: 5px;
}
div#heading {
text-decoration: bold;
text-align: center;
margin-top: 80px;
width: 500px;
border: 1px solid #CEE2FA;
text-align: center;
color: #08438E;
background-color: #CEE2FA;
font-family: calibri;
font-size: 20;
padding: 5px;
}
h2 {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="heading">
<h2>Booking Summary</h2>
</div>
<div id="maincontent">
<script>
var seats = 2;
var cost = 0;
var discountedCost;
var discount = 10;
const percent = 100;
var movie1 = {
costPerTicket: 320
};
var customer1 = {
seats: 4
};
calculateCost(customer1, movie1);
function calculateCost(customer1, movie1) {
var tickets = customer1.seats;
var price = movie1.costPerTicket;
var discountedCost;
if (tickets > 2 && tickets <= 6) {
document.write("Cost per ticket is: Rs." + price + "<br>");
document.write(
"<br> Congratulations! you are eligible for festive discount!!<br><br>"
);
calculateDiscount(tickets, price);
} else if (tickets > 6) {
document.write(
"<br>Oops!You cannot book more than 6 tickets!!<br>"
);
} else {
document.write("Cost per ticket is: Rs." + price + "<br>");
cost = tickets * mov.costPerTicket;
document.write(
"<br><br>" +
"For " +
tickets +
" " +
"tickets, you need to pay: <b>Rs." +
cost +
"</b><br>"
);
}
}
function calculateDiscount(tickets, price) {
var discount = 10;
const percent = 100;
document.write("Actual Total Cost is Rs. " + tickets * price);
for (index = 1; index <= tickets; index++) {
discountedCost = price - (discount / percent) * price;
cost = cost + discountedCost;
discount = discount + 10;
}
document.write(
"<br>For " +
tickets +
" " +
"tickets, DISCOUNTED cost is Rs." +
cost
);
}
</script>
</div>
</body>
</html>