You'll be reading:
Objects in JavaScript are fundamental data structures that allow you to store and organize related data and functionality together. An object is a collection of key-value pairs, where each key represents a property name, and each value represents the associated data or functionality. We will discuss objects, properties, methods, and how to work with them in JavaScript.
- Creating Objects:
You can create objects in JavaScript using two approaches: object literals and the Object
constructor.
const person = { name: 'John Doe', age: 25, address: '123 Main St', };
const person = new Object(); person.name = 'John Doe'; person.age = 25; person.address = '123 Main St';
- Accessing Object Properties:
Object properties can be accessed using dot notation (object.property
) or bracket notation (object['property']
).
console.log(person.name); // Output: John Doe
console.log(person['age']); // Output: 25
- Modifying Object Properties:
Object properties can be modified by assigning a new value to them.
person.age = 30;
person['address'] = '456 Elm St';
- Object Methods:
In JavaScript, objects can also have methods, which are functions associated with the object. Methods can perform actions or provide functionalities specific to the object they belong to.
const person = {
name: 'John Doe',
age: 25,
address: '123 Main St',
greet: function () {
console.log(`Hello, my name is ${this.name}.`);
},
};
person.greet(); // Output: Hello, my name is John Doe.
In the example above, the greet
method of the person
object logs a greeting message that includes the person’s name.
this
Keyword:- Object Methods vs. Functions:
The this
keyword refers to the current object instance within an object’s method. It allows access to other properties and methods of the same object.
It’s important to differentiate between object methods and regular functions. Object methods are functions that are defined as properties of an object, while regular functions are defined independently.
const calculator = {
add: function (a, b) {
return a + b;
},
};
console.log(calculator.add(2, 3)); // Output: 5
In this example, add
is an object method of the calculator
object, allowing us to perform addition.
- Object Iteration:
You can iterate over object properties using various methods, such as for...in
loop or Object.keys()
.
const person = {
name: 'John Doe',
age: 25,
address: '123 Main St',
};
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// Output:
// name: John Doe
// age: 25
// address: 123 Main St
The for...in
loop iterates over each property of the person
object, and Object.keys()
returns an array of all the object’s keys that can be iterated over.
Object.keys()
, Object.values()
, and Object.entries()
Object.keys()
:
The Object.keys()
method returns an array containing the keys of an object. It allows you to extract all the property names from an object.
const person = {
name: 'John Doe',
age: 25,
address: '123 Main St',
};
const keys = Object.keys(person);
console.log(keys); // Output: ['name', 'age', 'address']
In the above example, Object.keys(person)
returns an array ['name', 'age', 'address']
containing all the keys of the person
object.
Object.values()
:
The Object.values()
method returns an array containing the values of an object. It allows you to extract all the property values from an object.
const person = {
name: 'John Doe',
age: 25,
address: '123 Main St',
};
const values = Object.values(person);
console.log(values); // Output: ['John Doe', 25, '123 Main St']
In the above example, Object.values(person)
returns an array ['John Doe', 25, '123 Main St']
containing all the values of the person
object.
Object.entries()
:
The Object.entries()
method returns an array of arrays, where each inner array contains a key-value pair from the object. It allows you to iterate over both the keys and values of an object.
const person = {
name: 'John Doe',
age: 25,
address: '123 Main St',
};
const entries = Object.entries(person);
console.log(entries);
// Output: [['name', 'John Doe'], ['age', 25], ['address', '123 Main St']]
In the above example, Object.entries(person)
returns an array [['name', 'John Doe'], ['age', 25], ['address', '123 Main St']]
containing arrays with key-value pairs of the person
object.
These methods (Object.keys()
, Object.values()
, and Object.entries()
) provide convenient ways to extract and manipulate object properties. They are especially useful when you need to iterate over an object’s keys, values, or key-value pairs in a loop or perform operations on specific properties.
Objects are versatile in JavaScript and serve as a foundation for building complex data structures and encapsulating related data and functionality. They allow you to organize code into reusable and modular components.