JavaScript Tutorial Series: Objects
Published: 2023-02-16 20:22:15

In our [JavaScript tutorial series: variables](https://dev.to/fullstackjo/javascript-tutorial-series-variables-2nmd) we've seen all of the data types available to us. In this post we're going to talk about objects.

## What are objects?
Objects are identical to arrays, with the exception that you access and modify the data in objects through what are referred to as properties rather than by using indexes.

Objects can represent actual objects in the real world and are useful for storing data in a structured way.


## Declaring an object
An object starts with the word `const` followed by a name that you'd like your object to have, followed by the assignment operator `=` and then curly braces `{}`.

```JavaScript
const Obj = {};
```

Just like arrays, objects can contain many values, the difference is objects contain `key:value` pairs.

```JavaScript
const Obj = {
   key : value,
}
```

Let's look at an example:

```JavaScript
const car = { 
  type: "BMW", 
  year: "2023", 
  color: "black" 
};
```
As we can see we have a `car` object, that contains multiple `key-value` pairs. This is makes sense, the `car` object holds all the information we need to know about the car, such as its type, color etc...

Now you might be wondering How do we access these values.
There are multiple ways to access an object's properties. 

## Dot notation 
`Dot notation` is easy to use, you use this notation to access the property of an object like so: 

```JavaScript
let person = {
  firstName: "John",
  "last name": "Doe",
  age: 28,
  profession: "web developer"
}

let name = person.firstName;
console.log(name); //John

let age = person.age;
console.log(age); //28

```
Dot notation is used when the property does not contain any spaces. If we use dot notation with a property that contains spaces we'll get a syntax error.

## Bracket notation
As we previously stated, the bracket notation is used when the property we're using to access a value contains spaces.

```JavaScript
let person = {
  firstName: "John",
  "last name": "Doe",
  age: 28,
  profession: "web developer"
}

let lastName = person["last name"];
console.log(lastName);//Doe

```
You can also use the bracket notation with properties that do not contain any spaces. It will work just fine.
```JavaScript
let person = {
  firstName: "John",
  "last name": "Doe",
  age: 28,
  profession: "web developer"
}

let profession = person["profession"];
console.log(profession);//web developer
```

## Updating a properties
You can update an object's properties at any given time. Let's take the previous example and update the profession property to be `software engineer` instead of `web developer`.

```JavaScript
let person = {
  firstName: "John",
  "last name": "Doe",
  age: 28,
  profession: "web developer"
}

person["profession"] = "software engineer";
let profession = person["profession"]
console.log(profession);//software engineer
```

## Adding a new property
Adding a new property is similar to updating it. What do we mean by that? 
Well we use the same syntax to add a new property as we would to updating one.
Let's look at an example. 
We want to add a `status` property to our `person` object.

```JavaScript
let person = {
  firstName: "John",
  "last name": "Doe",
  age: 28,
  profession: "web developer"
}

person.status = "available"
console.log(person.status); //available
```
## Deleting properties
Deleting object properties is easy, we use the `delete` keyword.

```JavaScript
let person = {
  firstName: "John",
  "last name": "Doe",
  age: 28,
  profession: "web developer"
}

delete person.profession;
```
## Accessing nested Objects
Just like you can nest an array into another array, you can nest an objects into another object:

```JavaScript
const storage = {
  "desktop": {
    "folder": "myFolder"
  },
  "USB": {
    "Work Folder": { 
      "folder1": "a file",
      "folder2": "passwords"
    },
    "Personal Folder": "folder1"
  }
};
```
As we can see we have our `storage` object and it contains two other objects `desktop` and `USB`.

How do we access the nested objects' properties? We can access them using `dot notation` and bracket notation. 
Let's say we wan to access `folder2`'s value. 

```JavaScript
const storage = {
  "desktop": {
    "folder": "myFolder"
  },
  "USB": {
    "Work Folder": { 
      "folder1": "a file",
      "folder2": "passwords"
    },
    "Personal Folder": "folder1"
  }
};

console.log(storage.USB["Work Folder"].folder2); //passwords
```

Let's break it down. 
`folder2` is found in the `Work Folder` which is also found in the `USB` object in the `storage` object. keep in mind properties are case-sensitive.