> 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/transformation-functions.md).

# Transformation Functions

When storing values ​​in data structures like array, Map, Set or object we may want to create a markup (Brackethtml) and add it to the template, for that we can use transform functions that inject a property (using Symbol) into the data structure and tells **Bemtv** to transform the data structure only when used in the template.

To create a transformation function we use the `tFn()` function, it receives as its first argument a function that transforms the data structure and returns another function that involves the function passed as an argument:

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

const tListJoin = tFn((list) => list.join(" br[] "));
```

To use the function just pass a list and it will return the same list with a Symbol injected:

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

const tListJoin = tFn((list) => list.join(" br[] "));

const { template } = _`List`({
  list: tListJoin(["user1", "user2", "user3"]),
});

template`div[Users: $list ]`;
```

Whenever this list is changed (eg `$.list.push(item)`), Bemtv will detect and use the transform function again and rederize the change.

> The transform functions can be incredibly powerful because with Brackethtml we can even return the markup with CSS-In-JS, so we can focus on the data structure.

### **Built-in t**ransformation **functions**

```javascript
import { tOl, tUl, tDl } from "bemtv";

// Works with arrays and Sets and transform them into an ordered list.
tOl([] || new Set());

// Works with arrays and Sets and transform them into an unordered list.
tUl([] || new Set());

// Works with objects and Maps and transform them into a definition list.
tDl({} || new Map());
```

Whenever you create a transformation function it is good practice to export the normal function that does the transform immediately:

```javascript
import { toOl, toUl, toDl } from "bemtv";

// Works with arrays and Sets and transform them into an ordered list immediately.
toOl([] || new Set());

// Works with arrays and Sets and transform them into an unordered list immediately.
toUl([] || new Set());

// Works with objects and Maps and transform them into a definition list immediately.
toDl({} || new Map());
```