JavaScript Tutorial Series: Objects

In our JavaScript tutorial series: variables 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 {}.

const Obj = {};

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

const Obj = {
   key : value,
}

Let's look at an example:

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:

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.

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.

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.

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.

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.

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:

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.

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.