Funções JavaScript

Introdução

Em JavaScript, as funções são um dos blocos de construção fundamentais. Elas são blocos de código reutilizáveis que você pode escrever uma vez e executar várias vezes. Usar funções ajuda a organizar seu código, torná-lo mais legível e evitar repetição.

Neste laboratório, você aprenderá os conceitos básicos de criação e uso de funções em JavaScript. Você criará uma função simples que soma dois números e aprenderá como defini-la, passar dados para ela, obter um resultado de volta e exibir esse resultado.

Definir função com a palavra-chave function

Nesta etapa, você definirá sua primeira função. Uma função é definida usando a palavra-chave function, seguida por um nome, um conjunto de parênteses () e um bloco de código (o corpo da função) entre chaves {}.

Primeiro, localize o arquivo script.js no explorador de arquivos no lado esquerdo do WebIDE e abra-o. Escreveremos todo o nosso código JavaScript neste arquivo.

Agora, adicione o seguinte código ao script.js para definir uma função chamada addNumbers.

function addNumbers() {
  // Code will go here
}

Este código cria uma função vazia. Ela ainda não faz nada, mas é uma definição de função válida. O nome addNumbers é como nos referiremos a esta função mais tarde.

Adicionar parâmetros à definição da função

Nesta etapa, você adicionará parâmetros à sua função. Parâmetros são como espaços reservados para os dados que uma função receberá quando for chamada. Você os define dentro dos parênteses () na definição da função, separados por vírgulas.

Vamos modificar a função addNumbers para aceitar dois números que queremos somar. Chamaremos esses parâmetros de num1 e num2.

Atualize seu arquivo script.js com o seguinte código.

function addNumbers(num1, num2) {
  // Code will go here
}

Agora, a função addNumbers está configurada para receber dois valores. Dentro da função, você pode usar num1 e num2 como variáveis que contêm os valores passados para a função.

Retornar valor da função usando return

Nesta etapa, você fará com que a função execute uma ação e envie um resultado de volta. A instrução return é usada para especificar o valor que a função deve produzir. Quando o JavaScript atinge uma instrução return, a função para de executar e o valor especificado é retornado para onde a função foi chamada.

Vamos adicionar a lógica à nossa função para somar os dois parâmetros e retornar o resultado.

Atualize seu arquivo script.js. Adicione a instrução return dentro das chaves da função.

function addNumbers(num1, num2) {
  return num1 + num2;
}

Agora, quando a função addNumbers for executada, ela calculará a soma de num1 e num2 e retornará esse valor.

Chamar função com argumentos

Nesta etapa, você chamará a função para executá-la. Definir uma função não a executa. Para executar a função e obter um resultado, você deve "chamar" ou "invocar" a função. Ao chamar uma função, você fornece valores reais, chamados argumentos, para os parâmetros que você definiu.

O valor retornado pela função pode ser armazenado em uma variável para uso posterior.

Adicione as seguintes linhas ao seu arquivo script.js, abaixo da definição da função, para chamar a função addNumbers com os argumentos 5 e 10.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

Neste código, addNumbers(5, 10) chama a função. O valor 5 é passado para o parâmetro num1, e 10 é passado para o parâmetro num2. A função retorna 15, que é então armazenado na variável sum.

Registrar resultado da função no console

Nesta etapa final, você exibirá o resultado da sua chamada de função. Uma maneira comum de ver o valor de variáveis ou a saída de código no desenvolvimento web é usar console.log(). Esta função imprime mensagens no console do desenvolvedor do navegador web.

Adicione a seguinte linha ao final do seu arquivo script.js para registrar o valor da variável sum.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

console.log(sum);

Para ver a saída:

1. Certifique-se de que seu arquivo script.js está salvo.
2. Mude para a aba Web 8080 no topo da interface do LabEx.
3. Abra as ferramentas de desenvolvedor do navegador. Geralmente, você pode fazer isso clicando com o botão direito na página e selecionando "Inspecionar" (Inspect), ou pressionando F12.
4. No painel das ferramentas de desenvolvedor, clique na aba Console.

Você deverá ver o número 15 impresso no console. Este é o resultado retornado pela sua função addNumbers.

Resumo

Parabéns por completar este laboratório! Você aprendeu os conceitos essenciais das funções JavaScript.

Você conseguiu com sucesso:

• Definir uma função usando a palavra-chave function.
• Adicionar parâmetros a uma função para aceitar dados de entrada.
• Usar a instrução return para retornar um valor de uma função.
• Chamar uma função com argumentos para executar seu código e armazenar o resultado em uma variável.
• Usar console.log() para visualizar a saída no console do desenvolvedor do navegador.

Funções são uma parte central da escrita de código JavaScript limpo, eficiente e reutilizável. Continue praticando esses conceitos para se familiarizar mais com eles.