Funções (Functions)

Olá HaWker! Jeff Bruchado por aqui.

Esse é mais um artigo da nossa série de artigos que vai cobrir a nossa jornada para Aprender Programação do Zero.

Hoje será mais um artigo sobre um conteúdo extremamente importante para prosseguirmos com o seu aprendizado.

Bom, sem mais delongas, vamos começar!

Hoje, nós vamos falar sobre um dos temas mais importantes na Programação:

Funções (Functions).

Beleza, nesse momento vamos mergulhar no universo das Funções (Functions) no JavaScript e entender porque elas são tão fundamentais.

Imagina que você está criando um site, e nele tem uma parte que precisa calcular a gorjeta baseada no valor da conta do restaurante. Você vai querer repetir o mesmo cálculo toda vez que alguém inserir um valor diferente? Claro que não, né?

É aí que entram as Funções!

As Funções são como pequenos robôs no seu código.

Você diz pra eles o que fazer uma vez, e depois é só chamar eles pra repetir aquela tarefa quantas vezes quiser.

Elas são mega importantes porque:

Organização: Deixa o código mais limpo e organizado. Ao invés de repetir o mesmo código várias vezes, você cria uma função e a chama sempre que precisar.

Reuso: Uma vez que você escreve uma função, pode usá-la em qualquer lugar do seu projeto, ou até em outros projetos.

Manutenção: Se você precisa mudar a lógica, é só alterar na função. Assim, a mudança se aplica em todos os lugares onde a função é chamada.

Escalabilidade: À medida que seu projeto cresce, as funções ajudam a lidar com a complexidade, mantendo as coisas mais gerenciáveis.

Pensa nas Funções como fórmulas matemáticas. Você coloca alguns valores (parâmetros), a função processa esses valores (executa um bloco de código) e, muitas vezes, te devolve um resultado (retorno da função).

Por exemplo, uma função para calcular gorjeta poderia ser algo tipo:

function calcularGorjeta(valorConta) {  return valorConta * 0.1;}

E toda vez que você quiser calcular a gorjeta, é só chamar calcularGorjeta(valorDaConta) com o valor da conta como parâmetro.

Então, saca só como as Funções são essenciais:

Elas reduzem repetição, mantêm seu código organizado e facilitam alterações e escalabilidade.

Sem elas, a programação seria um verdadeiro quebra-cabeça gigante e confuso.

As Funções transformam complexidade em simplicidade!

Parâmetros de funções

Basicamente são os argumentos ou parâmetros passados para uma função quando ela é chamada.

Por exemplo, na função a seguir, a e b são os parâmetros da função:

function sum(a, b) {  return a + b;}

Você declara eles dentro dos () na declaração da função.

E quando você chama, você passa os valores dos parâmetros, dentro dos () da chamada, em ordem da declaração.

Ou seja, quando a função é chamada, os argumentos passados são atribuídos aos parâmetros correspondentes.

Por exemplo:

function sum(a, b) {  return a + b;}let result = sum(1, 2);console.log(result); // 3

Bom, nesse instante você entendeu o que são os parâmetros das funções, mas você pode ter ficado se perguntando, e se eu quiser executar uma função que possui parâmetros, mas eu não quero passar valores para esses parâmetros, eu só quero o resultado padrão, existe uma forma de fazer isso?

E é exatamente o que eu vou te explicar nesse momento.

Parâmetros com valor pré definido (Default Params)

Vamos entender sobre Default Params (Parâmetros padrão), são parâmetros que já possuem um valor padrão pré-definido.

Eles são úteis quando queremos que um parâmetro tenha um valor padrão caso o usuário não passe um valor para ele.

Ou seja, esse parâmetro se torna opcional.

A sintaxe para definir um parâmetro padrão é a seguinte:

function greet(name = 'Jeff') {  console.log(`Olá, ${name}!`);}

Neste exemplo, se o usuário não passar um valor para o parâmetro name , o valor padrão Jeff será usado.

Caso contrário, o valor passado pelo usuário será usado.

Por exemplo:

greet(); // "Olá, Jeff!"greet('Mary'); // "Olá, Mary!"

Bom, como você pode perceber eles são bem úteis para algumas situações específicas, certo?!

Parâmetro Rest (Rest Params)

É uma sintaxe especial para passar um número indeterminado de argumentos para uma função.

E para fazer isso, basta definir o parâmetro da sua função com a seguinte sintaxe:

(...nomeDoParametro), usando os 3 pontos (...), antes da declaração do nome.

É útil quando não sabemos quantos argumentos serão passados.

A sintaxe é a seguinte:

function sum(...numbers) {  let result = 0;  for (let number of numbers) {    result += number;  }  return result;}

No exemplo acima, o parâmetro numbers é um array que irá conter todos os argumentos passados para a função.

Por exemplo:

function sum(...numbers) {  let result = 0;  for (let number of numbers) {    result += number;  }  return result;}let result = sum(1, 2, 3, 4, 5);console.log(result); // 15

IIFEs (Immediately Invoked Function Expressions)

São funções que são definidas e chamadas imediatamente.

Elas são comumente usadas para criar escopos locais e proteger variáveis e funções de serem acessadas globalmente.

Exemplo de um IIFE:

