DEV Community: Rafael Nogueira

Esse tal de Reduce e como podemos usar.

Rafael Nogueira — Mon, 29 Mar 2021 14:31:57 +0000

O Reduce é utilizado em um array, iterando em cada item até retornar um único valor. Ele recebe uma função e um valor inicial. Essa função recebe 4 argumentos:

a variável que servirá como acumulador
o elemento atual
o index
o array original

array.reduce(function(accumulator, element, index, array) => {}, initialValue;

const data = [1, 2, 3, 4, 5]
const reducer = function(accumulator, item) {
    return accumulator + item
}
const initialValue = 0;
const total = data.reduce(reducer, initialValue) // 15

const votes = ["angular", "angular", "react", "react", "react","vue", "ember", "vanilla"]
const initialValue = {};
const reducer = function(poll, vote) {
    if(!poll[vote]) {
        poll[vote] = 1
    } else {
        poll[vote] = poll[vote] + 1
    }

    return poll;
}
const totalVotes = votes.reduce(reducer, initialValue)

Reduce e performance

Vamos ver dois exemplos com funções que utilizamos diariamente e como o uso do reduce pode ser útil.

Dado um array, iremos retornar um novo array com a mesma quantidade de itens sendo que seus valores são o dobro do valor inicial.

const data = [1, 2, 3, 4, 5, 6]
const initialValue = [];
const reducer = function(total, value){
    total.push(value * 2)
    return total;
}

const doubled = data.reduce(reducer, initialValue)

Esse mesmo resultado pode ser alcançado utilizando Map, inclusive com menos linhas.

Um outro caso seria filtrar o mesmo array, retornando apenas os números pares.

const data = [1, 2, 3, 4, 5, 6]
const initialValue = [];
const reducer = function(total, value){
    if(value % 2 === 0) {
        total.push(value)
    }
    return value;
}
const odd = data.reduce(reducer, initialValue)
console.log(odd)

Nesse segundo caso podemos utilizar o filter, que como o próprio nome diz, irá filtrar o array retornando o valor que desejamos.

Inclusive esses métodos podem ser utilizados em conjunto, para filtrar e retornar os números pares com valor dobrado.

Tendo isso em mente e ainda possuindo um código bem mais enxuto de se escrever, porque optaríamos por utilizar o reducer para realizar essa operação?

Nos exemplos utilizados, foram usados arrays pequenos, controlados. Mas qual seria o resultado disso em arrays muito maiores? Vamos comparar.

let bigData = []
for(let i = 0; i<1000000; i++) {
    bigData[i] = i
}

console.time('filteredMapped')
const filteredMapped = bigData.filter(value => value % 2 === 0)
.map(value => value * 2)
console.timeEnd('filteredMapped')

console.time('reducer')
const reducer = bigData.reduce(function(acc, value){
    if(value % 2 === 0) {
        acc.push(value * 2)
    }
    return acc
}, [])
console.timeEnd('reducer')

Notou a diferença no tempo de execução das funções? Se tratando de lidar com muitas informações, podemos ter um considerável ganho de performance mesmo tendo que escrever algumas linhas a mais.

A lógica utilizada é a mesma, mas onde temos um ganho é que no primeiro caso é necessário que o método filter passe por todas os 1000000 itens, para só depois o map realizar sua operação nos 500000 restantes.

Enquanto com o uso do reduce essa operação é realizada de uma única vez, nos itens que filtramos.

Atenção a possíveis erros

const votes = ["angular", "angular", "react", "react", "react","vue", "ember", "vanilla"]
const initialValue = {};
const reducer = function(poll, vote) {
    if(!poll[vote]) {
        poll[vote] = 1
    } else {
        poll[vote] = poll[vote] + 1
    }

    return poll;
}
const totalVotes = votes.reduce(reducer)

Esse foi o primeiro exemplo que utilizamos aqui, mas dessa vez ao executarmos temos um resultado diferente:

console.log(totalVotes) // 'angular'

O que será que aconteceu aqui? Notou alguma diferença na função desse exemplo e o anterior?

O problema é que esquecemos de informar o valor initial(initialValue) para o nosso reduce.

Tá, mas nesse caso não era para ter dado erro na execução? Sim... e não!

Na intenção de nos ajudar o Javascript percebe que nenhum valor inicial foi informado e assume que o primeiro item do array é esse valor. Sendo a string 'angular', um valor primitivo ele não recebe propriedades e por suas vez seu valor é falso. No final, o valor inicial é retornado.

Um outro possível caso, é esquecermos de retornar o accumulator ao final do reduce e com isso o retorno acaba sendo undefined.

Importação absoluta de arquivos em projetos com NextJS

Rafael Nogueira — Tue, 09 Mar 2021 21:27:55 +0000

Criar uma boa estrutura para o projeto é essencial para que nossa aplicação cresça organizada e seja fácil de localizarmos o que necessitamos, principalmente ao se trabalhar em um time.

Em projetos NextJS/React a tendencia é que nossos componentes importem não só pacotes mas também outros diversos componentes. Na maioria das vezes acabamos com importações como essa:

import Header from '../../../components/Header'

Podemos tornar isso mais simples utilizando alias para acessar as pastas que temos na aplicação.

Em suas últimas versões o NextJS tornou isso ainda mais simples, ainda mais para quem trabalha com o VSCode.

Na raiz do seu projeto crie o arquivo jsconfig.json ou tsconfig.json, caso seu projeto utilize Typescript.

{
    compilerOptions: {
        "baseUrl": "."
    }
}

Com o baseUrl definimos a pasta base do nosso projeto podendo assim alterar a importação para:

import Header from 'components/Header'

Paths

Por vezes utilizamos subpastas para nossos arquivos:

import Button from '../components/atoms/Button'

Utilizando o método anterior nossa importação ficaria:

import Button from 'components/atom/Button

Mas e se ainda pudermos deixar mais objetivo essa importação, diretamente para as subpastas do projeto?

Podemos fazer isso utilizando a propriedade paths da seguinte maneira:

{
    compilerOptions: {
        "baseUrl": ".",
        "paths": {
            "@/components/*": ["components/*"],
            "@/atoms/*": ["components/atoms/*"],
            "@/molecules/*": ["components/molecules/*"],
            "@/organisms/*": ["components/organisms/*"],
        }
    }
}

A partir de agora temos um caminho mais objetivo para os arquivos:

import Button from '@/atoms/Button'

Uma grande vantagem é que o próprio VSCode reconhece esse caminho, então quando realizamos importações automáticas dos nossos arquivos(utilizando cmd + espaço ou ctrl + espaço ) é aplicado o valor que definimos no paths.

No site do VSCode você pode ver outras configurações que podem ser adicionadas ao jsconfig.json e tsconfig.json.

Configuração eslint

Se você estiver utilizando o eslint no seu projeto, e realmente espero que esteja, é necessário adicionar uma regra para que ele aceite os nosso atalhos sem retornar erro.

Existem diversas maneiras de se fazer isso e uma que acho simples é que ao adicionarmos algum símbolo as nossas importações, como o @, podemos usar a seguinte regra no eslintrc:

"rules": {
    ...,
    "import/no-unresolved": ["error", { "ignore": ["^@"] }]
  },

Pronto, agora o seu projeto está pronto para continuar, com um pouco mais de organização.