Como e quando usar o Reduce em JavaScript?
- #JavaScript
A função Reduce é uma das HOF’s (funções de ordem superior) mais poderosas e versáteis da linguagem Javascript. Ela permite que você execute uma função de redução, como o nome sugere, em cada elemento de um determinado array, passando o valor retornado da operação anterior como um acumulador. O resultado final ao executar a função de redução em todos os elementos é um valor único.
Sua seguinte é a sintaxe:
array.reduce(callback(accumulator, currentValue, index, array), initialValue)
O primeiro argumento é uma função de callback que recebe quatro parâmetros:
- array: o array sobre o qual o reduce está sendo chamada.
- accumulator: o valor acumulado da redução anterior, ou o valor inicial - se fornecido.
- currentValue: o valor do elemento atual do array.
- index: o índice do elemento atual do array no momento da iteração.
A função reduce aceita, ainda, um segundo parâmetro:
- initialValue: valor inicial e não obrigatório que poderá ser usado como o primeiro valor do acumulador na primeira chamada da função de callback.
O Reduce pode ser usado para vários propósitos, como, por exemplo, somar todos os números de um array, encontrar o maior ou menor elemento, filtrar elementos que satisfaçam determinada condição, transformar um array em outro tipo de estrutura de dados, e muito mais. As possibilidade são inúmeras e é muito importante saber quando utilizá-la para facilitar as nossas vidas como pessoa desenvolvedora de software.
Aproveitando a deixa, vamos ver alguns exemplos práticos de como usar essa HOF no nosso amado JavaScript.
💡 Antes, alguns combinados relacionados às siglas usadas na função de callback. Elas deverão ser entendidas como:
acc = acumulador;
curr = valor atual;
Agora, mão na massa! 🚀
- Somar todos os números Você tem um array de números e quer obter a soma de todos eles. Para isso, uma boa alternativa seria usar o reduce passando uma função de callback que adiciona o acumulador ao valor atual e retorna o resultado. Você também pode fornecer um valor inicial de zero para o acumulador - mas lembrando que, caso não seja definido explicitamente, o valor inicial será SEMPRE 0.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15
- Encontrar o maior elemento Imagine o cenário em que você tenha um array de números e queira encontrar o maior deles. Para isso você pode usar o reduce passando uma função de callback que compara o acumulador com o valor atual e retorna o maior entre eles. Você também pode usar o primeiro elemento do array como valor inicial para o acumulador.
const numbers = [1, 2, 3, 4, 5];
const max = numbers.reduce((acc, curr) => acc > curr ? acc : curr, numbers[0]);
console.log(max); // 5
- Filtrar elementos de um array que satisfaçam uma condição Neste cenário, você tem um array de objetos que representam pessoas e quer filtrar apenas as que têm mais de 18 anos. Utilize o reduce passando uma função de callback que verifica se a idade da pessoa atual é maior ou igual a 18 e, em caso afirmativo, adiciona a pessoa a um novo array.
const people = [
{ name: 'John Doe', age: 16 },
{ name: 'Thomas Calls', age: 19 },
{ name: 'Liam Smith', age: 20 },
{ name: 'Jessy Pinkman', age: 18 },
];
const adults = people.reduce((acc, curr) => {
if (curr.age >= 18) {
acc.push(curr);
}
return acc;
}, []);
console.log(adults); /*
[{ name: 'Thomas Calls', age: 19 },
{ name: 'Liam Smith', age: 20 },
{ name: 'Jessy Pinkman', age: 18 }]
*/
- Agora um exemplo mais elaborado: transformar um array em outro tipo de estrutura de dados Suponha que você tenha um array de strings que representam cores e queira transformá-lo em um objeto que mapeia cada cor para o seu código hexadecimal. Você pode usar o reduce passando uma função de callback que atribui uma propriedade ao objeto acumulador com o nome da cor e o valor do código hexadecimal e um objeto vazio como valor inicial para o acumulador.
const colors = ['red', 'green', 'blue'];
const hexCodes = colors.reduce((acc, curr) => {
switch (curr) {
case 'red':
acc[curr] = '#FF0000';
break;
case 'green':
acc[curr] = '#00FF00';
break;
case 'blue':
acc[curr] = '#0000FF';
break;
}
return acc;
}, {});
console.log(hexCodes); // { red: '#FF0000', green: '#00FF00', blue: '#0000FF' }
Conclusão
O reduce é uma ferramenta muito útil para manipular arrays em Javascript. Ela permite criar códigos mais concisos e elegantes, evitando o uso de loops explícitos e variáveis auxiliares. Além disso, ela pode ser combinada com outras HOFs para criar soluções ainda mais poderosas.
Se quiser saber ainda mais sobre o reduce, você pode consultar os seguintes artigos:
- Higher Order Functions: How to Use Filter, Map and Reduce for More Maintainable Code
- Higher Order Functions in JavaScript – Reach New Heights in Your JS Code
- Array.prototype.reduce() - JavaScript | MDN
Gostou do artigo? Seu upvote vai me deixar mais feliz, além de fazer com que esse conteúdo chegue até outras pessoas ✨