<p>Há algum tempo, o <a href="https://twitter.com/zanfranceschi">Zan Franceschi</a> postou o seguinte desafio:</p>
<Tweet id="1564671754483765251" />

<p>Neste artigo, vou resolvê-lo de duas formas: uma com laços e outra sem laços, com TypeScript.</p>
<h2>Analisando os dados</h2>
<p>Vou transcrever o JSON do desafio para facilitar a nossa análise:</p>
<pre><code class="highlited-code-wrapper langjson"><div class="highlited-code" data-language="json">{
  &quot;compras&quot;: [
    {
      &quot;data&quot;: &quot;2022-01-01&quot;,
      &quot;produtos&quot;: [
        {
          &quot;cod&quot;: &quot;a&quot;,
          &quot;qtd&quot;: 2,
          &quot;valor_unitario&quot;: 12.24
        },
        {
          &quot;cod&quot;: &quot;b&quot;,
          &quot;qtd&quot;: 1,
          &quot;valor_unitario&quot;: 3.99
        },
        {
          &quot;cod&quot;: &quot;c&quot;,
          &quot;qtd&quot;: 3,
          &quot;valor_unitario&quot;: 98.14
        }
      ]
    },
    {
      &quot;data&quot;: &quot;2022-01-02&quot;,
      &quot;produtos&quot;: [
        {
          &quot;cod&quot;: &quot;a&quot;,
          &quot;qtd&quot;: 6,
          &quot;valor_unitario&quot;: 12.34
        },
        {
          &quot;cod&quot;: &quot;b&quot;,
          &quot;qtd&quot;: 1,
          &quot;valor_unitario&quot;: 3.99
        },
        {
          &quot;cod&quot;: &quot;c&quot;,
          &quot;qtd&quot;: 1,
          &quot;valor_unitario&quot;: 34.02
        }
      ]
    }
  ]
}</div>
</code></pre><p>Podemos definir o JSON acima em dois tipos distintos: <code>Produto</code> e <code>Compra</code>. Seus nomes são autoexplicativos, mas vou defini-los aqui para facilitar a leitura do código:</p>
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">type Produto = {
  cod: string
  qtd: number
  valor_unitario: number
}

type Compra = {
  data: string
  produtos: Produto[]
}</div>
</code></pre><h2>Escrevendo testes</h2>
<p>Antes de começar a escrever o código, vamos escrever alguns testes para garantir que o código está funcionando corretamente. Para isso, vamos usar o <a href="https://vitest.dev/">Vitest</a>.</p>
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">import { describe, expect, test } from 'vitest'
import {
  somaComFor,
  somaComForIn,
  somaComForOf,
  somaComWhile,
  somaComForEach,
  somaComReduce,
  somaComFlatMapEReduce,
  somaComSum,
  somaComSumEFlatMap
} from './desafio-da-soma'

const { compras } = await import('./data.json', { with: { type: 'json' } })

const result = 434.93999999999994

