30:Tbc8,Já deve ter ficado evidente que aquilo que caracteriza uma **função** é a presença dos parenteses `( )`. Apesar de utilizarmos acima **funções** com parenteses `( )` vazios, já utilizamos antes **funções** com valores dentro deles, como em ```js let inteiro = parseInt(10.65); ``` `parseInt()` também é uma função, ou mais precisamente, umas das inúmeras funções já pre-estabelecidas do **javascript**, que fazem parte de sua API (*Application Programming Interface*). Valores introduzidos dentro dos parenteses `( )`, e separados por vírgulas, são utilizados pelas **funções** em seu processamento. Da mesma forma, utilizamos nas **funções** declaradas mais acima a instrução `return`, que informa qual valor ou resultado deverá ser devolvido ao código por ela. **Funções** lidam com dados de entrada (aqueles inseridos dentro dos parenteses), um seu processamento (o código no interior das chaves `{ }`), e dados de saída (aqueles devolvidos através de `return`). As funções não precisam obrigatoriamente devolver valores ou resultados com `return`, nem terem dados de entrada para fazerem algo, mas é mais comum, principalmente no ambiente do Observable, que elas os possuam. Em contextos e ambientes de programação tradicionais, contamos com **variáveis globais**, e às vezes o papel de uma **função** é alterar o valor de uma destas variáveis, ou no caso da programação web, que alterem diretamente o conteúdo da página **html**. Como não temos **variáveis globais** nem uma página **html** dentro do Observable, será mais comum para a programação em seu ambiente que as **funções** retornem os dados ou conteúdos, como resultado de seu processamento. A substituição dos valores ficará subordinada aos blocos que lhes fazem uso. A declaração de uma função pode ser feita de 3 maneiras distintas em **javascript**: A primeira forma é: ```js function minhafuncao(valordeentrada1, valordeentrada2) { código da função } ```
A segunda é ```js minhafuncao = function(valordeentrada1, valordeentrada2) { código da função } ```
E a terceira: ```js minhafuncao = (valordeentrada1, balordeentrada2) => { código da função } ```
Há pequenas diferenças entre as três formas, mas elas tem pouco efeito no contexto do Observable. Você não precisará se preocupar com elas ao programar nele. A primeira é uma declaração antiga ou explícita; a segunda utiliza o que chamamos de funções anônimas, e são atribuídas diretamente a uma **variável** ou **constante**. A terceira é chamada de *Arrow Functions*, e também são atribuídas diretamente a uma **variável** ou **constante**, como as funções anônimas, mas esta sintaxe só existe da versão 6.0 em diante do padrão ECMAScript, que é a base sintática do **javascript**, portanto, as *Arrow Functions* podem ser utilizadas no Observable sem preocupação, mas nem todo contexto que interpreta código **javascript** as aceitará. 31:T80a,Como **funções** são atribuídas à **variáveis**, elas podem ser utilizadas em qualquer lugar onde uma **variável** seja colocada, e isso inclui como valor para outra **função**, ou dentro de **arrays**. Você já viu anteriormente, sem perceber, uma **função** sendo dada como parâmetro/valor para uma outra **função**: ```js novaArray = arr.map(function(x) { return x*2; }); ``` Vamos quebrar essa sintaxe para ficar mais claro. `map()` é uma **função**, e ela recebe um valor como parâmetro. O que `map()` espera como parâmetro é justamente uma **função**, então não há nenhum problema ao fazer isso. Mas este código poderia ser escrito assim: ```js processamap = function(x) { return x*2; } novaArray = arr.map(processamap); ``` Escrito desta forma talvez fique mais legível entender que a **função** `.map()` espera por uma variável que contenha uma outra **função** mesmo. E a **função** `.map()` é algo automaticamente inserido em toda **array**, portanto, ao se declarar uma **array**, alguns valores associativos são inseridos como **funções**. Você também pode incluir os seus próprios: ```js minhaArr = [10, -40, function(x) { return x*2; }, 1502, 0, "Olá!"]; ``` Lembre-se que espaços em branco, ou pular linhas, são irrelevantes dentro do código **javascript**. Para deixar esta declaração mais legível, poderíamos fazer assim: ```js minhaArr = [ 10, -40, function(x) { let divide = x/2; let soint = parseInt(divide); return soint; }, 1502, 0, "Olá!" ]; ``` Ou talvez, para deixar tudo mais explícito e menos confuso: ```js minhafunc = function(x) { return x*2; } minhaArr = [10,-40,minhafunc,1502,0,"Olá!"]; ``` Para utilizar a **função** declarada dentro da **array**, coloque: ```js minhaArr[2](50); ``` ou ```js meunovovalor = minhaArr[2](50); ```32:T61c,Considerando o nível de complexidade e a confusão possível ao se criar **funções** e estabelecer o que elas fazem, a recomendação é que elas sejam o mais objetivas e simples possíveis. Você pode utilizar as **funções** que criar dentro de outras novas **funções**, e sendo assim, é preferível que elas façam tarefas simples e sejam usadas dentro de outras, do que tenham códigos muito longos, múltiplos parâmetros, e estruturas de dados complicadas. Quando mais quebradas forem as tarefas, e atribuídas a **funções independentes**, mais fácil será para corrigir seu código se ele vier a dar algum problema. Tudo que você desejar que seja feito através da programação, será feito por uma ou mais **Funções**. Desenhar algo, calcular algo, apresentar algo, processar algo... todas as ações são feitas por elas. Há um conjunto enorme de **funções** na API do **javascript**, e você pode utilizar **funções** criadas por outras pessoas em outros notebooks através da instrução: ```js import {nomedavariavel1, nomedavariavel2, [...]} from "@usuario/nomedonotebook"; ``` Muito do que as pessoas já criaram pode ser útil e lhe poupará de re-escrever a roda. Como um exemplo, a **função** `gsdata` no notebook [`@ranoya/datat`](https://observablehq.com/@ranoya/datat) captura dados do Google Sheets no Observable: ```js import {googlesheet, getdata} from "@ranoya/datat"; urlcorreta = googlesheet('https://docs.google.com/spreadsheets/d/10wpfmMWn3igQF4rJBYCo8OR90igO1tfKwcmrot0ult0/edit#gid=0', 'CodeEditors'); ```33:[] 2e:{"title":"Funções","cells":[{"id":0,"value":"# Funções","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"### Os verbos da programação\n\n------\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":696,"value":"**Funções** também não são dos primeiros elementos da programação a serem ensinados, principalmente antes de operações lógicas, **condicionais** ou **loops**, mas o contexto do Observable e da programação literária trabalha com uma forma de se programar conhecida como Programação Funcional, que faz uso sistemático das **funções** ao longo do código.","pinned":false,"hidden":false,"mode":"md"},{"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.","pinned":false,"hidden":false,"mode":"md"},{"id":704,"value":"No paradigma de programação tradicional, muitas vezes estas açõ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. No contexto do Observable, isso dificilmente acontece... as funções são mais utilizadas para construir coisas do que executar ações finais; as coisas que desejamos ver na tela são geralmente blocos **html** ou **markdown**, construídos através das **funções**, mas não exatamente exibidos por elas. Vejamos isso na prática:","pinned":false,"hidden":false,"mode":"md"},{"id":706,"value":"A primeira função abaixo constrói a frase `Hello World` em negrito através de marcação **markdown**:\n\n```js\nhello_md = function() {\n let texto = \"**Hello World**\";\n return texto;\n}\n```\n\nJá essa segunda função faz a mesma coisa através da marcação **html**:\n\n```js\nhello_html = function() {\n let texto = \"Hello World\";\n return texto;\n}\n```\n\nQuando executadas, elas irão apresentar exatamente o conteúdo literal das suas variáveis `texto`, sem qualquer aplicação das marcações **markdown** ou **html**:","pinned":false,"hidden":false,"mode":"md"},{"id":715,"value":"hello_md()","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"```js\nhello_md();\n```","pinned":false,"hidden":false,"mode":"md"},{"id":720,"value":"hello_html()","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"```js\nhello_html();\n```","pinned":false,"hidden":false,"mode":"md"},{"id":725,"value":"Mas se as incluirmos em blocos **html** ou **markdown** do Observable com `$\\{hello_md()}` ou `$\\{hello_html()}`, veremos seu resultado correto:","pinned":false,"hidden":false,"mode":"md"},{"id":740,"value":"☞ *O bloco abaixo, é do tipo **markdown**.*","pinned":false,"hidden":false,"mode":"md"},{"id":727,"value":"

${hello_md()}

","pinned":false,"hidden":false,"mode":"md"},{"id":1076,"value":"```js\nhello_md();\n```","pinned":false,"hidden":false,"mode":"md"},{"id":737,"value":"☞ *O bloco abaixo, é do tipo **html**.*","pinned":false,"hidden":false,"mode":"md"},{"id":733,"value":"html`

${hello_html()}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"```js\nhello_md();\n```","pinned":false,"hidden":false,"mode":"md"},{"id":745,"value":"Também é possível fazer uma indicação no código das **funções** para que seu resultado seja exibido como **markdown** ou **html** obrigatoriamente:\n\n```js\nhello_md = function() {\n let texto = \"**Hello World**\";\n return md`$\\{texto}`;\n}\n```\n\nOu\n\n```js\nhello_html = function() {\n let texto = \"Hello World\";\n return html`$\\{texto}`;\n}\n```\n\nIsso permite que os resultados sejam exibidos nos formatos indicados dentro de blocos de programação **javascript**.\n\nEstas são propriedades exclusivas do Observable que fazem com que os resultados sejam *Strings* transformadas em componentes das outras linguagens de marcação disponíveis na plataforma. Apesar de algo próprio ao Observable, quando estes códigos são usados fora do Observable, continuam funcionando perfeitamente em função da intermediação da própria plataforma.","pinned":false,"hidden":false,"mode":"md"},{"id":544,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md"},{"id":752,"value":"## Sintaxe","pinned":false,"hidden":false,"mode":"md"},{"id":754,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":782,"value":"Para usarmos os valores de entrada no processamento de uma **função**, basta utilizá-los como variáveis no código declarado dentro das chaves `{ }`:\n\n```js\ndobra = function(valor) {\n let calculo = valor * 2;\n let sointeiro = parseInt(calculo)\n return sointeiro;\n}\n```\n\nAo usarmos esta **função**, obteremos como resultado sempre a parte inteira do dobro do valor inserido na entrada:","pinned":false,"hidden":false,"mode":"md"},{"id":788,"value":"dobra(14)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"```js\ndobra(14);\n```","pinned":false,"hidden":false,"mode":"md"},{"id":794,"value":"Podemos também utilizar **variáveis** como dados de entrada:","pinned":false,"hidden":false,"mode":"md"},{"id":802,"value":"viewof numero = Inputs.range([0, 100], { label: \"numero\", step: 0.25 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":809,"value":"dobra(numero)","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"```js\ndobra(numero);\n```","pinned":false,"hidden":false,"mode":"md"},{"id":812,"value":"E o valor ou dado resultado de uma **função** pode ser atribuído a uma outra **variável**:\n","pinned":false,"hidden":false,"mode":"md"},{"id":1043,"value":"resultados = dobra(numero)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1046,"value":"```js\nresultados = dobra(numero);\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1049,"value":"```js\napresenta = function(total) {\n let texto = `O valor da variável resultados é igual a: $\\{total}.`\n return html`$\\{texto}`;\n}\n```\n","pinned":false,"hidden":false,"mode":"md"},{"id":832,"value":"apresenta(resultados)","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"```js\napresenta(resultados);\n```","pinned":false,"hidden":false,"mode":"md"},{"id":840,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md"},{"id":542,"value":"## E lá vem mais confusão...","pinned":false,"hidden":false,"mode":"md"},{"id":872,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":878,"value":"25","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"```js\nmeunovovalor\n```","pinned":false,"hidden":false,"mode":"md"},{"id":887,"value":"Se preferir, pode utilizar **arrays associativas** dando nome aos elementos, no lugar de números:\n\n```js\nminhaArr = [\n \"dado\": 10,\n \"negativo\": -40,\n \"dobra\": function(x) {\n return x*2;\n },\n \"ano\": 1502,\n \"nulo\": 0,\n \"texto\": \"Olá!\"\n ];\n```\n\ne desta forma acessá-la com qualquer uma das possibilidades abaixo:\n\n```js\nminhaArr.dobra(50);\nminhaArr['dobra'](50);\n\nnovoValor = minhaArr.dobra(50);\nnovoValor = minhaArr['dobra'](50);\n```","pinned":false,"hidden":false,"mode":"md"},{"id":891,"value":"
\n\n### E dá pra ficar mais confuso???","pinned":false,"hidden":false,"mode":"md"},{"id":894,"value":"Ô se dá! lembre-se que além de podermos receber múltiplos valores de entrada em uma **função**, ex: `minhaFunc(10,\"Bom Dia\", false)`, também podemos receber **arrays** como dados de entrada... e, claro, parte dos valores destas **arrays** podem ser novas **funções**. A complexidade pode ser infinita!\n\nPara acessar valores de **arrays** como dados de entrada, basta indicar o índice desejado:\n\n```js\nfComplexa = function(arr,bin) {\n\n let valorA = arr[2];\n let valorB = bin;\n let texto = `O terceiro valor da Array é $\\{valorA}, e o valor de bin é $\\{valorB}`;\n\n return md`$\\{texto}`;\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":901,"value":"fComplexa([10, 20, 30, 40], false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"```js\nfComplexa([10,20,30,40], false);\n```","pinned":false,"hidden":false,"mode":"md"},{"id":904,"value":"ou\n\n```js\nArrayB = [130,150,-200,500];\n```","pinned":false,"hidden":false,"mode":"md"},{"id":907,"value":"fComplexa([130, 150, -200, 500], true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"```js\nfComplexa(ArrayB, true);\n```","pinned":false,"hidden":false,"mode":"md"},{"id":913,"value":"
\nE para demonstrar o nível de complexidade que podemos ter:\n\n```js\nfSuperComplexa = function(arr,bin,f) {\n\n let valorA = f(arr[2]);\n let valorB = bin;\n let texto = `O terceiro valor da Array, após processado por o que for definido como \"f\", é $\\{valorA}, e o valor de bin é $\\{valorB}`;\n\n return md`$\\{texto}`;\n}\n```\n\nE aí temos algo totalmente possível, mas completamente ilegível/incompreensível:\n\n```js\nqueconfusao = fSuperComplexa([10,-80,400,4], \n \"Doidera\", \n function(a) {\n let divisao = a/3;\n let inteiro = parseInt(a/3);\n return inteiro;\n }\n );\n```\n\n
","pinned":false,"hidden":false,"mode":"md"},{"id":922,"value":"fSuperComplexa([10, -80, 400, 4], \"Doidera\", function (a) {\n return parseInt(a / 3);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"```js\nqueconfusao\n```","pinned":false,"hidden":false,"mode":"md"},{"id":936,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md"},{"id":938,"value":"## Recomendações","pinned":false,"hidden":false,"mode":"md"},{"id":940,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":946,"value":"meusdados = gsdata(\n \"https://docs.google.com/spreadsheets/d/10wpfmMWn3igQF4rJBYCo8OR90igO1tfKwcmrot0ult0/edit#gid=0\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"```js\nmeusdados = getdata(urlcorreta);\n```\n\n
","pinned":false,"hidden":false,"mode":"md"},{"id":960,"value":"Para exibi-los na forma de uma tabela, podemos usar a **função** `.table()` criadas pela própria equipe do Observable, para lidar com dados:\n\n```js\nInputs.table(meusdados);\n```","pinned":false,"hidden":false,"mode":"md"},{"id":954,"value":"Inputs.table(meusdados)","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"Esta estrutura de dados não é exatamente simples, mas ela, e as **funções** para operá-la, buscam ser o mais simples, e mais objetivas dentro do possível.","pinned":false,"hidden":false,"mode":"md"},{"id":1095,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md"},{"id":1097,"value":"## Algumas funções básicas disponíveis em todas as Arrays","pinned":false,"hidden":false,"mode":"md"},{"id":1099,"value":"Como as **arrays** são elementos muito importantes quando utilizamos uma plataforma como o Observable, parece válido mencionar algumas das **funções** que todas as **arrays** possuem nativamente.\n\nVamos utilizar como base uma **array** contendo números, chamada `arrayoriginal`:","pinned":false,"hidden":false,"mode":"md"},{"id":1101,"value":"arrayoriginal = [10, 20, 30, 40]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"Para se incluir um valor novo ao final desta **array**, utilizamos a **função** `push()`:\n\n```js\narrayoriginal.push(50);\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1126,"value":"[10, 20, 30, 40, 50]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"Para se deletar o último valor da **array**, utilizamos a **função** `pop()`:\n\n```js\narrayoriginal.pop();\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1133,"value":"[10, 20, 30]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"Para deletarmos o primeiro registro da **array**, utilizamos a **função** `shift()`:\n\n```js\narrayoriginal.shift();\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1141,"value":"[20, 30, 40]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"Para se incluir um novo registro no início de uma **array**, utilizamos a **função** `unshift()`:\n\n```js\narrayoriginal.unshift();\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1149,"value":"[0, 10, 20, 30, 40]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1152,"value":"Normalmente, após criado um novo registro inicial, seu valor costuma ser modificado.\n
","pinned":false,"hidden":false,"mode":"md"},{"id":1155,"value":"Para identificar qual registro contém um determinado valor na **array**, utilizamos a **função** `indexOf`:\n\n```js\nregistro = arrayoriginal.indexOf(30);\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1167,"value":"2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1171,"value":"O resultado desta operação retornará para `registro` o valor `2`, pois o valor de `arrayoriginal[2]` é:","pinned":false,"hidden":false,"mode":"md"},{"id":1173,"value":"arrayoriginal[2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"Para se incluir um conjunto de novos valores a uma **array**, utilizamos a **função** `concat()`:\n\n```js\narrayoriginal.concat([50,60,70,80]);\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1178,"value":"[10, 20, 30, 40, 50, 60, 70, 80]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1162,"value":"Para inverter a estrutura de uma **array**, utilizamos a **função** `reverse()`:\n\n```js\narrayoriginal.reverse();\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1182,"value":"[40, 30, 20, 10]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"Para ordenar os valores de uma **array** como números crescentes, ou em ordem alfabética, utilizamos a **função** `sort()`.\n\nVamos utilizar para isso uma outra **array**, `arrayaleatoria`:","pinned":false,"hidden":false,"mode":"md"},{"id":1187,"value":"arrayaleatoria = [50, 1, 80, 22, 70, 830, 0, 6]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"```js\narrayaleatoria.sort();\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1193,"value":"arrayaleatoria.sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1198,"value":"Temos também **funções** mais complexas que podem realizar operações customizadas, utilizando funções criadas pelo programador como parâmetro para desempenharem suas atividades.\n\nA primeira delas é `map()`, que retornará para uma nova **array** os valores da **array** original após processar seus dados a partir de uma **função** especificada:\n\n```js\nduplica = function(val) {\n return val * 2;\n}\n\nnovaarray = arrayoriginal.map(duplica);\n```\n","pinned":false,"hidden":false,"mode":"md"},{"id":1202,"value":"[20, 40, 60, 80]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"A operação também pode ser escrita já definindo a **função**, de forma anônima, como parâmetro para `map()` (ou qualquer outra **função** das **arrays** que receba uma **função** como parâmetro):\n\n```js\nnovaarray = arrayoriginal.map(function (val) {\n return val * 2;\n});\n```\n\nE da mesma forma, será comum encontrar a definição destas **funções** pela sintaxe de **arrow functions** do padrão ECMAScript 6 (ES6):\n\n```js\nnovaarray = arrayoriginal.map( val => val * 2 );\n```\n\n☞ *As três diferentes sintaxes fazem exatamente a mesma coisa.*","pinned":false,"hidden":false,"mode":"md"},{"id":1068,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":709,"value":"import {\n hello_md,\n hello_html,\n dobra,\n apresenta,\n fComplexa,\n fSuperComplexa\n} from \"@ranoya/livroobservable-funcoes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"import { gsdata } from \"@ranoya/datat\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}