JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a property is an association between a name (or key) and a value.
Objects are variable that contain several values. JavaScript objects are containers for named values, called properties and methods.
In JavaScript, almost “everything” is an object.
• Booleans can be objects (if defined with the new keyword)
• Numbers can be objects (if defined with the new keyword)
• Strings can be objects (if defined with the new keyword)
• Dates are always objects
• Arrays are always objects
• Functions are always objects
• Objects are always objects
• All JavaScript values, except primitives, are objects.
An empty object can be created using one of two syntaxes:
a. let myuser = new Object(); // “object constructor” syntax, almost like Java
b. let myuser = {}; // “object literal” syntax
Object properties-
We can immediately put some properties into {...} as “key: value” pairs:
let user = { // an object
name: “Meha”, // key “name” contains value “Meha”
age: 23 // key “age” contains value 23
};
A property has a key (also known as “name” or “identifier”) before the colon “:” and a value to the right of it. In the user object, there are two properties:
a. The first property has the name “name” and the value “Meha”.
b. The second one has the name “age” and the value 23.
Example:
<!DOCTYPE html>
<html>
<body>
<p>building a JavaScript Object.</p>
<p id=”show”></p>
<script>
var employee ={
firstName: “Meha”,
age: 23,
designation: “Programmer”,
address: “Delhi”
};
document.getElementById(“show”).innerHTML = employee.firstName + “ is a ” + employee.designation + “ and “ + employee.age + “ years old.”;
</script>
</body>
</html>
Output: Meha is a Programmer and 23 years old.
Example:
<!DOCTYPE html>
<html>
<body>
<p>
There are two different ways to access an object property:
</p>
<p>You can use person.property or person["property"].</p>
<p id="show"></p>
<script>
var employee ={
firstName: “Meha”,
age: 23,
designation: “Programmer”,
address: “Delhi”
};
document.getElementById(“show”).innerHTML = employee.firstName + “ is a ” + employee.designation + “ and ” + employee.age + “ years old.” + “\n”;
document.getElementById(“show”).innerHTML = employee[“firstName”] + “ is a ” + employee[“designation”] + “ and ” + employee[“age”] + “ years old.” + “\n”;
</script>
</body>
</html>
Output:
Meha is a Programmer and 23 years old.
Meha is a Programmer and 23 years old
Object methods-
Methods are the functions that let the object do something or let something be done to it. There is a small difference between a function and a method – at a function is a standalone unit of statements and a method is attached to an object and can be referenced by this keyword.
Methods are useful for everything from displaying the contents of the object to the screen to performing complex mathematical operations on a group of local properties and parameters.
Example:
Following is a simple example to show how to use the write() method of document object to write any content on the document.
document.write (“This is text is displayed using JavaScript document.write method”);
User-defined Objects-
In spite of in built objects you can build your own personalized objects in JavaScript. All user-defined objects and built-in objects are descendants of an object called Object.
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.
In the following example, the constructor methods are Object(), Array(), and Date(). These constructors are built-in JavaScript functions.
a. var employee = new Object();
c. var cars = new Array(“Maruti”, “Tata”, “Hyundai”);
d. var day = new Date(“November 17, 2010”);
The object() constructor-
A constructor is a function that creates and initializes an object. JavaScript provides a special constructor function called Object() to build the object. The return value of the Object() constructor is assigned to a variable.
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.
Example 1: How to build an Object.
<html>
<head>
<title>Building User-defined objects</title>
<script type= “text/JavaScript”>
var book = new Object(); // Create the object
book.title = “JavaScript”; // Assign properties to the object
book.publisher = “Pearson”;
</script>
</head>
<body>
<script type= “text/JavaScript”>
document.write(“Book Title is : ” + book.title + “<br>”);
document.write(“Book Publisher is : ” + book.publisher + “<br>”);
</script>
</body>
</html>
Output:
Book Title is : JavaScript
Book Publisher is : Pearson
Example 2:
Build an object using function and this keyword
This example demonstrates how to create an object with a User-Defined Function. Here this keyword is used to refer to the object that has been passed to a function.
<html>
<head>
<title>User-defined objects using function and this keyword</title>
<script type= “text/JavaScript”>
function book(title, publisher){
this.title = title;
this.publisher = author;
}
</script>
</head>
<body>
<script type= “text/JavaScript”>
var myBook = new book(“JavaScript”, “Pearson”);
document.write(“Book Title is : ” + myBook.title + "<br>");
document.write(“Book Publisher is : ” + myBook.publisher + "<br>");
</script>
</body>
</html>
Output:
Book Title is : JavaScript
Book Publisher is : Pearson
Example 3:
Accessing objects using for … in loop
<html>
<body>
<h2>JavaScript object</h2>
<p>The for .. in statement to access properties of an object.</p>
<p id= “output”></p>
<script>
var txt = “”;
var book = {title: “JavaScript”, publisher: “Pearson”, price: 350};
var info;
for (info in book) {
txt = txt + book[info] + “ ”;
}
document.getElementById(“output”).innerHTML = txt;
</script>
</body>
</html>
Output:
JavaScript object
The for .. in statement to access properties of an object.
JavaScript Pearson 350