An expression can also refer to properties of the _template's_ context such as a [template input variable](guide/structural-directives#shorthand) or a [template reference variable](guide/template-reference-variables).
The following example uses a template input variable of `customer`.
Template expressions cannot refer to anything in the global namespace, except `undefined`.
They can't refer to `window` or `document`.
Additionally, they can't call `console.log()` or `Math.max()` and they are restricted to referencing members of the expression context.
</div>
### Preventing name collisions
The context against which an expression evaluates is the union of the template variables, the directive's context object—if it has one—and the component's members.
If you reference a name that belongs to more than one of these namespaces, Angular applies the following logic to determine the context:
1. The template variable name.
1. A name in the directive's context.
1. The component's member names.
To avoid variables shadowing variables in another context, keep variable names unique.
In the following example, the `AppComponent` template greets the `customer`, Padma.
An `ngFor` then lists each `customer` in the `customers` array.
The `customer` within the `ngFor` is in the context of an `<ng-template>` and so refers to the `customer` in the `customers` array, in this case Ebony and Chiho.
This list does not feature Padma because `customer` outside of the `ngFor` is in a different context.
Conversely, `customer` in the `<h1>` doesn't include Ebony or Chiho because the context for this `customer` is the class and the class value for `customer` is Padma.
## Expression best practices
When using template expressions, follow these best practices:
* **Use short expressions**
Use property names or method calls whenever possible.
Keep application and business logic in the component, where it is accessible to develop and test.
* **Quick execution**
Angular executes template expressions after every [change detection](guide/glossary#change-detection) cycle.
Expressions should finish quickly to keep the user experience as efficient as possible, especially on slower devices.
Consider caching values when their computation requires greater resources.
* **No visible side effects**
According to Angular's [unidirectional data flow model](guide/glossary#unidirectional-data-flow), a template expression should not change any application state other than the value of the target property.
Reading a component value should not change some other displayed value.
The view should be stable throughout a single rendering pass.
<divclass="callout is-important">
<header>Idempotent expressions reduce side effects</header>
An [idempotent](https://en.wikipedia.org/wiki/Idempotence) expression is free of side effects and improves Angular's change detection performance.
In Angular terms, an idempotent expression always returns *exactly the same thing* until one of its dependent values changes.
Dependent values should not change during a single turn of the event loop.
If an idempotent expression returns a string or a number, it returns the same string or number if you call it twice consecutively.
If the expression returns an object, including an `array`, it returns the same object *reference* if you call it twice consecutively.
</div>
<divclass="alert is-important">
There is one exception to this behavior that applies to `*ngFor`.
`*ngFor` has `trackBy` functionality that can deal with changing values in objects when iterating over them.
See [*ngFor with `trackBy`](guide/built-in-directives#ngfor-with-trackby) for details.
