Praticando JavaScript: funções

JavaScript funções - Apresentação

Boas-vindas ao curso sobre funções da formação de prática em programação com JavaScript! Meu nome é Juliana Amoasei e irei te acompanhar ao longo dessa jornada de aprendizagem.

Audiodescrição: Juliana se descreve como uma mulher branca, de cabelo curto e liso pintado de azul-escuro, sobrancelhas castanho-escuras e olhos castanhos-escuros. Usa óculos de armação vermelha, piercing de argola prateado no nariz, brincos de argola prateados, e veste uma camisa cinza-escura com o logotipo da Alura em branco. Ao fundo, no estúdio da Alura, uma parede iluminada em gradiente azul e roxo, com uma estante preta à esquerda da instrutora contendo decorações, livros, plantas e pontos de iluminação amarela.

O que vamos aprender?

O foco deste curso é praticar com código, testando nossos conhecimentos de forma ativa e resolvendo problemas de lógica de programação encontrados durante a rotina de estudos.

Ao longo dessa formação, abordaremos:

• Revisão de conteúdo;
• Material suplementar;
• E muitos desafios e exercícios.

Dessa forma, colocaremos em prática tudo o que aprendemos.

Quais são os requisitos?

Como se trata de um curso de revisão, é necessário ter concluído a formação anterior, chamada Aprenda a programar em JavaScript com foco no back-end, onde apresentamos os conceitos que serão apenas revisados durante esta formação.

Nessa formação de prática, o conteúdo será revisado de forma incremental. Portanto, para melhor aproveitamento, é recomendável seguir os cursos na ordem apresentada.

Assim, garantimos que não perderemos nada referenciado em revisões anteriores.

Importante! Este curso não é voltado para front-end. No entanto, toda prática realizada com JavaScript pode ser aproveitada no front-end, desde que o Node.js esteja instalado.

É essencial pausar, testar o conteúdo dos vídeos, experimentar os exemplos apresentados, modificá-los e fazer os exercícios propostos, como vamos enfatizar durante toda a revisão.

Observação: você pode compartilhar o que aprendeu no fórum ou pedir ajuda para instrutores e outras pessoas estudantes na nossa comunidade no Discord, se necessário.

Conclusão

Agora que estamos alinhados, daremos início ao conteúdo. Até o próximo vídeo!

JavaScript funções - Function

Neste primeiro vídeo, começaremos a explorar o conceito de funções.

Funções em JavaScript

O que são funções?

Funções em JavaScript, assim como em qualquer linguagem de programação, são blocos de código reutilizáveis que executam uma tarefa específica.

Estrutura básica de uma função

Abaixo, podemos visualizar a estrutura básica de uma função, bastante semelhante em JavaScript e em outras linguagens, e entender sua importância:

function nomeDaFuncao ( parâmetro(s) ) {
    // bloco de código
    retorno
}

Para declarar uma função, começamos com a palavra-chave function, seguida do nome da função, que representa uma ação relacionada à tarefa a ser executada.

Uma função pode receber parâmetros entre parênteses, que são opcionais. Os parâmetros são os dados que a função precisa para executar corretamente.

Em seguida, abrimos um bloco de código com chaves, onde definimos o que deverá ser executado. A última instrução no escopo desse bloco é o retorno, que pega os valores processados e os retorna para o ponto onde a função foi chamada.

Sintaxe da função

Transformando a estrutura básica na sintaxe do JavaScript, declaramos uma função chamada darBoasVindas(), que retornará uma string concatenada com um dado qualquer. Para isso, usaremos um identificador de parâmetro chamado nome.

Dica! É comum identificar parâmetros com nomes descritivos, que façam sentido, de modo que seja possível reconhecer facilmente o que acontece no código, pois o JavaScript não exige o tipo de dado. Com o identificador, conseguimos ter uma ideia melhor.

function darBoasVindas (nome) {
    return `Boas vindas, ${nome}`;
}

Executando a função

Neste ponto, a função foi declarada, mas ainda não foi executada.

Para chamar ou executar uma função, utilizamos o nome dela seguido de parênteses, passando o dado que queremos enviar para dentro da função. Por exemplo:

function darBoasVindas (nome) {
    return `Boas vindas, ${nome}`;
}

darBoasVindas('Solange');
console.log(darBoasVindas('Juliana'));

Se executarmos a função acima, o texto desejado não será exibido em nenhum lugar, pois o valor é retornado mas não é utilizado efetivamente.

A palavra-chave return retorna o dado passado para o ponto onde a função será executada. Isso significa que, se queremos que a função execute no console, precisamos executar darBoasVindas() contendo o nome em string entre parênteses.

Dessa forma, quando a função for executada, o valor será retornado para o ponto onde a função foi chamada, ou seja, dentro do console.log(). Com isso, o console.log() receberá uma string concatenada e conseguirá exibi-la no terminal.

