A hidden power tool for arrays in TS
Tags: functional, typescript, javascript
Published: 2024-01-25 19:20:48

---
title: A hidden power tool for arrays in TS
published: true
description: 
tags: functional, typescript, javascript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-11-10 14:03 +0000
---

I am a fan of functional programming. The domain can be very complex but some the parts are simple. Even so that a lot of developers probably don't even know they are using functional programming. Some developers do not like to use functional programming because of how much memory it takes to respect immutability specially in the case of arrays but this library can help use functional programming in Typescript in an efficient way. 

This library is [FxTS](https://fxts.dev/).

## Unlocking the power of lazy evaluation

FxTS introduces a novel approach to array manipulation compared to the default ones when using `map`, `filter` and such by introducing the concept of lazy evaluation. Unlike traditional methods that demand iterating through entire arrays regardless of necessity, FxTS uses generators to go over array elements. This means the iteration only occurs when values are explicitly needed, optimizing resource consumption and [significantly boosting performance](https://jsben.ch/4dpb1).

Let's compare how it behaves compared to the traditional Array functions like `map`, `slice`, `sort`, etc.

Say you want the top 5 elements of an array. When we use the Array functions we go over all the elements many times. 
```typescript
[1, 2, 3, 4, 5]
  .filter((a) => a % 2 === 0) // [2, 4, 6, 8]
  .slice(0, 2); // [2, 4]
  .map((a) => a + 10) // [12, 14]
```

Using FxTS we process only the until the two elements that satisfies the filter. This can make the difference when the array is large.

```typescript
pipe(
  [1, 2, 3, 4, 5],
  map(a => a + 10), // [12, 14]
  filter(a => a % 2 === 0), // [12, 14]
  take(2), // [12, 14]
  toArray
);
```

Here's an example of how it evaluates.
![evaluation animation](https://fxts.dev/img/lazy.gif)

## The awesomness of generators

At the core of FxTS lies the ingenious use of generators, a feature intrinsic to JavaScript. By embracing generators, FxTS provides us with a gateway to seamlessly handle infinite values within arrays. It's like having a superpower when dealing with vast datasets or scenarios where continuous, endless streams of data must be efficiently processed.

Here's an example that is too simple but helps to see how it works.
```typescript
pipe(
  range(Infinity),
  filter((a) => a % 2 === 0), // [0, 2]
  map((a) => a * a), // [0, 4]
  take(2), // [0, 4]
  reduce(sum), // 4
);
```

## Handling promises

FxTS allows to easily handle promises sequentially and concurrently. The benefit is really in the latter.
```typescript
const fetchMovie = async (year: number) =>
  fetch(`https://api.movie.com/${year}`);

const moviesByYear = async (year: number, howManyYears: number) =>
  pipe(
    range(year, Infinity),
    toAsync,
    map(fetchMovie),
    map((res) => res.json()),
    take(howManyYears),
    toArray
  );

await moviesByYear(2020, 3);
```

Here's an example where a RapidAPI is actually called to get the movies for a year. Error handling is the same as ever using try catch.
```typescript
    type Movie = { imdb_id: string; title: string };
    type APIResponse = {
      links: { next: string; previous: string };
      count: number;
      results: Movie[];
    };

    const fetchMovie = async (year: number) => {
      console.log(`getting movies for ${year}`);
      return fetch(
        `https://moviesminidatabase.p.rapidapi.com/movie/byYear/${year}/`,
        {
          headers: {},
        },
      );
    };

    const getMoviesForYear = async (year: number) =>
      pipe(
        year,
        fetchMovie,
        (res) => res.json(),
        (response: APIResponse) => response.results,
      );
    
    try {
      return getMoviesForYear(2020);
    } catch (err) {
      console.log(err);
    }
```

FxTS allow to easily work with concurrent promises. [Here's a sample of the code](https://github.com/assertnotnull/remix-tiledhn/blob/master/app/routes/ask.tsx) I've used in my [Tiled Hacker news project](https://remix-tiledhn.vercel.app/). In this case promises are executed by batch of 10. In case of an error when calling `getStoryById` it's not blocking the execution of promises in the batch or the execution of other batches. It's up to you to determine if it's what you need.

```typescript
  const { pageOfStoryIds } = await getCachedPaginatedStoryIds(
    "top",
    pageIndex,
  );
  const stories = pipe(
    pageOfStoryIds,
    toAsync,
    map(getStoryById),
    concurrent(10),
    toArray,
  );
```

In conclusion FxTS allows to easily work with array of sync and async data. It is a solid tool to work with arrays using the functional programming style.