Funções em JavaScript

Este artigo explica as funções em JavaScript.

YouTube Video

Funções em JavaScript

Funções em JavaScript são blocos de código reutilizáveis usados para realizar tarefas específicas. Usar funções melhora a legibilidade do código e facilita a manutenção. As funções podem ser definidas de várias maneiras e manipuladas de forma flexível usando argumentos e valores de retorno.

Formas de Definir Funções

Declaração de Função

Funções podem ser definidas usando a palavra-chave function. Declarações de funções são elevadas antes da execução do código, por isso podem ser chamadas antes de serem definidas.

1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4    return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice

Neste exemplo, como a função greet é chamada antes de sua declaração, Hello, Everyone e Hello, Alice são exibidos.

Expressão de Função

As funções também podem ser definidas atribuindo-as a uma variável. Nesse caso, a função não é elevada e só pode ser chamada após ser definida.

1const greet = function(name) {
2    return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob

Neste exemplo, Hello, Bob será exibido.

Função Arrow

As funções arrow são uma forma de definir funções com uma sintaxe mais curta. Elas são particularmente úteis ao usar funções anônimas (funções sem nome). As funções arrow também têm um comportamento diferente em relação à palavra-chave this.

 1const greet = (name) => {
 2    return "Hello, " + name;
 3};
 4
 5// When it can be expressed in a single line,
 6// `return` and curly braces can be omitted
 7const greetShort = name => "Hello, " + name;
 8
 9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave

As funções podem ser declaradas como greet e greetShort neste exemplo. Se a função tiver apenas uma linha, você pode omitir as {} (chaves) como em greetShort.

Elementos de uma Função

Argumentos

Os valores passados para uma função são chamados de argumentos. Ao especificar argumentos ao definir uma função, você pode passar valores ao chamá-la.

1function add(a, b) {
2    return a + b;
3}
4
5console.log(add(2, 3)); // 5

Argumentos Padrão

Você pode especificar um valor padrão caso nenhum valor seja passado para os argumentos.

1function greet(name = "Guest") {
2    return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice

Neste exemplo, se greet() for chamado, o padrão Guest será usado.

Valor de Retorno

Você pode retornar um valor de retorno de uma função usando a instrução return. Se não houver uma instrução return, a função retornará undefined.

1function greet(name) {
2    console.log('Hello, ' + name + '!');
3}
4function square(num) {
5    return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined

Neste exemplo, como greet não retorna um valor, o valor de retorno é undefined.

Função Anônima

Uma função sem nome é chamada de função anônima. Elas são frequentemente usadas como expressões de função ou funções de seta (arrow functions).

1const double = function(num) {
2    return num * 2;
3};
4
5console.log(double(5)); // 10

Expressão de Função Imediatamente Invocada (IIFE)

Uma Expressão de Função Imediatamente Invocada (IIFE) é uma função que é executada assim que é definida. Ela é frequentemente usada para controlar o escopo.

1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3    console.log("This is an IIFE");
4})(); // This is an IIFE

Ela é executada assim que é declarada.

Função de Callback

Passar uma função como argumento para outra função, para execução posterior, é chamado de função de callback. Ela é frequentemente usada em processamento assíncrono e manipulação de eventos.

1function processData(callback) {
2    let data = "Processed Data";
3    callback(data);
4}
5
6processData(function(result) {
7    console.log(result); // Processed Data
8});

Neste exemplo, uma função que exibe um valor no console é passada como uma função de callback.

Função Recursiva

Chamar uma função a si mesma é chamado de recursão, e uma função que executa processamento repetitivo usando isso é chamada de função recursiva. Por exemplo, uma função para calcular um fatorial pode ser implementada usando recursão como segue.

 1function factorial(n) {
 2    if (n === 0) {
 3        return 1;
 4    } else {
 5        return n * factorial(n - 1);
 6    }
 7}
 8
 9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)

Neste exemplo, o fatorial de 5, que é 120, será exibido.

Palavra-chave this

O this usado dentro de uma função indica qual objeto a função está referindo. Em uma função regular, ele se refere ao objeto chamador, mas em funções de seta (arrow functions), ele mantém o this do escopo no qual foi definido.

 1const obj = {
 2    name: "Alice",
 3    greet: function() {
 4        console.log(this.name); // Refers to "Alice"
 5    }
 6};
 7
 8obj.greet(); // Alice
 9
10const obj2 = {
11    name: "Bob",
12    greet: () => {
13        // Arrow function refers to the outer scope (undefined here)
14        console.log(this.name);
15    }
16};
17
18obj2.greet(); // undefined

O greet da variável obj é declarado usando a palavra-chave function. Portanto, a palavra-chave this se refere ao objeto da variável obj. Por outro lado, o greet da variável obj2 é declarado usando uma função de seta (arrow function). Portanto, a palavra-chave this se refere ao objeto no escopo externo e é undefined neste exemplo.

Escopo de Função e Closures

Variáveis definidas dentro de uma função não podem ser acessadas fora da função. Isso é chamado de escopo de função. Há também uma funcionalidade chamada closure, que mantém o escopo do momento em que a função é definida.

 1function outer() {
 2    let outerVar = "I am outer!";
 3
 4    function inner() {
 5        console.log(outerVar); // Can access outerVar
 6    }
 7
 8    return inner;
 9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!

Neste exemplo, a função inner pode acessar a variável outerVar porque ela mantém o escopo em que foi definida.

Resumo

• Há várias maneiras de definir funções, incluindo declarações de função, expressões de função e funções de seta (arrow functions).
• As funções podem receber argumentos e retornar valores.
• Existem usos especiais, como funções de callback e funções recursivas.
• Deve-se ter cuidado com o tratamento do this, já que funções de seta (arrow functions) e funções regulares se comportam de maneira diferente.
• Closures podem ser usadas para acessar variáveis internas de fora do escopo.

As funções são um dos conceitos importantes no JavaScript, aproveitando sua estrutura flexível.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video