Por isso conseguimos executar funções e conferir no console os dados retornados.

Função sem parâmetros e retorno

Uma função não precisa necessariamente receber parâmetros nem ter retorno.

Elas se tornam mais específicas nesses casos, pois são os parâmetros que fazem com que uma função seja reaproveitável. Além disso, se a função executa algum tipo de instrução, mas não precisa retornar um valor para o ponto onde é chamada, não é necessário retorno.

Abaixo, um exemplo de função sem parâmetros e sem retorno:

function darBoasVindas() {
    console.log('olá, boas vindas!');
}

darBoasVindas();

Observação: em algumas documentações, há uma diferenciação entre função e procedure (procedimento). A procedure é uma função que não tem retorno, porém, quando trabalhamos com JavaScript, o termo "função" é usado em ambos os casos: com ou sem retorno.

Função com operação matemática

Quando uma função recebe seus parâmetros, eles possuem identificadores, que são os nomes utilizados para identificar onde os parâmetros serão usados no bloco.

Vamos explorar uma função que realiza uma operação matemática, como divisão:

function divide(dividendo, divisor) {
    return dividendo / divisor;
};

const resultado1 = divide(12, 2);
const resultado2 = divide(2, 12);

console.log(resultado1); // 6
console.log(resultado2); // 0.166...

A função divide() recebe dois parâmetros:

• O dividendo;
• E o divisor.

No escopo, a função retorna o resultado da divisão de dividendo por divisor.

É importante reforçar que não podemos inverter esses parâmetros de lugar. Os identificadores servem justamente para colocar os valores nos lugares certos.

Em seguida, chamamos a função passando os argumentos necessários.

Diferença entre parâmetros e argumentos

Como diferenciar parâmetros e argumentos? Parâmetros são definidos no momento da declaração da função, enquanto argumentos são os dados passados para a função no momento da execução.

Conceito de escopo em JavaScript

Em relação ao escopo, o JavaScript trabalha basicamente com o escopo global e o escopo de bloco.

Funções, blocos if, for e while, por exemplo, são estruturas que contém blocos de código, normalmente delimitados por chaves. Um escopo de bloco significa que, variáveis criadas dentro dele, não podem ser acessadas pelo lado de fora. Portanto, uma variável declarada no escopo de uma função, não pode ser acessada de fora desse escopo específico.

Por outro lado, variáveis criadas no escopo global, fora de blocos, podem ser acessadas no escopo de qualquer bloco. Por exemplo: se em const texto queremos que o texto gerado seja disponibilizado fora da função para outra parte do código utilizar, é necessário retornar esse valor.

let resultado = 0;

function divide(dividendo, divisor = 2) {
    resultado = dividendo / divisor;
    const texto = `resultado é ${resultado}`;
};

divide(12);
console.log(resultado); // 6
console.log(texto); // erro

Valores padrão para parâmetros

Além disso, podemos definir valores padrão para os parâmetros. Por exemplo: para garantir que o divisor nunca seja 0, podemos definir um valor padrão de 2.

// código omitido

function divide(dividendo, divisor = 2) {
    resultado = dividendo / divisor;
    const texto = `resultado é ${resultado}`;
};

// código omitido

No exemplo acima, se o valor for recebido, ele é substituído. Caso contrário, ou seja, se não passarmos um valor para o divisor, ele assumirá o valor padrão de 2.

Importante! Normalmente, o valor predefinido é passado por último na função.

Conclusão

Com os aprendizados desta etapa, estamos preparados para praticar e aplicar nossos conhecimentos sobre funções em JavaScript no código. Nos encontramos no próximo vídeo!

JavaScript funções - Prática function

Vamos iniciar nossa prática criando uma função que calcula potências.

Praticando funções

Nosso objetivo é criar uma função que receba dois números e retorne o valor de, por exemplo, x elevado à potência y. Assim, se passarmos 4 e 3, queremos retornar o valor de 4 elevado a 3, ou seja, 4 vezes 4 vezes 4. Vamos criar essa função em código e entender a lógica por trás dela?

Definindo a função calculaPotencia()

Começaremos criando uma function chamada calculaPotencia(), que deve receber dois valores:

• Um valor que chamaremos de num, correspondente ao primeiro número;
• E outro que chamaremos de pow, correspondente ao valor da potência.

Por exemplo: em 4 elevado a 3, 4 será o num e 3 será o pow.

exercicios.js:

// FUNCTION

// elevar um número x a uma potência y

function calculaPotencia(num, pow) {

};

Implementando um laço de repetição

Se desejamos que um cálculo seja realizado de forma repetitiva, precisamos de um bloco for.

