2c:null 2d:["$","title",null,{"children":"Funções | Guilherme Ranoya | Observable"}] 32:T70a,Uma função que não **retorna** nenhum dado ou valor como resultado, como é o caso de `console.log()` pode ser chamada diretamente no código, como já vimos antes: ```javascript console.log("Hello World"); ``` `Hello World` é o **parâmetro** passado à função `console.log`. Trata-se de uma *String*, que poderia ter sido passada a ela na forma de uma variável: ```javascript let mensagem = "Hello World"; console.log(mensagem); ``` Mas funções podem receber mais de um único **parâmetro**. Para passar a uma função vários parâmetros, você deverá separá-los por vírgula dentro dos parênteses `( )`: ```javascript minhaFuncao(valor1,valor2,valor3); ``` Quando falamos de funções que **retornam** dados ou valores - e elas podem igualmente possuir 1 ou mais **parâmetros**, passados a elas sendo separados por vírgulas - este resultado precisa ser atribuído a alguém, ou utilizado por alguém. A função `parseInt()` processa valores fracionários (`Float`) e os transforma em valores inteiros (`Int`). Ela, portanto, possui um **retorno**. Para utilizá-la, podemos atribuir este **retorno** a uma variável: ```javascript let valInteiro = parseInt(22.86); ``` ou podemos utilizar este **retorno** como parâmetro para outra função: ```javascript console.log( parseInt(22.86) ); ``` Não há qualquer problema em se utilizar uma variável, e utilizar a variável como parâmetro para a função: ```javascript let valInteiro = parseInt(22.86); console.log(valInteiro); ``` Este processo é até mais legível, e mais fácil de ser compreendido por quem inicia o aprendizado na programação. Mas na medida que se ganha experiência com a linguagem, e estas articulações vão se tornando mais óbvias, acabamos optando por uma sintaxe mais reduzida e direta.33:Tbc4,Logicamente que a mágica da programação acontece quando criamos nossas próprias funções, capazes de realizar aquilo que precisamos que seja feito. A versão *ECMAScript 6.0* (ES6), a atualmente disponível nos navegadores, possui três sintaxes diferentes para a declaração de funções. Apenas a última (*arrow functions*) possui propriedades um pouco diferentes, que são muito específicas; de forma geral, as três podem ser usadas como se fossem totalmente equivalentes. A primeira forma já foi vista quando declaramos anteriormente a função `draw()` que é parte da biblioteca P5: ```javascript function minhaFuncao() { // meu código } ``` Se desejarmos que a função receba alguns **parâmetros** ao ser chamada, basta incluirmos estes **parâmetros** como variáveis dentro dos parênteses `( )` em sua declaração: ```javascript function minhaFuncao( varA, varB, varC ) { // meu código } ``` A segunda forma como uma função pode ser declarada é conhecida também como *Funções Anônimas*. Tratam-se de funções declaradas como se fossem variáveis. Tecnicamente a função é declarada de forma anônima, e automaticamente atribuída a uma variável, e por isso possuem esta nomenclatura: ```javascript let minhaFuncao = function( varA, varB, varC ) { // meu código } ``` Esta forma revela uma característica importante do *javascript*: mesmo uma função é um elemento da programação tratado como sendo um dado, que pode ser atribuído a uma variável. Quando trabalhamos com estruturas de dados (*Arrays*), um dos dados presentes na estrutura pode ser uma função! A terceira forma, as *Arrow Functions*, são a forma mais nova. Há uma série de pequenas diferenças na sua implementação em relação às anteriores: elas não possuem a propriedade `this`, que é um elemento criado que faz referência à quem chamou a função; elas não podem utilizar o operador `yield`, que faz pontos de parada no tempo de execução; elas não podem ser chamadas no código antes de serem declaradas, obrigado que sua declaração seja feita em linhas anteriores à chamada; no código HTML elas ficam associadas ao contexto de execução, e não ao objeto do DOM por qual foram chamadas. Todos estes aspectos são questões bastante avançadas em relação ao uso de funções, e têm pouquíssimo impacto para a programação no momento. A declaração de uma função na forma de *Arrow Functions* se faz assim: ```javascript let minhaFuncao = ( varA, varB, varC ) => { // meu código } ``` Quando quisermos declarar uma função que possua **retorno**, bastará incluir a instrução `return` segunda de uma variável, no final do código de declaração, em qualquer uma das três formas: ```javascript let minhaFuncao = ( varA, varB, varC ) => { // meu código return varZ; } ``` Ao fazer isso, esta função passará a entregar um dado ou valor como resultado, que precisará ser encaminhado a uma variável ou outra função.34:[] 30:{"id":"c7d2684491fbcd3c","slug":"livrojavascript-7","title":"Funções","thumbnail":"e99bb46bc47b636d58e6e3d2eacb83b960ff0419e5fc70f502c55c9a29c102f7","access_level":"public","create_time":"$D2024-10-03T21:57:17.150Z","update_time":"$D2025-02-05T23:37:47.230Z","view_time":null,"first_public_time":"$D2024-10-03T21:57:17.150Z","fork":{"id":"eaf63f1ef6d6892c","slug":"livroobservable-4","title":"Funções","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024"},"version":1265,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null}],"members":[{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"a809548a33c31ed6","slug":"livro-javascript","title":"Livro - Javascript","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"Funções","cells":[{"id":0,"value":"# Funções","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"### Os verbos da programação\n\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":698,"value":"Funções são o verbo da programação, se consideramos as variáveis como substantivos ou adjetivos. Elas são as ações de um programa, e por este motivo, talvez o elemento mais central da programação.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":704,"value":"Muitas vezes as funções são fins em si mesmos. Por exemplo: podemos ter uma função que escreve `Hello World` na tela (este costuma ser o primeiro código escrito por qualquer pessoa que aprende programação), ou uma que abre uma janela de diálogo (janela modal) na tela, contendo o mesmo texto. Mas as funções podem ser utilizadas para construir coisas que serão utilizadas para atribuir valor a uma variável, ou para serem utilizadas por outras funções, e não somente para executar ações finais.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1115,"value":"Pode ainda não ter sido notado, mas já vimos diversas funções sendo usadas até aqui. Instruções como `console.log()` ou `line()` (da biblioteca P5) são funções. Já chegamos até a declarar uma função, `draw()` (também utilizada através da biblioteca P5). Quando utilizamos uma instrução que possui parenteses `( )`, contendo ou não parâmetros dentro deles, estamos utilizando uma função.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1130,"value":"Uma função como `console.log()` realiza uma ação final, apresentando um valor (ou tecnicamente, o **parâmetro** entregue a ela) no console do navegador. Mas uma função como `parseInt()` faz algo diferente: ao invés de realizar uma ação final, ela processa o **parâmetro** que lhe foi entregue, de devolve um valor ou dado como resultado; e este resultado precisa ser atribuído a uma variável, ou entregue a outra função imediatamente. Vejamos a sintaxe de uso destas diferentes formas de funções:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1135,"value":"

\n\n### Sintaxe\n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1138,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1146,"value":"

\n\n### Declarando novas funções\n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1152,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1158,"value":"

\n\n### Exemplos de funções\n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1160,"value":"Neste primeiro exemplo irmos criar uma versão mais interessante para o famoso `Hello World`. Ele irá dar `Bom dia` ou `Boa noite`, dependendo do horário em que o código é executado. Para isso utilizaremos um objeto *javascript* chamado `Date`, e uma de suas funções, `getHours()`. Esta função **retorna** a hora atual.\n\nPrimeiro iremos declarar a função, e depois chamá-la. A função não recebe nenhum **parâmetro**, e também não **retorna** nenhum dado ou valor:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1164,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1182,"value":"☞ *É importante reparar que a função precisa ser chamada (linha 12) para que seja executada. A definição da função não a executa, apenas a cria.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1171,"value":"Vamos agora construir o mesmo código, mas ao invés da função `Hello` realizar uma ação final, apresentando uma mensagem no console, vamos criá-la de forma que ela **retorne** a mensagem, e que este **retorno** seja utilizado como **parâmetro** por `console.log()` para apresentar a mensagem:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1173,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1185,"value":"Este segundo exemplo pode parecer mais trabalhoso, mas desta maneira a função se torna mais flexível, podendo ser utilizada por outras funções, como por exemplo, uma que escreverá uma mensagem no documento e incluirá a saudação adequada:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1188,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1199,"value":"Neste último código, usamos a função `document.getElementById()` na linha 18. Esta função é responsável por localizar no código HTML um elemento com um ID específico, que no caso é um marcado como `msg`. Esta função **retorna** um objeto DOM que possui uma propriedade `innerHTML`, que é o conteúdo do elemento.\n\nIsto significa que a instrução localiza o elemento `h2` do código HTML, e modifica seu conteúdo com o valor de `mensagemcompleta`. Esta variável é construída na função `saudacao` a partir do que foi **retornado** pela função `Hello()`.\n\nÉ através deste tipo de articulação com programação que podemos modificar o que aparece em um documento HTML na web.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1201,"value":"Em um outro exemplo, podemos construir uma função capaz de converter medidas de ângulos. Normalmente utilizamos graus como forma de medir um ângulo, mas as linguagem de programação geralmente utilizam a medida de radianos. Para entregar estes valores no formato certo, será necessário realizar um cálculo que faça sua conversão, retornando a medida da maneira que a linguagem necessita:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1205,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1118,"value":"Estas funções que foram criadas aqui são inteiramente novas, e não existem originalmente em javascript. Quando carregamos uma biblioteca, como P5, estamos carregando, no fundo, um conjunto de funções que foram elaboradas por alguém para resolver uma série de problemas e facilitar a programação.\n\nO próprio ambiente *javascript* dentro do navegador já possui um grande conjunto de funções pré-definidas, que chamamos de API (*Application Programming Interface*). O conjunto que já está previamente disponível no navegador não é necessariamente o mesmo que está disponível em outros contextos de programação javascript, como por exemplo o **Node**, contexto de execução de códigos javascript em servidores. Em cada contexto, termos uma API diferente; mas nada nos impede de criarmos as funções que precisamos, nós mesmos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1068,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"