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.