30-Days-Of-JavaScript/Portuguese/Dia_07_Funcoes/Dia_07_Funcoes.md

30 Dias De JavaScript: Funções

_{Autor: Asabeneh Yetayeh
Janeiro, 2020}

<< Dia 6 | Dia 8 >>

• 📔 Dia 7
  • Funções
    • Declaração de Função
    • Função sem parâmetro e retorno
    • Função retornando valor
    • Função com um parâmetro
    • Função com dois parâmetros
    • Função com muitos parâmetros
    • Função com número ilimitado de parâmetros
      • Número ilimitado de parâmetros em função regular
      • Número ilimitado de parâmetros em função de seta
    • Função Anônima
    • Função de Expressão
    • Funções Autoinvocáveis
    • Função de Seta
    • Função com parâmetros padrão
    • Declaração de função versus Função de seta
  • 💻 Exercícios
    • Exercícios: Nível 1
    • Exercícios: Nível 2
    • Exercícios: Nível 3

📔 Dia 7

Funções

Até agora, vimos muitas funções integradas no JavaScript. Nesta seção, focaremos em funções personalizadas. O que é uma função? Antes de começarmos a criar funções, vamos entender o que é uma função e por que precisamos de funções?

Uma função é um bloco de código reutilizável ou declarações de programação projetadas para realizar uma tarefa específica. Uma função é declarada pela palavra-chave function seguida de um nome, seguido por parênteses (). Os parênteses podem conter um parâmetro. Se uma função tiver um parâmetro, ela será chamada com um argumento. Uma função também pode ter um parâmetro padrão. Para armazenar dados em uma função, ela deve retornar algum tipo de dado. Para obter o valor, chamamos ou invocamos uma função. Funções tornam o código:

• Limpo e fácil de ler
• Reutilizável
• Fácil de testar

Uma função pode ser declarada ou criada de várias maneiras:

• Declaração de função
• Função de expressão
• Função anônima
• Função de seta (Arrow Function)

Declaração de Função

Vamos ver como declarar uma função e como chamá-la.

// declarando uma função sem um parâmetro
function nomeDaFuncao() {
  // o código vai aqui
}
nomeDaFuncao(); // chamando a função pelo nome e com parênteses

Função sem parâmetro e retorno

A função pode ser declarada sem um parâmetro.

Exemplo:

// função sem parâmetro, uma função que faz um número ao quadrado
function quadrado() {
  let num = 2;
  let sq = num * num;
  console.log(sq);
}

quadrado(); // 4

// função sem parâmetro
function somarDoisNumeros() {
  let numUm = 10;
  let numDois = 20;
  let soma = numUm + numDois;

  console.log(soma);
}

somarDoisNumeros(); // uma função tem que ser chamada pelo seu nome para ser executada

function imprimirNomeCompleto() {
  let primeiroNome = 'Asabeneh';
  let sobrenome = 'Yetayeh';
  let espaco = ' ';
  let nomeCompleto = primeiroNome + espaco + sobrenome;
  console.log(nomeCompleto);
}

imprimirNomeCompleto(); // chamando uma função

Função retornando valor

A função também pode retornar valores, se uma função não retornar valores o valor da função é indefinido. Vamos escrever as funções acima com retorno. De agora em diante, retornamos valor para uma função em vez de imprimi-lo.

function imprimirNomeCompleto() {
  let primeiroNome = 'Asabeneh';
  let sobrenome = 'Yetayeh';
  let espaco = ' ';
  let nomeCompleto = primeiroNome + espaco + sobrenome;
  return nomeCompleto;
}
console.log(imprimirNomeCompleto());

function somarDoisNumeros() {
  let numUm = 2;
  let numDois = 3;
  let total = numUm + numDois;
  return total;
}

console.log(somarDoisNumeros());

Função com um parâmetro

Em uma função, podemos passar diferentes tipos de dados (número, string, booleano, objeto, função) como um parâmetro.

// função com um parâmetro
function nomeDaFuncao(param1) {
  // o código vai aqui
}
nomeDaFuncao(param1); // durante a chamada ou invocação, um argumento é necessário

