Home » JavaScript » JavaScript Objects

JavaScript Objects overview

JavaScript Objects - JavaScript is an Object Oriented Programming (OOP) language. The features of object oriented programming language:

  • Encapsulation: Capability to store related information, whether data or methods, together in an single entity(object).
  • Aggregation: Aggregation is a special form of association. It is a relationship between two classes like association, however its a directional association, which means it is strictly a one way association. It represents a HAS-A relationship.
  • Inheritance: Capability of a class to transfer or retain properties to and from other classes.
  • Polymorphism: Capability to write one function or method that works in a variety of different ways,i.e., using one function in many ways.

Objects are composed of attributes. If an object contain any function, then that function is called as a method of the object otherwise, the attribute is considered a property.


There are different ways to create new objects:

  • Using an object literal.
  • With the keyword new.
  • Define an object constructor, and then create objects of the constructed type.
Syntax
object={property1: value1, property2: value2 . . . . .}

JavaScript Object Literal

Using an object literal, both definition and creation of an object is done in one statement.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Objects </title>
</head>
<body>
<p>Creating a JavaScript Object.</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Snow", age:30, eyeColor:"brown"}; document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName + " is " + person.age + " years old" + " and " + person.eyeColor + " eye color.";
</script>
</body>
</html>

Output

JavaScript Objects

Creating a JavaScript Object.


JavaScript Keyword new

The new operator is used to create an instance of an object. To create an object, the new operator is followed by the constructor method.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript New Keyword </title>
</head>
<body>
<p id="demo"></p>
<script>
var person = new Object();
person.firstName = "John";
person.lastName = "Snow";
person.age = 50;
person.eyeColor = "blue";
document.getElementById("demo").innerHTML = person.firstName + person.lastName +" is " + person.age + " years old" + " and his eye color is " + person.eyeColor + ".";
</script>
</body>
</html>

Output

JavaScript New Keyword


JavaScript Object Constructor

A constructor is a function that is used to create and initialize an object. First a constructor is created then the return value of constructor is assigned to different variables which act as an object.

The variable contains a reference to the new object. The properties assigned to the object are not variables and are not defined with the var keyword.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Object Constructor </title>
</head>
<body>
<p id="demo"></p>
<script>
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
var mybrother = new person("John", "Snow", 30, "blue");
var mysister = new person("Jennifer", "Winget", 25, "green");
document.getElementById("demo").innerHTML = "My brother is " + mybrother.age + ". My sister is " + mysister.age; </script>
</body>
</html>

Output

JavaScript Object Constructor


JavaScript Object Method

The methods are functions which are persent inside an object and can be referenced by the this keyword. Methods are used to perform any special kind of operation coded inside a function block.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Object Method </title>
<script type="text/javascript">
// Define a function which will work as a method
function addPrice(amount){
this.price = amount;
}
function book(title, author){
this.title = title;
this.author = author;
this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type="text/javascript">
var myBook = new book("Everyone has a Story", "Savi Sharma");
myBook.addPrice(200);
document.write("Book Title is : " + myBook.title + "<br>");
document.write("Book Author is : " + myBook.author + "<br>");
document.write("Book Price is : " + myBook.price + "<br>");
</script>
</body>
</html>

Output

JavaScript Object Method

JavaScript Object Deletion

The delete operator is used to completely remove properties of an object.

Setting the property to undefined or null only changes the value of the property, It does not remove property from the object.So, only delete operatorcan remove an object.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Object Delete </title>
</head>
<body>
<script>
var person = {
name: "Kuldeep",
age: 25,
gender: "Male",
displayName: function() {
alert(this.name);
}
};
// Deleting property
delete person.age;
document.write(person.age);
</script>
</body>
</html>

Output

JavaScript Object Delete

Note: The delete operator only removes an object property or array element. You should avoid delete operator for deleting an array element, as it doesn't change the array's length, it just leaves a hole in the array.











Follow Us: