24 Feb JavaScript Objects
Object represents real-life entities, for example, a Bike is an object. The object has State, Behaviour, and Identity:
- Identity: Name of Bike
- State (Attributes): The data of object Bike i.e. Color, Model, Weight, etc.
- Behavior (Methods): Behavior of object Bike like to Drive, Brake
Let us now see the representation, with Bike as an object:
Everything is an object in JavaScript, but to create an object, you do not need to create a class. JavaScript does not have the concept of classes like Java.
Create an Object in JavaScript
To create an object, you need to separate the name and its value by the colon as shown below. The name:value pair is called property:
|
1 2 3 |
object_name={name1:value1,name2:value2, name2:value2..nameN:valueN} |
Note: We have used the const keyword to create an object since it is generally and widely preferred. The cost introduced in ES6.
Let us now see an example to create an object in JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <h1>JavaScript Objects</h1> <p id="test"></p> <script> const student = {sid:102,sname:"Amit Diwan"} document.getElementById("test").innerHTML = "<p><strong>Student ID</strong> = "+student.sid+"</p><p><strong>Student Name</strong> = "+student.sname+"</p>"; </script> </body> </html> |
Output
Create an object with Object() Constructor and new
The new keyword can also be used to create an object in JavaScript. Here, we will use the Object() constructor as well to create an object. Let us see an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <body> <h1>JavaScript Objects</h1> <p id="test"></p> <script> // creating an object const student = new Object(); // assigning properties to an object student.sid = 102; student.sname = "Amit Diwan" document.getElementById("test").innerHTML = "<p><strong>Student ID</strong> = "+student.sid+"</p><p><strong>Student Name</strong> = "+student.sname+"</p>"; </script> </body> </html> |
Output
Access Object Properties
To access object properties in JavaScript, use the dot operator as well as square brackets. Let us see some examples:
Access Object Properties with the dot operator
The following is an example to access the student object properties using the dot operator in JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <body> <h1>JavaScript Objects</h1> <p id="test"></p> <script> const student = { sid:102, sname:"Amit Diwan" } // Access object properties using the dot operator document.getElementById("test").innerHTML = "<p><strong>Name of the student</strong> = "+student.sname; </script> </body> </html> |
Output
Access Object Properties with the square brackets
The following is an example to access the student object properties using the square brackets in JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <body> <h1>JavaScript Objects</h1> <p id="test"></p> <script> const student = { sid:102, sname:"Amit Diwan" } // Access object properties using square brackets document.getElementById("test").innerHTML = "<p><strong>Name of the student</strong> = "+student["sname"]; </script> </body> </html> |
Output
No Comments