function areaDoCirculo(r) {
  let area = Math.PI * r * r;
  return area;
}

console.log(areaDoCirculo(10)); // deve ser chamada com um argumento

function quadrado(numero) {
  return numero * numero;
}

console.log(quadrado(10));

Função com dois parâmetros

// função com dois parâmetros
function nomeDaFuncao(param1, param2) {
  // o código vai aqui
}
nomeDaFuncao(param1, param2); // durante a chamada ou invocação, dois argumentos são necessários
// Função sem parâmetro não recebe entrada, então vamos fazer uma função com parâmetros
function somarDoisNumeros(numUm, numDois) {
  let soma = numUm + numDois;
  console.log(soma);
}
somarDoisNumeros(10, 20); // chamando funções
// Se uma função não retornar, ela não armazena dados, então ela deve retornar

function somarDoisNumeros(numUm, numDois) {
  let soma = numUm + numDois;
  return soma;
}

console.log(somarDoisNumeros(10, 20));
function imprimirNomeCompleto(primeiroNome, sobrenome) {
  return `${primeiroNome} ${sobrenome}`;
}
console.log(imprimirNomeCompleto('Asabeneh', 'Yetayeh'));

Função com muitos parâmetros

// função com vários parâmetros
function nomeDaFuncao(param1, param2, param3,...) {
  // o código vai aqui
}
nomeDaFuncao(param1, param2, param3,...); // durante a chamada ou invocação, três argumentos são necessários

// esta função recebe um array como parâmetro e soma os números no array
function somarValoresArray(arr) {
  let soma = 0;
  for (let i = 0; i < arr.length; i++) {
    soma = soma + arr[i];
  }
  return soma;
}
const numeros = [1, 2, 3, 4, 5];
// chamando a função
console.log(somarValoresArray(numeros));

const areaDoCirculo = (raio) => {
  let area = Math.PI * raio * raio;
  return area;
}
console.log(areaDoCirculo(10));

Função com número ilimitado de parâmetros

Às vezes, não sabemos quantos argumentos o usuário vai passar. Portanto, devemos saber como escrever uma função que pode receber um número ilimitado de argumentos. A maneira de fazer isso tem uma diferença significativa entre uma declaração de função (função regular) e uma função de seta. Vamos ver exemplos em ambas declaração de função e função de seta.

Número ilimitado de parâmetros em função regular

Uma declaração de função fornece um objeto de argumentos de escopo de função. Qualquer coisa que passarmos como argumento na função pode ser acessada a partir do objeto arguments dentro das funções. Vamos ver um exemplo.

// Vamos acessar o objeto arguments

function somarTodosNums() {
  console.log(arguments);
}

somarTodosNums(1, 2, 3, 4);
// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// declaração de função

function somarTodosNums() {
  let soma = 0;
  for (let i = 0; i < arguments.length; i++) {
    soma += arguments[i];
  }
  return soma;
}

console.log(somarTodosNums(1, 2, 3, 4)); // 10
console.log(somarTodosNums(10, 20, 13, 40, 10)); // 93
console.log(somarTodosNums(15, 20, 30, 25, 10, 33, 40)); // 173

Número ilimitado de parâmetros em função de seta

A função de seta não possui o objeto de argumentos de escopo de função. Para implementar uma função que recebe um número ilimitado de argumentos em uma função de seta, usamos o operador de propagação seguido por qualquer nome de parâmetro. Qualquer coisa que passarmos como argumento na função pode ser acessada como array na função de seta. Vamos ver um exemplo.

// Vamos acessar o objeto arguments

const somarTodosNums = (...args) => {
  // console.log(arguments), objeto de arguments não encontrado em função de seta
  // em vez disso, usamos um parâmetro seguido pelo operador de propagação (...)
  console.log(args);
};

somarTodosNums(1, 2, 3, 4);
// [1, 2, 3, 4]

// declaração de função

const somarTodosNums = (...args) => {
  let soma = 0;
  for (const elemento of args) {
    soma += elemento;
  }
  return soma;
};