describe('Desafio da soma', () =&gt; {
  test('somaComFor', () =&gt; {
    expect(somaComFor(compras)).toBe(result)
  })

  test('somaComForOf', () =&gt; {
    expect(somaComForOf(compras)).toBe(result)
  })

  test('somaComForIn', () =&gt; {
    expect(somaComForIn(compras)).toBe(result)
  })

  test('somaComWhile', () =&gt; {
    expect(somaComWhile(compras)).toBe(result)
  })

  test('somaComForEach', () =&gt; {
    expect(somaComForEach(compras)).toBe(result)
  })

  test('somaComReduce', () =&gt; {
    expect(somaComReduce(compras)).toBe(result)
  })

  test('somaComFlatMapEReduce', () =&gt; {
    expect(somaComFlatMapEReduce(compras)).toBe(result)
  })

  test('somaComSum', () =&gt; {
    expect(somaComSum(compras)).toBe(result)
  })

  test('somaComSumEFlatMap', () =&gt; {
    expect(somaComSumEFlatMap(compras)).toBe(result)
  })
})</div>
</code></pre><h2>Somando com laços</h2>
<p>Agora que já temos os tipos definidos, podemos começar a resolver o desafio. Podemos fazer isso de quatro formas:</p>
<h3>1. Usando <code>for</code></h3>
<p>O <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/for"><code>for</code></a> é um <strong>laço de repetição</strong> que executa um bloco de código até que uma condição seja satisfeita.</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">function somaComFor(compras: Compra[]): number {
  let soma = 0

  for (let i = 0; i &lt; compras.length; i++) {
    for (let j = 0; j &lt; compras[i].produtos.length; j++) {
      soma += compras[i].produtos[j].qtd * compras[i].produtos[j].valor_unitario
    }
  }

  return soma
}</div>
</code></pre><h3>2. Usando <code>for...of</code></h3>
<p>O <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a> é um <strong>laço de iteração</strong> que itera sobre uma sequência de valores vindos de um <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">objeto iterável</a> (que, no nosso caso, é um <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>).</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">function somaComForOf(compras: Compra[]): number {
  let soma = 0

  for (const compra of compras) {
    for (const produto of compra.produtos) {
      soma += produto.qtd * produto.valor_unitario
    }
  }

  return soma
}</div>
</code></pre><h3>3. Usando <code>for...in</code></h3>
<p>O <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> é um <strong>laço de iteração</strong> que itera sobre as propriedades enumeráveis do tipo <em>string</em> de um objeto, inclusive as herdadas. Estou colocando esta solução aqui somente para mostrar que ela é possível, mas deve ser preterida em relação às outras soluções apresentadas neste artigo.</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">function somaComForIn(compras: Compra[]): number {
  let soma = 0

  for (const i in compras) {
    for (const j in compras[i].produtos) {
      soma += compras[i].produtos[j].qtd * compras[i].produtos[j].valor_unitario
    }
  }

  return soma
}</div>
</code></pre><h3>4. Usando <code>while</code></h3>
<p>O <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while"><code>while</code></a> é um <strong>laço de repetição</strong> que executa um bloco de código até que uma condição seja satisfeita.</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">function somaComWhile(compras: Compra[]): number {
  let soma = 0

  let i = 0
  while (i &lt; compras.length) {
    let j = 0
    while (j &lt; compras[i].produtos.length) {
      soma += compras[i].produtos[j].qtd * compras[i].produtos[j].valor_unitario
      j++
    }
    i++
  }

  return soma
}</div>
</code></pre><h2>Somando com métodos de <code>Array</code></h2>
<h3>1. Usando <code>Array.prototype.forEach</code></h3>
<p>O <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>Array.prototype.forEach</code></a> é um método que executa uma função para cada elemento do array.</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">function somaComForEach(compras: Compra[]): number {
  let soma = 0

  compras.forEach(compra =&gt; {
    compra.produtos.forEach(produto =&gt; {
      soma += produto.qtd * produto.valor_unitario
    })
  })

  return soma
}</div>
</code></pre><h3>2. Usando <code>Array.prototype.reduce</code></h3>
<p>O <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce"><code>Array.prototype.reduce</code></a> é um método que executa uma função para cada elemento do array, retornando um único valor.</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">function somaComReduce(compras: Compra[]): number {
  return compras.reduce((soma, compra) =&gt; {
    return (
      soma +
      compra.produtos.reduce((soma, produto) =&gt; {
        return soma + produto.qtd * produto.valor_unitario
      }, 0)
    )
  }, 0)
}</div>
</code></pre><p>Mas, podemos torná-la ainda melhor usando o <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap"><code>Array.prototype.flatMap</code></a>:</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">function somaComFlatMapEReduce(compras: Compra[]): number {
  return compras
    .flatMap(compra =&gt; compra.produtos)
    .reduce((soma, produto) =&gt; soma + produto.qtd * produto.valor_unitario, 0)
}</div>
</code></pre><h2>Com uma função de ajuda</h2>
<p>Podemos criar uma função genérica que faz a soma de qualquer array da seguinte forma:</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">/**
 * Soma todos os valores de um array. Se o array for de objetos, é possível
 * passar uma função para extrair os números que serão somados.
 *
 * @example soma([1, 2, 3]) // 6
 * @example soma([{ valor: 1 }, { valor: 2 }, { valor: 3 }], item =&gt; item.valor) // 6
 */
function sum&lt;T extends number | object&gt;(
  array: T[],
  fn?: (item: T) =&gt; number,
): number {
  return array.reduce(
    (acumulador, item) =&gt; acumulador + (fn ? fn(item) : (item as number)),
    0,
  )
}</div>
</code></pre><p>E usá-la em conjunto com as soluções já apresentadas:</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">function somaComSumEFlatMap(compras: Compra[]): number {
  return sum(
    compras.flatMap(compra =&gt; compra.produtos),
    produto =&gt; produto.qtd * produto.valor_unitario,
  )
}</div>
</code></pre><p>Se tiver alguma sugestão ou alguma outra ideia de como resolver este desafio, conta para mim nos comentários.</p>


Douglas Moura

Douglas Moura

#algorithms

Múltiplas formas de somar os valores de um array de objetos, em TypeScript

Entendendo o que é Tail Call Optimization com JavaScript