DEV Community

Gabriel_Silvestre
Gabriel_Silvestre

Posted on

2 1

Introdução as HOFs - .forEach() e .sort()

Tabela de Conteúdo

.forEach()

O que faz?

Itera sobre todos os elementos do array, possibilitando a manipulação desses valores, porém não retorna valor algum. Ou seja, podemos adicionar propriedades a objetos, adicionar eventListeners a elementos HTML e até mesmo trocar um valor por outro.

  • [✔] Modifica o Array original

Sintaxe

Essa HOF, assim como todas as outras, espera uma callback como parâmetro, sendo que essa callback, por sua vez, poderá receber até três parâmetros: o elemento; o índice; e o Array que foi iterado.

someArray.forEach(/* someCallback */);
someArray.forEach((element, index, arr) => {});

someArray.forEach((e, i) => {
  console.log(e); // imprime no console, um a um, todos os elementos do Array
});
Enter fullscreen mode Exit fullscreen mode
const toys = ["trem", "car", "monster"];

toys.forEach((toy) => {
  toy.toUpperCase(); // coloca todos os brinquedos em caixa alta.
});

console.log(toys); // ["TREM", "CAR", "MONSTER"];
Enter fullscreen mode Exit fullscreen mode

Tradução - JavaScript -> Português

Podemos traduzir essa HOF com a seguinte expressão:

  • “Para cada elemento, faça X coisa.”

Voltar ao topo


.sort()

O que faz?

Ordena o array de acordo com o critério estabelecido, por padrão essa função já possui um critério próprio, que é utilizado quando não passamos uma callback através dos parâmetros.

  • [✔] Modifica o Array original

Sintaxe

Essa HOF espera uma callback que recebe apenas dois parâmetros, sendo eles os valores a serem comparados na hora de ordenar o array. Diferente de outras HOFs, aqui não temos acesso ao índice ou ao array que estamos iterando.

O callback deve retornar um número positivo, negativo ou neutro (zero), a partir desse número o .sort irá alocar o elemento para frente ou para trás.

someArray.sort();
someArray.sort(/* someCallback */);
someArray.sort((a, b) => {});

someArray.sort((a, b) => {
  return a - b;
});
Enter fullscreen mode Exit fullscreen mode
const numbers = [10, 2, 32, 13, 21];

numbers.sort(); // *O algorítimo de ordenação "padrão" do .sort() não é muito confiável
console.log(numbers); // [10, 13, 2, 21, 32]

numbers.sort((a, b) => a - b); // Ordena de forma crescente
console.log(numbers); // [2, 10, 13, 21, 32]

numbers.sort((a, b) => b - a); // Ordena de forma decrescente
console.log(numbers); // [32, 21, 13, 10, 2]
Enter fullscreen mode Exit fullscreen mode

Tradução - JavaScript -> Português

Podemos traduzir essa HOF com a seguinte expressão:

  • “Ordene esse array de acordo com X condição.”.

Voltar ao topo


Links Úteis

.forEach()

.sort()

Voltar ao topo

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay