# Isolated and special variables

To create a component that renders values ​​in isolation in each rendering we must pass a second argument to the function that creates components, this must be an object with the properties that will be isolated:

```javascript
import { _ } from "bemtv";

_`Counter`({ count: 0 });
```

These properties behave like isolated variables for each component render.

> **We will now refer to these variables as `compVars`(component variables)**

### Handling compVars

After creating the component and the `compVars` they are available through an object and accessible by the `$` symbol, with which we can access, change the values ​​of the properties and add others.

This is a special object that can only be used in known callbacks of the component instance, it will normally be used in Hooks and in callbacks in DOM events.

```javascript
import { _ } from "bemtv";

const { onInit, $ } = _`Counter`({ count: 0 });

onInit(() => {
  console.log($.count);
});
```

The responsibility of this object is to keep the values ​​isolated for each rendering of the component and **only when necessary** to create clones of data structures such as Array, Map, Set and Object.

### Using compVars in the template

To use `compVars` in the template we will use a special shortcut, using `$` plus the property name/path:

```javascript
import { _ } from "bemtv";

const { $, template } = _`Hero`({
  hero: {
    name: "Black Panther",
  },
});

template`button[Clicked: $hero.name ]`;
```

To mark the property as optional just add a `?` to the end:

```javascript
template`button[Clicked: $hero.name? `;
```

### Variables that are attributes

If a variable has the same name as an attribute and its value is intended for it, we can use the `@` and the variable name so that it is used as the attribute name and value:

```javascript
import { _ } from "bemtv";

const { $, template } = _`Img`({
  src: "avatar.png",
  data: {
    alt: "User avatar",
  },
});

template`img[ @src @data.alt ]`;
```


---

# Agent Instructions: 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:

```
GET https://bemtv.gitbook.io/bemtvjs/isolated-and-special-variables.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.