Fu

Funções em JavaScript

6 exercícios

Sobre Funções

Uma função é um bloco de código organizado e reutilizável usado para realizar alguma ação. Existem várias formas de definir funções em JavaScript. Aqui vamos ver declarações de função e expressões de função. Outras possibilidades, como arrow functions, serão abordadas em outros conceitos.

Declaração de função

A forma padrão de definir uma função em JavaScript é a declaração de função, também chamada de definição de função ou instrução de função.

Ela consiste na palavra-chave function, no nome da função e em uma lista de parâmetros separados por vírgula, entre parênteses. Em seguida vem o corpo da função (um conjunto de instruções que define o que a função faz), envolvido por chaves.

function someName(param1, param2, param3) {
  // ...
}

Usando uma função

Em JavaScript, uma função é invocada (chamada) ao se escrever o nome da função seguido de parênteses que contêm os argumentos.

someName(arg1, arg2, arg3);

Apenas escrever o nome da função não chama a função em JavaScript.

function sayHello() {
  console.log('Hello, World!');
}

sayHello;
// => [Function: sayHello]
// The text representations varies between environments.

sayHello();
// => 'Hello, World!'

Parâmetros

Ao trabalhar com parâmetros dentro do corpo da função, fique atento a possíveis efeitos colaterais no valor original que foi passado para a função. Em JavaScript, um argumento é uma cópia de uma referência ao valor original. O que isso significa na prática depende do tipo de dado do argumento.

  • Valores de tipos de dados primitivos são imutáveis. Todas as "modificações" sempre criam um novo valor primitivo. Por causa disso, o valor original nunca é afetado pelo que acontece com o argumento no corpo da função.

    const num = 0;
    
    function increase(number) {
      number = number + 1;
    }
    
    increase(num);
    num;
    // => 0
    
  • É diferente para valores como objetos, arrays e funções. Como a referência é copiada, uma reatribuição não afetará o valor original. No entanto, como você está lidando com uma cópia superficial, modificar o argumento no corpo da função também alterará o valor original que foi passado.

    const nums = [0, 1, 2, 3, 4];
    
    function pushFive(arr) {
      arr.push(5);
    }
    
    pushFive(nums);
    nums;
    // => [0, 1, 2, 3, 4, 5]
    

Por padrão, todos os parâmetros definidos na declaração da função são opcionais em JavaScript. Se uma função recebe menos argumentos do que há parâmetros, os argumentos que faltam serão undefined dentro do corpo da função; veja Null e Undefined. Em muitos casos, faz mais sentido inicializar um parâmetro com um valor padrão se nenhum valor ou um valor undefined for passado. Isso pode ser feito especificando parâmetros padrão diretamente na definição da função.

function someName(param1 = defaultValue1, param2 = defaultValue2) {
  // ...
}

Uma função pode ser invocada (chamada) com mais argumentos do que havia parâmetros na definição da função. Todos os argumentos, incluindo os argumentos em excesso, podem ser encontrados no "array" de arguments.

Também é possível definir funções que aceitam um número arbitrário de argumentos (funções variádicas); veja parâmetros rest em Operadores Rest e Spread para mais detalhes.

Instrução return

Uma instrução return encerra a execução da função e especifica um valor a ser retornado para quem chamou a função. Uma função pode ter várias instruções return.

function checkNumber(num) {
  if (num === 0) {
    return 'You passed 0, please provide another number.';
  }

  return 'Thanks for passing such a nice number.';
}

O resultado de uma função que não retorna nenhum valor ou que não tem uma instrução return é undefined. Não existem returns implícitos em JavaScript.

function nakedReturn(a) {
  a * 2;
  return;
}

nakedReturn(1);
// => undefined

function noReturn(a) {
  a * 2;
}

noReturn(1);
// => undefined

Em JavaScript, você só pode retornar exatamente um valor. Se quiser passar mais informações, primeiro você precisa combiná-las em uma única entidade, geralmente em um objeto ou em um array.

function divide(a, b) {
  return {
    quotient: Math.floor(a / b),
    remainder: a % b,
  };
}

Expressão de função

Uma declaração de função é uma instrução independente. Mas às vezes é útil definir uma função como parte de outra expressão, por exemplo, em uma atribuição, como parâmetro de função (callback) ou como valor em um objeto. Isso pode ser feito com uma expressão de função. Ela tem a mesma sintaxe de uma declaração de função, só que o nome da função pode ser omitido para criar uma função anônima.

const someFunction = function (param) {
  // ...
};

someOtherFunction(function (param) {
  // ...
});

const obj = {
  someFunction: function (param) {
    // ...
  },
};

Escopo

Uma função introduz um novo contexto de execução em JavaScript. Variáveis definidas dentro de uma função não são acessíveis fora dela. Mas variáveis definidas no escopo pai (o escopo onde a própria função foi definida) são acessíveis dentro da função. A documentação da MDN sobre escopo mostra exemplos desse comportamento.

Dê uma olhada em closures para aprender mais sobre escopo de variáveis em JavaScript.

Editar via GitHub O link abre em uma nova janela ou aba

Aprenda Funções