# Funções
%[https://www.youtube.com/watch?v=fOO7FgV7bLE&list=PLcQQun5wwBt6UHHlRv6wcFVgahOHPAhWb&index=8]
[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1768417689084/0d93df31-1868-4e62-b3e8-25df344bb4a8.jpeg align="center")](https://www.udemy.com/course/logica-de-programacao-com-pascalzim/?referralCode=E547897C16AD4FF23AED)
Às vezes precisamos definir uma rotina para certas situações.
As funções são os principais “blocos de construção” do programa. Elas permitem que o código seja chamado muitas vezes sem repetição.
Para criar uma função, podemos utilizar uma declaração de função.
**Exemplo**
```javascript
function showMessage() {
alert('Inscreva-se no canal AreaDev!');
}
```
Primeiramente definimos a palavra-chave **function** em seguida o nome da função, depois os parâmetros entre os parênteses separados por vírgulas, no exemplo acima **não** definimos parâmetros e por último o código da função, também chamado de “corpo da função”.
Invocamos a nossa função da seguinte forma:
```javascript
function showMessage() {
alert('Inscreva-se no canal AreaDev!');
} showMessage();
```
💡
Uma função é uma ação, seu nome geralmente é um verbo. Deve fazer exatamente o que é sugerido por seu nome, nada mais.
💡
Duas ações independentes geralmente merecem duas funções, mesmo que sejam normalmente chamadas juntas (nesse caso, podemos fazer uma terceira função que as chama).
💡
É interessante haver um acordo dentro da equipe sobre o significado dos prefixos.
Por exemplo, funções que começam com “show” geralmente mostram algo.
Funções começando com …
“**get**…” - retorna um valor.
“**calc**…” - calcular algo.
“**create**…” - criar algo.
“**check**…” - verifique algo e retorne um booleano, etc.
Exemplo
```javascript
showMessage(..) // mostra uma mensagem
getAge(..) // retorna a idade(conseguida de alguma forma na função)
calcSum(..) // calcula uma soma e retorna o valor
createForm(..) // cria um formulário (e normalmente retorna)
checkPermission(..) // checa uma permissão, retornando true ou false
```
---
**Argumentos e parâmetros**
Quando definimos uma função que precisa de informação para executar algo, nesse caso utilizamos os parâmetros.
Exemplo
```javascript
function calcSum(n1, n2) {
return n1 + n2;
}
```
Quando invocamos a função que possui **parâmetros**, precisamos inserir os valores que são chamados de **argumentos**.
```javascript
calcSum(10,20); // OUTPUT: 30
```
---
**Expressão de função / Function Expression**
Quando se utiliza expressões de função, o nome é omitido.
Quando uma função não possui nome ela é chamada de função anônima (function anonymous).
Exemplo
```javascript
const age = function(x, y) {
let ageCurrent = (x - y);
return `Idade atual: ${ageCurrent}`;
}
// argumentos
age(2020,1994);
// OUTPUT: Idade atual: 26
```
---
**Expressão de função chamadas imediatamente IIFE**
Essas funções não recebem um nome. Em vez disso, elas são executadas quando o interpretador se depara com elas.
Exemplo
```javascript
let area = ( function() {
let w = 10;
let h = 20;
return w * h;
} () );
area // OUTPUT: 200
```
Os parênteses em verde informam ao interpretador para chamar a função imediatamente.
Os parênteses em vermelho garante que o interpretador trate isso como uma expressão.
---
**Escopo**
Quando se fala em escopo em JavaScript, precisamos saber desses assuntos:
1. **Escopo Global**
* Variáveis declaradas fora de qualquer função, são chamadas de globais e são armazenadas em memória. Quando se utiliza variáveis globais o consumo de memória é maior do que as variáveis locais e também aumentam o risco de conflitos de nomes.
* É uma boa prática minimizar o uso de variáveis globais.
* Às vezes, elas podem ser úteis para armazenar dados no nível do projeto.
2. **Escopo Local**
* Ao declarar uma variável dentro de uma função, ela só poderá ser utilizada dentro dessa função. Isto é também é chamado de escopo de nível de função.
* Uma variável de escopo local não pode ser acessada fora da função em que foi declarada.
* Duas funções diferentes podem utilizar variáveis com o mesmo nome, sem nenhum tipo de conflito de nomes.
Exemplo
```javascript
function getArea(width,height) {
let area = width * height;
return area;
}
let size = getArea(10,5);
console.log(size); // OUTPUT: 50
```
A variável **area** é de escopo local (ou nível de função).
A variável **size** é de escopo global.
**Detalhe**
```javascript
let userName = 'AreaDev';
function showMessage() {
let message = `Olá, ${userName}!`;
return message;
} showMessage(); // OUTPUT// Olá AreaDev!
```
Uma função também pode acessar uma variável externa, ou seja uma variável de escopo global.
A função possui acesso total à variável externa. Ela pode também modificá-la, veja o exemplo abaixo.
```javascript
let userName = 'AreaDev';
function showMessage() {
userName = 'Developer';
let message = `Olá, ${userName}!`;
return message;
}
console.log(userName) // OUTPUT: AreaDev
showMessage() // OUTPUT: Olá AreaDev!
console.log(userName) // OUTPUT: Developer
```
Podemos ver que a variável externa é atualizada pelo valor Developer dentro da função.
---
**Hoisting**
Resumidamente, as declarações de variável e função são colocadas em memória durante a fase de compilação, mas o seu código vai permanece no mesmo canto onde você implementou.
**Agora vamos ver um exemplo para entender melhor**
```javascript
function showMessage(user) {
console.log(`Olá ${user}!`);
} showMessage('AreaDev');
// OUTPUT: Olá AreDev!
```
Vejamos o exemplo acima é a forma que você escreveria sua função. Agora, vamos ver outro exemplo abaixo, onde invocamos a função antes de declará-la.
```javascript
showMessage('AreaDev');
function showMessage(user) {
console.log(`Olá ${user}!`);
}
// OUTPUT: Olá AreDev!
```
Veja que invocamos primeiramente a função antes de declará-la e o código ainda funciona devido a forma de execução de contexto do JavaScript.
💡
Além das funções, o uso de Hoisting funciona para outros tipos de dados e variáveis.
💡
As variáveis podem ser inicializadas e utilizadas antes de serem declaradas.
---
**Callback**
Uma função callback é uma função passada para outra função como argumento.
Vejamos um exemplo.
```javascript
function showMessage(msg) {
console.log('antes de executar a callback');
msg();
console.log('depois de executar a callback');
}
showMessage(
() => {
console.log('Executando Callback...');
}
);
// OUTPUT: antes de executar a callback
// OUTPUT: Executando Callback...
// OUTPUT: depois de executar a callback
```
---
**IIFES**
Expressões de função chamadas imediatamente
Uma forma de evitar conflito de variáveis é utilizando funções.
Essas funções são executadas quando o interpretador se depara com elas e não precisam ser nomeadas.
```javascript
const result = (function () {
let nome = "AreaDev";
return nome;
})();
// AreaDev
```
Atribuir uma IIFE a uma constante não armazenará a função em si, mas o retorno dela.
---
**Arrow Function**
As arrow function nos permitem escrever uma sintaxe mais curta.
Vejamos o exemplo
```javascript
// Antes
const showMessage = function() {
return 'Inscreva-se no canal AreaDev!';
} showMessage();
// OUTPUT: Inscreva-se no canal AreaDev!
// Arrow Function
const showMessage = () => {
return 'Inscreva-se no canal AreaDev!';
} showMessage();
// OUTPUT: Inscreva-se no canal AreaDev!
// Arrow Function com parâmetros
const showUser = (name) => {
return `Olá ${name}!`;
} showUser('AreDev');
// OUTPUT: Olá AreaDev!
// Se existir apenas um único parâmetro os parênteses fica opcional.
const showUser = name => {
return `Olá ${name}!`;
} showUser('AreDev');
// OUTPUT: Olá AreaDev!
// O uso das chaves {} e da palavra-chave return são opcional.
const showUser = name => `Olá ${name}!`;
showUser('AreDev');
// OUTPUT: Olá AreaDev!
```
---
[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1768417750677/45b1a5d4-75cd-4b1c-9b4f-555f4d7392a5.jpeg align="center")](https://www.udemy.com/course/logica-de-programacao-com-pascalzim/?referralCode=E547897C16AD4FF23AED)
### Conclusão
Entender e utilizar funções em JavaScript é essencial para escrever código modular e eficiente. As funções permitem reutilizar código, reduzir redundância e melhorar a manutenção do software.
**Pontos-chave:**
1. **Declaração de Função vs. Expressão de Função:** Declarações são elevadas (hoisted), expressões não.
2. **IIFE:** Executadas imediatamente para evitar conflitos de variáveis.
3. **Arrow Functions:** Sintaxe concisa e vinculação lexical do `this`.
4. **Escopo:** Variáveis locais reduzem conflitos e consumo de memória.
5. **Callbacks:** Permitem operações assíncronas e personalização de comportamento.
Para mais detalhes, consulte a documentação do MDN.