Olá DEVs!
Show de bola, primeiro gostaria de parabenizar a DIO por criar esse portal maravilhoso, uma ideia fantástica que pra mim está ajudando muito a organizar meus estudos. Já na vibe dos BootCamps, Cursos e Aceleração aproveitei para escrever o meu primeiro artigo sobre o que entendi do curso de Desenvolvimento Avançado com JavaScript ES6 parte integrante do BootCamp GFT START_UNI 2021 #1 e gostaria de contar com os feedbacks de todos vocês, fique a vontade de apontar possíveis correções no artigo ou dicas para que eu possa melhorar a cada artigo.
Funções Avançadas do ES6
Agradecimento especial ao Celso Henrique da Silva (Front-End Chapter Lead - Easynvest) que trouxe este conteúdo para ampliar nossos conhecimentos.
De modo geral, função é um "subprograma" que pode ser chamado a partir de um outro "subprograma" ou programa principal dependendo da forma e local onde foi declarada, uma função é composta por uma sequência de instruções chamada corpo da função. Valores podem ser passados para ela e que são processados e geram um valor de retorno.
Em JavaScript, funções são objetos de primeira classe, pois elas podem ter propriedades e métodos como qualquer outro objeto. O que as difere de outros objetos é que as funções podem ser chamados. Em resumo, elas são objetos Function veja mais sobre o objeto function.
Definição de uma função
Esta é a forma padrão de definir uma função, tendo a palavra function seguida no nome da função que por sua vez por conter ou não parâmetros entre parênteses ( [param[, ... param]] )
function nome([param[, param[, ... param]]]) {
<corpo da função>
}
Como disse essa é a maneira padrão, porém esta longe de ser a única, pois o JS assim como as demais linguagens de programação vivem em constante evolução. e vou destacar algumas outras formas de definir uma função até chegarmos as novos recursos disponibilizados no ECMA6 ou ECMA2015 que é considerada uma das versões que trouxe o maior de funcionalidades relevantes para o JavaScript.
As funções podem ser classificadas quanto a sua definição :
1. Anônimas ou nomeadas
2. Ter ou não parâmetros
3. Com ou sem o uso de "return"
veja alguns exemplos de definição de funções em seus diversos tipos:
função não nomeada onde criamos um objeto **quadrado** que retorna o quadrado de seu argumento:
var quadrado = function(y) {
return y * y;
};
a mesma função agora nomeada como **quadrado**
function quadrado(y) {
return y * y;
};
a função a seguir foi definida sem parametros (255 é Max. de param.) e também pode ou não estar nomeada
function pi2() {
return Math.pi() * Math.pi();
};
Sem retorno
function pi2Show() {
console.log(pi2());
};
Existe diversas outras maneira de definir uma função: Callback de uma outra função, funções auto executaveis, como metodos de um objeto, etc...Vamos agora falar sobre as Arrow Function e alguns outros recursos aprimorados no ES6.
1. Arrows Functions
2. Default Function Arguments
3. Enhanced Objects Literals
Arrows Functions, Default Function Arguments e destruction
Uma expressão arrow function possui uma sintaxe mais curta quando comparada a uma expressão de função (function expression) e não tem seu próprio this, arguments, super ou new.target. Estas expressões de funções são melhor aplicadas para funções que não sejam métodos, e elas não podem ser usadas como construtoras (constructors).
Sintaxe Básica
expression sem as chaves equivale à { return expression; }
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
Parênteses são opcionais quando só há um nome de parâmetro:
(singleParam) => { statements }
singleParam => { statements }
A lista de parâmetros para uma função sem parâmetros deve ser escrita com um par de parênteses.
() => { statements }
Sintaxe Avançada
Parâmetros ...rest (rest parameters) e parâmetros padrões (default parameters) também são suportados
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }
Desestruturação (destructuring) dentro da lista de parâmetros também é suportado
var soma = ([a, b] = [15, 35], {x: c} = {x: a + b}) => a + b + c;
soma(); // 100
veja mais sobre Desestruturação
Um pouco mais sobre Arrow Functions, observe o array a baixo eveja como podemos manipular seu valores, com o uso ou não das arrow functions.
var array = [ 'Juntos', 'Somos', 'Mais', 'Fortes' ];
O retorno da função a baixo será um array: [6, 5, 4, 6]
array.map(function(elemento) {
return elemento.length;
});
Agora vamos reescrever a função como uma Arrow Function e veremos que o retorno será o mesmo: [6, 5, 4, 6]
array.map((array) => {
return elemento.length;
});
Quando só existe um parâmetro, podemos remover os parênteses envolvendo os parâmetros e também remover o return quando a expressão for em uma única linha, assim usaremos cada vez menos código e retorno obtido continuará sendo o mesmo: [6, 5, 4, 6]
array.map(elemento => elemento.length);
Comentários (0)