DEV Community

Altencir Junior
Altencir Junior

Posted on

Como criar e utilizar funções em JavaScript.

De seu uso como uma linguagem de script front-end para desenvolvimento web, o Javascript evoluiu e agora está sendo implantado em várias pilhas e ambientes de aplicativos, principalmente pelo seu domínio de mercado no mundo da programação. Entre os recursos mais poderosos do JavaScript está seu uso para funções, mas como elas funcionam? Vamos analisar.

Funções são uma das principais ferramentas de programação em JavaScript. Elas permitem a criação de código reutilizável e organizado, tornando o desenvolvimento de aplicações mais eficiente.

Uma função é um conjunto de instruções que podem ser executadas quando é chamada. Ela pode receber parâmetros, realizar cálculos e retornar valores. A declaração de uma função se baseia em :fornecer seu nome, separar os argumentos com parênteses e declarar em chave como no caso abaixo:

function minhaFuncao(objeto) {
  objeto.make = "Toyota";
}

var meucarro = {make: "Honda", model: "Accord", year: 1998};
var x, y;

x = meucarro.make;     // x recebe o valor "Honda"

minhaFuncao(meucarro);
y = meucarro.make;
Enter fullscreen mode Exit fullscreen mode

Há outros casos em que a função pode ser decalarada dentro de uma variável.

function sumAndPrint()
{
   var a = 5;
   var b = 7;
   var sum = a + b;
   document.write(sum);
};
Enter fullscreen mode Exit fullscreen mode

A função recebeu o nome de sumAndPrint, não dete nenhum argumento guardado, mas foi declarado em chaves os valores de uma variável. Isso é conhecido como funções de ordem superior.

Parâmetros de Função

Em JavaScript, parâmetros de função por padrão são undefined. No entanto, em algumas situações pode ser útil definir um valor padrão diferente.

Nas versões ECMAScripts antigas, a estratégia geral para definir padrões era testar os valores de parâmetro no corpo da função e atribuir um valor se eles fossem undefined. Se, no exemplo a seguir, nenhum valor é fornecido para b na chamada, seu valor seria undefined ao avaliar a*b e a chamada para multiplicar retornaria NaN.

No entanto com parâmetros padrão, a verificação no corpo da função não é mais necessária. Agora você pode simplesmente colocar 1 como valor padrão para b no campo de declaração de parâmetros.

Veja os dois modos:

// MODELO CLÁSSICO
function multiplicar(a, b) {
  b = typeof b !== 'undefined' ?  b : 1;

  return a*b;
}

multiplicar(5); // 5
Enter fullscreen mode Exit fullscreen mode
//MODELO ATUAL
function multiplicar(a, b = 1) {
  return a*b;
}

multiplicar(5); // 5
Enter fullscreen mode Exit fullscreen mode

ARROW FUNCTIONS

E como existe uma evolução constante no mundo da programação, com foco em acrescentar novos recursos e melhorar a experiência de uso do programador, foi criado as ARROW FUNCTIONS,com o objetivo de declarar uma função de maneira mais curta, veja com o caso a seguir:

// Antes de Arrow
hello = function() {
  return "Hello World!";
}
Enter fullscreen mode Exit fullscreen mode
// Após o uso de Arrow
hello = () => {
  return "Hello World!";
}
Enter fullscreen mode Exit fullscreen mode

Conseguimos perceber que utilizando Arrow, a denomização é retirada deixando apenas os parêntes, e antes de delcarar parâmetros por uma chave, é utilizado =>, trazendo o nome de Arrow na forma de escrita da função.

Vale lembrar que ao utilizar Arrow Functions, existe uma alteração no modelo de uso de this. Normalmente ao declarar uma função padrão, o this é usado para um objeto chamar uma função. Já utilizando Arrow, o this irá sempre representará um objeto que chama uma função.

// Método Function:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

// The window object calls the function:
window.addEventListener("load", hello);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
Enter fullscreen mode Exit fullscreen mode
// Arrow Function:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

// The window object calls the function:
window.addEventListener("load", hello);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
Enter fullscreen mode Exit fullscreen mode

Com base no que vimos,conseguimos entender o funcionamento de uma Função. Funções são fundamentais e amplamente utilizadas em todos os tipos de aplicações. Elas permitem a criação de código organizado e reutilizável, tornando o desenvolvimento mais eficiente e fácil de manter.

Obrigado por ler.

Top comments (0)