Artigos > Front-end

High Order Functions: o que é?

Felipe Nascimento
Felipe Nascimento

Nesse artigo vamos entender o que é e como utilizar as funções de ordem superior ou high order functions.

Uma High Order Function é uma função que recebe uma outra função como argumento ou uma função que retorna outra função. Vamos ver na prática como isso acontece criando um sistema de login.

Funções

Segundo a documentação da mozilla, uma função é um conjunto de instruções que executa uma tarefa, então a primeira coisa que vamos fazer é criar duas funções que serão responsáveis pelo login(tarefa) de duas pessoas.

O código abaixo mostra duas funções que imprime no console, depois do término da iteração do array, iteração essa que representa o período de tempo que o sistema levaria para fazer toda a parte de autenticação que Luke e a Leia foram logados com sucesso no sistema:

const lukeLogin = () => {
  let array = []
  for( i = 0; i < 90000; i++){
    array.push(i)
  }
  return "Luke logado com sucesso!"
}

const leiaLogin = () => {
  let array = []
  for( i = 0; i < 90000; i++){
    array.push(i)
  }
  return "Leia logada com sucesso!"
}

lukeLogin()
leiaLogin()

Ao executar ambas funções vamos ter como resultado:

"Luke logado com sucesso!"
"Leia logada com sucesso!"

Podemos perceber que temos duas funções realizando uma mesma tarefa, que é fazer o login. Pensando em como podemos melhorar esse código, logo vem à mente o conceito DRY, don’t repeat yourself ou não se repita em tradução livre.

Para resolver esse “problema”, o que vamos fazer é criar uma função apenas que vai lidar com o login e ao executar essa função, passamos por parâmetro o nome de quem está logando:

const usuarioLogin = (pessoa) => {
  let array = []
  for( i = 0; i < 90000; i++){
    array.push(i)
  }
  return `${pessoa} logou com sucesso no sistema!`
}

usuarioLogin("Luke")

Executando a função teremos:

"Luke logou com sucesso no sistema!"

Agora temos uma função que ao passar o nome da pessoa por parâmetro, executa o login, Podemos melhorar mais esse código, aqui entra o poder da composição das funções.

Retornando uma função

Ao refatorar o primeiro código, ainda temos misturado lógica e exibição de resultado, utilizando o conceito de high order function, podemos compor funções para separar responsabilidades.

Nesse caso podemos criar uma função de acesso que vai cuidar da visualização do resultado e uma que vai ficar responsável pela lógica:

const acesso = (nome) => {
  return `${nome} logou com sucesso no sistema!`
}

const usuarioLogin = (nome) => {
  let array = []
  for( i = 0; i < 90000; i++){
    array.push(i)
  }
  return acesso(nome)
}

usuarioLogin("Luke")

Como as duas funções estão no mesmo escopo global, a função usuarioLogin() consegue acessar a função acesso(), assim podemos compor funções que possuem responsabilidades diferentes dentro de outras funções.

No caso da função usuarioLogin(), recebemos um nome como argumento da função, mas como a responsabilidade dela é a lógica, podemos retornar dentro dela a função acesso() que vai receber o nome passado na função usuarioLogin(), fazer a execução da sua lógica e exibir o resultado na tela.

Nosso login foi refatorado e utilizamos do conceito da high order function para compor melhor nosso sistema. Mas e se quisermos adicionar outro cargo nesse sistema como uma diretora, por exemplo?

Recebendo uma função e retornando uma função

Digamos que uma diretora por causa do seu cargo teria um tempo maior de login, por causa das várias verificações a mais no sistema, então o tempo de login seria maior. O que fariamos com nosso código, teriamos que duplicar certo?

Vamos criar então uma função para a diretora:

const acesso = (nome) => {
  return `${nome} logou com sucesso no sistema!`
}

const usuarioLogin = (nome) => {
  let array = []
  for( i = 0; i < 90000; i++){
      array.push(i)
  }
  return acesso(nome)
}

const diretoriaLogin = (nome) => {
  let array = []
  for( i = 0; i < 900000; i++){
      array.push(i)
  }
  return acesso(nome)
}

diretoriaLogin("Leia")

Na tela é exibido:

"Leia logou com sucesso no sistema!"

Mas imaginem se tivermos que criar vários cargos, teríamos que repetir o código diversas vezes? Não exatamente, o que podemos fazer é criar uma função genérica de autenticação:

const autentica = (cargo) => {
  let array = []
  for( i = 0; i < cargo; i++){
    array.push(i)
  }
  return true;
}

Com essa função criada podemos estender ainda mais a composição das funções, pois como eu disse uma high order function pode receber uma função por parâmetro ou retornar outra função, mas ela pode fazer as duas coisas.

Podemos então refatorar a função login() para receber e retornar funções:

const login = (pessoa, autentica) => {
  if(pessoa.cargo === `funcionario`) {
     autentica(90000)
  } else if(pessoa.cargo === `diretoria`) {
     autentica(900000)
  }
 return acesso(pessoa.nome)
}

O código completo ficou assim:

const acesso = (nome) => {
  return `${nome} logou com sucesso no sistema!`
}

const autentica = (cargo) => {
  let array = []
  for( i = 0; i < cargo; i++){
    array.push(i)
  }
  return true;
}

const login = (pessoa, autentica) => {
  if(pessoa.cargo === `funcionario`) {
     autentica(90000)
  } else if(pessoa.cargo === `diretoria`) {
     autentica(900000)
  }
 return acesso(pessoa.nome)
}

Agora ao executar a função de login, passamos um objeto com cargo e nome da pessoa, juntamente com a função autentica() que vai fazer a lógica de quem está tentando logar:

login({cargo: `diretoria`, nome: `Leia`}, autentica)

Vamos ter como resultado "Leia logou com sucesso no sistema!"

Agora além de retornar uma função nós também passamos uma função como argumento dizendo para ela o que fazer. Esse é o poder das high order functions, permitir compor as funções e deixar nosso código mais organizado e genérico para receber diversos tipos de interações.

Se você gostou desse conteúdo e quer saber mais aqui na Alura temos uma Formação FrontEnd onde vamos nos aprofundar ainda mais em HTML e CSS e principalmente em JavaScript.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software

Artigos > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1268 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1268 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1268 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1268 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas