Welcome to the sixth part of the "JavaScript from Beginner to Master" series. In this section, we'll explore the world of JavaScript objects. Objects are a fundamental concept in JavaScript, allowing you to store and organize data in a structured manner. They consist of key-value pairs, where each key serves as a unique identifier for a corresponding value.
In this article, we will delve into creating, accessing, and modifying objects in JavaScript using various techniques. We will primarily focus on object literal notation, which is a concise and commonly used approach. By the end of this article, you will have a strong grasp of working with objects in JavaScript and be capable of applying this knowledge to your own projects.
Understanding Objects in JavaScript
An object in JavaScript is essentially a collection of properties, where each property consists of a key and a value. The key acts as a unique identifier for the associated value. Objects enable you to organize and store data in a structured manner, allowing for efficient data manipulation. There are multiple ways to create objects in JavaScript, such as using object literal notation or the new keyword in combination with a constructor function.
Using object literal notation, you can create objects directly by defining them within curly braces {}. Here's an example:
const person = {
name: "John",
age: 30,
profession: "Developer"
};
In the above code, we created an object named person using object literal notation. It has three properties: name, age, and profession, with their corresponding values. The name property holds the value "John", the age property holds the value 30, and the profession property holds the value "Developer". Each property is separated by a comma.
By utilizing objects, you can structure and organize related data within your JavaScript code. They provide a powerful and flexible way to represent real-world entities or abstract concepts in your programs.
In the upcoming sections, we'll explore how to access and modify object properties, as well as discuss additional techniques for working with objects in JavaScript. Let's dive in!
Accessing Object Properties in JavaScript
You can access the properties of an object using the dot notation or the bracket notation. The dot notation is used when you know the name of the property you want to access, while the bracket notation is used when you want to access a property dynamically using a variable.
const firstObject = {
name: "Clifford",
age: 30,
city: "Ghana",
};
- Accessing object properties using the dot notation
console.log(firstObject.name); // output: Clifford
console.log(firstObject.age); // output: 30
console.log(firstObject.city); // output: Ghana
- Accessing object properties using the bracket notation
console.log(myObject["name"]); // output: Clifford
console.log(myObject["age"]); // output: 30
console.log(myObject["city"]); // output: Ghana
Adding New Properties to an Object in JavaScript
You can add new properties to an object by using the dot notation or the bracket notation. The dot notation is used when you know the name of the property you want to add, while the bracket notation is used when you want to add a property dynamically using a variable.
Let's continue with the previous example:
const AddObject = {
language: "JavaScript",
year: 1995,
paradigm: "OO",
};
In this example, we have an object called AddObject with three properties: language, year, and paradigm.
To add a new property to an object using the dot notation, you simply write the object name, followed by a dot (.), and then the name of the new property you want to add. Assign a value to the property using the assignment operator (=):
AddObject.author = "Brendan Eich";
console.log(AddObject.author); // Output: Brendan Eich
In the above code, we added a new property called author to the AddObject using the dot notation. We assigned the value "Brendan Eich" to the author property. After adding the property, we can access its value using the dot notation as well.
Similarly, you can add a new property to an object using the bracket notation. The bracket notation allows you to specify the property name as a string inside square brackets ([]). This is useful when you want to use a variable to dynamically determine the property name:
AddObject["company"] = "Netscape";
console.log(AddObject["company"]); // Output: Netscape
In the above code, we added a new property called company to the AddObject using the bracket notation. We assigned the value "Netscape" to the company property. The property name is specified as a string inside the square brackets. Like the dot notation, we can access the value of the new property using the bracket notation as well.
By using the dot notation or the bracket notation, you can add new properties to an object, expanding its functionality and storing additional information.
Now let at how to delete properties from an object.
Deleting Properties from an Object in JavaScript
You can delete properties from an object by using the delete operator. The delete operator is a built-in operator in JavaScript that allows you to remove a property from an object. It takes one argument, which is the name of the property you want to delete.
Let's consider an example:
const deleteObject = {
language: "typeScript",
year: 2012,
paradigm: "OO"
};
In this example, we have an object called deleteObject with three properties: language, year, and paradigm.
To delete a property from an object, you can use the delete operator followed by the object name and the property name:
delete deleteObject.year;
console.log(deleteObject.year); // Output: undefined
In the above code, we used the delete operator to delete the year property from the deleteObject. After deleting the property, accessing it will return undefined.
Alternatively, you can also delete a property using the dot notation or the bracket notation:
deleteObject.paradigm = undefined;
console.log(deleteObject.paradigm); // Output: undefined
deleteObject["language"] = undefined;
console.log(deleteObject["language"]); // Output: undefined
In the code above, we used the dot notation and the bracket notation to delete the paradigm and language properties from the deleteObject respectively. As with the previous example, accessing these properties after deletion will also return undefined.
By using the delete operator, you can selectively remove properties from an object, making it more flexible to manipulate and modify object structures in JavaScript.
Looping Through an Object in JavaScript
To loop through the properties of an object in JavaScript, you can utilize the for...in loop. This loop iterates over each enumerable property of an object.
Here's an example of how to loop through an object:
let myObject = {
name: "John",
age: 30,
city: "New York",
};
// Looping through an object
for (let key in myObject) {
console.log(key + " : " + myObject[key]);
}
// Output:
// name : John
// age : 30
// city : New York
In the above code, we have an object named myObject with properties name, age, and city. We use a for...in loop to iterate through each property of the object. Inside the loop, we access the value of each property using bracket notation (myObject[key]) and log the key-value pairs to the console.
The for...in loop assigns each property name to the key variable on each iteration, allowing us to access the corresponding value using myObject[key].
By looping through an object, you can perform operations or apply logic based on each property or its value. This is particularly useful when you want to perform a repetitive task or need to process dynamic data stored within an object.
Conclusion
This tutorial explored how to work with objects in JavaScript. We covered how to access and modify object properties, as well as how to add and delete properties from an object. We also discussed how to loop through an object using the for...in loop.
You can find the code examples used in this tutorial over on GitHub
You can also connect with me on Twitter or LinkedIn and GitHub
Top comments (0)