(function () {  // código da função aqui})();

Geralmente o IIFE é usado, quando você está inicializando sua aplicação, e precisa realizar alguma requisição antes que ela seja criada, como consultar pelo usuário, e validar se ele tem permissão para carregar a aplicação.

Funções pré-definidas (Built-in Functions)

São funções pré-definidas que você pode usar para realizar tarefas comuns no JavaScript, ou seja, você não precisa declará-las.

Esses são exemplos de Built-in Functions:

• parseInt() para converter strings em números inteiros,
• Math.max() para encontrar o maior valor em uma lista de números
• console.log() para imprimir mensagens no console.

Exemplo de como usar a built-in function parseInt():

let myString = '123';let myInt = parseInt(myString);console.log(myInt); // 123

Exemplo de como usar a built-in function Math.max():

let numbers = [1, 2, 3, 4, 5];let max = Math.max(...numbers);console.log(max); // "5"

Escopo e pilha de funções (Scope and function stack (Call stack))

Eu já falei sobre Escopo nos artigos anteriores, e nesse instante vou falar de forma mais detalhada sobre ele com relação às funções.

Então não se acanhe caso sinta que está repetindo algo que já estudou. (Isso é até melhor para fixar o conteúdo!)

Vamos entender o conceito de escopo novamente:

Escopo se refere à forma como uma variável é visível em diferentes partes do seu código.

Em outras palavras, o escopo determina a "visibilidade" de uma variável.

Existem dois tipos principais de escopo no JavaScript:

• Escopo de bloco
• Escopo de função

O escopo de bloco é criado por qualquer tipo de instrução de controle, como if e for, e limita a visibilidade das variáveis declaradas dentro do bloco ao próprio bloco.

O escopo de função é criado por uma função e limita a visibilidade das variáveis declaradas dentro da função a essa função e todas as funções aninhadas dentro dela.

A seguir

um exemplo de código que demonstra o escopo de bloco:

if (true) {  const x = 5;}console.log(x); // Uncaught ReferenceError: x is not defined

Neste exemplo, a variável x é declarada dentro do bloco do if, então ela só é visível dentro do próprio bloco. Ao tentar acessar a variável no exterior do bloco resulta em um erro.

A seguir um exemplo de código que demonstra o escopo de função:

function foo() {  const x = 5;}console.log(x); // Uncaught ReferenceError: x is not defined

Neste exemplo, a variável x é declarada dentro da função foo, então ela só é visível dentro da função foo e de qualquer função aninhada dentro dela. Ao tentar acessar a variável no exterior da função resulta em um erro.

Nesse instante, eu vou começar a falar sobre a pilha de funções (ou "call stack" em inglês):

Quando uma função é chamada, ela é colocada na "pilha de chamadas" (call stack).

Quando a função retorna, ou seja, quando ela termina a execução, ela é removida da pilha.

Certo, entendido isso, eu vou te mostrar um exemplo que permite que você veja o caminho que o código percorreu para chegar ao ponto em que está, ou seja, veja como funciona a call stack e o empilhamento das tarefas.

Exemplo de código que demonstra como a pilha de funções funciona:

function foo() {  console.log('Chamando foo');  bar();  console.log('Voltando de foo');}function bar() {  console.log('Chamando bar');  baz();  console.log('Voltando de bar');}function baz() {  console.log('Chamando baz');  console.log('Voltando de baz');}foo();

Quando você executa este código, a saída será:

Chamando foo
Chamando bar
Chamando baz
Voltando de baz
Voltando de bar
Voltando de foo

Aqui, podemos ver que as funções são adicionadas à pilha de funções quando são chamadas e removidas da pilha quando retornam.

Quando uma função é chamada, ela é adicionada ao topo da pilha e a próxima função é chamada.

Quando a função retorna, ela é removida do topo da pilha e a próxima função na pilha é chamada. Isso continua até que a pilha esteja vazia e a execução do script termine.

Conclusão

As funções são uma parte muito importante, pois nos permitem escrever código de maneira mais organizada e reutilizável.

Eu Jeff, ressalto que:

É importante dedicar um tempo para entender como funcionam as funções e como usá-las de maneira eficiente, pois isso pode ajudar muito na hora de criar suas aplicações.

Lembre-se de que é importante praticar o que você está aprendendo, pois isso ajudará a fixar os conceitos e melhorar suas habilidades de abstração.

Tente criar suas próprias aplicações, e brincar com as funções, passando diferentes parâmetros e argumentos.

Pois bem HaWker, chegamos ao fim de mais um artigo.

Espero que esse artigo tenha agregado no seu repertório de conhecimento sobre Programação.

Como sempre, se tiver qualquer dúvida ou quiser explorar mais algum ponto, é só responder com a sua dúvida, nesse email.

E lembre-se, estou aqui para te ajudar a melhorar 1% a cada novo artigo!

Se você chegou até aqui, como de costume, por favor, responda esse email com "Consegui aprender e entender sobre as funções na programação".

Dessa forma eu vou saber que essa série de artigos está sendo útil pra você, e que você está acompanhando e aproveitando.

Como você já sabe! Somente um verdadeiro HaWker chega até o final.

Parabéns!

Estou feliz em te ter aqui.

Te vejo em breve.

Bora pra cima! 🦅

- Jeff Bruchado

Parabéns por chegar até aqui, HaWker! 🎉

Nesse momento que você aprendeu sobre as funções na programação, que tal testar seus conhecimentos? Participe do quiz abaixo e veja o quanto você absorveu do nosso artigo.

É uma ótima maneira de fixar o aprendizado e se preparar para os próximos passos na sua jornada de programação.

Aperte para acessar o quiz.

Boa sorte e divirta-se!