Introdução às funções em Javascript: Conceitos e Métodos

Neste artigo, você aprenderá um pouco mais sobre o conceito de funções na linguagem Javascript e também conhecerá as principais funções utilizadas no desenvolvimento web.

Javascript

Javascript é uma linguagem de programação muito utilizada para o desenvolvimento de aplicações web, pois, permite a criação de componentes dinâmicos e interativos, que tornam as páginas intuitivas e muito atrativas para os usuários.

Curiosidade

Um teste interessante para se fazer e visualizar diretamente os efeitos do Javascript em um site é desativá-lo para sua visualização. É possível fazer isso pelo navegador Chrome seguindo estas etapas: insira no seu navegador Chrome://settings/content/javascript. Selecione a opção “Não permitir que os sites usem Javascript”. Acesse um site (um dica: google.com) e observe os efeitos da página sem a aplicação do Javascript. No Google, repare especialmente na barra de opções na qual estão dispostos os itens “Imagens”, “Vídeos”, etc.

Detalhe importante: ao fazer esse teste, você apenas desabilita a visualização para você e é possível retornar ao normal refazendo essas etapas e selecionando de volta a permissão para a utilização do Javascript. As páginas não sofrem nenhum prejuízo, pois, essa alteração somente reflete no seu navegador.

Funções

“Uma função é um bloco de código JavaScript definido uma vez, mas que pode ser executado (ou chamado) qualquer número de vezes”. Essa definição foi dada por David Flanagan no famoso livro JavaScript - O Guia Definitivo e resume muito bem o que são as funções na linguagem. Elas são estruturas extremamente úteis na rotina dos desenvolvedores, pois, possibilitam a criação de códigos mais limpos, com trechos que podem ser reaproveitados. Além disso, ao utilizar funções é minimizada a chance de erros na manipulação dos trechos, pois, ao alterar uma função, isto repercutirá em todos os locais onde ela for utilizada. Uma característica importantíssima das funções é que elas possuem parâmetros que funcionam como variáveis locais. Os valores destes parâmetros são passados justamente quando as funções são chamadas.

Definições

Functions declaration (declaração de função): a declaração de função é realizada a partir do uso da palavra function seguida pelos símbolos (), dentro dos quais são inseridos os parâmetros, e pelas chaves {}, que englobam as instruções da função. Confira o exemplo:

No exemplo acima, a função multiplicarNumero recebe a e b como parâmetros e retorna o valor da operação de multiplicação dos dois valores. Repare que não passamos os valores em si, pois devemos inseri-los ao chamar a função, conforme o código abaixo:

Functions expression (expressão de função): as funções também podem ser criadas por meio de uma expressão e são úteis especialmente quando o objetivo é passar uma função como argumento para outra função. Elas podem ser anônimas ou receberem um nome, conforme os exemplos abaixo:

Arrow Functions (função de flecha): esse tipo de sintaxe serve para escrever funções de formas reduzidas, mas com o mesmo propósito e resultado das funções normais. O objetivo é simplificar e tornar o código mais limpo. Confira um exemplo de arrow function:

Na arrow function, não é utilizada a palavra function e sim o símbolo =>, que remete justamente ao nome do tipo de função.

Functions constructor (função construtora): estas funções são definidas, basicamente, da mesma forma que as outras declarações ou expressões. Entretanto, existem algumas diferenças importantes. Geralmente, estas funções são nomeadas com palavras que possuem a primeira letra maiúscula e, ao serem invocadas, necessitam do uso da palavra new. Repare no exemplo abaixo:

Na constante user, estamos criando um novo usuário ao invocar a função Usuario, passando o nome Luiza como parâmetro.

Generator Functions (Função geradora): as funções geradoras possuem o símbolo * após a palavra function e podem ser pausadas e retomadas durante a execução. Confira o exemplo, que iremos detalhar abaixo:

Observe que dentro da função usamos a palavra yield que tem o objetivo de pausar a execução e retornar um valor. Quando utilizamos o gerador.next(), a função é executada até encontrar a próxima instrução, ou seja, o próximo yield ou até finalizar. Repare no nosso exemplo que adicionamos quatro console.log(gerador.next()). Até rodar a quarta vez, o valor estava sendo retornado conforme previsto na função e o done, que representaria o encerramento da função, como false. Quando chegamos ao fim, o valor retorna como undefined e o done como true, sinalizando que a função foi concluída.

Métodos

Os métodos são funções prontas e utilizadas para realizar operações específicas em diversos tipos de dados, tais como strings, objetos ou arrays. Confira abaixo alguns exemplos, com seus conceitos e exemplos:

Neste artigo, você conheceu um pouco mais sobre as funções, seus conceitos e definições, na linguagem JavaScript.

Bons estudos!