WDD 131: Fundamentos da Web Dinâmica

S03 – Atividade de Aprendizagem: Funções JavaScript

Visão Geral

Funções em JavaScript são estruturas de controle de programação comuns. Elas são blocos de código que podem ser chamados pelo nome várias vezes ao longo de um programa para executar tarefas específicas. As funções podem receber dados de entrada e retornar dados de saída ao chamador.

Preparação

• Leitura: Funções – MDN

  Concentre-se em como definir funções e como chamá-las:

  • Declaração de função
  • Expressão de função
  • Expressão de função de seta (arrow function)
  • Chamando Funções

Avalie Seu Conhecimento

Considerando o seguinte snippet:

let nome = 'Antonia';
let sobrenome = 'Francesca';

• Escreva uma declaração/definição de função chamada nomeCompleto que tenha dois parâmetros chamados nome e sobrenome. O objetivo da função é combinar esses dois parâmetros de string para retornar uma string combinada (um nome "completo") com um espaço entre as variáveis nome e sobrenome.
  Resposta

  function nomeCompleto(nome, sobrenome) {
    return `${nome} ${sobrenome}`;   // Alternativa: concatenar as strings com nome + ' ' + sobrenome (não recomendado)
  }

• Use uma expressão de função anônima para fazer a mesma coisa quando a função é atribuída a uma variável chamada nomeCompleto.
  Resposta

  const nomeCompleto = function (nome, sobrenome) {
    return `${nome} ${sobrenome}`;
  }

• Use uma expressão de função de seta para fazer a mesma coisa quando a função é atribuída a uma variável chamada nomeCompleto.
  Resposta

  const nomeCompleto = (nome, sobrenome) => `${nome} ${sobrenome}`;

• Escreva uma expressão que chame a declaração da função nomeCompleto e grave o resultado em um nó de texto de um elemento HTML existente com o ID nomeCompleto.
  Resposta

  document.querySelector('#nomeCompleto').innerHTML = nomeCompleto(nome, sobrenome);