console.log(somarTodosNums(1, 2, 3, 4)); // 10
console.log(somarTodosNums(10, 20, 13, 40, 10)); // 93
console.log(somarTodosNums(15, 20, 30, 25, 10, 33, 40)); // 173

Função Anônima

Função anônima ou sem nome.

const funcaoAnonima = function () {
  console.log(
    'Eu sou uma função anônima e meu valor está armazenado em funcaoAnonima'
  );
};

Função de Expressão

Funções de expressão são funções anônimas. Depois de criarmos uma função sem nome e a atribuímos a uma variável. Para retornar um valor da função, devemos chamar a variável. Veja o exemplo abaixo.

// Função de expressão
const quadrado = function (n) {
  return n * n;
};

console.log(quadrado(2)); // -> 4

Funções Autoinvocáveis

Funções autoinvocáveis são funções anônimas que não precisam ser chamadas para retornar um valor.

(function (n) {
  console.log(n * n);
})(2); // 4, mas em vez de apenas imprimir, se quisermos retornar e armazenar os dados, fazemos como mostrado abaixo

let numeroAoQuadrado = (function (n) {
  return n * n;
})(10);

console.log(numeroAoQuadrado);

Função de Seta

A função de seta é uma alternativa para escrever uma função, no entanto, declaração de função e função de seta têm algumas pequenas diferenças.

A função de seta usa seta em vez da palavra-chave function para declarar uma função. Vamos ver tanto a declaração de função quanto a função de seta.

// Assim é como escrevemos uma função normal ou de declaração
// Vamos mudar esta função de declaração para uma função de seta
function quadrado(n) {
  return n * n;
}

console.log(quadrado(2)); // 4

const quadrado = (n) => {
  return n * n;
};

console.log(quadrado(2)); // -> 4

// se tivermos apenas uma linha no bloco de código, pode ser escrito da seguinte forma, retorno explícito
const quadrado = (n) => n * n; // -> 4

const mudarParaMaiusculo = (arr) => {
  const newArr = [];
  for (const elemento of arr) {
    newArr.push(elemento.toUpperCase());
  }
  return newArr;
};

const paises = ['Finlândia', 'Suécia', 'Noruega', 'Dinamarca', 'Islândia'];
console.log(mudarParaMaiusculo(paises));

// ["FINLÂNDIA", "SUÉCIA", "NORUEGA", "DINAMARCA", "ISLÂNDIA"]

const imprimirNomeCompleto = (primeiroNome, ultimoNome) => {
  return `${primeiroNome} ${ultimoNome}`;
};

console.log(imprimirNomeCompleto('Asabeneh', 'Yetayeh'));

A função acima tem apenas a declaração de retorno, portanto, podemos retorná-la explicitamente da seguinte forma.

const imprimirNomeCompleto = (primeiroNome, ultimoNome) =>
  `${primeiroNome} ${ultimoNome}`;

console.log(imprimirNomeCompleto('Asabeneh', 'Yetayeh'));

Função com parâmetros padrão

Às vezes passamos valores padrão para os parâmetros, quando invocamos a função se não passarmos um argumento o valor padrão será usado. Tanto a declaração de função quanto a função de seta podem ter um valor padrão ou valores.

// sintaxe
// Declarando uma função
function nomeDaFuncao(param = valor) {
  //códigos
}

// Chamando função
nomeDaFuncao();
nomeDaFuncao(arg);

Exemplo:

function saudacoes(nome = 'Pedro') {
  let mensagem = `${nome}, bem-vindo aos 30 Dias De JavaScript!`;
  return mensagem;
}

console.log(saudacoes());
console.log(saudacoes('Asabeneh'));

function gerarNomeCompleto(primeiroNome = 'Asabeneh', ultimoNome = 'Yetayeh') {
  let espaco = ' ';
  let nomeCompleto = primeiroNome + espaco + ultimoNome;
  return nomeCompleto;
}

console.log(gerarNomeCompleto());
console.log(gerarNomeCompleto('David', 'Smith'));

function calcularIdade(anoDeNascimento, anoAtual = 2019) {
  let idade = anoAtual - anoDeNascimento;
  return idade;
}

