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>

Copy the Code and Run it Here

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>

Copy the Code and Run it Here

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>

Copy the Code and Run it Here

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>

Copy the Code and Run it Here

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>

Copy the Code and Run it Here

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.