2e:null 2f:["$","title",null,{"children":"Diferenças na sintaxe que você está acostumado a usar em Javascript para programar no Observable | Processing Brasil | Observable"}] 34:T77a,html`

e Claudio Esperança

@cesperanca

documento original no Observable

`35:T71b,md`Quem está começando a programar em javascript geralmente aprende, até por ser mais simples e legível, a sintaxe original da linguagem. Neste formato, ao declarar uma função, usamos geralmente este tipo de declaração: \`\`\`js function minhaFuncao(entradas) { // Faça algo } \`\`\` Em 2015 a [ECMA International](https://www.ecma-international.org/), responsável por normatizar a linguagem Javascript, incluiu alguns novos recursos na linguagem, conhecidas como sintaxe ES6 (ECMAScript 6). Além de ser importante conhecer este padrão por que alguns novos recursos só estão disponíveis através dele, esta é a sintaxe que você encontrará em muitos dos notebooks Observable.
## Funções anônimas e *arrow functions* A mudança mais imediata quando usamos ES6 são as *arrow functions*. Elas são uma nova forma de declarar funções, e que possuem sim algumas pequenas diferenças de funcionamento (mais especificamente sobre objetos instanciados e a referência \`\`this\`\`) mas que, na esmagadora maioria dos casos, funcionarão exatamente igual às funções anônimas, que já existiam antes em Javascript:
Funções anônimas são declaradas assim: \`\`\`js minhaFuncao = function(entradas) { // faça alguma coisa } \`\`\` *Arrow functions*, por sua vez, são declaradas desta forma: \`\`\`js minhaFuncao = (entradas) => { // faça alguma coisa } \`\`\` Em qualquer caso, a forma de invocar a função é a mesma: \`\`\`js minhaFuncao('valor de entrada'); \`\`\` Exceto para os casos onde a função é instanciada em um novo objeto (utilisando a instrução \`\`new\`\`, e a referência interna \`\`this\`\`), elas são a mesma coisa. Obviamente que o novo formato também pode retornar valores com \`\`return\`\` como qualquer função. `36:T6ea,md` O que você verá muitas vezes nas funções utilizadas nessa plataforma é o uso de \`\`return\`\` nas funções. Isso sempre foi um uso comum em funções javascript, mas as novidades trazidas pelo ES6 reforçam o uso desta prática.
## Mudanças na forma de programar O ES6 trouxe para a programação *client-side* um recurso já presente na infra-estrutura usando Node (javascript *server-side*): a possibilidade de um código javascript carregar funções e objetos de outro código (\`\`import\`\`). Para a construção de **módulos** no javascript *client-side*, é obrigatório seguir algumas regras, e dentre elas está a proibição à variáveis globais (as variáveis no código que estão acessíveis à todas as funções e objetos no código); os **módulos** javascript precisam funcionar de forma isolada, e se o programador deseja enviar dados presentes no resto do código para uma função específica, precisará fazer isso através de um processo formal de entrada e saída nas funções, e não através de dados descontrolados no código. As variáveis globais e a flexibildiade que elas proporcionam, principalmente para quem se inicia no campo da programação, são atalhos fáceis e úteis para códigos que não precisam de algum tipo de proteção nos dados ou disciplina em sua engenharia. Com os novos recursos oferecidos pelo ES6, a sintaxe e a forma de se programar em javascript vão se tornando mais rigorosas, e estes novos hábitos, aos poucos, vão se refletindo nos códigos que você encontrará por aqui. O uso mais frequente de funções com \`\`return\`\` é um destes reflexos, já que para se passar dados de uma função para outra, o caminho é receber o retorno de uma função como entrada para outra. `37:[] 32:{"id":"184fee41d931f257","slug":"diferencas-na-sintaxe-que-voce-esta-acostumado-a-usar-em-jav","title":"Diferenças na sintaxe que você está acostumado a usar em Javascript para programar no Observable","thumbnail":"f1f8315118ecab078adbc1fe6cceb96a9c86b3c9a538851a1850aedf40f44269","access_level":"public","create_time":"$D2021-03-02T12:51:10.472Z","update_time":"$D2021-03-07T22:50:03.345Z","view_time":null,"first_public_time":"$D2021-03-02T12:52:47.842Z","has_unpublished_edits":null,"fork":{"id":"604531480be1673c","slug":"diferencas-na-sintaxe-que-voce-esta-acostumado-a-usar-em-jav","title":"Diferenças na sintaxe que você está acostumado a usar em Javascript para programar no Observable","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"stars":1,"starred":false,"owner":{"type":"team","id":"4aa3e7af8e4705a0","login":"processingbrasil","name":"Processing Brasil","avatar_url":"https://avatars-next.observableusercontent.com/3d6bd67e4d66853bd3f201190f0a0d7e5b504e88ebf8fe4225fbeaf7e7487864","tier":"starter_2024"},"version":243,"publish_version":243,"role":null,"authored":false,"authors":[{"type":"individual","id":"6026713a1531e323","login":"processingbrasil","name":"Processing Brasil","avatar_url":"https://avatars-next.observableusercontent.com/3d6bd67e4d66853bd3f201190f0a0d7e5b504e88ebf8fe4225fbeaf7e7487864","tier":null}],"members":[{"type":"individual","id":"6026713a1531e323","login":"processingbrasil","name":"Processing Brasil","avatar_url":"https://avatars-next.observableusercontent.com/3d6bd67e4d66853bd3f201190f0a0d7e5b504e88ebf8fe4225fbeaf7e7487864","tier":null,"role":"editor"}],"comments":[{"id":"acf08102a0dcffc8","reply_to_id":null,"content":"Programar","create_time":"$D2021-03-07T16:43:50.925Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"f68d9e0595973b5f","slug":"introducoes","title":"Introduções","owner":{"id":"4aa3e7af8e4705a0","login":"processingbrasil","name":"Processing Brasil"}},"type":"notebook","body":{"title":"Diferenças na sintaxe que você está acostumado a usar em Javascript para programar no Observable","cells":[{"id":0,"value":"md`# Diferenças na sintaxe que você está acostumado a usar em Javascript para programar no Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`\n
\n### Exemplo de declaração e uso de função anônima`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"funcaoA = function(entrada) {\n return entrada;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"funcaoA('Função Anônima')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`\n
\n### Exemplo de declaração e uso de *arrow function*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"funcaoB = (a, b) => {\n return a * b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"funcaoB(10, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"md`
\n### Sintaxes alternativas para *arrow functions*\n\nÉ possível omitir os parênteses na lista de entradas caso só exista um argumento. Por exemplo:\n\n \\`\\`\\`js\n minhaFuncao = entrada => { \n // faça alguma coisa \n }\n \\`\\`\\`\n\nPara simplificar ainda mais (ou talvez confundir!), as chaves são também opcionais caso o corpo da função consista de uma única expressão. Neste caso, o \\`return\\` é implícito. Assim, a declaração\n\n \\`\\`\\`js\n aoQuadrado = x => { return x**2 }\n \\`\\`\\`\n\né equivalente a \n \\`\\`\\`js\n aoQuadrado = x => x**2\n \\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"md`
\n## Células, constantes e variáveis\n\nNo Observable, uma célula pode ser escrita como uma expressão simples ou como uma definição de um nome. Por exemplo:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"1 + \" mais \" + 1 + \" = \" + (1 + 1) // Expressão simples","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"dois = 1 + 1 // Definição do nome 'dois'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"md`Quando uma célula é escrita como uma atribuição, podemos pensar no nome da célula como se fosse uma constante. Assim ela não pode ser redefinida explicitamente. Isto significa que podemos escrever:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"três = dois + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`Mas não é possível alterar a célula com uma atribuição:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"1 + (dois = 7)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md`### Blocos como expressões\n\nQuando usado para definir uma célula, uma expressão pode ser escrita como um corpo de função, isto é, um bloco entre chaves cujo valor é sinalizado pela instrução \\`return\\`. Por exemplo:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"{\n var a = 1;\n return a + três;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md`Naturalmente, esse tipo de expressão normalmente é usado para definir uma célula com nome:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"quatro = {\n var a = 1;\n return a + três;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`Observe que esta sintaxe pode ser confundida com a definição de uma variável do tipo \\`Object\\`. Por isso mesmo, se uma célula é definida como um objeto literal, é necessário usar parênteses ou então usar um bloco. Por exemplo, a seguinte definição não faz sentido:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"não_é_o_que_você_espera = {\n x: 1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"md`Mas uma das seguintes alternativas resolvem o problema:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"um_objeto = ({ x: 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"outro_objeto = {\n return { x: 1 };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`Blocos como expressões são atalhos compreendidos pelo Observable apenas para definição de células, e não podem ser usados em blocos internos. Por exemplo, isto está incorreto:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"uma_célula_errada = {\n var y = { return 1 + 1};\n return y;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`Mas isto está correto:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"uma_célula_correta = {\n var y = (function() {\n return 1 + 1;\n })();\n return y;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`### Código em células sempre rodam em *strict mode*\n\nO modo estrito (*strict mode*) foi introduzido desde a versão 5 da linguagem para impedir alguns erros de programação difíceis de localizar. O principal deles é fazer uma atribuição a um nome ainda não definido. Por exemplo, quando não se está em modo estrito, é perfeitamente válido escrever\n\n \\`\\`\\`js\n var b = 1;\n {\n pi = 3.1416;\n b += pi;\n }\n \\`\\`\\`\n\nmesmo que uma variável com nome \\`pi\\` nunca tenha sido definida anteriormente. O resultado nesse caso é que \\`pi\\` é definido no escopo global e pode ser usado fora do bloco. Em modo estrito, isso não é permitido. Se o objetivo era definir uma variável local, o código deveria ser escrito, por exemplo, assim:\n\n \\`\\`\\`js\n var b = 1;\n {\n const pi = 3.1416;\n b += pi;\n }\n \\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`Em outras palavras, como consequência do modo estrito, toda variável ou constante deve ser definida explicitamente, ou seja, seu nome deve ser introduzida no código por uma declaração \\`let\\`, \\`var\\` ou \\`const\\`, de acordo com o escopo desejado (veja [este artigo sobre o assunto](https://www.alura.com.br/artigos/entenda-diferenca-entre-var-let-e-const-no-javascript)). Por exemplo:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"{\n var a = 1;\n let b = 1;\n const c = 1;\n {\n let b = 100;\n a += b + c;\n }\n return [a, b, c];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`\n
\n## Objetos e Arrays\n\nQuando criamos objetos em Javascript, geralmente utilizamos esta sintaxe:\n\n\\`\\`\\`js\nmeuObjeto = {};\nmeuObjetoB = { chave1: 'valor1', chave2: 'valor2', chave3: 'valor3' };\n\n\\`\\`\\`\n\nA sintaxe para definir um objeto no Observable também é um pouco diferente. Ele será declarado assim:\n\n\\`\\`\\`js\nmeuObjeto = ({});\nmeuObjetoB = ({ chave1: 'valor1', chave2: 'valor2', chave3: 'valor3' });\n\n\\`\\`\\`\n\nA declaração de objeto pode ser observada abaixo, na prática:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"meuObjetoB = ({ chave1: 'valor1', chave2: 'valor2', chave3: 'valor3' })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`\nJá a construção de arrays segue a sintaxe tradicional:\n\n\\`\\`\\`js\nminhaArray = [];\nminhaArrayB = ['valor1', 'valor2', 'valor3'];\n\n\\`\\`\\`\n\nEsta declaração também pode ser observada abaixo, na prática:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"minhaArrayB = ['valor1', 'valor2', 'valor3']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`\nA sintaxe utilizada no Observable é basicamente a mesma adotada no console disponível no seu navegador. Programadores mais experientes já estão acostumados a usar o console para identificar valores, objetos, registros, etc., mas os iniciantes muitas vezes ainda não sabem que possuem no próprio navegador, uma ferramenta de programação.\n\nO console, no Chrome, pode ser acessado com **CTRL**+**ALT**+**J** (ou **CMD**+**ALT**+**J** nos Macs). E as operações de programação em javascript que você realiza nele podem ser feitas igualmente no Observable.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"