> For the complete documentation index, see [llms.txt](https://chnn-anne.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chnn-anne.gitbook.io/javascript/first-steps/objects.md).

# Objects

The other category of data we can store in variables are objects. 

### Objects

A web application usually deals with more complex data than the primitive data value types provide. JavaScript allows you to build more complex objects out of the primitive data types. An object is just a collection of property-value pairs to describe the data unique to the object.

For example, an object to represent a user would likely have properties such as the first and last name, the user name, and the email address, among others.

```javascript
let user = {
    firstName: 'Joe',
    lastName: 'Jones',
    email: 'jj@company.com'
    address: '1234 5th St. Seattle, WA'
}
```

The object can be as complex as you need it to be. For example, the user object above could contain an embedded object representing the address, rather than just a string.

```javascript
let user = {
    firstName: 'Joe',
    lastName: 'Jones',
    email: 'jj@company.com'
    address:  {
        street: '1234 5th St.',
        city: 'Seattle',
        state: 'WA'
    }
}
```

### Dot Notation for Accessing Properties

Default way for accessing properties.

```javascript
// access property
let firstName = user.firstName;

// assign a new value to a property
user.firstName = "Sally";

// access the city property within the address object
user.address.city
```

### Shopping Cart Example

We're all familiar with online shopping and the concept of a shopping cart. The user selects items they intend to buy and those items are stored in what is called a "cart". When you are ready to check-out, you get a view of everything in your cart, and the total that it will cost. We're going to work through how to represent that data.

Each item that can be purchased has multiple pieces of data that need to be stored together. So we create an object that aggregates that data together in one data structure.

>  A *data structure* is a collection of *data* values, the relationships among them, and the functions or operations that can be applied to the *data*. - Wikipedia

```javascript
let item = {
    id: 1,
    name: 'Whole Grain Bread',
    category: 'bread',
    price: 5.99,
    onSale: true,
    discount: .79
}
```

Above, we've created the object directly in our JavaScript code. For data such as this, it would be more likely that the data about the products would be initially defined and stored in a database and the JavaScript code would call a function that would request the data from the web API. 

```javascript
function getProductsInCategory(category) {
    /* do stuff to get the data from the database */
    return http.get('myWebAPI/products');
}


let products = getProductsInCategory('bread');
/* display the bread products on the screen */

```

Here's a real-world example of the NY Times website calling the webAPI for its site to retrieve all of the top stories in the arts section.

{% embed url="<https://api.nytimes.com/svc/topstories/v2/arts.json?api-key=5Vd8O8baGS3WEG1eQVAaS2mG6K0VyHH8>" %}

So, typically you would receive an array of items.

```javascript
let items = getProducts();

// would look like this after it was done
let items = [
  {
    id: 1,
    name: 'Whole Grain Bread',
    category: 'bread',
    price: 5.99,
    onSale: true,
    discount: .79
  },
  {
    id: 2,
    name: 'Potato Chips',
    category: 'chips',
    price: 3.99,
    onSale: false,
    discount: 0
  },
  { 
    id: 3,
    name: 'Roasted Nut Mix',
    categry: 'nuts',
    price: 7.99,
    onSale: false,
    discount: 0
  }
];

```

Now, let's implement our shopping cart.

An object can have properties whose value is a function. A function is a special kind of object.

```javascript
let shoppingCart = {
  items: [],

  addItem: function(item) {
   this.items.push(item);
  },
  
  removeItem: function(itemId) {
    for (let i=0;i<this.items.length; ++i) {
      this.items.splice(i, 1);
      break;
    }
  },
  total: function() {
    let total = 0;
    for (let i=0; i<this.items.length; ++i) {
      total+= this.items[i].price;
    }

    return total;
  }
}
```

Just like you can access a property within an object, you can do the same to execute a function within an object.

```javascript
shoppingCart.addItem(items[0]);
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://chnn-anne.gitbook.io/javascript/first-steps/objects.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.