Objects in JavaScript

Objects are data types in JavaScript that allow data to be stored in key-value pairs.

Each key (also known as a property) in an object is unique and maps to a corresponding value. Objects represent and group related data and functionality.

An object is a collection of properties, each with a key (a string or symbol) and a value (which can be any data type).

Objects can be created using object literals, which are comma-separated key-value pairs wrapped in curly braces {}.

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  isEmployed: true
};

In this example, person is an object with four properties: firstName, lastName, age, and isEmployed.

These properties can be any of the data types in JavaScript we have covered (and functions which we will cover in the next section).

Here's an example with all of the data types:

const exampleObject = {
  name: 'Alice',            // String
  age: 30,                  // Number
  isStudent: true,          // Boolean
  favoriteColors: ['red', 'green', 'blue'], // Array
  address: {                // Object
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  },
  greet: function() {       // Function
    console.log('Hello!');
  },
  middleName: null,         // Null
  nickname: undefined       // Undefined
};

Accessing Object Properties

You can access the properties of an object using dot notation or bracket notation.

Dot Notation:

const car = {
  make: 'Toyota',
  model: 'Camry',
  year: 2020
};

console.log(car.make); // Outputs: Toyota
console.log(car.model); // Outputs: Camry
console.log(car.year); // Outputs: 2020

Bracket Notation:

const car = {
  make: 'Toyota',
  model: 'Camry',
  year: 2020
};

console.log(car['make']); // Outputs: Toyota
console.log(car['model']); // Outputs: Camry
console.log(car['year']); // Outputs: 2020

Modifying Object Properties

You can also change the value of an object property using dot notation or bracket notation. Instead of reading the value, we can assign a value. Here's how:

const car = {
  make: 'Toyota',
  model: 'Camry',
  year: 2020
};

car.year = 2021; // Changing the value of the 'year' property
console.log(car.year); // Outputs: 2021

car['model'] = 'Corolla'; // Changing the value of the 'model' property
console.log(car.model); // Outputs: Corolla

Adding and Removing Object Properties

You can add new properties to an object or remove existing properties.

To add a property, we can use the dot or bracket notation to declare the property we want and then just assign the value:

const car = {
  make: 'Toyota',
  model: 'Camry',
  year: 2020
};

car.color = 'blue'; // Adding a new property 'color'
console.log(car.color); // Outputs: blue

Then, to remove properties, we use the delete keyword:

const car = {
  make: 'Toyota',
  model: 'Camry',
  year: 2020
};

delete car.year; // Removing the 'year' property
console.log(car.year); // Outputs: undefined

Nested Objects

Objects can contain other objects as values, which allows you to model more complex data structures. This is useful for representing hierarchical data and grouping related information together in a logical and organized manner.

Nested objects provide a great way to structure and organize related data. By grouping associated properties, you can make your code more readable and maintainable. Nested objects are particularly useful when you need to represent complex entities that have multiple attributes or sub-properties.

In the following example of a person object. This object contains nested objects to represent the person's name and address:

const person = {
  name: {
    first: 'John',
    last: 'Doe'
  },
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

console.log(person.name.first); // Outputs: John
console.log(person.address.city); // Outputs: Anytown

In this example:

The name property is an object that contains two properties: first and last.
The address property is an object that contains three properties: street, city, and state.

This structure allows you to access nested properties using dot notation.

Accessing Nested Properties

As seen in the previous example, to access nested properties, you use a sequence of dot notations. Each level of nesting requires an additional dot.

const person = {
  name: {
    first: 'John',
    last: 'Doe'
  },
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

console.log(person.name.first); // Outputs: John
console.log(person.name.last); // Outputs: Doe
console.log(person.address.street); // Outputs: 123 Main St
console.log(person.address.city); // Outputs: Anytown
console.log(person.address.state); // Outputs: CA

Modifying Nested Properties

You can modify, add, and delete nested properties pretty much the same way as a regular object. For clarity, here's an example so you see how you to do it:

const person = {
  name: {
    first: 'John',
    last: 'Doe'
  },
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  },
  contact: {
    email: 'john.doe@example.com',
    phone: '555-1234'
  }
};

// Modifying nested properties
person.name.first = 'Jane';
person.address.city = 'Newtown';
console.log(person.name.first); // Outputs: Jane
console.log(person.address.city); // Outputs: Newtown

// Adding new nested properties
person.address.zipCode = '12345';
person.contact.skype = 'john.doe';
console.log(person.address.zipCode); // Outputs: 12345
console.log(person.contact.skype); // Outputs: john.doe

// Deleting nested properties
delete person.address.zipCode;
delete person.contact.phone;
console.log(person.address.zipCode); // Outputs: undefined
console.log(person.contact.phone); // Outputs: undefined

Skill to Practice

Creating Objects: Use object literals to create objects with key-value pairs.
- Example: { key: value }
Accessing Properties: Use dot notation or bracket notation to access object properties.
- Example: car.make, car['model']
Modifying Properties: Change the value of an object property using dot notation or bracket notation.
- Example: car.year = 2021, car['model'] = 'Corolla'
Adding and Removing Properties: Add and remove new properties from an object.
- Example: car.color = 'blue', delete car.year
Nested Objects: Use nested objects to model more complex data structures.
- Example: { name: { first: 'John', last: 'Doe' }, address: { city: 'Anytown' } }

Objects provide a flexible way to group related data and functionality, making your code more organized and efficient.

Next, we will explore functions that allow us to create reusable blocks of code.