# Computed Properties

{% hint style="warning" %}
If you are on CBWIRE version 2.3.x  and have enabled the configuration property **useComputedPropertiesProxy**, then you will need to follow [this guide here](https://cbwire.ortusbooks.com/v2-1/essentials/computed-properties/computed-properties-proxied) instead as this fundamentally changes how computed properties are referenced and accessed. 
{% endhint %}

Computed Properties are dynamic properties and are helpful for deriving values from a database or another persistent store like a cache. 

Computed Properties are similar to [Data Properties](https://cbwire.ortusbooks.com/v2-1/essentials/properties) with some key differences:

* They are declared as inline functions using `computed`.
* They can return any type of CFML value or object, not just values that can be serialized and parsed by JavaScript like Data Properties.

{% hint style="success" %}
See the [Wire Lifecycle](https://cbwire.ortusbooks.com/v2-1/lifecycle-events#order-of-operations) page for details on when Computed Properties are executed.
{% endhint %}

{% hint style="info" %}
Computed Properties are cached for the lifetime of the request. Meaning, if you reference your Computed Property three times in your [Template](#templates) or from within a wire [Action](https://cbwire.ortusbooks.com/v2-1/essentials/actions), it will only execute once.
{% endhint %}

## Defining Properties

You can define Computed Properties on your [Wires](https://cbwire.ortusbooks.com/v2-1/essentials/creating-components) using `computed`. Each Computed Property is invoked only once during a single request cycle.

```javascript
component extends="cbwire.models.Component" {

    property name="taskService" inject="taskService@myapp";

    // Computed Properties
    computed = {
        "allTasks": function() {
            return taskService.getAll();
        }
    };
}

```

## Accessing Properties

You can access your Computed Properties from within your [Actions](https://cbwire.ortusbooks.com/v2-1/essentials/actions) using `computed.[propertyName]`.

```javascript
component extends="cbwire.models.Component" {

    property name="taskService" inject="taskService@myapp";

    // Computed Properties
    computed = {
        "allTasks": function() {
            return taskService.getAll();
        }
    };

    // Action
    function deleteTasks() {
        
        // Notice below we don't invoke the method using computed.allTasks().
        // We instead just use 'computed.allTasks'.
        // At this point, cbwire has rendered our computed properties
        // and overwritten the references with their result.
        if ( arrayLen( computed.allTasks ) {
            taskService.deleteAll();
        }

    }
}
```

### Getters

Getters are automatically created based on the property's name. 

In the example below, you to access the property using `this.getAllTasks()`. You can use this as an alternative to using `computed`.

```javascript
component extends="cbwire.models.Component" {

    property name="taskService" inject="taskService@myapp";

    // Computed Properties
    computed = {
        "allTasks": function() {
            return taskService.getAll();
        }
    };

    // Action
    function deleteTasks() {
        if ( arrayLen( this.getAllTasks() ) {
            taskService.deleteAll();
        }
    }
}
```

### Templates

You can access Computed Properties in your [Template](#templates) via the `args` scope.

```html
<cfoutput>
<div>
    <ul>
        <cfloop array="#args.allTasks#" index="task">
            <li>#task#</li>    
        </cfloop>
    </ul>
</div>
</cfoutput>
```