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

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

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

Okay