> For the complete documentation index, see [llms.txt](https://bemtv.gitbook.io/bemtvjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bemtv.gitbook.io/bemtvjs/isolated-and-special-variables.md).

# 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 ]`;
```