Resumo : neste tutorial, você aprenderá que as funções JavaScript são cidadãs de primeira classe. Isso significa que você pode armazenar funções em variáveis, passá-las para outras funções como argumentos e retorná-las de outras funções como valores.
Armazenando funções em variáveis
As funções são cidadãs de primeira classe em JavaScript. Em outras palavras, você pode tratar funções como valores de outros tipos.
O seguinte define a add()função e atribui o nome da função à variável sum:
function add(a, b) {
return a + b;
}
let sum = add;Linguagem de código: JavaScript ( javascript )Na instrução de atribuição, não incluímos os parênteses de abertura e fechamento no final do addidentificador. Também não executamos a função, mas fazemos referência à função.
Fazendo isso, podemos ter duas maneiras de executar a mesma função. Por exemplo, podemos chamá-lo normalmente da seguinte forma:
let result = add(10, 20);Linguagem de código: JavaScript ( javascript )Alternativamente, podemos todas as add()funções por meio da sumvariável assim:
let result = sum(10,20);Linguagem de código: JavaScript ( javascript )Passando uma função para outra função
Como funções são valores, você pode passar uma função como argumento para outra função.
O seguinte declara a average()função que recebe três argumentos. O terceiro argumento é uma função:
function average(a, b, fn) {
return fn(a, b) / 2;
}Linguagem de código: JavaScript ( javascript )Agora, você pode passar a sumfunção para a average()função da seguinte maneira:
let result = average(10, 20, sum);Linguagem de código: JavaScript ( javascript )Junte tudo:
function add(a, b) {
return a + b;
}
let sum = add;
function average(a, b, fn) {
return fn(a, b) / 2;
}
let result = average(10, 20, sum);
console.log(result);Linguagem de código: JavaScript ( javascript )Saída:
15Retornando funções de funções
Como funções são valores, você pode retornar uma função de outra função.
A compareBy()função a seguir retorna uma função que compara dois objetos por uma propriedade:
function compareBy(propertyName) {
return function (a, b) {
let x = a[propertyName],
y = b[propertyName];
if (x > y) {
return 1;
} else if (x < y) {
return -1;
} else {
return 0;
}
};
}Linguagem de código: JavaScript ( javascript )Observe que a[propertyName]retorna o valor do propertyNameobjeto a. É equivalente a a.propertyName. No entanto, se propertyNamecontiver um espaço como 'Discount Price', você precisará usar a notação de colchetes para acessá-lo.
Suponha que você tenha uma matriz de objetos de produto em que cada objeto de produto tenha duas propriedades: name e price.
let products = [
{name: 'iPhone', price: 900},
{name: 'Samsung Galaxy', price: 850},
{name: 'Sony Xperia', price: 700}
];Linguagem de código: JavaScript ( javascript )Você pode classificar um array chamando o sort() método. O sort() método aceita uma função que compara dois elementos do array como argumento.
Por exemplo, você pode classificar os objetos do produto com base no nome, passando uma função retornada da compareBy() função da seguinte maneira:
console.log('Products sorted by name:');
products.sort(compareBy('name'));
console.table(products);Linguagem de código: JavaScript ( javascript )Saída:
Products sorted by name:
┌─────────┬──────────────────┬───────┐
│ (index) │ name │ price │
├─────────┼──────────────────┼───────┤
│ 0 │ 'Samsung Galaxy' │ 850 │
│ 1 │ 'Sony Xperia' │ 700 │
│ 2 │ 'iPhone' │ 900 │
└─────────┴──────────────────┴───────┘Linguagem de código: texto simples ( texto simples )Da mesma forma, você pode classificar os objetos de produto por preço:
// sort products by prices
console.log('Products sorted by price:');
products.sort(compareBy('price'));
console.table(products);Linguagem de código: JavaScript ( javascript )Saída:
Products sorted by price:
┌─────────┬──────────────────┬───────┐
│ (index) │ name │ price │
├─────────┼──────────────────┼───────┤
│ 0 │ 'Sony Xperia' │ 700 │
│ 1 │ 'Samsung Galaxy' │ 850 │
│ 2 │ 'iPhone' │ 900 │
└─────────┴──────────────────┴───────┘Linguagem de código: JavaScript ( javascript )Junte tudo.
function compareBy(propertyName) {
return function (a, b) {
let x = a[propertyName],
y = b[propertyName];
if (x > y) {
return 1;
} else if (x < y) {
return -1;
} else {
return 0;
}
};
}
let products = [
{ name: 'iPhone', price: 900 },
{ name: 'Samsung Galaxy', price: 850 },
{ name: 'Sony Xperia', price: 700 },
];
// sort products by name
console.log('Products sorted by name:');
products.sort(compareBy('name'));
console.table(products);
// sort products by price
console.log('Products sorted by price:');
products.sort(compareBy('price'));
console.table(products);
Linguagem de código: JavaScript ( javascript )Mais funções JavaScript são exemplos de cidadãos de primeira classe
O exemplo a seguir define duas funções que convertem um comprimento em centímetros em polegadas e vice-versa:
function cmToIn(length) {
return length / 2.54;
}
function inToCm(length) {
return length * 2.54;
}Linguagem de código: JavaScript ( javascript )A convert()função a seguir possui dois parâmetros. O primeiro parâmetro é uma função e o segundo é o comprimento que será convertido com base no primeiro argumento:
function convert(fn, length) {
return fn(length);
}Linguagem de código: JavaScript ( javascript )Para converter cmpara in, você pode chamar a convert()função e passá-la cmToInpara a convert()função como primeiro argumento:
let inches = convert(cmToIn, 10);
console.log(inches);Linguagem de código: JavaScript ( javascript )Saída:
3.937007874015748Linguagem de código: CSS ( css )Da mesma forma, para converter um comprimento de polegadas em centímetros, você pode passar a inToCmfunção para a convert()função, assim:
let cm = convert(inToCm, 10);
console.log(cm);Linguagem de código: JavaScript ( javascript )Saída:
25.4Linguagem de código: CSS ( css )Junte tudo.
function cmToIn(length) {
return length / 2.54;
}
function inToCm(length) {
return length * 2.54;
}
function convert(fn, length) {
return fn(length);
}
let inches = convert(cmToIn, 10);
console.log(inches);
let cm = convert(inToCm, 10);
console.log(cm);Linguagem de código: JavaScript ( javascript )Saída:
3.937007874015748
25.4Linguagem de código: CSS ( css )Resumo
- As funções são cidadãs de primeira classe em JavaScript.
- Você pode passar funções para outras funções como argumentos, retorná-las de outras funções como valores e armazená-las em variáveis.