console.log('Idade: ', calcularIdade(1819));

function pesoDoObjeto(massa, gravidade = 9.81) {
  let peso = massa * gravidade + ' N'; // o valor deve ser convertido para string primeiro
  return peso;
}

console.log('Peso de um objeto em Newton: ', pesoDoObjeto(100)); // gravidade na superfície da Terra
console.log('Peso de um objeto em Newton: ', pesoDoObjeto(100, 1.62)); // gravidade na superfície da Lua

Vamos ver como escrevemos as funções acimas com funções de seta

// sintaxe
// Declarando uma função
const nomeDaFuncao = (param = valor) => {
  //códigos
};

// Chamando função
nomeDaFuncao();
nomeDaFuncao(arg);

Exemplo:

const saudacoes = (nome = 'Pedro') => {
  let mensagem = nome + ', bem-vindo aos 30 Dias De JavaScript!';
  return mensagem;
};

console.log(saudacoes());
console.log(saudacoes('Asabeneh'));

const gerarNomeCompleto = (
  primeiroNome = 'Asabeneh',
  ultimoNome = 'Yetayeh'
) => {
  let espaco = ' ';
  let nomeCompleto = primeiroNome + espaco + ultimoNome;
  return nomeCompleto;
};

console.log(gerarNomeCompleto());
console.log(gerarNomeCompleto('David', 'Smith'));

const calcularIdade = (anoDeNascimento, anoAtual = 2019) =>
  anoAtual - anoDeNascimento;
console.log('Idade: ', calcularIdade(1819));

const pesoDoObjeto = (massa, gravidade = 9.81) => massa * gravidade + ' N';

console.log('Peso de um objeto em Newton: ', pesoDoObjeto(100)); // gravidade na superfície da Terra
console.log('Peso de um objeto em Newton: ', pesoDoObjeto(100, 1.62)); // gravidade na superfície da Lua

Declaração de função versus Função de seta

Será abordado em outra seção.

🌕 Você é uma estrela em ascensão, agora você conhece funções. Agora, você está super carregado com o poder das funções. Você acabou de completar os desafios do dia 7 e está 7 passos à frente no seu caminho para a grandeza. Agora faça alguns exercícios para o seu cérebro e para o seu músculo.

💻 Exercícios

Exercícios: Nível 1

1. Declare uma função fullName e ela imprime seu nome completo.

2. Declare uma função fullName e agora ela recebe firstName, lastName como parâmetro e retorna seu nome completo.

3. Declare uma função addNumbers e ela recebe dois parâmetros e retorna a soma.

4. A área de um retângulo é calculada como segue: área = comprimento x largura. Escreva uma função que calcula areaOfRectangle.

5. O perímetro de um retângulo é calculado como segue: perímetro= 2x(comprimento + largura). Escreva uma função que calcula perimeterOfRectangle.

6. O volume de um prisma retangular é calculado como segue: volume = comprimento x largura x altura. Escreva uma função que calcula volumeOfRectPrism.

7. A área de um círculo é calculada como segue: área = π x r x r. Escreva uma função que calcula areaOfCircle

8. A circunferência de um círculo é calculada como segue: circunferência = 2πr. Escreva uma função que calcula circumOfCircle

9. A densidade de uma substância é calculada como segue:densidade= massa/volume. Escreva uma função que calcula density.

10. A velocidade é calculada dividindo a distância total coberta por um objeto em movimento pela quantidade total de tempo tomado. Escreva uma função que calcula a velocidade de um objeto em movimento, speed.

11. O peso de uma substância é calculado como segue: peso = massa x gravidade. Escreva uma função que calcula weight.

12. A temperatura em oC pode ser convertida para oF usando esta fórmula: oF = (oC x 9/5) + 32. Escreva uma função que converte oC para oF convertCelsiusToFahrenheit.

