JavaScript Objects
JavaScript Objects
In this article you learn about the JavaScript Objects, what is objects, method of objects and Accessing Objects Properties, here you learn all the topic one by one with programming examples.
What is Object?
In JavaScript, object is an entity having properties and method. For examples; Books, pen, laptop etc. Simple we can say that an object is a collection of related data or functionality. JavaScript is an object-based language, everything is an object in JavaScript.
Syntax of an Object;
<!DOCTYPE html> <html> <head><title>Objects Syntax</title> </head> <body> <script> var boy = { firstName: "Shubham", lastName: "Verma", age: 30, hobbies:["coding", "gaming"] } </script> </body> </html>
Above you can see the simple syntax of an object, here the boy objects contain properties. Each property has a name (e.g., name, age) and its value is (e.g., “Shubham Verma”, 20). All the properties are separated by commas (,).
Method in an Objects
As we now a method is also containing the functions (methods), see the syntax of method in an object. A method is a collection of properties and or methods.
<!DOCTYPE html> <html> <head> <title>Object in Method</title> </head> <body> <script> var boy = { firstname: "Shubham", lastname: "Verma", age: 20, hobbies:["coding", "gaming"], showName: function(){ alert(this.firstname); }, sowAge: function() { alert(this.age);} } </script> </body> </html>
Accessing Object’s Properties
There are two ways to access an object’s members (properties and methods). And these are the (Dot Notation and Bracket Notation), see below programming examples of these notations.
The Dot Notation
The Dot Notation uses a dot (.) to access an object’s members. First write the variable, then name of a property or method. Let’s see the programming example to understand better.
<!DOCTYPE html> <html> <head> <title>Dot Notation</title> </head> <body> <p id="show"></p> <script> var boy = { firstname: "Shubham", lastname: "Verma", age: 20, hobbies:["Coding"], } document.getElementById("show").innerHTML = boy.firstname + "</br>" + boy.age + "</br>" + boy.hobbies[0]; </script> </body> </html>
Output:
Above you can see the programming output, and programming we use the “dot notation” to access the objects of members.
The Bracket Notation
In Bracket Notation we can use square bracket to access an object’s members. See below programming examples to better understanding.
<!DOCTYPE html> <html> <head> <title>Bracket Notation</title> </head> <body> <p id="show"></p> <script> var boy = { firstname: "Shubham", lastname: "Verma", age: 20, hobbies:["Coding"], } document.getElementById("show").innerHTML = boy["firstname"] + "</br>" + boy["age"] + "</br>" + boy["hobbies"][0]; </script> </body> </html>
Output;
Above you can see in programming example, we use the square bracket to access the objects of members.
The this Keyword
The “this” keyword refers to an objects that is executing the current piece of code, it is a reference variable refers to different objects depending to how it is used. See below a programming example to understand better.
<!DOCTYPE html> <html> <head> <title>this Keyword</title> </head> <body> <button onclick="boy.showDetails()"> Show Detail</button> <script> var boy = { firstname: "Shubham", lastname: "Verma", age: 20, hobbies:["Coding"], showDetails: function(){ alert(this.firstname + " is " + this.age + " years old."); } }; </script> </body> </html>
Output;
Above you can see the programming examples of “this” keyword, we used the “this” keyword to access the members of an objects.
So, you learned in this post, all about the JavaScript Objects , covers all the topic with programming examples. And I hope you guys, you read this tutorial better and learn something new. If you have any doubt, you can ask in the comment section.
Read Also –
1 Comment
zoritoler imol · December 31, 2022 at 8:56 pm
I do consider all of the concepts you have offered for your post. They’re very convincing and will definitely work. Nonetheless, the posts are very brief for novices. May just you please extend them a little from next time? Thanks for the post.