In the world of programming, JavaScript objects are like customizable containers where you can store different types of data in an organized manner. You can think of these objects as collections of 'properties'. Each property is a pairing of a unique key (like a label) and a value (the data you want to store under that label). This is similar to how a car can be characterized by its color, model, and manufacturer.

JavaScript objects are also known as dictionaries, and both terms are widely used. The analog with dictionaries comes from the fact that dictionaries also have words (keys) and their definitions (values).

There are a couple of ways to generate objects in JavaScript, but the most common one is via literal notation {}. Here is an example:

JavaScript
Copy to clipboard
1let car = {
2  color: "red",
3  model: "sedan",
4  manufacturer: "Toyota",
5};
6console.log(car); // Outputs: {color: "red", model: "sedan", manufacturer: "Toyota"}

As you can see, for each key-value pair, we put a <key>: <value>, line in the object.

You can access data in objects using dot notation (object.property) or bracket notation (object["property"]). Here's an example:

JavaScript
Copy to clipboard
1console.log(car.color); // Outputs: "red"
2console.log(car["model"]); // Outputs: "sedan"

Dot notation directly accesses properties, while bracket notation is useful for variables or keys containing special characters or spaces.

You can modify object values or add new properties by simply assigning a new value to the key:

JavaScript
Copy to clipboard
1car.color = "blue"; // changing the existing property value
2console.log(car.color); // Outputs: "blue"
3
4car.propellant = "electric"; // adding a new property
5console.log(car.propellant); // Outputs: "electric"

In JavaScript, you can verify whether a key exists within an object by using the in operator as shown below:

JavaScript
Copy to clipboard
1let car = {
2  color: "red",
3  model: "sedan",
4  manufacturer: "Toyota"
5};
6
7console.log('color' in car); // Outputs: true
8console.log('mileage' in car); // Outputs: false

In this example, we inspect if the keys 'color' and 'mileage' are in the car object. The expected outputs are true and false, respectively, since the car object contains the 'color' key but not the 'mileage' key.

To delete properties from objects, use the delete keyword, as shown in this example:

JavaScript
Copy to clipboard
1delete car.propellant;
2console.log(car); // Outputs: {color: "blue", model: "sedan", manufacturer: "Toyota"}
3console.log(car.propellant); // Outputs: undefined
4console.log('propellant' in car); // Outputs: false

With the delete keyword, the key-value pair completely disappears.

JavaScript provides several powerful methods to interact with objects. Key among them are Object.keys(), Object.values(), and Object.entries(), which return arrays of an object's keys, values, and key-value pairs, respectively.

Let's demonstrate this with an example:

JavaScript
Copy to clipboard
1let car = {
2  color: "red",
3  model: "sedan",
4  manufacturer: "Toyota"
5};
6
7console.log(Object.keys(car));       // Outputs: ["color", "model", "manufacturer"]
8console.log(Object.values(car));     // Outputs: ["red", "sedan", "Toyota"]
9console.log(Object.entries(car));    // Outputs: [["color", "red"], ["model", "sedan"], ["manufacturer", "Toyota"]]

In the above code, Object.keys(car), Object.values(car), and Object.entries(car) provide us with arrays containing the keys, values, and key-value pairs of the car object, respectively.

Nested objects contain other objects, i.e., where the object's key contains a value that is also an object. Imagine the car object housing a dimensions object. Here's what it looks like:

JavaScript
Copy to clipboard
1let car = {
2  color: "red",
3  model: "sedan",
4  manufacturer: "Toyota",
5  dimensions: {
6      length: "4500mm",
7      width: "2000mm",
8      height: "1500mm"
9  }
10};
11
12// Accessing the property in a nested object is done in a similar way
13console.log(car.dimensions.length); // Outputs: "4500mm"

As you can see, to access the nested property, we just applied the dot notation multiple times.

Bravo! You've mastered the basics of JavaScript objects, including nested objects. Now, brace yourself for exercises that align with these lessons. Hands-on practice solidifies learning and prepares you for future explorations. Let's move on to the application!