Esse cálculo será feito com passos contados. O for começará com uma variável let i, que será o contador, iniciando em zero. A condição de execução ou parada será enquanto i for menor que pow, pois, por exemplo, em 4 elevado a 3, queremos que execute 3 vezes, ou seja, 4 vezes 4 vezes 4, e então pare. O i será incrementado (i++) a cada iteração.

// código omitido

function calculaPotencia(num, pow) {
  for (let i = 0; i < pow; i++) {

  }
};

Inicializando e corrigindo a variável resultado

Para realizar o cálculo, precisamos pegar o valor inicial 4 e multiplicá-lo sucessivamente: multiplicamos 4 vezes 4; pegamos esse valor; depois multiplicamos novamente por 4; e assim por diante. Acima do bloco for, vamos declarar a variável resultado, inicialmente igual a zero.

// código omitido

function calculaPotencia(num, pow) {
  let resultado = 0;
  for (let i = 0; i < pow; i++) {

  }
};

Calculando a potência no laço de repetição

No bloco for, a cada iteração, reatribuiremos o valor da variável resultado, começando com seu valor inicial e multiplicando por num. Portanto, no escopo do for, teremos resultado = resultado * num, pois num é o número que desejamos multiplicar repetidamente.

Observação: a quantidade de vezes está representada por pow.

No entanto, temos um problema: se resultado começa com zero, ao multiplicar, nunca obteremos um número diferente de zero, pois qualquer número multiplicado por zero resulta em zero. Portanto, iniciaremos resultado com 1, pois qualquer número elevado a zero sempre resulta em 1.

Dessa forma, também garantimos esse caso.

// código omitido

function calculaPotencia(num, pow) {
  let resultado = 1;
  for (let i = 0; i < pow; i++) {
    resultado = resultado * num;
  }
};

Dessa forma, se pow for zero, não entraremos no laço de repetição e retornaremos 1 diretamente. Assim, resolvemos os dois problemas. No final, retornamos o resultado com return resultado:

// código omitido

function calculaPotencia(num, pow) {
  let resultado = 1;
  for (let i = 0; i < pow; i++) {
    resultado = resultado * num;
  }
  return resultado;
};

Testando a função calculaPotencia()

Agora, podemos discutir o que significa uma função ser reaproveitável. Por exemplo: vamos testar chamar a função calculaPotencia() passando os valores 4 e 3 entre parênteses.

// código omitido

function calculaPotencia(num, pow) {
  let resultado = 1;
  for (let i = 0; i < pow; i++) {
    resultado = resultado * num;
  }
  return resultado;
};

console.log(calculaPotencia(4, 3));

Feito isso, podemos executar o comando node exercicios.js no terminal:

node exercicios.js

Retorno no terminal:

64

Realizando testes adicionais

Vamos copiar a linha da chamada da função, colar abaixo e substituir os valores de 4 e 3 para 5 e 5. Ao executar novamente, obtemos 3125, o que também está correto.

exercicios.js:

// código omitido

console.log(calculaPotencia(4, 3));
console.log(calculaPotencia(5, 5));

node exercicios.js

Retorno no terminal:

3125

O objetivo deste exercício, que parece simples, é destacar que uma função deve sempre retornar o mesmo resultado quando chamada com os mesmos dados.

Assim, se chamarmos a mesma função várias vezes com os parâmetros 4 e 3, ela deve sempre retornar 64, ou 3125 se passarmos 5 e 5.

Vamos trocar os parâmetros de lugar para conferir o que acontece? Se passarmos 3 e 4, o valor será diferente, resultando em 81, pois a ordem faz diferença.

exercicios.js:

// código omitido

console.log(calculaPotencia(4, 3));
console.log(calculaPotencia(5, 5));
console.log(calculaPotencia(3, 4));

Retorno no terminal:

64
3125
81

Se tentarmos executar um console.log() fora da função para obter o valor de resultado, ocorrerá um erro, pois para o código, resultado não está definido fora do bloco.

Portanto, no escopo global, a variável resultado não existe.

// código omitido

console.log(calculaPotencia(4, 3));
console.log(calculaPotencia(5, 5));
console.log(calculaPotencia(3, 4));
console.log(resultado);

Retorno no terminal:

ReferenceError: resultado is not defined

Conclusão

Realizamos este primeiro exercício para relembrar conceitos como parâmetros, retorno e escopo, que são as partes principais a serem lembradas.

A ordem dos parâmetros, o escopo e o retorno são fundamentais.

Além disso, aprendemos que é possível executar blocos dentro de blocos. Se declararmos uma variável em um bloco for, o mesmo princípio de escopo se aplica.

Na sequência, continuaremos relembrando alguns conceitos sobre funções e realizando mais exercícios práticos. Nos encontramos no próximo vídeo!

Sobre o curso Praticando JavaScript: funções

O curso Praticando JavaScript: funções possui 56 minutos de vídeos, em um total de 25 atividades. Gostou? Conheça nossos outros cursos de em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• JavaScript funções