Introdução as HOFs - .forEach() e .sort()
Tags: javascript, beginners, braziliandevs, codenewbie
Published: 2022-11-09 00:06:23

## Tabela de Conteúdo

- [forEach](#foreach)
- [sort](#sort)
- [Links Úteis](#links-úteis)

## .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.

```js
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
});
```

```js
const toys = ["trem", "car", "monster"];

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

console.log(toys); // ["TREM", "CAR", "MONSTER"];
```

### Tradução - JavaScript -> Português

Podemos traduzir essa HOF com a seguinte expressão:

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

<br />

<small>[Voltar ao topo](#tabela-de-conteúdo)</small>

---

## .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.

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

someArray.sort((a, b) => {
  return a - b;
});
```

```js
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]
```

### Tradução - JavaScript -> Português

Podemos traduzir essa HOF com a seguinte expressão:

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

<br />

<small>[Voltar ao topo](#tabela-de-conteúdo)</small>

---

## Links Úteis


### .forEach()

- [Documentação MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
- [Documentação W3Schools](https://www.w3schools.com/jsref/jsref_foreach.asp)
- [YouTube Tecnologia em Vídeo](https://www.youtube.com/watch?v=E4In5QhNYHw)

### .sort()
- [Documentação MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
- [Documentação W3Schools](https://www.w3schools.com/jsref/jsref_sort.asp)
- [YouTube Tecnologia em Vídeo](https://www.youtube.com/watch?v=qVKSb0OPQPQ)

<br />

<small>[Voltar ao topo](#tabela-de-conteúdo)</small>