HOFs, uma maravilha do Javascript!
As Higher Order Functions, ou HOFs, são funções que aceitam outras funções como parâmetro e/ou retornam outra função.
map
O método map() cria um novo array, populado com os elementos que atendem aos requisitos da callback.
callback é uma função passada por parâmetro ou executada dentro de outra função.
Sintaxe
// Arrow function
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })
// Callback function
map(callbackFn)
map(callbackFn, thisArg)
// Inline callback function
map(function (element) { /* … */ })
map(function (element, index) { /* … */ })
map(function (element, index, array) { /* … */ })
map(function (element, index, array) { /* … */ }, thisArg)
Exemplos
const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num * 2);
console.log(doubles); // [2, 8, 18]
console.log(numbers); // [1, 4, 9]
const employees = [{ name: 'John' }, { name: 'Peter' }];
const wages = [3000, 2500]
const employeesWages = employees.map((employee, index) => ({ name: employee.name, wage: wages[index] }));
console.log(employees);
console.log(wages);
console.log(employeesWages)
/*
[
{
name: "John"
},
{
name: "Peter"
}
]
*/
/*
[
3000,
2500
]
*/
/*
[
{
name: "John",
wage: 3000
},
{
name: "Peter",
wage: 2500
}
]
*/
🔗Fonte: MDN: Array.prototype.map()
forEach
O método forEach() executa uma função fornecida uma vez para cada elemento da matriz.
Sintaxe
// Arrow function
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })
// Callback function
forEach(callbackFn)
forEach(callbackFn, thisArg)
// Inline callback function
forEach(function (element) { /* … */ })
forEach(function (element, index) { /* … */ })
forEach(function (element, index, array) { /* … */ })
forEach(function (element, index, array) { /* … */ }, thisArg)
Exemplos
const names = ['John', 'Peter', 'Alex'];
names.forEach((name) => console.log(name))
// expected output: "John"
// expected output: "Peter"
// expected output: "Alex"
Convertendo um loop for em forEach
const items = ["item1", "item2", "item3"];
const copyItems = [];
// before
for (let i = 0; i < items.length; i++) {
copyItems.push(items[i]);
}
// after
items.forEach((item) => {
copyItems.push(item);
});
🔗Fonte: MDN: Array.prototype.forEach()
find
O método find() retorna o primeiro elemento do array que satisfaz a condição exigida. Se nenhum valor satisfazer a função de teste, undefined será retornado.
Sintaxe
// Arrow function
find((element) => { /* … */ })
find((element, index) => { /* … */ })
find((element, index, array) => { /* … */ })
// Callback function
find(callbackFn)
find(callbackFn, thisArg)
// Inline callback function
find(function (element) { /* … */ })
find(function (element, index) { /* … */ })
find(function (element, index, array) { /* … */ })
find(function (element, index, array) { /* … */ }, thisArg)
Exemplos
const inventory = [
{ name: "apples", quantity: 2 },
{ name: "bananas", quantity: 0 },
{ name: "cherries", quantity: 5 },
];
function isCherries(fruit) {
return fruit.name === "cherries";
}
console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
const inventory = [
{ name: "apples", quantity: 2 },
{ name: "bananas", quantity: 0 },
{ name: "cherries", quantity: 5 },
];
const result = inventory.find(({ name }) => name === "cherries");
console.log(result); // { name: 'cherries', quantity: 5 }
🔗Fonte: MDN: Array.prototype.find()
filter
O método filter() cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.
Sintaxe
// Arrow function
filter((element) => { /* … */ })
filter((element, index) => { /* … */ })
filter((element, index, array) => { /* … */ })
// Callback function
filter(callbackFn)
filter(callbackFn, thisArg)
// Inline callback function
filter(function (element) { /* … */ })
filter(function (element, index) { /* … */ })
filter(function (element, index, array) { /* … */ })
filter(function (element, index, array) { /* … */ }, thisArg)
Exemplos
function isBigEnough(value) {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
function isPrime(num) {
for (let i = 2; num > i; i++) {
if (num % i === 0) {
return false;
}
}
return num > 1;
}
console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]
🔗Fonte: MDN: Array.prototype.filter()
sort
O método sort() ordena os elementos do próprio array e retorna o array. A ordenação não é necessariamente estável. A ordenação padrão é de acordo com a pontuação de código unicode.
Sintaxe
// Functionless
sort()
// Arrow function
sort((a, b) => { /* … */ } )
// Compare function
sort(compareFn)
// Inline compare function
sort(function compareFn(a, b) { /* … */ })
Exemplos
const stringArray = ["Blue", "Humpback", "Beluga"];
const numberArray = [40, 1, 5, 200];
const numericStringArray = ["80", "9", "700"];
const mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];
function compareNumbers(a, b) {
return a - b;
}
stringArray.join(); // 'Blue,Humpback,Beluga'
stringArray.sort(); // ['Beluga', 'Blue', 'Humpback']
numberArray.join(); // '40,1,5,200'
numberArray.sort(); // [1, 200, 40, 5]
numberArray.sort(compareNumbers); // [1, 5, 40, 200]
numericStringArray.join(); // '80,9,700'
numericStringArray.sort(); // ['700', '80', '9']
numericStringArray.sort(compareNumbers); // ['9', '80', '700']
mixedNumericArray.join(); // '80,9,700,40,1,5,200'
mixedNumericArray.sort(); // [1, 200, 40, 5, '700', '80', '9']
mixedNumericArray.sort(compareNumbers); // [1, 5, '9', 40, '80', 200, '700']
const items = [
{ name: "Edward", value: 21 },
{ name: "Sharpe", value: 37 },
{ name: "And", value: 45 },
{ name: "The", value: -12 },
{ name: "Magnetic", value: 13 },
{ name: "Zeros", value: 37 },
];
// sort by value
items.sort((a, b) => a.value - b.value);
// sort by name
items.sort((a, b) => {
const nameA = a.name.toUpperCase(); // ignore upper and lowercase
const nameB = b.name.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
});
🔗Fonte: MDN: Array.prototype.map()
Considerações finais.
Essas são algumas das principais HOFs do javascript, lembrando que existem varias outras, que são muito uteis, na hora de codar. Deixei como fonte a documentação do MDN, onde tem todas as HOFs.