13. O índice de massa corporal (IMC) é calculado como segue: imc = peso em Kg / (altura x altura) em m2. Escreva uma função que calcula bmi. O IMC é usado para definir amplamente diferentes grupos de peso em adultos de 20 anos ou mais. Verifique se uma pessoa está abaixo do peso, peso normal, sobrepeso ou obesa com base nas informações fornecidas abaixo.

    • Os mesmos grupos se aplicam a homens e mulheres.
    • Abaixo do peso: IMC é menor que 18.5
    • Peso normal: IMC é 18.5 a 24.9
    • Sobrepeso: IMC é 25 a 29.9
    • Obeso: IMC é 30 ou mais

14. Escreva uma função chamada checkSeason, ela recebe um parâmetro de mês e retorna a estação: Outono, Inverno, Primavera ou Verão.

15. Math.max retorna seu maior argumento. Escreva uma função findMax que recebe três argumentos e retorna o máximo deles sem usar o método Math.max.

    console.log(findMax(0, 10, 5));
    10;
    console.log(findMax(0, -10, -2));
    0;
    

Exercícios: Nível 2

1. Equação linear é calculada como segue: ax + by + c = 0. Escreva uma função que calcula o valor de uma equação linear, solveLinEquation.

2. Equação quadrática é calculada como segue: ax2 + bx + c = 0. Escreva uma função que calcula o valor ou valores de uma equação quadrática, solveQuadEquation.

   console.log(solveQuadratic()); // {0}
   console.log(solveQuadratic(1, 4, 4)); // {-2}
   console.log(solveQuadratic(1, -1, -2)); // {2, -1}
   console.log(solveQuadratic(1, 7, 12)); // {-3, -4}
   console.log(solveQuadratic(1, 0, -4)); //{2, -2}
   console.log(solveQuadratic(1, -1, 0)); //{1, 0}
   

3. Declare uma função chamada printArray. Ela recebe um array como parâmetro e imprime cada valor do array.

4. Escreva uma função chamada showDateTime que mostra a hora neste formato: 08/01/2020 04:08 usando o objeto Date.

   showDateTime()
   08/01/2020 04:08
   

5. Declare uma função chamada swapValues. Esta função troca o valor de x por y.

   swapValues(3, 4); // x => 4, y=>3
   swapValues(4, 5); // x = 5, y = 4
   

6. Declare uma função chamada reverseArray. Ela recebe um array como parâmetro e retorna o inverso do array (não use o método).

   console.log(reverseArray([1, 2, 3, 4, 5]));
   //[5, 4, 3, 2, 1]
   console.log(reverseArray(['A', 'B', 'C']));
   //['C', 'B', 'A']
   

7. Declare uma função chamada capitalizeArray. Ela recebe um array como parâmetro e retorna o array com letras maiúsculas.

8. Declare uma função chamada addItem. Ela recebe um item como parâmetro e retorna um array após adicionar o item.

9. Declare uma função chamada removeItem. Ela recebe um índice como parâmetro e retorna um array após remover um item.

10. Declare uma função chamada sumOfNumbers. Ela recebe um número como parâmetro e soma todos os números naquele intervalo.

11. Declare uma função chamada sumOfOdds. Ela recebe um número como parâmetro e soma todos os números ímpares naquele intervalo.

12. Declare uma função chamada sumOfEven. Ela recebe um número como parâmetro e soma todos os números pares naquele intervalo.

13. Declare uma função chamada evensAndOdds. Ela recebe um inteiro positivo como parâmetro e conta o número de pares e ímpares no número.

evensAndOdds(100);
The number of odds are 50.
The number of evens are 51.

14. Escreva uma função que recebe qualquer número de argumentos e retorna a soma dos argumentos.

sum(1, 2, 3); // -> 6
sum(1, 2, 3, 4); // -> 10

15. Escreva uma função que gera um randomUserIp.

16. Escreva uma função que gera um randomMacAddress.

17. Declare uma função chamada randomHexaNumberGenerator. Quando esta função é chamada, ela gera um número hexadecimal aleatório. A função retorna o número hexadecimal.

console.log(randomHexaNumberGenerator());
'#ee33df'

18. Declare uma função chamada userIdGenerator. Quando esta função é chamada, ela gera um id de sete caracteres. A função retorna o id.

console.log(userIdGenerator());
41XTDbE

