Lesson 3

Navigating the Constellation of JavaScript Objects

Introduction to JavaScript Objects

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).

Creating and Manipulating JavaScript Objects

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

Accessing Data in Objects

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

JavaScript
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.

Modifying and Adding Data to a JavaScript Object

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

JavaScript
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"
Checking the Existence of a Key in an Object

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

JavaScript
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.

Removing Data from a JavaScript Object

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

JavaScript
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.

Exploring Object Methods: keys, values, entries

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
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 in JavaScript

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

Summary and Practice

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!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.