Part 6 : Introduction to JavaScript Objects
Tags: javascript, programming, webdev, beginners
Published: 2023-06-23 12:05:52

 

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:

```javascript
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.

```javascript
const firstObject = {
  name: "Clifford",
  age: 30,
  city: "Ghana",
};
```

- Accessing object properties using the dot notation

```javascript
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

```javascript
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:

```javascript
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 (=):

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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](https://github.com/Clifftech123/JavaScript-From-Beginner-to-Master/tree/main/06.Objects)

You can also connect with me on [Twitter](https://twitter.com/Clifftech_Dev) or [LinkedIn](https://www.linkedin.com/in/isaiah-clifford-opoku-a506a51b2/) and  [GitHub](https://github.com/Clifftech123)