DEV Community

Amanda Silva
Amanda Silva

Posted on

Functions em JS

Oi sumidos, olha eu de volta depois de um tempo praticando a "Solitude"(Quem nunca hahaha) resolvi voltar com tudo trazendo um artigo quentinho sobre javascript.

Alt Text

Dessa vez vamos falar de Functions, as famosas funções em javascript. Vamos aprender o que são, onde vivem e do que se alimentam.

Na orientação a objetos podemos chamar as funções de métodos que consistem em um objeto que traz um código executável podendo conter parâmetros.
Todas as definições que implementamos dentro de uma função não conseguem ser acessadas fora dessa função, ou seja, fora do escopo.

Vamos declarar uma função na prática e ver como funciona:

Alt Text

Temos uma função que foi declarada com a palavra reservada que é própria do javascript function e atribuímos a ela o nome de myFunction.
Dentro dos parenteses() atribuimos um argumento que usaremos no escopo(Escopo é o 'Corpo' da função, guardem esse segredinho),
e dentro da nossa função, chamamos retorno do nosso argumento passado por parâmetro.
Então, ao executarmos a nossa função, teremos o seguinte resultado:

Alt Text

Qualquer argumento que passarmos no parâmetro será retornado na função

Vamos praticar mais um pouquinho, agora com uma operação?
Dentro de uma função podemos executar operações, condições, exibir contextos e mais uma infinidade de possibilidades. No exemplo a seguir vamos fazer uma operação:

Alt Text

Na função criada chamada soma, passamos duas variaveís como parâmetro e no retorno realizamos a soma desses parâmetros. Podemos realizar diversas operações dentro de uma função, soma, multiplicação, divisão, subtração, verificações condicionais e por ai vai.
Ao executar nossa função o usuário deve passar dois números no parâmetro. Ao chamá-la teremos o seguinte resultado:

Alt Text

E ai curtiu? Tente praticar agora um pouquinho, bora colocar a mão na massa e testar com diversas formas e depois volte aqui para aprender mais um pouquinho hehe!!!

Alt Text

Arrow Functions

Funções do tipo Arrow Function surgiram com o ES6 e vieram para economizar tempo dos desenvolvedores e simplificar o escopo da função. 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 (constructor).
As funções arrow functions tem return implícito, ou seja, se a sua função for simples, basta terminá-la com com o retorno esperado, como no exemplo a seguir:

Alt Text

Caso a sua função seja mais extensa, com maiores especifições, ai sim você pode chamar o return:

Alt Text

Filter, Map e Reduce

Funções do tipo Filter, Map e reduce nos permitem executar operações sem alterar nossos objetos / arrays, de acordo com as nossas necessidades de forma limpa e organizada. Vamos conhecê-las:
Para implementar nossas funções, vamos criar um objeto:

Alt Text

Filter:

A função do tipo Filter tem nada menos que o papel de filtrar, ou seja, gerar um retorno de acordo com a condição passada.
Vamos criar uma const chamando o nosso objeto e com a função filter vamos retornar a apenas os homens do objeto pessoas:

Alt Text

Ao executar nosso código, o retorno será esse:

Alt Text

Map:

A função do tipo Map posibilita a criação de um novo objeto com base no já existente:

Alt Text

Executando, esse será o retorno com o curso acrescentado no objeto:

Alt Text

Reduce:

Entre as funções Filter, o Map, o _Reduce é a função que exige maior atenção devido a sua complexidade. O Reduce nos permite realizar transformar o tipo do nosso objeto.
No exemplo, vamos somar as idades de todoas pessoas do objeto com o Reduce.
O primeiro parâmetro age é a variável que irá armazenar a nossa soma, ou seja o valor que o totalIdades terá. O parâmetro person representa o item que estamos iterando dentro do nosso objeto. Todo esse escopo é o primeira parâmetro que carrega o escopo do nosso totalIdades, que chama a propriedade idade de dentro do nosso objeto e realiza a soma ao passar por cada item e depois retorna o valor da propriedade. O segundo parâmetro zero, é o valor inicial :

Alt Text

Esse será o nosso resultado:

Alt Text

Alguns anos atrás eu vi a melhor definição ilustrada do Filter Map e Reduce no Global Nerd, olhem só que bacana:

Alt Text

Se você chegou até aqui, P-A-R-A-B-É-N-S, aprendemos juntos o monte de coisas legais que podemos fazer com as funções. Espero que tenham gostado. Tem algo que quer acrescentar, ou até corrigir? É só deixar seu recadinho. Até breve...

Alt Text

Top comments (2)

Collapse
 
tiagojpdias profile image
Tiago Dias

Funções do tipo Arrow Function surgiram com o ES6 e vieram para permitir funções escritas de maneira mais curta e clara.

Cuidado com isto. Arrow Function trouxerem bem mais coisas além de retornos implícitos.

A principal funcionalidade é preservar o contexto do pai, não fazendo o chamado "context shadowing", onde não cria um novo this.

Collapse
 
asilva-dev profile image
Amanda Silva

Muito obrigada pela observação Tiago, vou reestruturar a explicação nesse ponto.😊