Entendendo na prática High Order Functions [HandsOn]

Resumo do que vamos ver

• Funções como variáveis (funções anônimas)
• Revisão de arrow functions
• Funções como parâmetros (high-order functions)
• Exemplo Array.prototype.filter()
  • Comparação com for
  • Utilização do .filter()
  • Separação de funções

Passo a passo

1. Em javascript (e outras linguagens) podemos escrever funções como valores e atribuir à variáveis utilizando funções anônimas:
   
   Default

   function greet(name) { return `Hello, ${name}!` } const greet = function (name) { return `Hello, ${name}!` } const foo = greet console.log(greet('John')) console.log(foo('bar'))

   1 2 3 4 5 6 7 8 9 10 11 12 13

   function greet(name) { return `Hello, ${name}!` }   const greet = function (name) { return `Hello, ${name}!` }   const foo = greet   console.log(greet('John')) console.log(foo('bar'))

2. Também podemos escrever as funções anônimas através de arrow functions:
   
   Default

   function greet(name) { return `Hello, ${name}!` } const greet = (name) => { return `Hello, ${name}!` } const greet = name => `Hello, ${name}` const foo = greet console.log(greet('John')) console.log(foo('bar'))

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   function greet(name) { return `Hello, ${name}!` }   const greet = (name) => {   return `Hello, ${name}!` }   const greet = name => `Hello, ${name}`   const foo = greet   console.log(greet('John')) console.log(foo('bar'))

3. Também podemos passar funções como parâmetros para outras funções, chamadas high-order functions:
   
   Default

   function greet(name) { return `Hello, ${name}!` } function speakToMary(dialog) { const text = dialog('Mary') return `He says "${text}"` } console.log(speakToMary(greet))

   1 2 3 4 5 6 7 8 9 10 11

   function greet(name) { return `Hello, ${name}!` }   function speakToMary(dialog) { const text = dialog('Mary') return `He says "${text}"` }   console.log(speakToMary(greet))

4. Vamos exemplificar através da função Array.prototype.filter():
   
   Default

   const characters = [ { name: 'Frodo', race: 'Hobbit' }, { name: 'Sam', race: 'Hobbit' }, { name: 'Aragorn', race: 'Man' }, { name: 'Legolas', race: 'Elf' }, { name: 'Gimli', race: 'Dwarf' }, { name: 'Boromir', race: 'Man' }, { name: 'Merry', race: 'Hobbit' }, { name: 'Pippin', race: 'Hobbit' }, { name: 'Gandalf', race: 'Ainur' }, ] const hobbits = [] for (let i = 0; i < characters.length; i++) { if (characters[i].race === 'Hobbit') { hobbits.push(characters[i]) } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   const characters = [ { name: 'Frodo', race: 'Hobbit' }, { name: 'Sam', race: 'Hobbit' }, { name: 'Aragorn', race: 'Man' }, { name: 'Legolas', race: 'Elf' }, { name: 'Gimli', race: 'Dwarf' }, { name: 'Boromir', race: 'Man' }, { name: 'Merry', race: 'Hobbit' }, { name: 'Pippin', race: 'Hobbit' }, { name: 'Gandalf', race: 'Ainur' }, ]   const hobbits = []   for (let i = 0; i < characters.length; i++) {   if (characters[i].race === 'Hobbit') {     hobbits.push(characters[i])   } }

5. Vejamos como podemos obter o mesmo resultado com menos código:
   
   Default

   const characters = [ { name: 'Frodo', race: 'Hobbit' }, { name: 'Sam', race: 'Hobbit' }, { name: 'Aragorn', race: 'Man' }, { name: 'Legolas', race: 'Elf' }, { name: 'Gimli', race: 'Dwarf' }, { name: 'Boromir', race: 'Man' }, { name: 'Merry', race: 'Hobbit' }, { name: 'Pippin', race: 'Hobbit' }, { name: 'Gandalf', race: 'Ainur' }, ] const hobbits = characters.filter(function (character) { return character.race === 'Hobbit' })

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   const characters = [ { name: 'Frodo', race: 'Hobbit' }, { name: 'Sam', race: 'Hobbit' }, { name: 'Aragorn', race: 'Man' }, { name: 'Legolas', race: 'Elf' }, { name: 'Gimli', race: 'Dwarf' }, { name: 'Boromir', race: 'Man' }, { name: 'Merry', race: 'Hobbit' }, { name: 'Pippin', race: 'Hobbit' }, { name: 'Gandalf', race: 'Ainur' }, ]   const hobbits = characters.filter(function (character) {   return character.race === 'Hobbit' })

6. Ainda podemos utilizar as arrow functions para deixar o código ainda mais legível:
   
   Default

   const characters = [ { name: 'Frodo', race: 'Hobbit' }, { name: 'Sam', race: 'Hobbit' }, { name: 'Aragorn', race: 'Man' }, { name: 'Legolas', race: 'Elf' }, { name: 'Gimli', race: 'Dwarf' }, { name: 'Boromir', race: 'Man' }, { name: 'Merry', race: 'Hobbit' }, { name: 'Pippin', race: 'Hobbit' }, { name: 'Gandalf', race: 'Ainur' }, ] const hobbits = characters.filter(character => character.race === 'Hobbit')

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   const characters = [ { name: 'Frodo', race: 'Hobbit' }, { name: 'Sam', race: 'Hobbit' }, { name: 'Aragorn', race: 'Man' }, { name: 'Legolas', race: 'Elf' }, { name: 'Gimli', race: 'Dwarf' }, { name: 'Boromir', race: 'Man' }, { name: 'Merry', race: 'Hobbit' }, { name: 'Pippin', race: 'Hobbit' }, { name: 'Gandalf', race: 'Ainur' }, ]   const hobbits = characters.filter(character => character.race === 'Hobbit')

7. E por fim ainda podemos separar as funções:
   
   Default

   const characters = [ { name: 'Frodo', race: 'Hobbit' }, { name: 'Sam', race: 'Hobbit' }, { name: 'Aragorn', race: 'Man' }, { name: 'Legolas', race: 'Elf' }, { name: 'Gimli', race: 'Dwarf' }, { name: 'Boromir', race: 'Man' }, { name: 'Merry', race: 'Hobbit' }, { name: 'Pippin', race: 'Hobbit' }, { name: 'Gandalf', race: 'Ainur' }, ] const isHobbit = character => character.race === 'Hobbit' const hobbits = characters.filter(isHobbit)

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   const characters = [ { name: 'Frodo', race: 'Hobbit' }, { name: 'Sam', race: 'Hobbit' }, { name: 'Aragorn', race: 'Man' }, { name: 'Legolas', race: 'Elf' }, { name: 'Gimli', race: 'Dwarf' }, { name: 'Boromir', race: 'Man' }, { name: 'Merry', race: 'Hobbit' }, { name: 'Pippin', race: 'Hobbit' }, { name: 'Gandalf', race: 'Ainur' }, ]   const isHobbit = character => character.race === 'Hobbit'   const hobbits = characters.filter(isHobbit)