JavaScript Objects

In JavaScript, an object is a complex data type that stores data in the form of key-value pairs. It can contain properties and methods that can be accessed and manipulated using various operations. In this article, we will explore JavaScript objects and learn how to create, access, and modify them.

Creating Objects

There are several ways to create objects in JavaScript, but the most common way is to use object literals. An object literal is a comma-separated list of name-value pairs enclosed in curly braces.

const person = {
  name: "John",
  age: 30,
  gender: "male",
  occupation: "developer"
};

In the example above, we have created an object called person with four properties: name, age, gender, and occupation. Each property is separated by a comma and consists of a key and a value. The key is a string that identifies the property, and the value can be of any data type.

Accessing Object Properties

Once we have created an object, we can access its properties using dot notation or bracket notation.

console.log(person.name); // Output: John
console.log(person["age"]); // Output: 30

In the example above, we have accessed the name and age properties of the person object using both dot notation and bracket notation.

Modifying Object Properties

We can modify the properties of an object by assigning a new value to the property.

person.age = 35;
person.occupation = "designer";

console.log(person.age); // Output: 35
console.log(person.occupation); // Output: designer

In the example above, we have modified the age and occupation properties of the person object by assigning new values to them.

Adding Object Properties

We can add new properties to an object by assigning a new value to a non-existing property.

person.city = "New York";

console.log(person.city); // Output: New York

In the example above, we have added a new property called city to the person object by assigning it a value of “New York”.

Deleting Object Properties

We can delete properties from an object using the delete keyword.

delete person.gender;

console.log(person.gender); // Output: undefined

In the example above, we have deleted the gender property from the person object using the delete keyword.

Object Methods

An object method is a function that is stored as a property of an object. We can define object methods in the same way we define object properties, by using object literals.

const rectangle = {
  width: 10,
  height: 5,
  area: function() {
    return this.width * this.height;
  }
};

console.log(rectangle.area()); // Output: 50

In the example above, we have defined an object called rectangle with three properties: width, height, and area. The area property is a function that calculates the area of the rectangle using the this keyword to refer to the width and height properties of the rectangle object.

In conclusion, JavaScript objects are a powerful and versatile feature that allows us to store and manipulate data in a structured and organized way. With the knowledge gained from this article, you can now create, access, and modify objects with ease. By leveraging the power of objects, you can write more efficient and maintainable code that is easy to read and understand.