Funções em JavaScript

Funções são um conjunto de instruções que podem ser chamadas repetidamente em diferentes partes do programa pelo nome da função. Em geral, a sintaxe para definir uma função é a seguinte:

function nomeDaFuncao(parametros) {
  // Instruções
}

A definição de uma função começa com a palavra-chave function, seguida pelo nome da função. O nome da função segue as mesmas regras que o nome de uma variável: pode conter apenas dígitos, letras, sublinhados e o cifrão $ e deve começar com uma letra, um sublinhado ou um cifrão.

Após o nome da função, os parâmetros são listados entre parênteses. Mesmo se a função não tiver parâmetros, ainda assim aparecerão parênteses vazios. Em seguida, o corpo da função é delimitado por chaves, contendo um conjunto de instruções.

Vamos definir a função mais simples:

function hello() {
  console.log("Hello www.programicio.com");
}

Esta função é chamada hello(). Ela não aceita nenhum parâmetro e tudo o que faz é imprimir a string "Hello www.programicio.com" no console do navegador.

Para que a função execute seu trabalho, precisamos chamá-la. A sintaxe geral para chamar uma função é:

nomeDaFuncao(parametros);

Quando chamada, após o nome da função especificada, uma lista de parâmetros é colocada entre parênteses. Se a função não tiver parâmetros, então parênteses vazios são usados.

Por exemplo, vamos definir e chamar a função mais simples:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <script>
      // definição da função
      function hello() {
        console.log("Hello www.programicio.com");
      }
      // chamada da função
      hello();
    </script>
  </body>
</html>

Neste caso, a função hello não aceita parâmetros, portanto, ao chamá-la, parênteses vazios são usados:

hello();

Funções em JavaScript

Uma característica distintiva das funções é que elas podem ser chamadas repetidamente em diferentes locais do programa:

// definição da função
function hello() {
  console.log("Hello www.programicio.com");
}
// chamada da função
hello();
hello();
hello();

Variáveis e Constantes como Funções

Assim como valores simples (números, strings etc.) são atribuídos a constantes e variáveis, funções também podem ser atribuídas a elas. Em seguida, através dessa variável ou constante, você pode chamar a função atribuída:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <script>
      // definição da função
      function hello() {
        console.log("Hello from www.programicio.com");
      }
      // passando a referência da função hello para a constante message
      const message = hello;
      message(); // chamamos a função cuja referência está armazenada na constante message
    </script>
  </body>
</html>

Ao atribuir uma função a uma constante ou variável:

const message = hello;

Então podemos chamar essa função pelo nome da constante/variável:

message();

Também podemos mudar dinamicamente as funções armazenadas em uma variável:

function goodMorning() {
  console.log("Bom dia");
}

function goodEvening() {
  console.log("Boa noite");
}

let message = goodMorning; // atribuímos a função goodMorning à variável message
message(); // Bom dia

message = goodEvening; // mudamos a função na variável message
message(); // Boa noite

Funções-Expressão e Funções Anônimas

Não é necessário dar um nome específico às funções. Você pode usar funções anônimas. Essas funções, ao serem definidas, são atribuídas a uma constante ou variável. Essas funções também são chamadas de funções-expressão (function expression):

const message = function () {
  console.log("Hello JavaScript");
};

message();

Usando o nome da constante ou variável à qual a função foi atribuída, você pode chamar essa função.

Funções Locais

JavaScript permite a definição de funções locais - funções dentro de outras funções. Funções locais só são visíveis dentro da função externa em que são definidas. Por exemplo:

function print() {
  printHello();
  printHello();
  printHello();

  function printHello() {
    console.log("Hello");
  }
}

print();
printHello(); // Uncaught ReferenceError: printHello is not defined - a função local só pode ser chamada de sua função circundante

Aqui, dentro da função print, uma função local printHello é definida, que simplesmente imprime a string "Hello". Dentro da função print, podemos chamar a função local printHello, mas fora da função circundante, não é possível chamar a função local.

Este exemplo é bastante simples e não tem grande significado. No entanto, geralmente, funções locais são definidas para ações que são aplicadas repetidamente apenas dentro de uma função específica e em nenhum outro lugar. Uma desvantagem das funções locais é que elas são criadas cada vez que a função externa é chamada.