Exercícios: Nível 3

1. Modifique a função userIdGenerator. Declare uma função chamada userIdGeneratedByUser. Ela não recebe nenhum parâmetro, mas recebe duas entradas usando prompt(). Uma das entradas é o número de caracteres e a segunda entrada é o número de ids que devem ser gerados.

   userIdGeneratedByUser()
   'kcsy2
   SMFYb
   bWmeq
   ZXOYh
   2Rgxf
   '
   userIdGeneratedByUser()
   '1GCSgPLMaBAVQZ26
   YD7eFwNQKNs7qXaT
   ycArC5yrRupyG00S
   UbGxOFI7UXSWAyKN
   dIV0SSUTgAdKwStr
   '
   

2. Escreva uma função chamada rgbColorGenerator e ela gera cores RGB.

   rgbColorGenerator()
   rgb(125,244,255)
   

3. Escreva uma função arrayOfHexaColors que retorna qualquer número de cores hexadecimais em um array.

4. Escreva uma função arrayOfRgbColors que retorna qualquer número de cores RGB em um array.

5. Escreva uma função convertHexaToRgb que converte cor hexadecimal para RGB e retorna uma cor RGB.

6. Escreva uma função convertRgbToHexa que converte cor RGB para hexadecimal e retorna uma cor hexadecimal.

7. Escreva uma função generateColors que pode gerar qualquer número de cores hexadecimais ou RGB.

   console.log(generateColors('hexa', 3)); // ['#a3e12f', '#03ed55', '#eb3d2b']
   console.log(generateColors('hexa', 1)); // '#b334ef'
   console.log(generateColors('rgb', 3)); // ['rgb(5, 55, 175)', 'rgb(50, 105, 100)', 'rgb(15, 26, 80)']
   console.log(generateColors('rgb', 1)); // 'rgb(33,79, 176)'
   

8. Chame sua função shuffleArray, ela recebe um array como parâmetro e retorna um array embaralhado.

9. Chame sua função factorial, ela recebe um número inteiro como parâmetro e retorna um fatorial do número.

10. Chame sua função isEmpty, ela recebe um parâmetro e verifica se está vazio ou não.

11. Chame sua função sum, ela recebe qualquer número de argumentos e retorna a soma.

12. Escreva uma função chamada sumOfArrayItems, ela recebe um parâmetro de array e retorna a soma de todos os itens. Verifique se todos os itens do array são do tipo número. Se não, forneça um feedback adequado.

13. Escreva uma função chamada average, ela recebe um parâmetro de array e retorna a média dos itens. Verifique se todos os itens do array são do tipo número. Se não, forneça um feedback adequado.

14. Escreva uma função chamada modifyArray que recebe um array como parâmetro e modifica o quinto item do array e retorna o array. Se o comprimento do array for menor que cinco, retorna 'item não encontrado'.

console.log(modifyArray(['Avocado', 'Tomato', 'Potato','Mango', 'Lemon','Carrot']);

['Avocado', 'Tomato', 'Potato','Mango', 'LEMON', 'Carrot']

console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon','Microsoft',  'IBM']);

['Google', 'Facebook','Apple', 'Amazon','MICROSOFT',  'IBM']

console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon']);

  'Not Found'

15. Escreva uma função chamada isPrime, que verifica se um número é um número primo.

16. Escreva uma função que verifica se todos os itens são únicos no array.

17. Escreva uma função que verifica se todos os itens do array são do mesmo tipo de dados.

18. O nome de variável em JavaScript não suporta caracteres especiais ou símbolos exceto $ ou _. Escreva uma função isValidVariable que verifica se uma variável é válida ou inválida.

19. Escreva uma função que retorna um array de sete números aleatórios em uma faixa de 0-9. Todos os números devem ser únicos.

sevenRandomNumbers()[(1, 4, 5, 7, 9, 8, 0)];

20. Escreva uma função chamada reverseCountries, ela recebe o array de países e, primeiro, copia o array e retorna a inversão do array original.

🎉 PARABÉNS ! 🎉

<< Dia 6 | Dia 8 >>