JavaScript Objects
JavaScript Objects is one of the built-in data types, that are used to store key-value pairs.
Objects in JavaScript are Variables too, but they can contain many values. Below is an example of a JavaScript Object:
Example
<script> let a = { Name: "John", Age: 18, Country: "USA", }; </script>
In an above Example, we have created an object a
, and declare several properties inside it. The properties are Name
, Age
and Country
and each property has a specific value.
Access Properties of an Object
In JavaScript, we can access the properties of an object using Dot Notation and Bracket Notation.
Dot Notation
To access the properties of an object using the dot notation, we have to define the object name and dot (.) followed by the property name. Here is the Syntax:
document.write(objectName.PropertyName);
To understand it more clearly, we will write a code in a below example and access the property of an object.
Example
<script> let a = { Name: "John", Age: 18, Country: "USA", }; // access name property of an object a. document.write(a.Name); </script>
Bracket Notation
To access the properties of an object using the bracket notation, we have to specify the object name, square brackets [] and a property name as a string. Here is the Syntax:
document.write(ObjectName["PropertyName"]);
To understand it more clearly, we will write a code in a below example and access the property of an object using the bracket notation.
Example
<script> let a = { Name: "John", Age: 18, Country: "USA", }; // access name property of an object a. document.write(a["Name"]); // Similarly we can access other properties document.write(a["Age"]); document.write(a["Country"]); </script>
JavaScript Nested Objects
JavaScript Objects can also contain another object. Nested objects are used when we need to represent complex data structures that have multiple levels of information.
Below is an example of a Nested Object in JavaScript.
Example
<script> let a = { FirstName: "John", LastName: "Doe", Age: 18, address: { street: "123 Main St", city: "LA", state: "California", zip: "12345" }, }; </script>
In an above example we have created an “address” object inside the “a” object. Now to access the properties of an address object we have to type the main objects name that is “a” followed by dot (.)
, then nested objects name that is “address” followed by dot (.)
and the the property name. Here is an Example:
Example
<script> let a = { FirstName: "John", LastName: "Doe", Age: 18, address: { street: "123 Main St", city: "LA", state: "California", zip: "12345" }, }; // access the property of "address" object document.write(a.address.city); //output: LA document.write(a.address.state); //output: California </script>
JavaScript Object Methods
In JavaScript, object methods are functions that are defined as properties of an object. Here is an example of an object that contains a method:
Example
let person = { FirstName: "John", LastName: "Doe", Age: 30, fullName: function() { return this.firstName + " " + this.lastName; } };
In an above example, the person
object has several properties and a method. The properties are FirstName
, LastName
, and Age
, and a method is fullName
. The fullName
method returns a string that combines the firstName
and lastName
properties of the object.
To call an object method, we will use dot notation or bracket notation, followed by parentheses ()
to invoke the function. Here is an example:
Example
<script> let person = { FirstName: "John", LastName: "Doe", Age: 30, fullName: function() { return this.FirstName + " " + this.LastName; } }; document.write(person.fullName()); // Outputs: John Doe </script>
JavaScript this
Keyword
In JavaScript, the this
keyword refers to the current object, which is the object that the code is currently executing inside. this
is a dynamically scoped keyword, meaning its value depends on how and where it is used in the code.
In the previous example, person
is an object that has properties for FirstName
and LastName
, as well as a method called fullName
. Inside the fullName
method, we use the this
keyword to refer to the current object, which is person
. When we call the fullName
method using dot notation, the this
keyword is set to person
, so the method returns the person’s full name, “John Doe”.
The value of this
depends on how a function is called. When a function is invoked as a method of an object, this
is set to the object itself. When a function is called as a regular function, this
is set to the global object. And when a function is called with the new
keyword to create a new object, this
is set to the new object.
In a below example let’s write a code to illustrate the difference between calling a function as a method and calling it as a regular function:
<script> let person = { FirstName: "John", LastName: "Doe", fullName: function() { document.write(this === person); // Outputs: true } }; person.fullName(); // Output: true let fullNameFunction = person.fullName; fullNameFunction(); // Output: false </script>
In an above example, we define a fullName
method on the person
object, and then we call it both as a method of the person
object and as a regular function.
Inside the fullName
method, we use the this
keyword to check whether it is equal to person
. When we call person.fullName()
, the this
keyword is set to person
, so the method outputs true
. However, when we assign the fullName
method to a variable and call it as a regular function, the this
keyword is set to the global object, so the method outputs false
.
Share This Post!