À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

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:

function showMessage() {
        alert('Inscreva-se no canal AreaDev!');
} showMessage();

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

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

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.

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

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

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

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

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.

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

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.

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.

Callback

Uma função callback é uma função passada para outra função como argumento.

Vejamos um exemplo.

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.

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

// 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!

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.