Hello, I am Marijn and this is my home page.
72 | `).
83 |
84 | *Tags* aparecem em diversas formas. Um elemento, como o `
`, um parágrafo ou um link, começa com uma *tag* de abertura como em ``), contém informações extra na forma de pares `nome="valor"`. Estes são chamados de *atributos*. Nesse caso, o destino do link é indicado pelo atributo `href="http://eloquentjavascript.net"`, onde `href` significa "*hypertext reference*" (referência de hipertexto).
85 |
86 | Alguns tipos de *tags* não englobam conteúdo e assim não necessitam de uma *tag* de fechamento. Um exemplo seria `
`, que irá mostrar a imagem encontrada na URL informada no atributo `src`.
87 |
88 | Para sermos capazes de incluir os sinais de menor e maior no texto de um documento, mesmo esses possuindo um significado especial em HTML, teremos que introduzir mais uma nova forma de notação especial. Uma *tag* de abertura simples é escrita como `<` ("*less than*" - menor que), e uma *tag* de fechamento é escrita como `>` ("*greater than*" - maior que). Em HTML, o caractere & (o sinal de "E comercial") seguido por uma palavra e um ponto e vírgula é chamado de "entidade" (*entity*), e será substituída pelo caractere que representa.
89 |
90 | Essa notação é parecida com a forma que as barras invertidas são utilizadas nas *strings* em JavaScript. Uma vez que esse mecanismo dá ao caractere `&` um significado especial, este tem que ser representado como `&`. Dentro que um atributo, que é definido entre aspas duplas, a entidade `"` pode ser usada para representar um caractere de aspas duplas.
91 |
92 | O HTML é interpretado de uma forma notavelmente tolerante a erros. Se uma *tag* é omitida, o navegador irá inserí-la. A forma com que isto é feito foi padronizada, você pode confiar em todos os navegadores modernos para realizar tal tarefa.
93 |
94 | O documento a seguir será tratado exatamente como o mostrado anteriormente:
95 |
96 | ```html
97 |
98 |
99 | My home page
100 |
101 | My home page
102 | Hello, I am Marijn and this is my home page.
103 |
I also wrote a book! Read it
104 | here.
105 | ```
106 |
107 | As *tags* ``, `
` e `` foram retiradas. O navegador sabe que a *tag* `` pertence ao `head`, e que `<h1>` pertence ao `body`. Além disso, eu não especifiquei o final dos parágrafos, o fato de começar um novo parágrafo ou fechar o documento irá implicitamente fechá-los. As aspas que envolviam o destino do link também foram retiradas.
108 |
109 | Esse livro geralmente vai omitir as tags `<html>`, `<head>` e `<body>` dos exemplos para mantê-los curtos e ordenados. Mas eu irei fechar as *tags* e incluir aspas nos valores de atributos.
110 |
111 | Eu geralmente também irei omitir o *doctype*. Isso não deve ser interpretado como um incentivo a omitir declarações de *doctype*. Os navegadores frequentemente irão fazer coisas ridículas quando você esquece delas. Você deve considerá-las implicitamente presentes nos exemplos, mesmo quando elas não forem mostradas no texto.
112 |
113 | ## HTML e JavaScript
114 |
115 | No contexto desse livro, a *tag* mais importante do HTML é `<script>`. Essa *tag* nos permite incluir trechos de JavaScript em um documento.
116 |
117 | ```html
118 | <h1>Testing alert</h1>
119 | <script>alert("hello!");</script>
120 | ```
121 |
122 | Esse *script* será executado assim que a *tag* `<script>` for encontrada enquanto o navegador interpreta o HTML. A página mostrada acima irá exibir uma mensagem de alerta quando aberta.
123 |
124 | Incluir programas grandes diretamente no documento HTML é impraticável. A *tag* `<script>` pode receber um atributo `src` a fim de buscar um arquivo de *script* (um arquivo de texto contendo um programa em JavaScript) a partir de uma URL.
125 |
126 | ```html
127 | <h1>Testing alert</h1>
128 | <script src="code/hello.js"></script>
129 | ```
130 |
131 | O arquivo `code/hello.js` incluído aqui contém o mesmo simples programa, `alert("hello!")`. Quando uma página HTML referencia outras URLs como parte de si, por exemplo um arquivo de imagem ou um *script*, os navegadores irão buscá-los imediatamente e incluí-los na página.
132 |
133 | Uma *tag* de *script* deve sempre ser fechada com `</script>`, mesmo quando fizer referência para um arquvio externo e não contenha nenhum código. Se você esquecer disso, o restante da página será interpretado como parte de um *script* .
134 |
135 | Alguns atributos podem conter um programa JavaScript. A *tag* `<button>` mostrada abaixo (que aparece como um botão na página) possui um atributo `onclick`, cujo conteúdo será executado sempre que o botão for clicado.
136 |
137 | ```html
138 | <button onclick="alert('Boom!');">DO NOT PRESS</button>
139 | ```
140 |
141 | Perceba que eu tive que usar aspas simples para a *string* do atributo `onclick` porque aspas duplas já estão sendo usadas para envolver o valor do atributo. Eu também poderia ter usado `"`, mas isso tornaría o programa difícil de ler.
142 |
143 | ## Na caixa de areia
144 |
145 | Executar programas baixados da internet é potencialmente perigoso. Você não sabe muito sobre as pessoas por trás da maioria dos sites que visita e eles não necessariamente são bem intencionados. Executar programas de pessoas que tenham más intenções é como você tem seu computador infectado por vírus, seus dados roubados e suas contas *hackeadas*.
146 |
147 | Contudo, a atração da *Web* é que você pode navegar sem necessariamente confiar nas páginas que visita. Esse é o motivo pelo qual os navegadores limitam severamente as funções que um programa JavaScript pode fazer: eles não podem bisbilhotar os arquivos do seu computador ou modificar qualquer coisa que não esteja relacionada a página em que foi incorporado.
148 |
149 | O isolamento de um ambiente de programação dessa maneira é chamado de *sandboxing*, a ideia é que o programa é inofensivo "brincando" em uma "caixa de areia". Mas você deve imaginar esse tipo específico de caixas de areia como tendo sobre si uma gaiola de grossas barras de aço, o que as torna um pouco diferentes das caixas de areia típicas de *playgrounds*.
150 |
151 | A parte difícil do *sandboxing* é permitir que os programas tenham espaço suficiente para serem úteis e ao mesmo tempo impedí-los de fazer qualquer coisa perigosa. Várias funcionalidades úteis, como se comunicar com outros servidores ou ler o conteúdo da área de transferência, podem ser usadas para tarefas problemáticas ou invasivas à privacidade.
152 |
153 | De vez em quando, alguém aparece com uma nova forma de burlar as limitações de um navegador e fazer algo prejudicial, variando de vazamentos de alguma pequena informação pessoal até assumir o controle total da máquina onde o navegador está sendo executado. Os desenvolvedores de navegadores respondem "tapando o buraco", e tudo está bem novamente —até que o próximo problema seja descoberto e divulgado, ao invés de ser secretamente explorado por algum governo ou máfia.
154 |
155 | ## Compatibilidade e a guerra dos navegadores
156 |
157 | No início da web, um navegador chamado Mosaic dominava o mercado. Depois de alguns anos, quem desequilibrou a balança foi o Netscape, que por sua vez, foi derrotado pelo Internet Explorer da Microsoft. Nos momentos em que um único navegador era dominante, seus desenvolvedores se sentiam no direito de criar, unilateralmente, novas funcionalidades para a web. Como a maior parte dos usuários usava o mesmo navegador, os sites simplesmente começaram a usar esses recursos —sem se importarem com os outros navegadores.
158 |
159 | Essa foi a idade das trevas da compatibilidade, frequentemente chamada de "guerra dos navegadores". Os desenvolvedores web não tiveram uma web unificada, mas sim duas ou três plataformas incompatíveis. Para piorar as coisas, os navegadores usados por volta de 2003 eram cheios de *bugs*, e, é claro que esses *bugs* foram diferentes para cada navegador. A vida era difícil para aqueles que escreviam páginas web.
160 |
161 | O Mozilla Firefox, uma ramificação sem fins lucrativos do Netscape, desafiou a hegemonia do Internet Explorer no final dos anos 2000. A Microsoft não estava particularmente interessada em se manter competitiva nessa época, o Firefox levou uma parcela do mercado para longe do IE. Pela mesma época, a Google introduziu seu navegador Chrome, e o navegador Safari da Apple ganhou popularidade, levando-nos a uma situação onde existiam quatro grandes "competidores" nesse seguimento ao invés de um.
162 |
163 | Os novos navegadores possuíam uma postura mais séria sobre a questão dos padrões e de melhores práticas de engenharia, diminuindo as incompatibilidades e *bugs*. A Microsoft, vendo sua cota de mercado se esfarelar, começou a adotar essas atitudes. Se você está começando a aprender sobre desenvolvimento web hoje, considere-se com sorte. As últimas versões da maior parte dos navegadores se comportam de uma maneira uniforme e possuem relativamente menos *bugs*.
164 |
165 | Ainda não dá para dizer que a situação é perfeita. Algumas pessoas que usam a web estão, por motivo de inércia ou políticas corporativas, presas a navegadores antigos. Enquanto esses navegadores não "morrerem" completamente, desenvolver sites que funcionem para eles vai exigir uma grande quantidade de conhecimento "misterioso" sobre suas peculiaridades e defeitos. Este livro não tratará dessas peculiaridades. Pelo contrário, tem como objetivo apresentar um estilo de programação moderno e sensato.
166 |
--------------------------------------------------------------------------------
/chapters/01-valores-tipos-operadores.md:
--------------------------------------------------------------------------------
1 | # Valores, Tipos e Operadores
2 |
3 | > Abaixo da parte superficial da máquina, existe um programa que desloca-se. Sem esforço, ele se expande e se contrai. Com grande harmonia, os elétrons se espalham e se reagrupam. As formas no monitor são como ondulações na água. A essência permanece invisível por baixo.
4 |
5 | > - Master Yuan-Ma, The Book of Programming
6 |
7 | Dentro do mundo do computador, há somente dados. Nós podemos ler dados, modificar dados, criar dados - mas coisas que não são representadas por dados simplesmente não existem. Todos estes dados são armazenados em longas sequências de bits, e isso portanto é fundamentalmente parecido.
8 |
9 | Bits podem ser qualquer tipo de coisa com 2 valores, usualmente descrito como 0 e 1. Dentro do computador, eles tomam formas como uma carga elétrica alta ou baixa, um forte ou fraco sinal, ou um ponto brilhante ou sem brilho na superfície de um CD. Qualquer pedaço de uma discreta informação, pode ser reduzida para uma sequência de 0 e 1, e então representanda por bits.
10 |
11 | Como um exemplo, pense sobre a maneira que o número 13 pode ser armazenado em bits. A forma usual de se fazer esta analogia é a forma de escrevermos números decimais, mas ao invés de 10 dígitos, temos apenas 2. E, ao invés de o valor de um dígito aumentar dez vezes sobre o dígito após ele, o valor aumenta por um fator 2. Estes são os bits que compõem o número treze, com o valor dos dígitos mostrados abaixo deles:
12 |
13 | ```
14 | 0 0 0 0 1 1 0 1
15 | 128 64 32 16 8 4 2 1
16 | ```
17 |
18 | Então este é o 00001101, ou 8 + 4 + 1, que equivale a 13.
19 |
20 | ## Valores
21 |
22 | Imagine um mar de bits. Um oceano deles. Um computador moderno tem mais de trinta bilhões de bits em seu armazenamento volátil (memória RAM). De armazenamento não-volátil (o disco rígido ou equivalente) tende a ter uma ordem de magnitude ainda maior.
23 |
24 | 
25 |
26 | Para trabalhar com estes sem se perder, nós temos que estruturá-los de alguma forma. Uma forma de fazer é agrupá-los dentro de pedaços que representam uma simples parte de informação. Em um ambiente JavaScript, todo os dados são separados em coisas chamadas *valores*, grupos de bits que representam um pedaço de dado coerente.
27 |
28 | Embora todos os valores sejam feitos da mesma coisa uniforme, eles desempenham papéis diferentes. Todo valor tem um tipo, que determina o tipo de papel que desempenha. Temos seis tipos básicos de valores no JavaScript: números, strings, booleans, objetos, funções e valores indefinidos.
29 |
30 | > Em inglês: [number, string, boolean, object, function, undefined]
31 |
32 | Para criar um valor, deve-se simplesmente invocar seu nome. Isto é muito conveniente. Você não tem que recolher material para construir seus valores ou pagar por eles; você só chama por um, e pronto, você o tem. Eles não são criados com ar, obviamente. Todo valor tem que ser armazenado em algum lugar, e se você quer usar uma quantidade gigante deles, ao mesmo tempo você deve rodar sobre os bits. Felizmente, este é um problema somente se você os quiser simultaneamente. Assim que você não usar mais um valor, ele será dissipado, deixando para trás os bits para serem reciclados e se tornarem materiais para a próxima geração de valores.
33 |
34 | Este capítulo introduz os elementos atômicos dos programas JavaScript: Simples tipos de valores, e operadores que podem atuar em cada valor.
35 |
36 | ## Números
37 |
38 | Valores do tipo *numbers* são, previsivelmente, valor numéricos. Em um programa JavaScript, eles são escritos usualmente assim:
39 |
40 | ```javascript
41 |
42 | 13
43 |
44 | ```
45 |
46 | Coloque isto em um programa, e isto vai gerar o padrão de bits para que o número 13 comece a existir dentro do computador.
47 |
48 | O JavaScript usa um número fixo de bits, 64 deles, para armazenar um único valor numérico. Isto significa que existe uma quantidade limite de tipos diferentes de números que podem ser representados - há muitos padrões diferentes que você pode criar com 64 bits. O conjunto de números podem ser representados por N dígitos decimais é 10^N. Similarmente, o conjunto de números que podem ser representados por 64 dígitos binários é 2⁶⁴, que é mais ou menos 18 quintilhões (um 18 com 18 zeros após ele).
49 |
50 | Isto é muito. Números exponenciais tem o hábito de ficarem grandes. Já foi o tempo que as memórias eram pequenas e as pessoas tendiam a usar grupos de 8 ou 16 bits para representar estes números. Era fácil de acidentalmente "transbordarem" estes pequenos números. Hoje, temos o luxo de somente se preocupar quando realmente lidamos com números astronômicos.
51 |
52 | Todos os números abaixo de 18 quintilhões cabem no JavaScript *number*. Estes bits também armazenam números negativos, onde um destes sinais é usado para guardar o sinal do número. Uma grande questão é que números não inteiros podem ser representados. Para fazer isso, alguns bits são usados para guardar a posição do ponto decimal do número. O maior número não inteiro que pode ser armazenado está na faixa de 9 quadrilhões (15 zeros) - que continua muito grande.
53 |
54 | Números fracionados são escritos usando o ponto:
55 |
56 | ```javascript
57 |
58 | 9.81
59 |
60 | ```
61 |
62 | Para grandes números ou números pequenos, podemos usar a notação científica adicionando um 'e', seguido do expoente:
63 |
64 | ```javascript
65 |
66 | 2.998e8
67 |
68 | ```
69 |
70 | Isto é 2.998 x 10⁸ = 299800000.
71 |
72 | Cálculos com números inteiros (também chamados *integers*) menores que os mencionados 9 quadrilhões são garantidos de sempre serem precisos. Infelizmente cálculos com números fracionários não são, geralmente. Como π (pi) não pode ser precisamente expresso por uma quantidade finita de dígitos decimais, vários números perdem a precisão quando somente 64 bits estão disponíveis para armazená-los. Isto é uma vergonha, porém causa problemas somente em situações muito específicas. O importante é estar ciente disto e tratar números fracionários digitais como aproximações, não como valores precisos.
73 |
74 | ## Aritmética
75 |
76 | A principal coisa a se fazer com números é aritmética. Operações aritméticas como adição e multiplicação pegam o valor de dois números e produzem um novo número a partir deles. Aqui vemos como eles são no JavaScript:
77 |
78 | ```javascript
79 |
80 | 100 + 4 * 11
81 |
82 | ```
83 |
84 | Os símbolos `+` e `*` são chamados *operadores*. O primeiro representa adição, e o segundo representa multiplicação. Colocando um operador entre 2 valores faz com que se aplique o mesmo, produzindo um novo valor.
85 |
86 | O próximo exemplo significa "adicione 4 e 100, e multiplique o resultado por 11", ou é a multiplicação feita antes da adição? Como você deve ter pensado, a multiplicação acontece primeiro. Mas, como na matemática, isto pode ser mudado envolvendo a adição com os parênteses:
87 |
88 | ```javascript
89 |
90 | (100 + 4) * 11
91 |
92 | ```
93 |
94 | Para subtração, este é o operador `-`, e para a divisão usamos este operador `/`.
95 |
96 | Quando operadores aparecem juntos sem parênteses, a ordem que eles vão ser aplicados é determinada pela *precedência* dos operadores. O exemplo mostra que a multiplicação vem antes da adição. `/` tem a mesma precedência de `*`. Igualmente para `+` e `-`. Quando múltiplos operadores com a mesma precedência estão próximos uns aos outros (como em `1 - 2 + 1`), eles são aplicados da esquerda para a direita.
97 |
98 | Estas regras de precedência não é algo que você deva se preocupar. Quando em dúvida, somente adicione parênteses.
99 |
100 | Há mais um operador aritmético, que possivelmente é menos familiar. O símbolo `%` é usado para representar o *restante* da operação. `X % Y` é o restante da divisão de `X por Y`. Por exemplo, `314 % 100` produz `14`, e `144 % 12` nos dá `0`. A precedência deste operador é igual a da multiplicação e divisão. Você também pode ver este operador sendo referido como "módulo" (porém tecnicamente "restante" é mais preciso).
101 |
102 | ## Números Especiais
103 |
104 | Existem 3 valores especiais no JavaScript que são considerados números, mas não comportam-se como números normais.
105 |
106 | Os dois primeiros são `Infinity` e `-Infinity`, que são usados para representar os infinitos positivo e negativo. `Infinity - 1` continua sendo `Infinity`, e assim por diante. Mas não ponha muita confiança neste tipo de computação *baseada em infinito*, pois é uma matemática pesada, e vai rapidamente levar para nosso próximo número especial: `NaN`.
107 |
108 | `NaN` significa "not a number" (não é um número). Você obtém isso quando declara `0 / 0` (zero dividido por zero), `Infinity - Infinity`, ou qualquer número de outra operação numérica que não produz um preciso e significante valor.
109 |
110 | ## Strings
111 |
112 | O próximo tipo básico de dado é a *string*. Strings são usadas para representar texto. Elas são escritas delimitando seu conteúdo entre aspas:
113 |
114 | ```javascript
115 |
116 | "Patch my boat with chewing gum"
117 | 'Monkeys wave goodbye'
118 |
119 | ```
120 |
121 | Ambas as aspas simples e duplas podem ser usadas para marcar strings - contanto que as aspas no início e no fim da string combinem.
122 |
123 | Quase tudo pode ser colocado entre aspas, e o JavaScript vai fazer um valor de string com isso. Mas alguns caracteres são difíceis. Você pode imaginar como colocar aspas entre aspas deve ser difícil. Novas linhas, as coisas que você obtém quando pressiona `enter`, também não podem ser colocadas entre aspas - a string tem que estar em uma linha única.
124 |
125 | Para ser capaz de ter estes caracteres em uma string, a convenção seguinte é usada: Sempre que um barra invertida `\` é encontrada dentro do texto entre aspas, isto indica que o caracter depois desta tem um significado especial. Uma aspa precedida de uma barra invertida não vai findar a string, mas ser parte dela. Quando um caracter 'n' correr depois de uma barra invertida, será interpretado como uma nova linha. Similarmente, um 't' depois da barra invertida significa o caracter tab. Veja a string seguinte:
126 |
127 | ```
128 | "This is the first line\nAnd this is the second"
129 |
130 | ```
131 |
132 | O verdadeiro texto contido é:
133 |
134 | ```
135 | This is the first line
136 | And this is the second
137 |
138 | ```
139 |
140 | Existe, obviamente, situações onde você quer uma barra invertida em uma string apenas como uma barra invertida. não um código especial. Se duas barras invertidas estiverem seguidas uma da outra, elas se anulam, e somente uma vai ser deixada no valor da string resultante. Assim é como a string `A newline character is written like "\n" can be written`:
141 |
142 | ```
143 | "A newline character is written like \"\\n\"."
144 |
145 | ```
146 |
147 | Strings não podem ser divididas, multiplicadas ou subtraídas, mas o operador `+` pode ser usado nelas. Ele não adiciona, mas concatena - ele cola duas strings unindo-as. A linha seguinte vai produzir a string `concatenate`:
148 |
149 | ```
150 | "con" + "cat" + "e" + "nate"
151 |
152 | ```
153 |
154 | Existem outras maneiras de manipular strings, que nós vamos discutir quando entrarmos nós métodos no capítulo 4.
155 |
156 | ## Operadores Unários
157 |
158 | Nem todos operadores são símbolos. Alguns são palavras escritas. Um exemplo é o operador `typeof`, que produz uma string com o valor do tipo dado para fornecido para avaliação.
159 |
160 | ```javascript
161 |
162 | console.log(typeof 4.5)
163 | // → number
164 | console.log(typeof "x")
165 | // → string
166 |
167 | ```
168 |
169 | Nós vamos usar `console.log` nos códigos exemplo para indicar que nós queremos ver o resultado da avaliação de algo. Quando você roda algum código, o valor produzido vai ser mostrado na tela - de alguma forma, dependendo do ambiente JavaScript que você usa para rodá-lo.
170 |
171 | Os outros operadores que vimos sempre operam com 2 valores; `typeof` pega somente um. Operadores que usam 2 valores são chamados operadores *binários*, enquanto aqueles que pegam um são chamados operadores *unários*. O operador menos `-` pode ser usado como operador binário e unário.
172 |
173 | ```javascript
174 |
175 | console.log(- (10 - 2))
176 | // → -8
177 |
178 | ```
179 |
180 | ## Valores Booleanos
181 |
182 | As vezes, você vai precisar de um valor que simplesmente distingue entre 2 possibilidades, "sim" ou "não", ou "ligado" e "desligado". Para isso o JavaScript tem um tipo *booleano*, que tem apenas dois valores, `true` e `false` (que são escritos com estas palavras mesmo).
183 |
184 | ### Comparações
185 |
186 | Aqui temos uma maneira de produzir valores booleanos:
187 |
188 | ```javascript
189 |
190 | console.log(3 > 2)
191 | // → true
192 | console.log(3 < 2)
193 | // → false
194 |
195 | ```
196 | Os sinais `>` e `<` são tradicionalmente símbolos para "é maior que" e "é menor que". Eles são operadores binários, e o resultado da aplicação deles é um valor booleano que indica se eles são verdadeiros neste caso.
197 |
198 | Strings podem ser comparadas da mesma forma:
199 |
200 | ```javascript
201 |
202 | console.log("Aardvark" < "Zoroaster")
203 | // → true
204 |
205 | ```
206 |
207 | A maneira que as strings são ordenadas é mais ou menos alfabética: Letras maiúsculas são sempre "menores" que as minúsculas, então ` "Z" < "a" ` é `true`, e caracteres não alfabéticos ('!', '-', e assim por diante) são também incluídos na ordenação. A maneira real da comparação é feita baseada no padrão *Unicode*. Este padrão atribui um número a todo caracter virtual que pode ser usado, incluindo caracteres da Grécia, Arábia, Japão, Tamil e por ai vai. Ter estes números é prático para guardar strings dentro do computador - você pode representá-los como uma sequência de números. Quando se compara strings, o JavaScript vai sobre elas da esquerda para a direita, comparando os códigos numéricos dos caracteres um por um.
208 |
209 | Outros operadores similares são `>=` (maior que ou igual a), `<=` (menor que ou igual a), `==` (igual a) e `!=` (não igual a).
210 |
211 | ```javascript
212 |
213 | console.log("Itchy" != "Scratchy")
214 | // → true
215 |
216 | ```
217 |
218 | Há somente um valor no JavaScript que não é igual a ele mesmo, que é o `NaN` (not a number).
219 |
220 | ```javascript
221 |
222 | console.log(NaN == NaN)
223 | // → false
224 |
225 | ```
226 |
227 | `NaN` (not a number) supostamente define o resultado de *uma operação* sem sentido, e como tal, não será igual ao resultado de *outra operação* sem sentido.
228 |
229 | ## Operadores Lógicos
230 |
231 | Temos também algumas operações que podem ser aplicadas aos valores booleanos. O JavaScript suporta 3 operadores lógicos: *e*, *ou* ou *não*.
232 |
233 | O operador `&&` representa o **e** lógico. É um operador binário, e seu resultado é `true` (verdadeiro) somente se ambos os valores dados a ele forem `true`.
234 |
235 | ```javascript
236 |
237 | console.log(true && false);
238 | // → false
239 |
240 | console.log(true && true);
241 | // → true
242 |
243 | ```
244 |
245 | O operador `||` denota ao **ou** lógico. Ele produz `true` se algum dos valores fornecidos for `true`:
246 |
247 | ```javascript
248 |
249 | console.log(false || true);
250 | // → true
251 |
252 | console.log(false || false);
253 | // → false
254 |
255 | ```
256 |
257 | **Não** é escrito com uma exclamação `!`. É um operador unário que inverte o valor dado a ele - `!true` produz `false` e `!false` produz `true`.
258 |
259 | Quando misturamos estes operadores booleanos com operadores aritméticos e outros operadores, não é sempre óbvio quando o parênteses é necessário. Na prática, você precisa conhecer sobre os operadores que vimos antes, e que `||` tem o mais baixo nível de precedência, seguido do `&&`, e então os operadores de comparação (`>`, `==`, e outros), e depois o resto. Sendo assim, como vemos na expressão abaixo, os parênteses poucas vezes são necessários.
260 |
261 | ```javascript
262 |
263 | 1 + 1 == 2 || 10 * 10 <= 100
264 |
265 | ```
266 |
267 | ## Valores Indefinidos
268 |
269 | Temos dois valores especiais, `null` e `undefined`, que são usados para denotar a ausência de valores significativos. Eles são por si próprios valores, porém valores que não levam informação.
270 |
271 | Muitas operações na linguagem que não produzem valores significativos (vamos ver algumas no próximo capítulo) vão produzir `undefined`, simplesmente porque elas tem que retornar *algum* valor.
272 |
273 | A diferença de significado entre `undefined` e `null` é em grande parte desinteressante e um acidente no projeto do JavaScript. Nos casos que você realmente tiver que se preocupar com estes valores, eu recomendo tratá-los como substituíveis (mais sobre isso em um momento).
274 |
275 | ## Conversão Automática de Tipo
276 |
277 | Na introdução, eu mencionei que o JavaScript não iria atrapalhá-lo e aceitaria quase qualquer coisa que você o fornecesse, mesmo quando isso é confuso e errado. Isto é muito bem demonstrado por esta expressão:
278 |
279 | ```javascript
280 |
281 | console.log(8 * null)
282 | // → 0
283 | console.log("5" - 1)
284 | // → 4
285 | console.log("5" + 1)
286 | // → 51
287 | console.log("five" * 2)
288 | // → NaN
289 | console.log(false == 0)
290 | // → true
291 |
292 | ```
293 | Quando um operador é aplicado a um tipo de valor "errado", ele vai silenciosamente converter este valor para o tipo que quiser, usando um conjunto de regras que frequentemente não são as que você expera. O `null` na primeira expressão torna-se 0, o `"5"` na segunda expressão se torna `5` (de string para número), ainda na terceira expressão, o `+` tenta a concatenação de strings antes de tentar a adição numérica, o `1` é convertido em `"1"` (de número para string).
294 |
295 | Quando algo que não pode ser mapeado como um número de forma óbvia, do tipo `"five"` ou `undefined` é convertido para um número, o valor `NaN` é produzido. Operações aritméticas com `NaN` continuam produzindo `NaN`, então se você encontrar alguns destes resultados em algum local inesperado, procure por conversões acidentais de tipo.
296 |
297 | Quando comparamos coisas do mesmo tipo usando `==`, o resultado é bastante fácil de se prever - você vai obter `true` quando ambos os valores forem os mesmos. Mas quando os tipos diferem, o JavaScript usa um complicado e confuso conjunto de regras para determinar o que fazer. Eu não vou explicar isto precisamente, mas na maioria dos casos irá ocorrer a tentativa de conversão de um dos valores para o tipo do outro valor. Contudo, quando `null`ou `undefined`ocorrem em algum dos lados do operador, isso produzirá `true` somente se ambos os lados forem `null` ou `undefined`.
298 |
299 | A última parte do comportamento é frequentemente muito útil. Quando você quer testar se um valor tem um valor real, em vez de ser `null` ou `undefined`, você pode simplesmente compará-lo a `null` com o operador `==` (ou `!=`).
300 |
301 | Mas e se você quiser testar se algo se refere ao valor preciso `false`? As regras de conversão de strings e números para valores booleanos afirmam que `0`, `NaN` e empty strings contam como `false`, enquanto todos os outros valores contam como `true`. Por causa disso, expressões como `0 == false` e `"" == false` retornam `true`. Para casos assim, onde você **não** quer qualquer conversão automática de tipos acontecendo, existem dois tipos extras de operadores: `===` e `!==`. O primeiro teste se o valor é precisamente igual ao outro, e o segundo testa se ele não é precisamente igual. Então `"" === false` é falso como esperado.
302 |
303 | Usar os operadores de comparação de três caracteres defensivamente, para prevenir inesperadas conversões de tipo que o farão tropeçar, é algo que eu recomendo. Mas quando você tem certeza de que os tipos de ambos os lados serão iguais, ou que eles vão ser ambos `null`/`undefined`, não há problemas em usar os operadores curtos.
304 |
305 | ## O Curto-Circuito de && e ||
306 |
307 | Os operadores lógicos `&&` e `||` tem uma maneira peculiar de lidar com valores de tipos diferentes. Eles vão converter o valor à sua esquerda para o tipo booleano a fim de decidir o que fazer, mas então, dependendo do operador e do resultado da conversão, eles ou retornam o valor à esquerda *original*, ou o valor à direita.
308 |
309 | O operador `||` vai retornar o valor à sua esquerda quando ele puder ser convertido em `true`, ou valor à sua direita caso contrário. Ele faz a coisa certa para valores booleanos, e vai fazer algo análogo para valores de outros tipos. Isso é muito útil, pois permite que o operador seja usado para voltar um determinado valor predefinido.
310 |
311 | ```javascript
312 |
313 | console.log(null || "user")
314 | // → user
315 | console.log("Karl" || "user")
316 | // → Karl
317 |
318 | ```
319 |
320 | O operador `&&` trabalha similarmente, mas ao contrário. Quando o valor à sua esquerda é algo que se torne `false`, ele retorna o valor, e caso contrário ele retorna o valor à sua direita.
321 |
322 | Outro importante propriedade destes 2 operadores é que a expressão a sua direita é avaliada somente quando necessário. No caso de `true || X`, não importa o que `X` é - pode ser uma expressão que faça algo *terrível* - o resultado vai ser verdadeiro, e `X` nunca é avaliado. O mesmo acontece para `false && X`, que é falso, e vai ignorar `X`.
323 |
324 | ## Resumo
325 |
326 | Nós vimos 4 tipos de valores do JavaScript neste capítulo. Números, strings, booleanos e valores indefinidos.
327 |
328 | Alguns valores são criados digitando seu nome (`true`, `null`) ou valores (13, `"abc"`). Eles podem ser combinados e transformados com operadores. Nós vimos operadores binários para aritmética (`+`, `-`, `*`, `/`, e `%`), um para concatenação de string (`+`), comparação (`==`, `!=`, `===`, `!==`, `<`, `>`, `<=`, `>=`) e lógica (`&&`, `||`), como também vários operadores unários (`-` para negativar um número, `!` para negar uma lógica, e `typeof` para encontrar o tipo do valor).
329 |
330 | Isto lhe dá informação suficiente para usar o JavaScript como uma calculadora de bolso, mas não muito mais. O próximo capítulo vai começar a amarrar essas operações básicas conjuntamente dentro de programas básicos.
331 |
--------------------------------------------------------------------------------
/chapters/08-erros-e-manipulacao-de-erros.md:
--------------------------------------------------------------------------------
1 | # Bugs e manipulação de erros
2 |
3 | > “Debugar é duas vezes mais difícil do que escrever código. Portanto, se você escrever código da maneira mais inteligente possível, por definição, você não é inteligente o suficiente para debugá-lo.”
4 | > — Brian Kernighan and P.J. Plauger, The Elements of Programming Style
5 |
6 | > Yuan-Ma havia escrito um pequeno programa onde utilizou muitas variáveis globais e atalhos que faziam a qualidade do seu código inferior. Lendo o programa, um estudante perguntou: “Você nos avisou para não usar essas técnicas e mesmo assim as encontro no seu programa. Como pode isso?”. O mestre respondeu: “Não há necessidade de se buscar uma mangueira de água quando a casa não está em chamas.”
7 | > — Master Yuan-Ma, The Book of Programming
8 |
9 | Programas são pensamentos “cristalizados”. Algumas vezes, esses pensamentos são confusos e erros podem ser inseridos quando convertemos pensamentos em código, resultando em um programa com falhas.
10 |
11 | Falhas em um programa são normalmente chamadas de *bugs*, e podem ser causadas por erros inseridos pelo programador ou problemas em outros sistemas que a aplicação interage. Alguns *bugs* são imediatamente aparentes, enquanto outros são sutis e podem ficar escondidos em um sistema por anos.
12 |
13 | Muitas vezes os problemas aparecem quando um programa executa de uma forma que o programador não considerou originalmente. As vezes, tais situações são inevitáveis. Quando o usuário insere um dado inválido, isso faz com que a aplicação fique em uma situação difícil. Tais situações devem ser antecipadas e tratadas de alguma maneira.
14 |
15 | ## Erros do programador
16 |
17 | O nosso objetivo é simples quando se trata de erros do programador. Devemos encontrá-los e corrigi-los. Tais erros podem variar entre erros simples que faz o computador reclamar assim que ele tenta executar o programa ou erros sutis causado por uma compreensão errada da lógica do programa levando a resultados incorretos, podendo ser constante ou em apenas algumas condições específicas. Esse último tipo de erros pode levar semanas para ter um diagnostico correto.
18 |
19 | O nível de ajuda que as linguagens oferece para encontrar os erros variam bastante. Isso não é nenhuma surpresa pois o JavaScript está no "quase não ajuda em nada" no final dessa escala. Algumas linguagens exigem os tipos de todas as suas variáveis e expressões antes mesmo de executar; isso da a possibilidade do programa nos dizer imediatamente quando um tipo é usado de forma incorreta.
20 | JavaScript considera os tipos somente na execução do programa e mesmo assim ele permite que você faça algumas coisas visivelmente absurdas sem dar nenhum tipo de aviso como por exemplo: `x = true "macaco" *`.
21 |
22 | Há algumas coisas que o JavaScript não se queixam. Mas escrever um programa que é sintaticamente incorreto faz com que ele nem execute e dispare um erro imediatamente.
23 | Existem outras coisas como, chamar algo que não é uma função ou procurar uma propriedade em um valor indefinido, isso causa um erro a ser relatado somente quando o programa entrar em execução e encontrar essa ação que não tem sentido.
24 |
25 | Mas muitas das vezes um cálculo absurdo pode simplesmente produzir um `NaN` (não um número) ou um valor indefinido. O programa irá continua alegremente convencido de que está fazendo algo correto. O erro vai se manifestar somente mais tarde, depois que o valor falso passou por várias funções. Não que isso venha desencadear um erro em tudo, mas isso pode silenciosamente causar uma série de saídas erradas. Encontrar a fonte de tais problemas são considerados difíceis.
26 |
27 | O processo de encontrar erros (bugs) nos programas é chamado de depuração.
28 |
29 | # Modo estrito
30 |
31 | JavaScript pode ser feito de uma forma mais rigorosa, permitindo que o modo seja estrito. Para obter esse modo basta inserir uma string `"use strict"` na parte superior de um arquivo ou no corpo de uma função. Veja o exemplo:
32 |
33 | ````js
34 | function canYouSpotTheProblem() {
35 | "use strict";
36 | for (counter = 0; counter < 10; counter++)
37 | console.log("Happy happy");
38 | }
39 |
40 | canYouSpotTheProblem();
41 | // → ReferenceError: counter is not defined
42 | ````
43 |
44 | Normalmente, quando você esquece de colocar `var` na frente de sua variável como acontece no exemplo, o JavaScript cria uma variável global para utiliza-la, no entanto no modo estrito um erro é relatado. Isto é muito útil. Porém deve-se notar que isso não funciona quando a variável em questão já existe como uma variável global, isso é apenas para atribuição ou criação.
45 |
46 | Outra mudança no modo estrito é que esta ligação tem o valor `undefined` para funções que não são chamadas como métodos. Ao fazer tal chamada fora do modo estrito a referencia do objeto é do escopo global. Então se você acidentalmente chamar um método ou um construtor incorretamente no modo estrito o JavaScript produzirá um erro assim que ele tentar ler algo com isso ao invés de seguir trabalhando normalmente com a criação e leitura de variáveis globais no objeto global.
47 |
48 | Por exemplo, considere o seguinte código que chama um construtor sem a nova palavra-chave, na qual seu objeto não vai se referir a um objeto recém-construído:
49 |
50 | ````js
51 | function Person(name) { this.name = name; }
52 | var ferdinand = Person("Ferdinand"); // oops
53 | console.log(name);
54 | // → Ferdinand
55 | ````
56 |
57 | Assim, a falsa chamada para `Person` foi bem sucedida, mas retornou um valor indefinido e criou uma variável global. No modo estrito, o resultado é diferente.
58 |
59 | ````js
60 | "use strict";
61 | function Person(name) { this.name = name; }
62 | // Oops, forgot 'new'
63 | var ferdinand = Person("Ferdinand");
64 | // → TypeError: Cannot set property 'name' of undefined
65 | ````
66 |
67 | Somos imediatamente informados de que algo está errado. Isso é útil.
68 |
69 | Existe mais coisas no modo estrito. Ele não permite dar a uma função vários parâmetros com o mesmo nome e remove totalmente certas características problemáticas da linguagem.
70 |
71 | Em suma, colocando um `"use strict"` no topo do seu programa não irá causar frustrações mas vai ajudar a detectar problemas.
72 |
73 | ## Testando
74 |
75 | A linguagem não vai nos ajudar muito a encontrar erros, nós vamos ter que encontrá-los da maneira mais difícil: executando o programa e analisando se o comportamento está correto.
76 |
77 | Fazer sempre testes manualmente é uma maneira insana de conduzir-se. Felizmente é possível muitas das vezes escrever um segundo programa que automatiza o teste do seu programa atual.
78 |
79 | Como por exemplo, vamos construir um objeto `Vector`:
80 |
81 | ````js
82 | function Vector(x, y) {
83 | this.x = x;
84 | this.y = y;
85 | }
86 |
87 | Vector.prototype.plus = function(other) {
88 | return new Vector(this.x + other.x, this.y + other.y);
89 | };
90 | ````
91 |
92 | Vamos escrever um programa para verificar se a nossa implementação do objeto `Vector` funciona como o esperado. Então cada vez que mudarmos a implementação o programa de teste é executado, de modo que fiquemos razoavelmente confiantes de que nós não quebramos nada. Quando adicionarmos uma funcionalidade extra (por exemplo, um novo método) no objeto `Vector`, também devemos adicionar testes para o novo recurso.
93 |
94 | ````js
95 | function testVector() {
96 | var p1 = new Vector(10, 20);
97 | var p2 = new Vector(-10, 5);
98 | var p3 = p1.plus(p2);
99 |
100 | if (p1.x !== 10) return "fail: x property";
101 | if (p1.y !== 20) return "fail: y property";
102 | if (p2.x !== -10) return "fail: negative x property";
103 | if (p3.x !== 0) return "fail: x from plus";
104 | if (p3.y !== 25) return "fail: y from plus";
105 | return "everything ok";
106 | }
107 | console.log(testVector());
108 | // → everything ok
109 | ````
110 |
111 | Escrevendo testes como este tende a parecer um pouco repetitivo e um código estranho. Felizmente existem opções de software que ajudam a construir e executar coleções de testes (suites de teste), fornecendo uma linguagem (na forma de funções e métodos) adequada para expressar os testes e emitir informações informativas de quando um teste falhou. Isto é chamados de estruturas de teste.
112 |
113 | ## Depuração
114 |
115 | Você consegue perceber que há algo errado com o seu programa quando ele esta se comportando mal ou produzindo erros; o próximo passo é descobrir qual é o problema.
116 |
117 | Às vezes é óbvio. A mensagem de erro vai apontar para a linha específica; e se você olhar para a descrição do erro e para linha de código muitas vezes você irá entender o problema.
118 |
119 | Mas nem sempre é assim. Às vezes a linha que desencadeou o problema é simplesmente o primeiro lugar onde um valor falso foi produzido e que em outros lugares foi usado de uma forma incorreta ou as vezes não há nenhuma mensagem de erro, apenas um resultado inválido. Se você tentou resolver os exercícios nos capítulos anteriores você provavelmente já experimentou tais situações.
120 |
121 | O exemplo seguinte tenta converter um número inteiro para uma cadeia em qualquer base (decimal, binário, e assim por diante), para se livrar do último dígito escolhemos o último dígito repetidamente e em seguida dividimos. Mas a saída produzida sugere que ele tem um bug.
122 |
123 | ````js
124 | function numberToString(n, base) {
125 | var result = "", sign = "";
126 | if (n < 0) {
127 | sign = "-";
128 | n = -n;
129 | }
130 | do {
131 | result = String(n % base) + result;
132 | n /= base;
133 | } while (n > 0);
134 | return sign + result;
135 | }
136 | console.log(numberToString(13, 10));
137 | // → 1.5e-3231.3e-3221.3e-3211.3e-3201.3e-3191.3e-3181.3…
138 | ````
139 |
140 | Mesmo se você já viu o problema e fingiu por um momento que você não viu. Sabemos que o nosso programa não está funcionando corretamente e queremos descobrir o porquê.
141 |
142 | Esta é a hora onde você deve resistir à tentação de começar a fazer mudanças aleatórias no código. Em vez disso pense, analise o que está acontecendo e chegue a uma teoria de por que isso pode estar acontecendo. Então faça observações adicionais para testar esta teoria ou se você ainda não tem uma teoria, faça observações adicionais que podem ajudá-lo.
143 |
144 | Colocar algumas chamadas `console.log` estratégicas no programa é uma boa maneira de obter informações adicionais sobre o que o programa está fazendo. Neste caso queremos tomar os `n` valores de 13, 1 até 0. Vamos descrever o seu valor no início do loop.
145 |
146 | ````
147 | 13
148 | 1.3
149 | 0.13
150 | 0.013
151 | …
152 | 1.5e-323
153 | ````
154 |
155 | Certo. Dividindo 13 por 10 não produz um número inteiro. Em vez de `n / = base` o que nós realmente queremos é `n = Math.floor (n / base)` de modo que o número está devidamente deslocando-se para a direita.
156 |
157 | Uma alternativa para o uso do `console.log` é usar os recursos de depuração do seu browser. Navegadores modernos vêm com a capacidade de definir um ponto de interrupção em uma linha específica de seu código. Isso fará com que a execução do programa faz uma pausa a cada vez que a linha com o ponto de interrupção é atingido. Isso permite que você inspecione os valores das variáveis nesse ponto. Eu não vou entrar em detalhes aqui pois depuradores diferem de navegador para navegador, mas vale a pena olhar as ferramentas de desenvolvimento do seu navegador e pesquisar na web para obter mais informações. Outra maneira de definir um ponto de interrupção é incluir uma declaração no depurador (que consiste em simplesmente em uma palavra-chave) em seu programa. Se as ferramentas de desenvolvedor do seu navegador estão ativos, o programa fará uma pausa sempre que ele atingir esta declaração e você será capaz de inspecionar o seu estado.
158 |
159 | ## Propagação de erros
160 |
161 | Infelizmente nem todos os problemas podem ser evitados pelo programador. Se o seu programa se comunica com o mundo externo de qualquer forma há uma chance da entrada de outros sistemas estarem inválidos ou a comunicação estar quebrada ou inacessível.
162 |
163 | Programas simples ou programas que são executados somente sob a sua supervisão pode se dar ao luxo de simplesmente desistir quando esse problema ocorre. Você vai olhar para o problema e tentar novamente. Aplicações "reais" por outro lado espera que nunca falhe. Às vezes a maneira correta é tirar a má entrada rapidamente para que o programe continue funcionando. Em outros casos é melhor informar ao usuário o que deu de errado para depois desistir. Mas em qualquer situação o programa tem de fazer algo rapidamente em resposta ao problema.
164 |
165 | Digamos que você tenha uma função `promptInteger` que pede para o usuário um número inteiro e retorna-o. O que ele deve retornar se a entradas do usuário for incorreta?
166 |
167 | Uma opção é fazê-lo retornar um valor especial. Escolhas comuns são valores nulos e indefinido.
168 |
169 | ````js
170 | function promptNumber(question) {
171 | var result = Number(prompt(question, ""));
172 | if (isNaN(result)) return null;
173 | else return result;
174 | }
175 |
176 | console.log(promptNumber("How many trees do you see?"));
177 | ````
178 |
179 | Isto é uma boa estratégia. Agora qualquer código que chamar a função `promptNumber` deve verificar se um número real foi lido, e na falha deve de alguma forma recuperar preenchendo um valor padrão ou retornando um valor especial para o seu chamador indicando que ele não conseguiu fazer o que foi solicitado.
180 |
181 | Em muitas situações, principalmente quando os erros são comuns e o chamador deve explicitamente tê-las em conta, retornaremos um valor especial, é uma forma perfeita para indicar um erro. Mas essa maneira no entanto tem suas desvantagens. Em primeiro lugar, como a função pode retornar todos os tipos possíveis de valores? Para tal função é difícil encontrar um valor especial que pode ser distinguido a partir de um resultado válido.
182 |
183 | O segundo problema é com o retorno de valores especiais, isso pode levar a um código muito confuso. Se um pedaço de código chama a função `promptNumber` 10 vezes, teremos que verificar 10 vezes se nulo foi devolvido. E se a sua resposta ao encontrar nulo é simplesmente retornar nulo, o chamador por sua vez tem que verificar assim por diante.
184 |
185 | ## Exceções
186 |
187 | Quando uma função não pode prosseguir normalmente, o que gostaríamos de fazermos é simplesmente parar o que esta sendo feito e saltar imediatamente de volta para o lugar onde devemos lidar com o problema. Isto é o que faz o tratamento de exceção.
188 |
189 | As exceções são um mecanismo que torna possível parar o código que é executado com problema disparando (ou lançar) uma exceção que nada mais é que um simples valor. Levantando uma exceção lembra um pouco um retorno super carregado a partir de uma função: ele salta para fora não apenas da função atual mas também fora de todo o caminho de seus interlocutores para a primeira chamada que iniciou a execução atual. Isto é chamado de desenrolamento do `stack`. Você pode se lembrar das chamadas de função do `stack` que foi mencionado no Capítulo 3. Uma exceção é exibida no `stack` indicando todos os contextos de chamadas que ele encontrou.
190 |
191 | Se as exceções tivessem um `stack` de uma forma ampliada não seria muito útil. Eles apenas fornecem uma nova maneira de explodir o seu programa. Seu poder reside no fato de que você pode definir "obstáculos" ao longo do seu `stack` para capturar a exceção. Depois você pode fazer alguma coisa com ele no ponto em que a exceção foi pega para que o programa continua em execução.
192 |
193 | Aqui está um exemplo:
194 |
195 | ````js
196 | function promptDirection(question) {
197 | var result = prompt(question, "");
198 | if (result.toLowerCase() == "left") return "L";
199 | if (result.toLowerCase() == "right") return "R";
200 | throw new Error("Invalid direction: " + result);
201 | }
202 |
203 | function look() {
204 | if (promptDirection("Which way?") == "L")
205 | return "a house";
206 | else
207 | return "two angry bears";
208 | }
209 |
210 | try {
211 | console.log("You see", look());
212 | } catch (error) {
213 | console.log("Something went wrong: " + error);
214 | }
215 | ````
216 |
217 | A palavra-chave `throw` é usada para gerar uma exceção. Para tratar uma excessão basta envolver um pedaço de código em um bloco `try`, seguido pela palavra-chave `catch`. Quando o código no bloco `try` causa uma exceção a ser lançada o bloco `catch` é chamado. O nome da variável (entre parênteses) após captura será vinculado ao valor de exceção. Após o termino do bloco `catch` ou do bloco `try` o controle prossegue sob toda a instrução `try/catch`.
218 |
219 | Neste caso usaremos o construtor de erro para lançar o nosso valor de exceção. Este é um construtor JavaScript normal que cria um objeto com uma propriedade de mensagem. Em ambientes de JavaScript modernos instâncias deste construtor também coletam informações para o `stack` e sobre chamadas que existia quando a exceção foi criado, o chamado `stack` de rastreamento. Esta informação é armazenada na propriedade do `stack` e pode ser útil ao tentar depurar um problema: ela nos diz a função precisa de onde ocorreu o problema e que outras funções que levou até a chamada onde ocorreu a falha.
220 |
221 | Note que se olharmos para função `promptDirection` podemos ignoramos completamente a possibilidade de que ela pode conter erros. Esta é a grande vantagem do tratamento de erros - manipulação de erro no código é necessário apenas no ponto em que o erro ocorre e no ponto onde ele é tratado. Essas funções no meio pode perder tudo sobre ela.
222 |
223 | Bem, estamos quase lá.
224 |
225 | ## Limpeza após exceções
226 |
227 | Considere a seguinte situação: a função `withContext` quer ter certeza de que durante a sua execução, o contexto de nível superior da variável tem um valor de contexto específico. Depois que terminar ele restaura esta variável para o seu valor antigo.
228 |
229 | ````js
230 | var context = null;
231 |
232 | function withContext(newContext, body) {
233 | var oldContext = context;
234 | context = newContext;
235 | var result = body();
236 | context = oldContext;
237 | return result;
238 | }
239 | ````
240 |
241 | Como que o `body` gera uma exceção? Nesse caso, a chamada para `withContext` será exibido no `stack` pela exceção, e o contexto nunca será definido de volta para o seu valor antigo.
242 |
243 | O `try` tem mais uma declaração. Eles podem ser seguidos por um `finally` com ou sem o bloco `catch`.
244 | O bloco `finally` significa "não importa o que aconteça execute este código depois de tentar executar o código do bloco try".
245 | Se uma função tem de limpar alguma coisa, o código de limpeza geralmente deve ser colocado em um bloco `finally`.
246 |
247 | ````js
248 | function withContext(newContext, body) {
249 | var oldContext = context;
250 | context = newContext;
251 | try {
252 | return body();
253 | } finally {
254 | context = oldContext;
255 | }
256 | }
257 | ````
258 |
259 | Note-se que não temos mais o resultado do `context` para armazenar (o que queremos voltar) em uma variável. Mesmo se sair diretamente do bloco try o último bloco será executado. Então podemos fazer isso de um jeito mais seguro:
260 |
261 | ````js
262 | try {
263 | withContext(5, function() {
264 | if (context < 10)
265 | throw new Error("Not enough context!");
266 | });
267 | } catch (e) {
268 | console.log("Ignoring: " + e);
269 | }
270 | // → Ignoring: Error: Not enough context!
271 |
272 | console.log(context);
273 | // → null
274 | ````
275 |
276 | Mesmo que a chamada da função `withContext` explodiu, `withContext` limpou corretamente a variável `context`.
277 |
278 | ## Captura seletiva
279 |
280 | Quando uma exceção percorre todo o caminho até o final do `stack` sem ser pego, ele é tratado pelo `environment`. Significa que isto é diferente entre os ambientes. Nos navegadores uma descrição do erro normalmente é escrita no console do JavaScript (alcançável através de "Ferramentas" do navegador no menu de "developer").
281 |
282 | Erros passam muitas vezes como algo normal, isto acontece para erros do programador ou problemas que o browser não consegue manipular o erro. Uma exceção sem tratamento é uma forma razoável para indicar a um programa que ele esta quebrado e o console JavaScript em navegadores modernos terá que fornecer-lhe algumas informações no `stack` sobre quais foram as chamadas de funções quando o problema ocorreu.
283 |
284 | Para problemas que se espera que aconteça durante o uso rotineiro chegando como uma exceção e que não seja tratada isso pode não ser uma resposta muito simpática.
285 |
286 | Usos incorretos da linguagem como, a referência a uma variável inexistente, propriedade que tem null ou chamar algo que não é uma função também irá resultar em lançamentos de exceções. Essas exceções podem ser capturados como outra qualquer.
287 |
288 | Quando um pedaço de código é inserido no bloco `catch`, todos nós sabemos que algo em nosso corpo `try` pode ou vai causar uma exceção. Mas nós não sabemos o que ou qual exceção que sera lançada.
289 |
290 | O JavaScript (tem uma omissão gritante) não fornece suporte direto para a captura seletiva exceções: ou você manipula todos ou você trata de algum em específico. Isto torna muito fácil supor que a exceção que você recebe é o que você estava pensando quando escreveu o bloco `catch`.
291 |
292 | Mas talvez não seja nenhuma das opções citadas. Alguma outra hipótese pode ser violada ou você pode ter introduzido um erro em algum lugar que está causando uma exceção. Aqui está um exemplo que tentei manter a chamada a função `promptDirection` até que ele receba uma resposta válida:
293 |
294 | ````js
295 | for (;;) {
296 | try {
297 | var dir = promtDirection("Where?"); // ← typo!
298 | console.log("You chose ", dir);
299 | break;
300 | } catch (e) {
301 | console.log("Not a valid direction. Try again.");
302 | }
303 | }
304 | ````
305 |
306 | O `for (;;)` é a construção de um loop infinito de forma intencionalmente que não para sozinho. Nós quebramos o circuito de fora somente quando uma direção válida é fornecida. Mas a mal escrita do `promptDirection` resultará em um erro de "variável indefinida". O bloco `catch` ignora completamente o seu valor de exceção, supondo que ele sabe qual é o problema ele trata equivocadamente o erro de variável como uma indicação de má entrada. Isso não só causa um loop infinito mas também exibi uma mensagem de erro incorretamente sobre a variável que estamos usando.
307 |
308 | Como regra geral não capturamos exceções a menos que tenha a finalidade de monitora-las em algum lugar, por exemplo através de softwares externos conectados à nossa aplicação que indica quando nossa aplicação está caída. E assim mesmo podemos pensar cuidadosamente sobre como você pode estar escondendo alguma informação.
309 |
310 | E se quisermos pegar um tipo específico de exceção? Podemos fazer isso através da verificação no bloco catch para saber se a exceção que temos é a que queremos, dai então é so lançar a exceção novamente. Mas como que nós reconhecemos uma exceção?
311 |
312 | Naturalmente nós poderíamos fazer uma comparação de mensagens de erros. Mas isso é uma forma instável de escrever código pois estaríamos utilizando informações que são destinadas ao consumo humano (a mensagem) para tomar uma decisão programática. Assim que alguém muda (ou traduz) a mensagem o código irá parar de funcionar.
313 |
314 | Em vez disso, vamos definir um novo tipo de erro e usar `instanceof` para identificá-lo.
315 |
316 | ````js
317 | function InputError(message) {
318 | this.message = message;
319 | this.stack = (new Error()).stack;
320 | }
321 |
322 | InputError.prototype = Object.create(Error.prototype);
323 | InputError.prototype.name = "InputError";
324 | ````
325 |
326 | O `prototype` é feito para derivar-se de `Error.prototype` para que `instanceof Error` retorne `true` para objetos de `InputError`. Nome a propriedade também é dada para tipos de erro padrão (`Error`, `SyntaxError`, `ReferenceError` e assim por diante) para que também se tenha uma propriedade.
327 |
328 | A atribuição da propriedade no `stack` tenta deixar o rastreamento do objeto pelo `stacktrace` um pouco mais útil, em plataformas que suportam a criação de um objeto de erro regular pode usar a propriedade de `stack` do objeto para si próprio.
329 |
330 | Agora `promptDirection` pode lançar um erro.
331 |
332 | ````js
333 | function promptDirection(question) {
334 | var result = prompt(question, "");
335 | if (result.toLowerCase() == "left") return "L";
336 | if (result.toLowerCase() == "right") return "R";
337 | throw new InputError("Invalid direction: " + result);
338 | }
339 | ````
340 |
341 | E o loop pode ser tratado com mais cuidado.
342 |
343 | ````js
344 | for (;;) {
345 | try {
346 | var dir = promptDirection("Where?");
347 | console.log("You chose ", dir);
348 | break;
349 | } catch (e) {
350 | if (e instanceof InputError)
351 | console.log("Not a valid direction. Try again.");
352 | else
353 | throw e;
354 | }
355 | }
356 | ````
357 |
358 | Isso vai pegar apenas os casos de `InputError` e através disso deixa algumas exceções independentes. Se você introduzir um erro de digitação ou um erro de variável indefinida a aplicação nos avisará.
359 |
360 | ## Asserções
361 |
362 | As asserções são ferramentas que auxiliam na verificação da sanidade básica de erros do programador. Considere essa função auxiliar que afirma:
363 |
364 | ````js
365 | function AssertionFailed(message) {
366 | this.message = message;
367 | }
368 | AssertionFailed.prototype = Object.create(Error.prototype);
369 |
370 | function assert(test, message) {
371 | if (!test)
372 | throw new AssertionFailed(message);
373 | }
374 |
375 | function lastElement(array) {
376 | assert(array.length > 0, "empty array in lastElement");
377 | return array[array.length - 1];
378 | }
379 | ````
380 |
381 | Isso fornece uma maneira compacta de fazer cumprir as expectativas solicitadas para quebrar um programa se a condição descrita não for válida. Por exemplo se a função `lastElement` que busca o último elemento de uma matriz voltar indefinida para matrizes vazias caso a declaração for omitida. Buscar o último elemento de uma matriz vazia não faz muito sentido por isso é quase certeza de que um erro de programação pode acontecer.
382 |
383 | As afirmações são maneiras de certificar-se de que erros pode causar falhas e qual o ponto deste erro ao invés de valores sem sentido produzidos silenciosamente que pode acarretar problemas em uma parte do programa a qual não se tem nenhuma relação de onde ocorreu realmente.
384 |
385 | ## Resumo
386 |
387 | Erros e má entrada acontecem. Erros de programas precisam ser encontrados e corrigidos. Eles podem tornar-se mais fácil de perceber quando se tem uma suites de testes automatizadas e asserções adicionadas em seu programa.
388 |
389 | Problemas causados por fatores fora do controle do programa devem geralmente serem tratados normalmente. Às vezes quando o problema pode ser tratado localmente, valores de retorno especiais é um caminho sensato para monitorá-los. Caso contrário as exceções são preferíveis.
390 |
391 | Lançar uma exceção faz com que `stack` de chamadas se desencadeie o bloco `try/catch` até a parte inferior do `stack`. O valor da exceção será capturado pelo bloco `catch` onde podemos verificar se ele é realmente do tipo de exceção esperada e em seguida fazer algo com ela. Para lidar com o fluxo de controle imprevisível causado pelas exceções, o bloco `finally` pode ser utilizado para garantir que um pedaço de código seja sempre executado.
392 |
393 | ## Exercícios
394 |
395 | ### Tente outra vez...
396 |
397 | Digamos que você tenha uma função `primitiveMultiply` que em 50 por cento dos casos multiplica dois números e em outros 50 por cento levanta uma exceção do tipo `MultiplicatorUnitFailure`. Escreva uma função que envolva esta função `MultiplicatorUnitFailure` e simplesmente tente até que uma chamada seja bem-sucedido retornando o resultado.
398 |
399 | Certifique-se de lidar com apenas as exceções que você está tentando manipular.
400 |
401 | ````js
402 | function MultiplicatorUnitFailure() {}
403 |
404 | function primitiveMultiply(a, b) {
405 | if (Math.random() < 0.5)
406 | return a * b;
407 | else
408 | throw new MultiplicatorUnitFailure();
409 | }
410 |
411 | function reliableMultiply(a, b) {
412 | // Coloque seu código aqui.
413 | }
414 |
415 | console.log(reliableMultiply(8, 8));
416 | // → 64
417 | ````
418 |
419 | **Dica**
420 |
421 | A chamada de `primitiveMultiply` obviamente deve acontecer em um bloco `try`.
422 | O bloco `catch` fica responsável para relançar a exceção quando não é uma instância de `MultiplicatorUnitFailure` e garantir que a chamada é repetida quando ele é uma instância de `MultiplicatorUnitFailure`.
423 |
424 | Para refazer o processo, você pode usar um `loop` que quebra somente quando a chamada for bem sucedida; veja os exemplos de recursão nos capítulos anteriores e faça o uso; espero que você não tenha uma grande séries de erros na função `primitiveMultiply` pois isso pode extrapolar o `stack` e entrar em loop infinito.
425 |
426 | ### A caixa trancada
427 |
428 | Considere o seguinte objeto:
429 |
430 | ````js
431 | var box = {
432 | locked: true,
433 | unlock: function() { this.locked = false; },
434 |
435 | lock: function() { this.locked = true; },
436 |
437 | _content: [],
438 |
439 | get content() {
440 | if (this.locked) throw new Error("Locked!");
441 | return this._content;
442 | }
443 | };
444 | ````
445 |
446 | Isto é uma caixa com um cadeado. Dentro dela tem um `array` mas você pode obtê-lo apenas quando a caixa for desbloqueada. Não é permitido acessar a propriedade `_content` diretamente.
447 |
448 | Escreva uma função chamada `withBoxUnlocked` que assume o valor da função que é passada por argumento para abrir esta caixa. Execute a função e em seguida garanta que a caixa está bloqueada antes de voltar novamente; não importa se o argumento da função retornou normalmente ou emitiu uma exceção.
449 |
450 | ````js
451 | function withBoxUnlocked(body) {
452 | // Your code here.
453 | }
454 |
455 | withBoxUnlocked(function() {
456 | box.content.push("gold piece");
457 | });
458 |
459 | try {
460 | withBoxUnlocked(function() {
461 | throw new Error("Pirates on the horizon! Abort!");
462 | });
463 | } catch (e) {
464 | console.log("Error raised:", e);
465 | }
466 |
467 | console.log(box.locked);
468 | // → true
469 | ````
470 |
471 | Para ganhar pontos extras, certifique-se de que chamou `withBoxUnlocked` quando a caixa já estava desbloqueada, pois a caixa deve sempre permanecer desbloqueada.
472 |
473 | **Dica:**
474 |
475 | Você provavelmente deve ter adivinhado que este exercício solicita o uso do bloco `finally`.
476 | Sua função deve ser destravar a caixa e em seguida chamar a função que vem de argumento dentro da função `withBoxUnlocked`.
477 | E no `finally` ele deve travar a caixa novamente.
478 |
479 | Para certificar-se de que nós não bloqueamos a caixa quando ela já estava bloqueada verifique no início da função se a mesma verificação é válida para quando a caixa esta desbloqueada e para quando quisermos bloquear ela novamente.
480 |
--------------------------------------------------------------------------------
/chapters/11-pratica-linguagem-de-programacao.md:
--------------------------------------------------------------------------------
1 | # Linguagem de programação
2 |
3 | > "O avaliador que determina qual o significado da expressões em uma linguagem de programação é apenas mais um programa."
4 | >
5 | > `Hal Abelson e Gerald Sussman, Estrutura e Interpretação de Programas de Computador`
6 |
7 |
8 | ---
9 |
10 |
11 | > "Quando um estudante perguntou ao mestre sobre a natureza do ciclo de dados e controle, Yuan-Ma respondeu: 'Pense em um compilador compilando a si mesmo.'"
12 | >
13 | > `Mestre Yuan-Ma, O Livro de Programação`
14 |
15 | Construir sua própria linguagem de programação é surpreendentemente fácil(desde que você não seja ambicioso demais) e bastante esclarecedor.
16 |
17 | A principal coisa que eu quero mostrar neste capítulo é que não há mágica envolvida na construção de sua própria linguagem. Eu sempre senti que algumas invenções humanas eram imensamente inteligentes e complicadas que eu nunca seria capaz de compreendê-las. Mas com um pouco de leitura e ajustes; tais coisas muitas vezes acabam por ser muito simples.
18 |
19 | Iremos construir uma linguagem de programação chamada **Egg**. Vai ser uma pequena e simples linguagem mas poderosa o suficiente para expressar qualquer computação que você possa imaginar. Ela também permite abstração simples baseadas em funções.
20 |
21 | ## Parsing
22 |
23 | A parte imediatamente mais visível de uma linguagem de programação é sua sintaxe ou notação. Um analisador é um programa que lê um pedaço de texto e produz uma estrutura de dados que refletem a estrutura do programa contida nesse texto. Se o texto não faz um programa válido o analisador deve reclamar e apontar o erro.
24 |
25 | Nossa linguagem terá uma sintaxe simples e uniforme. Tudo em **Egg** é uma expressão. Uma expressão pode ser uma variável, um `Number`, uma `String`, ou uma aplicação. As aplicações são usados para chamadas de função, mas também para construções como `if` ou `while`.
26 |
27 | Para manter o analisador simples, `String` em **Egg** não suportam qualquer coisa como escapes e uma seqüência simplesmente de caracteres que não são aspas duplas envolvidas em aspas duplas. Um número é uma sequência de dígitos. Os nomes das variáveis podem consistir de qualquer caractere que não seja um espaço em branco e não tem um significado especial na sintaxe.
28 |
29 | As aplicação será escrita da forma como é em JavaScript; colocando parênteses após uma expressão e com uma série de argumentos entre esses parênteses separados por vírgulas.
30 |
31 | ````javascript
32 | do(define(x, 10),
33 | if(>(x, 5)),
34 | print("large"),
35 | print("small"))
36 | ````
37 |
38 | A uniformidade da línguagem **Egg** significa coisas que são operadores de JavaScript(como >) nesta línguagem será apenas variáveis normais aplicado apenas como outras funções. E uma vez que a sintaxe também não tem o conceito de um bloco precisamos construir um representador fazendo várias coisas em seqüência.
39 |
40 | A estrutura de dados que o analisador irá usar para descrever um programa será composto de objetos de expressões cada um dos quais tem uma propriedade de tipo que indica o tipo de expressão que é; e as outras propriedades para descreverem o seu conteúdo.
41 |
42 | Expressões do tipo **"value"** representam `Strings`, `literais` ou `Numbers`. O valor da propriedade contém o valor da cadeia ou o número que ele representa. Expressões do tipo **"word"** são usados para identificadores(nomes). Esses objetos têm uma propriedade que contém o nome do identificador de uma `String`. Por fim as expressões **"apply"** representam algo que é uma aplicação. Eles têm uma propriedade de operador que se refere à expressão que são aplicavéis e têm uma propriedade de `args` que refere-se a um conjunto de expressões de argumento.
43 |
44 | A parte `>(x, 5)` do programa anterior seria representado assim:
45 |
46 | ````javascript
47 | {
48 | type: "apply",
49 | operator: {type: "word", name: ">"},
50 | args: [
51 | {type: "word", name: "x"},
52 | {type: "value", value: 5}
53 | ]
54 | }
55 |
56 | ````
57 |
58 | Essa estrutura de dados é chamado de árvore de sintaxe. Se você imaginar os objetos como pontos de ligações entre eles e com linhas entre esses pontos, ele tem uma forma treelike. O fato de que as expressões contem outras expressões que por sua vez pode conter mais expressões é semelhante à maneira como dividir ramos e dividir novamente.
59 |
60 | 
61 |
62 | Compare isso com o analisador que escrevemos para o formato de arquivo de configuração no capítulo 9 que tinha uma estrutura simples: dividir a entrada em linhas e tratar essas linhas uma de cada vez. Havia apenas algumas formas simples de mostrar que uma linha foi permitida.
63 |
64 | Aqui temos de encontrar uma abordagem diferente. As expressões não são separados em linhas e elas têm uma estrutura recursiva. Expressões aplicadas contêm outras expressões.
65 |
66 | Felizmente, este problema pode ser resolvido com elegância escrevendo uma função analisadora que é recursiva de uma forma que reflete a natureza recursiva da linguagem.
67 |
68 | Nós definimos uma função `parseExpression` que recebe uma string como entrada e retorna um objeto que contém a estrutura de dados para a expressão no início da cadeia, depois é feito a junção com a parte da cadeia da esquerda para analisar esta expressão. Ao analisar essa `subexpressions`(o argumento para um aplicativo, por exemplo) esta função pode ser chamado novamente dando origem a expressão argumento bem como o texto nos mostra. Este texto pode por sua vez contêm mais argumentos ou pode ser o parêntese de fechamento, que da termino a lista de argumentos.
69 |
70 | Esta é a primeira parte do analisador:
71 |
72 | ````javascript
73 | function parseExpression(program) {
74 | program = skipSpace(program);
75 | var match, expr;
76 | if (match = /^"([^"]*)"/.exec(program))
77 | expr = {type: "value", value: match[1]};
78 | else if (match = /^\d+\b/.exec(program))
79 | expr = {type: "value", value: Number(match[0])};
80 | else if (match = /^[^\s(),"]+/.exec(program))
81 | expr = {type: "word", name: match[0]};
82 | else
83 | throw new SyntaxError("Unexpected syntax: " + program);
84 |
85 | return parseApply(expr, program.slice(match[0].length));
86 | }
87 |
88 | function skipSpace(string) {
89 | var first = string.search(/\S/);
90 | if (first == -1) return "";
91 | return string.slice(first);
92 | }
93 | ````
94 |
95 | Temos que remover os espaços em brancos repetidos no início de qualquer seqüência do programa pois o **Egg** permite qualquer quantidade de espaço em branco entre os seus elementos inseridos. Quem tem essa funcionalidade é a da funcão `skipSpace`.
96 |
97 | Depois de pular qualquer espaço à esquerda `parseExpression` usa três expressões regulares para detectar os três elementos simples(atômicas) que **Egg** suporta: `String`, `Number` e `words`. O analisador constrói um tipo diferente de estrutura de dados dependendo de sua correspondencia. Se a entrada não coincide com uma destas três formas não será considerado uma expressão válida e o analisador gerara um erro. `SyntaxError` é um tipo de erro padrão de objeto que é gerado quando é feita uma tentativa de executar um programa em JavaScript inválido.
98 |
99 | Podemos cortar algumas partes que nós comparamos a partir da seqüência e passar isso juntamente com o objeto para a expressão do `parseApply` que ira verificar se a expressão é uma aplicação. Se assim for ele analisa uma lista de argumentos entre parênteses.
100 |
101 | ````javascript
102 | function parseApply(expr, program) {
103 | program = skipSpace(program);
104 | if (program[0] != "()"
105 | return {expr: expr, rest: program};
106 |
107 | program = skipSpace(program.slice(1));
108 | expr = {type: "apply", operator: expr, args: []};
109 | while (program[0] != ")") {
110 | var arg = parseExpression(program);
111 | expr.args.push(arg.expr);
112 | program = skipSpace(arg.rest);
113 | if (program[0] == ",")
114 | program = skipSpace(program.slice(1));
115 | else if (program[0] != ")")
116 | throw new SyntaxError("Expected ',' or ')'");
117 | }
118 | return parseApply(expr, program.slice(1));
119 | }
120 | ````
121 |
122 | Se o próximo caracter no programa não é um parêntese de abertura, este não é aplicável, e `parseApply` simplesmente retorna que a expressão foi proferida.
123 |
124 | Caso contrário ele ignora o parêntese de abertura e cria o objeto na árvore de sintaxe para essa expressão aplicável. Em seguida ele chama recursivamente `parseExpression` para analisar cada argumento até o parêntese de fechamento ser encontrado. A recursividade é indireta através da função `parseApply` e `parseExpression` chamando uns aos outros.
125 |
126 | Uma expressão de aplicação pode ser aplicado em si própria(como em `multiplier(2)(1)`); `parseApply` deve analisar um pedido depois chamar-se novamente para verificar se existe outro par de parênteses.
127 |
128 | Isso é tudo que precisamos para o analisador do **Egg**. Nós vamos envolvê-lo em uma função de análise conveniente que verifica se ele chegou ao fim da cadeia de entrada após o análise da expressão(um programa de **Egg** é uma única expressão) e que nos dá estrutura de dados do programa.
129 |
130 | ````javascript
131 | function parse(program) {
132 | var result = parseExpression(program);
133 | if (skipSpace(result.rest).length > 0)
134 | throw new SyntaxError("Unexpected text after program");
135 | return result.expr;
136 | }
137 |
138 | console.log(parse("+(a, 10)"));
139 | // → {type: "apply",
140 | // operator: {type: "word", name: "+"},
141 | // args: [{type: "word", name: "a"},
142 | // {type: "value", value: 10}]}
143 | ````
144 |
145 | Funcionou! Ele não nos dá informação muito útil quando há falhas e não armazena a linha e coluna na qual cada expressão começa, o que pode ser útil ao relatar erros mais tarde mas é bom o suficiente para nossos propósitos.
146 |
147 | ## O avaliador
148 |
149 | O que podemos fazer com uma árvore de sintaxe de um programa? Executá-lo é claro! E é isso que o avaliador faz. Você entrega-lhe uma árvore de sintaxe e um objeto do `environment` que associa nomes com os valores, e ele irá avaliar a expressão que a árvore representa e retornar o valor que esta produz.
150 |
151 | ````js
152 | function evaluate(expr, env) {
153 | switch(expr.type) {
154 | case "value":
155 | return expr.value;
156 |
157 | case "word":
158 | if (expr.name in env)
159 | return env[expr.name];
160 | else
161 | throw new ReferenceError("Undefined variable: " +
162 | expr.name);
163 | case "apply":
164 | if (expr.operator.type == "word" &&
165 | expr.operator.name in specialForms)
166 | return specialForms[expr.operator.name](expr.args,
167 | env);
168 | var op = evaluate(expr.operator, env);
169 | if (typeof op != "function")
170 | throw new TypeError("Applying a non-function.");
171 | return op.apply(null, expr.args.map(function(arg) {
172 | return evaluate(arg, env);
173 | }));
174 | }
175 | }
176 |
177 | var specialForms = Object.create(null);
178 | ````
179 |
180 | O avaliador possui código para cada um dos tipos de expressão. A expressão de valor literal simplesmente produz o seu valor(por exemplo, a expressão 100 apenas avalia para o número 100). Para uma variável é preciso verificar se ele está realmente definido no `environment atual`, se estiver, buscar o valor da variável.
181 |
182 | As aplicações são mais envolvidas. Se eles são de uma forma especial, nós não avaliamos nada e simplesmente passamos as expressões como argumento junto com o `environment` para a função que lida com essa forma. Se for uma chamada normal nós avaliamos o operador verificamos se ele é uma função e chamamos com o resultado da avaliação dos argumentos.
183 |
184 | Iremos usar os valores de uma função simples em JavaScript para representar os valores de função em **Egg**. Voltaremos a falar sobre isso mais tarde quando o `specialForm` chamado `fun` estiver definido.
185 |
186 | A estrutura recursiva de um avaliador se assemelha à estrutura de um analisador. Ambos espelham a estrutura da própria linguagem. Além disso, seria possível integrar o analisador com o avaliador e avaliar durante a análise, mas dividindo-se desta forma torna o programa mais legível.
187 |
188 | Isso é tudo que precisamos para interpretar Egg. É simples assim. Mas sem definir algumas formas especiais e adicionar alguns valores úteis para o `environment` você não pode fazer nada com essa linguagem ainda.
189 |
190 | ## Formas especiais
191 |
192 | O objecto `specialForms` é utilizado para definir sintaxe especial em **Egg**. Ele associa palavras com funções que avaliam essas formas especiais. Atualmente ele está vazio. Vamos adicionar algumas formas.
193 |
194 | ````javascript
195 | specialForms["if"] = function(args, env) {
196 | if (args.length != 3)
197 | throw new SyntaxError("Bad number of args to if");
198 |
199 | if (evaluate(args[0], env) !== false)
200 | return evaluate(args[1], env);
201 | else
202 | return evaluate(args[2], env);
203 | };
204 | ````
205 |
206 | **Egg** - `if` espera exatamente três argumentos. Ele irá avaliar o primeiro, se o resultado não é o valor falso ele irá avaliar a segunda. Caso contrário a terceira fica avaliada. Esta é a forma mais semelhante ao ternário do JavaScript `?:` estes operadores tem o mesmo significado de `if/else` em JavaScript. Isso é uma expressão e não uma indicação que produz um valor, ou seja, o resultado do segundo ou terceiro argumento.
207 |
208 | **Egg** difere de JavaScript na forma de como ele lida com o valor de um condição como o valor do `if`. Ele não vai tratar as coisas como zero ou cadeia vazia como falsa, somente valorores precisos são falsos.
209 |
210 | A razão especial é que nós preciso representar o `if` como uma forma especial, ao invés de uma função regular onde todos os argumentos para funções são avaliadas antes que a função seja chamada, ao passo que se deve avaliar apenas seu segundo ou terceiro argumento, dependendo do valor do primeiro.
211 |
212 | A forma `while` é semelhante.
213 |
214 | ````javascript
215 | specialForms["while"] = function(args, env) {
216 | if (args.length != 2)
217 | throw new SyntaxError("Bad number of args to while");
218 |
219 | while (evaluate(args[0], env) !== false)
220 | evaluate(args[1], env);
221 |
222 | // Since undefined does not exist in Egg, we return false,
223 | // for lack of a meaningful result.
224 | return false;
225 | };
226 | ````
227 |
228 | Outro bloco na construção básico é fazer que executa todos os seus argumentos de cima para baixo. O seu valor é o valor produzido pelo último argumento.
229 |
230 | ````javascript
231 | specialForms["do"] = function(args, env) {
232 | var value = false;
233 | args.forEach(function(arg) {
234 | value = evaluate(arg, env);
235 | });
236 | return value;
237 | };
238 | ````
239 |
240 | Para ser capaz de criar variáveis e dar-lhes novos valores, vamos criar um `specialForms` chamado `define`. Ele espera uma palavra como primeiro argumento de uma expressão que produz o valor a ser atribuído a essa palavra que sera seu segundo argumento. Vamos definir sendo tudo uma expressão e ela deve retornar um valor. Vamos fazê-lo retornar o valor que foi atribuído(igual ao operador `=` de JavaScript).
241 |
242 | ````javascript
243 | specialForms["define"] = function(args, env) {
244 | if (args.length != 2 || args[0].type != "word")
245 | throw new SyntaxError("Bad use of define");
246 | var value = evaluate(args[1], env);
247 | env[args[0].name] = value;
248 | return value;
249 | };
250 | ````
251 |
252 | ## Ambiente
253 |
254 | O `environment` aceita avaliar um objeto com propriedades cujos nomes correspondem aos nomes de variáveis e cujos valores correspondem aos valores dessas variáveis. Vamos definir um objeto no environment para representar o escopo global.
255 |
256 | Para ser capaz de usar `if` que acabamos de definir teremos de ter acesso aos valores `booleanos`. Uma vez que existem apenas dois valores `booleanos` nós não precisamos de sintaxe especial para eles. Nós simplesmente vamos ligar duas variáveis em `topEnv` para os valores verdadeiros e falsos e dai então usá-los.
257 |
258 | ````javascript
259 | var topEnv = Object.create(null);
260 |
261 | topEnv["true"] = true;
262 | topEnv["false"] = false;
263 | ````
264 |
265 | Agora podemos avaliar uma expressão simples que nega um valor `booleano`.
266 |
267 | ````javascript
268 | var prog = parse("if(true, false, true)");
269 | console.log(evaluate(prog, topEnv));
270 | // → false
271 | ````
272 |
273 | Para suprir os operadores aritméticos e comparações básicas vamos adicionar alguns valores para função de `environment`. No interesse de manter um código pequeno vamos utilizar uma nova função para sintetizar um monte de funções de operador em um loop ao invéz de definir todos eles individualmente.
274 |
275 | ````javascript
276 | ["+", "-", "*", "/", "==", "<", ">"].forEach(function(op) {
277 | topEnv[op] = new Function("a, b", "return a " + op + " b;");
278 | });
279 | ````
280 |
281 | É muito útil fazer uma maneira para que valores de saída sejam vizualidos, por isso vamos colocar alguns `console.log` na função e executa-lo para imprimir.
282 |
283 | ````javascript
284 | topEnv["print"] = function(value) {
285 | console.log(value);
286 | return value;
287 | };
288 | ````
289 |
290 | Isso ja nos proporcionou uma ferramenta elementar e suficiente para escrever programas simples. A seguinte função `run` fornece uma maneira conveniente de escrever e executá-los. Ele cria um `enviroment` em tempo real, analisa e avalia as `String` que damos como um programa único.
291 |
292 | ````javascript
293 | function run() {
294 | var env = Object.create(topEnv);
295 | var program = Array.prototype.slice
296 | .call(arguments, 0).join("\n");
297 | return evaluate(parse(program), env);
298 | }
299 | ````
300 |
301 | O uso de `Array.prototype.slice.call` é um truque para transformar um objeto de matriz como argumentos em uma matriz real; de modo que podemos chamar e juntar cada pedaço.
302 | No exemplo abaixo iremos percorrer todos os argumentos dados e tratar cada linha do programa.
303 |
304 | ````javascript
305 | run("do(define(total, 0),",
306 | " define(count, 1),",
307 | " while(<(count, 11),",
308 | " do(define(total, +(total, count)),",
309 | " define(count, +(count, 1)))),",
310 | " print(total))");
311 | // → 55
312 | ````
313 |
314 | Este é o programa que já vimos várias vezes antes que calcula a soma dos números de 1 a 10 escrito em **Egg**. É evidente que é mais feio do que um programa em JavaScript, mas não é tão ruim para uma linguagem implementada em menos de 150 linhas de código.
315 |
316 | ## Funções
317 |
318 | A linguagem de programação sem funções é uma linguagem de programação pobre.
319 |
320 | Felizmente, não é difícil para adicionar `fun` a nossa linguagem, que vai tratar todos os argumentos antes do último como nomes de argumentos da função e seu último argumento como corpo da função.
321 |
322 | ````javascript
323 | specialForms["fun"] = function(args, env) {
324 | if (!args.length)
325 | throw new SyntaxError("Functions need a body");
326 | function name(expr) {
327 | if (expr.type != "word")
328 | throw new SyntaxError("Arg names must be words");
329 | return expr.name;
330 | }
331 | var argNames = args.slice(0, args.length - 1).map(name);
332 | var body = args[args.length - 1];
333 |
334 | return function() {
335 | if (arguments.length != argNames.length)
336 | throw new TypeError("Wrong number of arguments");
337 | var localEnv = Object.create(env);
338 | for (var i = 0; i < arguments.length; i++)
339 | localEnv[argNames[i]] = arguments[i];
340 | return evaluate(body, localEnv);
341 | };
342 | };
343 | ````
344 |
345 | Funções em **Egg** tem seu próprio `enviroment` local assim como em JavaScript. Usamos `Object.create` para fazer um novo objeto que tem acesso às variáveis do ambiente externo(`prototype`) mas que também pode conter novas variáveis sem modificar esse escopo exterior.
346 |
347 | A função criada pela `especialForm` `fun` cria em ambito local e adiciona as variáveis de argumento para isso. Em seguida ele avalia o corpo da função neste ambiente e retorna o resultado.
348 |
349 | ````javascript
350 | run("do(define(plusOne, fun(a, +(a, 1))),",
351 | " print(plusOne(10)))");
352 | // → 11
353 |
354 | run("do(define(pow, fun(base, exp,",
355 | " if(==(exp, 0),",
356 | " 1,",
357 | " *(base, pow(base, -(exp, 1)))))),",
358 | " print(pow(2, 10)))");
359 | // → 1024
360 | ````
361 |
362 | ## Compilação
363 |
364 | O que nós construímos foi um intérprete. Durante a avaliação ele age diretamente sobre a representação do programa produzido pelo analisador.
365 |
366 | A compilação é o processo de adicionar mais um passo entre a análise e a execução de um programa; que transforma o programa em algo que possa ser avaliado de forma mais eficiente fazendo o trabalho tanto quanto possível com antecedência.
367 | Por exemplo, em línguas bem desenhadas, é óbvio para cada uso de uma variável ele verifica qual esta se referindo sem realmente executar o programa. Isso pode ser usado para evitar a procura de uma variável pelo nome sempre que é acessado ou buscado diretamente de algum local pré-determinado da memória.
368 |
369 | Tradicionalmente, compilação envolve a conversão do programa para código de máquina no formato `raw` que o processador de um computador pode executar. Qualquer processo que converte um programa de uma representação diferente pode ser encarado como compilação.
370 |
371 | Seria possível escrever uma estratégia de avaliação alternativa para **Egg**, aquele que primeiro converte o programa para um programa JavaScript utilizando a nova função para chamar o compilador JavaScript, e em seguida executar o resultado. Sendo feito assim **Egg** executaria muito mais rápido e continuaria bastante simples de implementar.
372 |
373 | Se você está interessado e disposto neste assunto gaste algum tempo com isso, encorajo-vos a tentar implementar um compilador nos exercícios.
374 |
375 | ## Cheating
376 |
377 | Quando definimos `if` e `while`, você provavelmente percebeu que eles eram invólucros triviais em torno do próprio JavaScript. Da mesma forma, os valores em **Egg** são antigos valores de JavaScript.
378 |
379 | Se você comparar a execução de **Egg** que foi construída em alto nível utilizando a ajuda de JavaScript com a quantidade de trabalho e complexidade necessários para construir uma linguagem de programação utilizando diretamente a funcionalidade `raw` fornecido por uma máquina essa diferença é enorme. Independentemente disso este é apenas um exemplo; espero ter lhe dado uma impressão de que maneira as linguagens de programação trabalham.
380 |
381 | E quando se trata de conseguir fazer algo, o `cheating` é o jeito mais eficaz de fazer tudo sozinho. Embora a linguagem que brincamos neste capítulo não faz nada de melhor que o JavaScript possui, existem situações em que a escrever pequenas línguas ajuda no entendimento verdadeiro do trabalho.
382 |
383 | Essa língua não possui semelhanças com uma linguagem típica de programação. Se o JavaScript não vêm equipado com expressões regulares você pode escrever seu próprio analisador e avaliador para tal sub linguagem.
384 |
385 | Ou imagine que você está construindo um dinossauro robótico gigante e precisa programar o seu comportamento. JavaScript pode não ser a forma mais eficaz de fazer isso. Você pode optar por uma linguagem que se parece com isso:
386 |
387 | ````javascript
388 | behavior walk
389 | perform when
390 | destination ahead
391 | actions
392 | move left-foot
393 | move right-foot
394 |
395 | behavior attack
396 | perform when
397 | Godzilla in-view
398 | actions
399 | fire laser-eyes
400 | launch arm-rockets
401 | ````
402 |
403 | Isto é o que geralmente é chamado de linguagem de domínio específica, uma linguagem adaptada para expressar um estreito conhecimento de um domínio. Essa linguagem pode ser mais expressiva do que uma linguagem de um propósito geral. Isto porque ela é projetada para expressar exatamente as coisas que precisam serem expressadas no seu domínio e nada mais.
404 |
405 | ---
406 |
407 | # Exercícios
408 |
409 | ## Arrays
410 |
411 | Adicionar suporte para `array` em **Egg** construindo as três funções em `topEnv` do escopo: `array(...)` vai ser a construção de uma matriz contendo os argumentos como valores, `length(array)` para obter o comprimento de um `array` e `element(array, n)` buscar `n` elementos de uma matriz.
412 |
413 |
414 | ````javascript
415 | // Modify these definitions...
416 |
417 | topEnv["array"] = "...";
418 |
419 | topEnv["length"] = "...";
420 |
421 | topEnv["element"] = "...";
422 |
423 | run("do(define(sum, fun(array,",
424 | " do(define(i, 0),",
425 | " define(sum, 0),",
426 | " while(<(i, length(array)),",
427 | " do(define(sum, +(sum, element(array, i))),",
428 | " define(i, +(i, 1)))),",
429 | " sum))),",
430 | " print(sum(array(1, 2, 3))))");
431 | // → 6
432 | ````
433 |
434 | **Dica:**
435 |
436 | A maneira mais fácil de fazer isso é representar as matrizes de **Egg** atravéz de matrizes do JavaScript.
437 |
438 | Os valores adicionados ao `enviroment` no `topEnv` deve ser uma funções. `Array.prototype.slice`; pode ser utilizado para converter um `array` em um `object` de argumentos numa matriz regular.
439 |
440 | [**Resolução**](https://gist.github.com/SauloSilva/7bef8ec6e6f9abd9529a#file-egg-js-L170)
441 |
442 | ## Closures
443 |
444 | A maneira que definimos o `fun` é permitido que as funções em **Egg** se chamem em ambiente circundante, permitindo o corpo da função utilizar valores locais que eram visíveis no momento que a função foi definida, assim como as funções em JavaScript fazem.
445 |
446 | O programa a seguir ilustra isso: função `f` retorna uma função que adiciona o seu argumento ao argumento de f, o que significa que ele precisa de acesso ao escopo local dentro de `f` para ser capaz de utilizar a variável.
447 |
448 | ````js
449 | run("do(define(f, fun(a, fun(b, +(a, b)))),",
450 | "print(f(4)(5)))");
451 | // → 9
452 | ````
453 |
454 | Volte para a definição da forma `fun` e explique qual o mecanismo feito para que isso funcione.
455 |
456 | **Dica:**
457 |
458 | Mais uma vez, estamos cavalgando sobre um mecanismo de JavaScript para obter a função equivalente em **Egg**. Formas especiais são passados para o `enviroment` local de modo que eles possam ser avaliados pelas suas sub-formas do `enviroment`. A função retornada por `fun` se fecha sobre o argumento `env` dada a sua função de inclusão e usa isso para criar `enviroment` local da função quando é chamado.
459 |
460 | Isto significa que o `prototype` do `enviroment` local será o `enviroment` em que a função foi criado, o que faz com que seja possível ter acesso as variáveis de `enviroment` da função. Isso é tudo o que há para implementar e finalizar(embora para compilá-lo de uma forma que é realmente eficiente, você precisa de um pouco mais de trabalho).
461 |
462 | ## Comentários
463 |
464 | Seria bom se pudéssemos escrever comentários no **Egg**. Por exemplo, sempre que encontrar um cardinal `("#")`, poderíamos tratar o resto da linha como um comentário e ignorá-lo, semelhante que Javascript faz com o `"//"`.
465 |
466 | Não temos de fazer quaisquer grandes mudanças para que o analisador suporte isto. Nós podemos simplesmente mudar o `skipSpace` para ignorar comentários assim como é feito com os espaços em branco; para que todos os pontos onde `skipSpace` é chamado agora também ira ignorar comentários. Vamos fazer essa alteração:
467 |
468 | ````javascript
469 | // This is the old skipSpace. Modify it...
470 | function skipSpace(string) {
471 | var first = string.search(/\S/);
472 | if (first == -1) return "";
473 | return string.slice(first);
474 | }
475 |
476 | console.log(parse("# hello\nx"));
477 | // → {type: "word", name: "x"}
478 |
479 | console.log(parse("a # one\n # two\n()"));
480 | // → {type: "apply",
481 | // operator: {type: "word", name: "a"},
482 | // args: []}
483 | ````
484 |
485 | **Dica:**
486 |
487 | Certifique-se de que sua solução é válida com vários comentários em uma linha e principalmente com espaço em branco entre ou depois deles.
488 |
489 | Uma expressão regular é a maneira mais fácil de resolver isso. Faça algo que corresponda "espaços em branco ou um comentário, uma ou mais vezes". Use o método `exec` ou `match` para olhar para o comprimento do primeiro elemento na matriz retornada(desde de o inicio) para saber quantos caracteres precisa para cortar.
490 |
491 | [**Resolução**](https://gist.github.com/SauloSilva/7bef8ec6e6f9abd9529a#file-egg-js-L17)
492 |
493 | ## Corrigindo o escopo
494 |
495 | Atualmente, a única maneira de atribuir uma variável um valor é utilizando o método `define`. Esta construção atua tanto como uma forma para definir novas variáveis e dar um novo valor para existentes.
496 |
497 | Isto causa um problema de ambiguidade. Quando você tenta dar uma variável um novo valor que não esta local, você vai acabar definindo uma variável local com o mesmo nome em seu lugar(Algumas línguas funcionam assim por design, mas eu sempre achei uma maneira estranha de lidar com escopo).
498 |
499 | Adicionar um `specialForm` similar ao `define` dara a variável um novo valor ou a atualização da variável em um escopo exterior se ele ainda não existir no âmbito interno. Se a variável não é definida em tudo lançar um `ReferenceError`(que é outro tipo de erro padrão).
500 |
501 | A técnica de representar escopos como simples objetos tornou as coisas convenientes, até agora, e vai ficar um pouco no seu caminho neste momento. Você pode querer usar a função `Object.getPrototypeOf` que retorna os protótipos de um objeto. Lembre-se também que os escopos não derivam de `Object.prototype`, por isso, se você quiser chamar `hasOwnProperty` sobre eles,você tera que usar esta expressão não muito elegante:
502 |
503 | ````javascript
504 | Object.prototype.hasOwnProperty.call(scope, name);
505 | ````
506 |
507 | Este método(`hasOwnProperty`) busca o protótipo do objeto e depois chama-o em um objeto do escopo.
508 |
509 | ````javascript
510 | specialForms["set"] = function(args, env) {
511 | // Your code here.
512 | };
513 |
514 | run("do(define(x, 4),",
515 | " define(setx, fun(val, set(x, val))),",
516 | " setx(50),",
517 | " print(x))");
518 | // → 50
519 | run("set(quux, true)");
520 | // → Some kind of ReferenceError
521 | ````
522 |
523 | **Dica:**
524 |
525 | Você vai ter que percorrer um escopo de cada vez usando `Object.getPrototypeOf` ate ir ao escopo externo. Para cada um dos escopos use `hasOwnProperty` para descobrir se a variável indicado pela propriedade `name` do primeiro argumento definida existe nesse escopo. Se isso acontecer defina-o como o resultado da avaliação do segundo argumento, e em seguida retorne esse valor.
526 |
527 | Se o escopo mais externo é atingido(`Object.getPrototypeOf` retornando `null`) e não encontramos a variável, isto significa que não existe; então um erro deve ser acionado.
528 |
529 | [**Resolução**](https://gist.github.com/SauloSilva/7bef8ec6e6f9abd9529a#file-egg-js-L156)
--------------------------------------------------------------------------------
/chapters/06-a-vida-secreta-dos-objetos.md:
--------------------------------------------------------------------------------
1 | # A vida secreta dos objetos
2 | > "O problema com as linguagens orientadas a objeto é que elas têm tudo
3 | implícito no ambiente que elas carregam consigo. Você queria banana, mas o que
4 | você teve foi um gorila segurando a banana e toda a floresta."
5 | > `Joe Armstrong, entrevistado em Coders at Work``
6 |
7 | Quando um programador diz "objeto", isso é um termo carregado. Na minha
8 | profissão, objetos são a maneira de viver, o sujeito das guerras santas, e um
9 | jargão apaixonante que ainda não perdeu o seu poder.
10 |
11 | Para um estrangeiro, isso provavelmente é um pouco confuso. Vamos começar com
12 | uma rápida história dos objetos como constrtutores da programação.
13 |
14 | ## História
15 | Essa história, como a maioria das histórias de programação, começa com um
16 | problema de complexidade. A teoria é de que a complexidade pode ser
17 | administrada separando-a em pequenos compartimentos isolados um do outro. Esses
18 | compartimentos acabaram ganhando o nome de _objetos_.
19 |
20 | Um objeto é um escudo duro que esconde a complexidade grudenta dentro dele e nos apresenta pequenos conectores (como métodos) que apresentam uma interface
21 | para utilizarmos o objeto. A ideia é que a interface seja relativamente simples
22 | e toda as coisas complexas que vão dentro do objeto possam ser ignoradas
23 | enquanto se trabalha com ele.
24 |
25 | 
26 |
27 | Como exemplo, você pode imaginar um objeto que disponibiliza uma interface para
28 | uma determinada área na sua tela. Ele disponibiliza uma maneira de desenhar
29 | formas ou textos nessa área, mas esconde todos os detalhes de como essas formas
30 | são convertidos para os pixels que compõem a tela. Você teria um conjunto de
31 | métodos-`desenharCirculo`, por exemplo- e essas serão as únicas coisas que
32 | você precisa saber pra usar tal objeto.
33 |
34 | Essas ideias foram trabalhadas inicialmente por volta dos anos 70 e 80 e, nos
35 | anos 90, foram trazidas a tona por uma enorme onda _hype_-a revolução da
36 | programação orientada a objetos. De repente, existia uma enorme tribo de pessoas declarando que objetos eram a maneira correta de programar-e que qualquer coisa que não envolvesse objetos era uma loucura ultrapassada.
37 |
38 | Esse tipo de fanatismo produz um monte de bobagem impraticável, e desde então
39 | uma espécie de contra-revolução vem acontecendo. Em alguns círculos de
40 | desenvolvedores, os objetos têm uma péssima reputação hoje em dia.
41 |
42 | Eu prefiro olhar para esse problema de um ângulo prático, e não ideológico.
43 | Existem vários conceitos úteis, dentre eles um dos mais importantes é o
44 | _encapsulamento_ (distinguir complexidade interna e interface externa), que a
45 | cultura orientada a objetos tem popularizado. Vamos ver esses conceitos, pois
46 | eles valem a pena.
47 |
48 | Esse capítulo descreve uma pegada mais excêntrica do JavaScript com foco nos
49 | objetos e na forma como eles se relacionam com algumas técnicas clássicas de
50 | orientação a objetos.
51 |
52 | ## Métodos
53 | Métodos são propriedades simples que comportam valores de funções. Isso é um
54 | método simples:
55 |
56 | ```javascript
57 | var coelho = {};
58 | coelho.diz = function(linha) {
59 | console.log("O coelho diz '" + linha + "'");
60 | };
61 |
62 | coelho.diz("Estou vivo.");
63 | // → O coelho diz 'Estou vivo.'
64 | ```
65 |
66 | Normalmente um método precisa fazer alguma coisa com o objeto pelo qual ele
67 | foi chamado. Quando uma função é chamada como um método-visualizada como uma
68 | propriedade e imediatamente chamada, como em `objeto.metodo()`-a variável
69 | especial `this` no seu conteúdo vai apontar para o objeto pelo qual foi chamada.
70 |
71 | ```javascript
72 | function speak(line) {
73 | console.log("The " + this.type + " rabbit says '" +
74 | line + "'");
75 | }
76 | var whiteRabbit = {type: "white", speak: speak};
77 | var fatRabbit = {type: "fat", speak: speak};
78 |
79 | whiteRabbit.speak("Oh my ears and whiskers, " +
80 | "how late it's getting!");
81 | // → The white rabbit says 'Oh my ears and whiskers, how
82 | // late it's getting!'
83 | fatRabbit.speak("I could sure use a carrot right now.");
84 | // → The fat rabbit says 'I could sure use a carrot
85 | // right now.'
86 | ```
87 |
88 | O código acima usa a palavra chava `this` para dar a saída do tipo de coelho que está falando. Lembrando que ambos os métodos `apply` e `bind` podem user o
89 | primeiro argumento para simular chamadas de métodos. Esse primeiro argumento, é
90 | na verdade, usado para passar um valor ao `this`.
91 |
92 | Existe um método parecido ao `apply` chamado `call`. Ele também chama a função
93 | na qual ele é um método e aceita argumentos normalmente, ao invés de um array.
94 | Assim como `apply` e `bind`, o `call` pode ser passado com um valor específico
95 | no `this`.
96 |
97 | ```javascript
98 | speak.apply(fatRabbit, ["Burp!"]);
99 | // → The fat rabbit says 'Burp!'
100 | speak.call({type: "old"}, "Oh my.");
101 | // → The old rabbit says 'Oh my.'
102 | ```
103 |
104 | ## Prototypes
105 | Observe com atenção.
106 |
107 | ```javascript
108 | var empty = {};
109 | console.log(empty.toString);
110 | // → function toString(){…}
111 | console.log(empty.toString());
112 | // → [object Object]
113 | ```
114 |
115 | Eu acabei de sacar uma propriedade de um objeto vazio. Mágica!
116 |
117 | Só que não. Eu venho ocultando algumas informações sobre como os objetos
118 | funcionam no JavaScript. Além de sua lista de propriedades, quase todos os
119 | objetos também possuem um _protótipo_, ou _prototype_. Um _prototype_ é outro objeto que é usado como fonte de _fallback_ para as propriedades. Quando um objeto recebe uma chamada em uma propriedade que ele não possui, seu _prototype_ designado para aquela propriedade será buscado, e então o _prototype_ daquele _prototype_ e assim por diante.
120 |
121 | Então quem é o _prototype_ de um objeto vazio? É o ancestral de todos os
122 | _prototypes_, a entidade por trás de quase todos os objetos, `Object.prototype`.
123 |
124 | ```javascript
125 | console.log(Object.getPrototypeOf({}) ==
126 | Object.prototype);
127 | // → true
128 | console.log(Object.getPrototypeOf(Object.prototype));
129 | // → null
130 | ```
131 |
132 | A função `Object.getPrototypeOf` retorna o _prototype_ de um objeto como o esperado.
133 |
134 | As relações dos objetos JavaScript formam uma estrutura em forma de árvore, e na raiz dessa estrutura se encontra o `Object.prototype`. Ele fornece alguns métodos que estão presentes em todos os objetos, como o toString, que converte um objeto para uma representação em _string_.
135 |
136 | Muitos objetos não possuem o `Object.prototype` diretamente em seu _prototype_. Ao invés disso eles têm outro objeto que fornece suas propriedades padrão. Funções derivam do `Function.prototype`, e _arrays_ derivam do `Array.prototype`.
137 |
138 | ```javascript
139 | console.log(Object.getPrototypeOf(isNaN) ==
140 | Function.prototype);
141 | // → true
142 | console.log(Object.getPrototypeOf([]) ==
143 | Array.prototype);
144 | // → true
145 | ```
146 |
147 | Por diversas vezes, o _prototype_ de um objeto também terá um _prototype_, dessa forma ele ainda fornecerá indiretamente métodos como `toString`.
148 |
149 | A função `Object.getPrototypeOf` obviamente retornarão o _prototype_ de um objeto. Você pode usar `Object.create` para criar um objeto com um _prototype_ específico.
150 |
151 | ```javascript
152 | var protoCoelho = {
153 | fala: function(linha) {
154 | console.log("O coelho " + this.tipo + " fala '" +
155 | linha + "'");
156 | }
157 | };
158 | var coelhoAssassino = Object.create(protoCoelho);
159 | coelhoAssassino.tipo = "assassino";
160 | coelhoAssassino.fala("SKREEEE!");
161 | // → O coelho assassino fala 'SKREEEE!'
162 | ```
163 |
164 | ## Construtores
165 |
166 | A maneira mais conveniente de criar objetos que herdam algum _prototype_ compartilhado é usar um construtor. No JavaScript, chamar uma função precedida pela palavra-chave `new` vai fazer com que ela seja tratada como um construtor. O construtor terá sua variável `this` atrelada a um objeto novo, e a menos que ele explicite o retorno do valor de outro objeto, esse novo objeto será retornado a partir da chamada.
167 |
168 | Um objeto criado com `new` é chamado de _instância_ do construtor.
169 |
170 | Aqui está um construtor simples para coelhos. É uma conveção iniciar o nome de um construtor com letra maiúscula para que seja fácil destinguí-los das outras funções.
171 |
172 | ```javascript
173 | function Coelho(tipo) {
174 | this.tipo = tipo;
175 | }
176 |
177 | var coelhoAssassino = new Coelho("assassino");
178 | var coelhoPreto = new Coelho("preto");
179 | console.log(coelhoPreto.tipo);
180 | // → preto
181 | ```
182 |
183 | Construtores (todas as funções, na verdade) pegam automaticamente uma propriedade chamada `prototype`, que por padrão possui um objeto vazio que deriva do `Object.prototype`. Toda instância criada com esse construtor terá esse objeto assim como seu _prototype_. Então, para adicionar um método `fala` aos coelhos criados com o construtor `Coelho`, nós podemos simplesmente fazer isso:
184 |
185 | ```javascript
186 | Coelho.prototype.fala = function(linha) {
187 | console.log("O coelho " + this.tipo + " fala '" +
188 | linha + "'");
189 | };
190 | coelhoPreto.fala("Doom...");
191 | // → O coelho preto fala 'Doom...'
192 | ```
193 |
194 | É importante notar a dinstinção entre a maneira que um _prototype_ é associado a um construtor (por sua propriedade _prototype_) e a maneira que objetos _têm_ um _prototype_ (que pode ser obtido com `Object.getPrototypeOf`). O _prototype_ propriamente dito de um construtor é `Function.prototype`, visto que os construtores são funções. Sua _propriedade_ `prototype` será o _prototype_ de instâncias criadas através dele mas não será seu _próprio prototype_.
195 |
196 | ## Definindo uma tabela
197 |
198 | Eu vou trabalhar sobre um exemplo ou pouco mais envolvido na tentativa de dar a você uma melhor ideia de polimorfismo, assim como de programação orientada a objetos em geral. O projeto é este: nós vamos escrever um programa que, dado um array de arrays de células de uma tabela, cria uma string que contém uma tabela bem formatada - significando que colunas são retas e linhas estão alinhadas. Algo dessa forma:
199 |
200 | ```
201 | name height country
202 | ------------ ------ -------------
203 | Kilimanjaro 5895 Tanzania
204 | Everest 8848 Nepal
205 | Mount Fuji 3776 Japan
206 | Mont Blanc 4808 Italy/France
207 | Vaalserberg 323 Netherlands
208 | Denali 6168 United States
209 | Popocatepetl 5465 Mexico
210 | ```
211 |
212 | A forma que nosso sistema de construir tabelas vai funcionar é que a função construtora vai perguntar para cada célula quanto de altura e largura ela vai querer ter e então usar essa informação para determinar a largura das colunas e a altura das linhas. A função construtora vai então pedir para as células se desenharem no tamanho correto e montar o resultado dentro de uma string.
213 |
214 | O programa de *layout* vai comunicar com os objetos células através de uma interface bem definida. Dessa forma, os tipos de células que o programa suporta não está definida antecipadamente. Nós podemos adicionar novas células de estilo depois — por exemplo, células sublinhadas para cabeçalho — e se eles suportarem nossa interface, isso vai simplesmente, funcionar, sem exigir alterações no layout do programa.
215 |
216 | Esta é a interface:
217 |
218 | - `minHeight()` retorna um número indicando a altura mínima que esta célula necessita (em linhas).
219 | - `minWidth()` retorna um número indicando a largura mínima da célula (em caracteres).
220 | - `draw(width, height)` retorna um array de tamanho `height`, que contém uma série de strings que contém `width` caracteres de tamanho. Isso representa o conteúdo da célula.
221 |
222 | Irei fazer forte uso de métodos de ordem superior de array neste exemplo uma vez que isso é apropriado para essa abordagem.
223 |
224 | A primeira parte do programa calcula matrizes de largura e altura mínima para uma grade de células.
225 |
226 | ```js
227 | function rowHeights(rows) {
228 | return rows.map(function(row) {
229 | return row.reduce(function(max, cell) {
230 | return Math.max(max, cell.minHeight());
231 | }, 0);
232 | });
233 | }
234 |
235 | function colWidths(rows) {
236 | return rows[0].map(function(_, i) {
237 | return rows.reduce(function(max, row) {
238 | return Math.max(max, row[i].minWidth());
239 | }, 0);
240 | });
241 | }
242 | ```
243 |
244 | Usar um nome de variável que se inicia com um *underscore* (`_`) ou consistir inteiramente em um simples underscore é uma forma de indicar (para leitores humanos) que este argumento não será usado.
245 |
246 | A função `rowHeights` não deve ser tão difícil de ser seguida. Ela usa `reduce` para computar a altura máxima de um array de células e envolve isso em um `map` para fazer isso em todas as linhas no array `rows`.
247 |
248 | As coisas são um pouco mais difíceis na função `colWidths` porque o array externo é um array de linhas, não de colunas. Não mencionei até agora que `map` (assim como `forEach`, `filter` e métodos de array similares) passam um segundo argumento à função fornecida: o índice do elemento atual. Mapeando os elementos da primeira linha e somente usando o segundo argumento da função de mapeamento, `colWidths` constrói um array com um elemento para cada índice da coluna. A chamada à `reduce` roda sobre o array `rows` exterior para cada índice e pega a largura da célula mais larga nesse índice.
249 |
250 | Aqui está o código para desenhar a tabela:
251 |
252 | ```js
253 | function drawTable(rows) {
254 | var heights = rowHeights(rows);
255 | var widths = colWidths(rows);
256 |
257 | function drawLine(blocks, lineNo) {
258 | return blocks.map(function(block) {
259 | return block[lineNo];
260 | }).join(" ");
261 | }
262 |
263 | function drawRow(row, rowNum) {
264 | var blocks = row.map(function(cell, colNum) {
265 | return cell.draw(widths[colNum], heights[rowNum]);
266 | });
267 | return blocks[0].map(function(_, lineNo) {
268 | return drawLine(blocks, lineNo);
269 | }).join("\n");
270 | }
271 |
272 | return rows.map(drawRow).join("\n");
273 | }
274 | ```
275 |
276 | A função `drawTable` usa a função interna `drawRow` para desenhar todas as linhas e então as junta com caracteres *newline* (nova linha).
277 |
278 | A função `drawRow` primeiro converte os objetos célula na linha em *blocos*, que são arrays representando o conteúdo das células, divididos por linha. Uma célula simples contendo apenas o número 3776 deve ser representada por um array com um único elemento como `["3776"]`, onde uma célula sublinhada deve conter duas linhas e ser representada pelo array `["name", "----"]`.
279 |
280 | Os blocos para uma linha, que devem todos ter a mesma largura, devem aparecer próximos um ao outro na saída final. A segunda chamada a `map` em `drawRow` constrói essa saída linha por linha mapeando sobre as linhas do bloco mais à esquerda e, para cada uma delas, coletando uma linha que expande a tabela para sua largura máxima. Essas linhas são então juntadas com caracteres *newline* para fornecer a linha completa e ser o valor retornado de `drawRow`.
281 |
282 | A função `drawLine` extrai linhas que devem aparecer próximas uma a outra a partir de um array de blocos e as junta com um caracter espaço para criar o espaço de um caracter entre as colunas da tabela.
283 |
284 | Agora vamos escrever o construtor para células que contenham texto, implementando a interface para as células da tabela. O construtor divide a linha em um array de linhas usando o método string `split`, que corta uma string em cada ocorrência do seu argumento e retorna um array com as partes. O método `minWidth` encontra a linha com maior largura nesse array.
285 |
286 | ```js
287 | function repeat(string, times) {
288 | var result = "";
289 | for (var i = 0; i < times; i++)
290 | result += string;
291 | return result;
292 | }
293 |
294 | function TextCell(text) {
295 | this.text = text.split("\n");
296 | }
297 | TextCell.prototype.minWidth = function() {
298 | return this.text.reduce(function(width, line) {
299 | return Math.max(width, line.length);
300 | }, 0);
301 | };
302 | TextCell.prototype.minHeight = function() {
303 | return this.text.length;
304 | };
305 | TextCell.prototype.draw = function(width, height) {
306 | var result = [];
307 | for (var i = 0; i < height; i++) {
308 | var line = this.text[i] || "";
309 | result.push(line + repeat(" ", width - line.length));
310 | }
311 | return result;
312 | };
313 | ```
314 |
315 | O código usa uma função auxiliar chamada `repeat`, que constrói uma linha na qual o valor é um argumento `string` repetido `times` número de vezes. O método `draw` usa isso e adiciona "preenchimento" para as linhas assim todas vão ter o tamanho requerido.
316 |
317 | Vamos testar tudo que construímos e criar um tabuleiro de damas 5 x 5.
318 |
319 | ```js
320 | var rows = [];
321 | for (var i = 0; i < 5; i++) {
322 | var row = [];
323 | for (var j = 0; j < 5; j++) {
324 | if ((j + i) % 2 == 0)
325 | row.push(new TextCell("##"));
326 | else
327 | row.push(new TextCell(" "));
328 | }
329 | rows.push(row);
330 | }
331 | console.log(drawTable(rows));
332 | // → ## ## ##
333 | // ## ##
334 | // ## ## ##
335 | // ## ##
336 | // ## ## ##
337 | ```
338 |
339 | Funciona! Mas apesar de todas as células terem o mesmo tamanho, o código do layout da tabela não faz nada realmente interessante.
340 |
341 | Os dados fonte para a tabela de montanhas que estamos tentando construir estão disponíveis na variável `MOUNTAINS` na *sandbox* e também [neste arquivo](http://eloquentjavascript.net/code/mountains.js) em nosso website.
342 |
343 | Vamos querer destacar a linha do topo, que contém o nome das colunas, sublinhando as células com uma série de caracteres *traço*. Sem problemas — nós simplesmente escrevemos um tipo de célula que manipula o sublinhado.
344 |
345 | ```js
346 | function UnderlinedCell(inner) {
347 | this.inner = inner;
348 | };
349 | UnderlinedCell.prototype.minWidth = function() {
350 | return this.inner.minWidth();
351 | };
352 | UnderlinedCell.prototype.minHeight = function() {
353 | return this.inner.minHeight() + 1;
354 | };
355 | UnderlinedCell.prototype.draw = function(width, height) {
356 | return this.inner.draw(width, height - 1)
357 | .concat([repeat("-", width)]);
358 | };
359 | ```
360 |
361 | Uma célula sublinhada *contém* outra célula. Ela reporta seu tamanho mínimo sendo o mesmo que da sua célula interna (chamando os métodos `minWidth` e `minHeight` desta célula) mas adicionando um à largura para contar o espaço usado pelo sublinhado.
362 |
363 | Desenhar essa célula é bem simples - nós pegamos o conteúdo da célula interna e concatenamos uma simples linha preenchida com traços a ela.
364 |
365 | Tendo um mecanismo de sublinhamento, nós podemos agora escrever uma função que constrói uma grade de células a partir do conjunto de dados.
366 |
367 | ```js
368 | function dataTable(data) {
369 | var keys = Object.keys(data[0]);
370 | var headers = keys.map(function(name) {
371 | return new UnderlinedCell(new TextCell(name));
372 | });
373 | var body = data.map(function(row) {
374 | return keys.map(function(name) {
375 | return new TextCell(String(row[name]));
376 | });
377 | });
378 | return [headers].concat(body);
379 | }
380 |
381 | console.log(drawTable(dataTable(MOUNTAINS)));
382 | // → name height country
383 | // ------------ ------ -------------
384 | // Kilimanjaro 5895 Tanzania
385 | // … etcetera
386 | ```
387 |
388 | A função padrão `Object.keys` retorna um array com nomes de propriedades de um objeto. A linha do topo da tabela deve conter células sublinhadas que dão os nomes das colunas. Abaixo disso, os valores de todos os objetos no conjuto de dados aparecem como células normais - nós os extraímos mapeando sobre o array `keys` de modo que tenhamos certeza que a ordem das células é a mesma em todas as linhas.
389 |
390 | A tabela resultante se assemelha ao exemplo mostrado anteriormente, exceto que ela não alinha os números à direita na coluna `height`. Vamos chegar nessa parte em um instante.
391 |
392 | ## Getters and Setters
393 |
394 | Quando especificamos uma interface, é possível incluir propriedades que não são métodos. Poderíamos ter definido `minHeight` e `minWidth` para simplesmente conter números. Mas isso teria exigido de nós computá-los no construtor, o que adicionaria código que não é estritamente relevante para *construção* do objeto. Isso pode causar problemas se, por exemplo, a célula interior de uma célula exterior mudou, onde nesse ponto o tamanho da célula sublinhada também deve mudar.
395 |
396 | Isso tem levado algumas pessoas a adotarem um princípio de nunca incluirem propriedades *nonmethod* em interfaces. Ao invés de acessarem diretamente o valor da propriedade, eles usam métodos `getSomething` e `setSomething` para ler e escrever propriedades. Esta abordagem tem a parte negativa de que você irá acabar escrevendo - e lendo - muitos métodos adicionais.
397 |
398 | Felizmente, o JavaScript fornece uma técnica que fornece o melhor de ambos os mundos. Nós podemos especificar propriedades que, do lado de fora, parecem propriedades normais mas secretamente tem métodos associados a elas.
399 |
400 | ```js
401 | var pile = {
402 | elements: ["eggshell", "orange peel", "worm"],
403 | get height() {
404 | return this.elements.length;
405 | },
406 | set height(value) {
407 | console.log("Ignoring attempt to set height to", value);
408 | }
409 | };
410 |
411 | console.log(pile.height);
412 | // → 3
413 | pile.height = 100;
414 | // → Ignoring attempt to set height to 100
415 | ```
416 |
417 | Em um objeto literal, a notação `get` ou `set` para propriedades permite que você especifique uma função a ser executada quando a propriedade for lida ou escrita. Você pode também adicionar tal propriedade em um objeto existente, por exemplo um protótipo, usando a função `Object.defineProperty` (que nós previamente usamos para criar propriedades não enumeráveis).
418 |
419 | ```js
420 | Object.defineProperty(TextCell.prototype, "heightProp", {
421 | get: function() { return this.text.length; }
422 | });
423 |
424 | var cell = new TextCell("no\nway");
425 | console.log(cell.heightProp);
426 | // → 2
427 | cell.heightProp = 100;
428 | console.log(cell.heightProp);
429 | // → 2
430 | ```
431 |
432 | Você pode usar a propriedade similar `set`, no objeto passado à `defineProperty`, para especificar um método *setter*. Quando um *getter* é definido mas um *setter* não, escrever nessa propriedade é algo simplesmente ignorado.
433 |
434 | ## Herança
435 |
436 | Nós não estamos prontos com nosso exercício de layout de tabela. Ela deve ajudar na leitura de números alinhados à direita em colunas. Nós devemos criar outra tipo de célula como `TextCell`, mas ao invés de dar espaço nas linhas do lado direito, vamos espaçá-las do lado esquerdo que irá alinhas à direita.
437 |
438 | Podemos simplesmente construir um novo construtor com todos os três métodos em seu protótipo. Mas protótipos podem ter seus próprios protótipos, e isso nos permite fazer algo inteligente.
439 |
440 | ```js
441 | function RTextCell(text) {
442 | TextCell.call(this, text);
443 | }
444 | RTextCell.prototype = Object.create(TextCell.prototype);
445 | RTextCell.prototype.draw = function(width, height) {
446 | var result = [];
447 | for (var i = 0; i < height; i++) {
448 | var line = this.text[i] || "";
449 | result.push(repeat(" ", width - line.length) + line);
450 | }
451 | return result;
452 | };
453 | ```
454 |
455 | Nós reusamos o construtor e os métodos `minHeight` e `minWidth` de `TextCell`. Um `RTextCell` é agora basicamente equivalente a `TextCell`, exceto que seu método `draw` contém uma função diferente.
456 |
457 | Este padrão é chamado *herança*. Isso nos permite construir tipos de dados levemente diferentes a partir de tipos de dados existentes com relativamente pouco esforço. Tipicamente, o novo construtor vai chamar o antigo construtor (usando o método `call` para ser capaz de dar a ele o novo objeto assim como o seu valor `this`). Uma vez que esse construtor tenha sido chamado, nós podemos assumir que todos os campos que o tipo do antigo objeto supostamente contém foram adicionados. Nós organizamos para que o protótipo do construtor derive do antigo protótipo, então as instâncias deste tipo também vão acesso às propriedades deste protótipo. Finalmente, nós podemos sobrescrever algumas das propriedades adicionando-as ao nosso novo protótipo.
458 |
459 | Agora, se nós ajustarmos sutilmente a função `dataTable` para usar `RTextCell` para as células cujo valor é um número, vamos obter a tabela que estávamos buscando.
460 |
461 | ```js
462 | function dataTable(data) {
463 | var keys = Object.keys(data[0]);
464 | var headers = keys.map(function(name) {
465 | return new UnderlinedCell(new TextCell(name));
466 | });
467 | var body = data.map(function(row) {
468 | return keys.map(function(name) {
469 | var value = row[name];
470 | // This was changed:
471 | if (typeof value == "number")
472 | return new RTextCell(String(value));
473 | else
474 | return new TextCell(String(value));
475 | });
476 | });
477 | return [headers].concat(body);
478 | }
479 |
480 | console.log(drawTable(dataTable(MOUNTAINS)));
481 | // → … beautifully aligned table
482 | ```
483 |
484 | Herança é uma parte fundamental da orientação a objetos tradicional, ao lado de encapsulamento e polimorfismo. Mas enquanto os dois últimos sejam agora geralmente considerados como ideias brilhantes, herança é algo controverso.
485 |
486 | A principal razão para isso é que este tópico é geralmente confundido com polimorfismo, vendido como uma ferramenta mais poderosa do que realmente é, e subsequentemente usado em excesso de diversas horríveis formas. Onde encapsulamento e polimorfismo podem ser usados para *separar* pedaços de código de cada um, reduzindo o emaranhamento de todo o programa, herança fundamentalmente vincula os tipos, criando *mais* emaranhados.
487 |
488 | Você pode ter polimorfismo sem herança, como nós vimos. Eu não vou dizer para você evitar herança completamente. Eu a uso regularmente em meus programas. Mas você deve vê-la como um leve truque desonesto que vai ajudá-lo a definir novos tipos com menos código, não como um grande princípio de organização de código. Uma forma mais apropriada de extender tipos é através da composição, como `UnderlinedCell` constrói em outra célula simplesmente armazenando-a em uma propriedade e um método posterior a chama nos seus próprios métodos.
489 |
490 | ## O operador `instanceof`
491 |
492 | Ocasionalmente é útil saber se um objeto foi derivado de um construtor em específico. Para isso, o JavaScript fornece um operador binário chamado `instaceof`.
493 |
494 | ```js
495 | console.log(new RTextCell("A") instanceof RTextCell);
496 | // → true
497 | console.log(new RTextCell("A") instanceof TextCell);
498 | // → true
499 | console.log(new TextCell("A") instanceof RTextCell);
500 | // → false
501 | console.log([1] instanceof Array);
502 | // → true
503 | ```
504 |
505 | O operador vai olhar através dos tipos herdados. Um `RTextCell` é uma instância de `TextCell` porque `RTextCell.prototype` deriva de `TextCell.prototype`. O operador pode ser aplicado a construtores padrão como `Array`. Praticamente todos os objetos são uma instância de `Object`.
506 |
507 | ## Resumo
508 |
509 | Então objetos são mais complicados do que inicialmente eu os retratei. Eles tem protótipos, que são outros objetos, e vão agir como se tivessem propriedades que eles não tem caso seu protótipo tenha essa propriedade. Objetos simples tem `Object.prototype` como seus protótipos.
510 |
511 | Construtores, que são funções cujos nomes usualmente iniciam com uma letra maiúscula, podem ser usador com o operador `new` para criar objetos. O protótipo do novo objeto será o objeto encontrado na propriedade `prototype` da função construtora. Você pode fazer bom uso disso adicionando propriedades que todos os valores de um tipo compartilham em seus protótipos. O operador `instanceof` pode, dado um objeto e um construtor, dizer se o objeto é uma instância deste construtor.
512 |
513 | Algo útil a se fazer com objetos é especificar uma interface para eles e dizer para todos quer irão supostamente conversar com seu objeto a fazer isso somente por essa interface. O resto dos detalhes que constroem seu objeto estão agora *encapsulados*, escondidos atrás da interface.
514 |
515 | Uma vez que você esteja conversando em termos de interfaces, quem diz que apenas um tipo de objeto pode implementar essa interface? Ter diferentes objetos expondo a mesma interface é chamado de *polimorfismo*. Isso é muito útil.
516 |
517 | Quando implementando vários tipos que diferem apenas em alguns detalhes, pode ser útil simplesmente criar o protótipo do seu novo tipo derivando do protótipo do seu antigo tipo e ter seu novo construtor chamando o antigo. Isso lhe dá um tipo similar de objeto ao antigo mas que permite que você adicione ou sobrescreva propriedades quando necessário.
518 |
519 | ## Exercícios
520 |
521 | ### Um tipo de vetor
522 |
523 | Escreva um construtor `Vector` que represente um vetor em duas dimensões do espaço. Ele recebe os parâmetros `x` e `y` (números), que deve salvar em propriedades de mesmo nome.
524 |
525 | Dê ao protótipo de `Vector` dois métodos, `plus` e `minus`, que pegam outro vetor como parâmetro e retornam um novo vetor que tem a soma ou diferença dos valores `x` e `y` dos dois vetores (o vetor que está em `this` e o passado no parâmetro).
526 |
527 | Adicione uma propriedade getter `length` ao protótipo que calcula o tamanho do vetor - isto é, a distância do ponto (`x, y`) até a origem (0,0).
528 |
529 | ```js
530 | // Your code here.
531 |
532 | console.log(new Vector(1, 2).plus(new Vector(2, 3)));
533 | // → Vector{x: 3, y: 5}
534 | console.log(new Vector(1, 2).minus(new Vector(2, 3)));
535 | // → Vector{x: -1, y: -1}
536 | console.log(new Vector(3, 4).length);
537 | // → 5
538 | ```
539 |
540 | **Dicas**
541 |
542 | Sua solução pode seguir o padrão do construtor `Rabbit` deste capítulo de forma bem semelhante.
543 |
544 | Adicionar uma propriedade getter ao construtor pode ser feita com a função `Object.defineProperty`. Para calcular a distância do ponto `(0, 0)` até `(x, y)` você pode usar o teorema de Pitágoras, que diz que o quadrado da distância que estamos procurando é igual ao quadrado da coordenada x mais o quadrado da coordenada y. Assim, `√(x2 + y2)` é o número que você quer, e `Math.sqrt` é o caminho para você calcular a raiz quadrada no JavaScript.
545 |
546 | ## Outra célula
547 |
548 | Implemente uma célula do tipo `StretchCell(inner, width, height)` que se adeque a [interface da célula da tabela](#definindo-uma-tabela) descrita anteriormente neste capítulo. Ela deve envolver outra célula (como `UnderlinedCell` faz) e assegurar que a célula resultante tem pelo menos a largura (`width`) e altura (`height`) especificada, mesmo se a célula interior for naturalmente menor.
549 |
550 | ```js
551 | // Your code here.
552 |
553 | var sc = new StretchCell(new TextCell("abc"), 1, 2);
554 | console.log(sc.minWidth());
555 | // → 3
556 | console.log(sc.minHeight());
557 | // → 2
558 | console.log(sc.draw(3, 2));
559 | // → ["abc", " "]
560 | ```
561 |
562 | **Dicas**
563 |
564 | Você vai ter que armazenar os 3 argumentos construtores na instância do objeto. Os métodos `minWidth` e `minHeight` devem chamar através dos métodos correspondentes na célula interna (`inner`), mas assegure-se que nenhum número menor que o tamanho dado é retornado (possivelmente usando `Math.max`).
565 |
566 | Não se esqueça de adicionar um método `draw` que simplesmente encaminha a chamada para a célula interior.
567 |
568 | ### Interface sequencial
569 |
570 | Projete uma *interface* que abstraia interações sobre uma coleção de valores. Um objeto que fornece esta interface representa uma sequência, e a interface deve de alguma forma tornar possível para o código que usa este objeto iterar sobre uma sequência, olhando para o valor dos elementos de que ela é composta e tendo alguma forma de saber quando o fim da sequência foi atingido.
571 |
572 | Quando você tiver especificado sua interface, tente escrever uma função `logFive` que pega um objeto sequencial e chama `console.log` para seus primeiros 5 elementos - ou menos, se a sequência tiver menos do que cinco elementos.
573 |
574 | Então implemente um tipo de objeto `ArraySeq` que envolve um array e permite interação sobre o array usando a interface que você desenvolveu. Implemente outro tipo de objeto `RangeSeq` que itera sobre um intervalo de inteiros (recebendo os argumentos `from` e `to` em seu construtor).
575 |
576 | ```js
577 | // Your code here.
578 |
579 | logFive(new ArraySeq([1, 2]));
580 | // → 1
581 | // → 2
582 | logFive(new RangeSeq(100, 1000));
583 | // → 100
584 | // → 101
585 | // → 102
586 | // → 103
587 | // → 104
588 | ```
589 |
590 | **Dicas**
591 |
592 | Uma forma de resolver isso é fornecendo objetos sequenciais *state*, que significa que suas propriedades são alteradas no seu processo de uso. Você pode armazenar um contador que indica quão longe o objeto sequenciais avançaram.
593 |
594 | Sua interface vai precisar expor ao menos uma forma de pegar o próximo elemento e encontrar se a iteração já chegou no fim da sequencia. É tentador fazer isso em um método, `next`, que retorna `null` ou `undefined` quando a sequência chegar ao fim. Mas agora você tem um problema quando a sequência realmente tiver `null`. Então um método separado (ou uma propriedade getter) para descobrir se o fim foi alcançado é provavelmente preferível.
595 |
596 | Outra solução é evitar mudar o estado do objeto. Você pode expor um método para pegar o elemento atual (sem o auxílio de nenhum contador) e outro para pegar uma nova sequência que representa os elementos restantes depois do atual (ou um valor especial se o fim da sequência tiver sido atingido). Isso é bem elegante - um valor sequencial vai "permanecer ele mesmo" mesmo depois de ter sido usado e pode ser compartilhado com outro código sem a preocupação sobre o que pode acontecer com ele. Isso é, infelizmente, algo um pouco ineficiente numa linguagem como JavaScript porque envolve criar vários objetos durante a iteração.
597 |
--------------------------------------------------------------------------------
/chapters/10-modulos.md:
--------------------------------------------------------------------------------
1 | Capítulo 10
2 |
3 | # Módulos
4 |
5 | > Um programador iniciante escreve seus programas como uma formiga constrói seu formigueiro, um pedaço de cada vez, sem pensar na estrutura maior. Seus programas irão parecer como areia solta. Eles podem durar um tempo, mas se crescem demais, desmoronam.
6 | >
7 | > Percebendo esse problema, o programador começará a gastar muito tempo pensando sobre a estrutura. Seus programas serão rigidamente estruturados, como esculturas em pedra. Eles são sólidos, mas quando precisam mudar, devem ser quebrados.
8 |
9 | > O programador experiente sabe quando aplicar uma estrutura e quando deixar as coisas mais simples. Seus programas são como argila, sólidos mas ainda maleáveis.
10 |
11 | > —Master Yuan-Ma, The Book of Programming
12 |
13 | Todo programa possui uma forma. Em menor escala essa forma é determinada pela divisão em funções e os blocos dentro destas funções. Programadores têm muita liberdade na forma que dão aos seus programas. É determinado mais pelo bom (ou mau) gosto, do que pela funcionalidade planejada.
14 |
15 | Quando olhamos um programa grande em seu todo, funções individuais começam a se misturar e seria bom possuir uma unidade maior de organização.
16 |
17 | Módulos dividem programas em blocos de código, que por algum critério pertencem a uma mesma unidade. Este capítulo explora alguns dos benefícios que estes agrupamentos fornecem e mostra algumas técnicas para construção de módulos em Javascript.
18 |
19 | ## Organização
20 |
21 | Existem algumas razões porque autores dividem seus livros em capítulos e seções. Elas facilitam para o leitor entender como o livro foi feito ou achar uma parte específica em que está interessado. Elas também ajudam o autor, dando um foco claro para cada seção.
22 |
23 | Os benefícios de dividir um programa em vários arquivos ou módulos são semelhantes, ajudam as pessoas que não estão familiarizadas com o código a achar o que elas buscam, e ajudam o programador a colocar coisas semelhantes juntas.
24 |
25 | Alguns programas são organizados seguindo o modelo de um texto tradicional, com uma ordem bem definida que encoraja o leitor a percorrer o programa, e muito falatório (comentários) fornecendo uma descrição coerente do código. Isso faz o programa muito menos intimidador (ler código desconhecido é geralmente intimidador). Mas existe um lado ruim que é a maior quantidade de trabalho a fazer e dificulta um pouco as alterações, porque os comentários tendem a ser mais interligados do que o código em si.
26 |
27 | Como regra geral, organização tem um custo, e é nos estágios iniciais do projeto, quando não sabemos com certeza aonde vamos e que tipo de módulos o programa precisará. Eu defendo uma estrutura minimalista, com pouca estrutura. Apenas coloque tudo em um simples arquivo até que o código esteja estabilizado. Dessa maneira, você não estará se sobrecarregando pensando em organização enquanto tem pouca informação, não perderá tempo fazendo e desfazendo coisas, e não irá acidentalmente travar-se em uma estrutura que não serve realmente para seu programa.
28 |
29 | ## Namespaces
30 |
31 | A maioria das linguagens modernas de programação têm um nível de escopo entre "global" (todos podem ver) e "local" (só esta função pode ver isto). JavaScript não. Assim, por padrão, tudo o que precisa ser visível fora do pequeno escopo da função atual é visível em todos os lugares.
32 |
33 | Poluição de Namespace, o problema de um monte de código não relacionado ter que compartilhar um único conjunto de nomes de variáveis globais, foi mencionado no capítulo 4, onde o objeto `Math` foi dado como um exemplo de um objeto que age como uma espécie de módulo por um agrupamento série de funcionalidades relacionadas com a matemática.
34 |
35 | Embora Javascript não possua a criação de módulos nativamente, objetos podem ser usados para criar sub-namespaces publicamente acessíveis, e funções podem ser usadas para criar um namespace privado dentro de um módulo. Vou demonstrar algumas técnicas que nos permitirão construir módulos namespace isolados bem convenientes.
36 |
37 | ## Reuso
38 |
39 | Em um projeto "flat" (plano), não é claro quais partes do código são necessárias para se usar uma função em particular. Se, no meu programa para espionar inimigos (*spying on enemies*), eu escrever uma função para ler os arquivos de configuração, e agora eu uso essa função novamente em outro projeto, eu devo ir e copiar as partes do programa antigo que são relevantes para a funcionalidade que eu preciso, e colá-las no meu novo programa. Então, se eu encontrar um erro nesse código, eu vou consertar isso neste programa que eu estava trabalhando no momento, e esquecer de também consertar no outro programa.
40 |
41 | Uma vez que você tenha muitos pedaços de código compartilhados e duplicados, você vai se encontrar perdendo uma grande quantidade de tempo e energia organizá-los e mantê-los atualizados.
42 |
43 | Quando partes de funcionalidades que são independentes são colocadas em arquivos e módulos separados, elas podem ser rastreiadas mais facilmente, atualizadas quando uma nova versão for criada, ou até mesmo compartilhadas, tendo várias partes do código que desejam usá-las carregando o mesmo arquivo.
44 |
45 | Essa idea fica ainda mais poderosa quando as relações entre os módulos - onde outros módulos cada módulo depende - são explicitamente especificados. Você pode então automatizar o processo de instalação e atualização de módulos externos.
46 |
47 | E, levando isso ainda mais longe, imagine um serviço online que rastreia e distribui centenas de milhares destes módulos, permitindo a você buscar pela funcionalidade que deseja, e, uma vez que você a encontre, configure-a no seu projeto para ser baixada automaticamente.
48 |
49 | Este serviço existe. É chamado NPM (npmjs.org). NPM consiste em um banco de dados online de módulos, e uma ferramenta para download e atualização dos módulos que seu programa depende. Ele cresceu com o Node.js. o ambiente JavaScript *browser-less* (que não depende do navegador), discutido no capítulo 20, mas também pode ser usado quando programando para o navegador.
50 |
51 | ## Desacoplamento
52 |
53 | Outro importante papel dos módulos é os de isolar partes de código um do outro, da mesma forma que as interfaces dos objetos no capítulo 6 fazem. Um módulo bem desenvolvido fornece uma interface para uso de códigos externos, e mesmo que o módulo continue sendo trabalhado (bugs consertados, funcionalidades adicionadas) a interface existente permanece estável, assim outro módulos podem usar uma nova e melhorada versão sem qualquer alteração neles mesmos.
54 |
55 | Note que uma interface estável não significa que novos elementos não são adicionados. Isso apenas significa que elementos existentes não serão removidos ou seus significados não serão alterados.
56 |
57 | Construir a interface de um módulo que permite que este cresça sem quebras na antiga interface significa encontrar um balanço entre expor a menor quantidade de conceitos internos ao mundo exterior quanto possível, e ainda assim criar uma "linguagem" exposta pela interface que seja poderosa e flexível o suficiente para ser aplicada em uma vasta variedade de situações.
58 |
59 | Para interfaces que expões um único e focado conceito, como um arquivo leitor de configuração, isso é natural. Para as outras interfaces, como um componente editor de texto, onde código externo precisa acessar vários conceitos diferentes, isso requer cuidado no projeto.
60 |
61 | ## Funções como namespaces
62 |
63 | Funções são o único construtor em JavaScript que criam um novo escopo. Então se nós desejamos que nossos módulos tenham um escopo próprio, teremos que colocá-los em funções de alguma forma.
64 |
65 | Considere este módulo trivial que associa nomes com o número dos dias da semana retornado pelo método `getDay` de um objeto *date*.
66 |
67 | ```
68 | var names = ["Sunday", "Monday", "Tuesday", "Wednesday",
69 | "Thursday", "Friday", "Saturday"];
70 | function dayName(number) {
71 | return names[number];
72 | }
73 |
74 | console.log(dayName(1));
75 | // → Monday
76 | ```
77 |
78 | A função `dayName` é parte desta interface, mas a variável `names` não. Nós prefirimos não deixá-la no escopo global.
79 |
80 | Podemos fazer isso:
81 |
82 | ```
83 | var dayName = function() {
84 | var names = ["Sunday", "Monday", "Tuesday", "Wednesday",
85 | "Thursday", "Friday", "Saturday"];
86 | return function(number) {
87 | return names[number];
88 | };
89 | }();
90 |
91 | console.log(dayName(3));
92 | // → Wednesday
93 | ```
94 |
95 | Agora `names` é uma variável local dentro de uma função (anônima). Esta função é criada e chamada imediatamente, e seu valor retornado (a função `dayName`) é armazenada em uma variável. Podemos ter páginas e mais páginas de código nessa função, criando centenas de variáveis locais. Elas serão todas internas ao módulo, visíveis ao próprio módulo, mas não visível a códigos externos.
96 |
97 | Um padrão similar é usado para isolar inteiramente código do mundo exterior. O módulo abaixo tem algum efeito, mas não fornece qualquer valor para outros módulos usarem.
98 |
99 | ```
100 | (function() {
101 | function square(x) { return x * x; }
102 | var hundred = 100;
103 |
104 | console.log(square(hundred));
105 | })();
106 | // → 10000
107 | ```
108 |
109 | Este código simplesmente imprime o quadrado de cem (no mundo real, este poderia ser um módulo que adiciona um método a algum prototype, ou configura algum *widget* em uma página da web). Ele encapsula seu código em uma função para, novamente, prevenir que as variáveis que ele usa internamente estejam no escopo global.
110 |
111 | Por que a função namespace está encapsulada em uma par de parênteses? Isso tem relação com um truque da sintaxe JavaScript. Se uma expressão começa com a palavra-chave `function`, ela é uma expressão de função. Entretanto, se uma declaração inicia com esta palavra-chave, será uma declaração de função, que requer um nome e não pode ser chamada imediatamente. Mesmo que uma declaração comece com uma expressão, a segunda regra tem precedência, e se os parênteses extras foram esquecidos no exemplo acima, isso irá produzir um erro de sintaxe. Você pode imaginá-los como um truco para forçar a linguagem a enteder que nós queremos escrever uma expressão.
112 |
113 | ## Objetos como namespaces
114 |
115 | Agora imagine que o módulo dia-da-semana (*day-of-the-week*) precise fornecer não uma, mas duas funções, porque nós adicionamos uma função `dayNumber` que vai de um nome para um número. Nós podemos mais simplesmente retornar a função, mas devemos encapsular as duas funções em um objeto.
116 |
117 | ```
118 | var weekDay = function() {
119 | var names = ["Sunday", "Monday", "Tuesday", "Wednesday",
120 | "Thursday", "Friday", "Saturday"];
121 | return {
122 | name: function(number) { return names[number]; },
123 | number: function(name) { return names.indexOf(name); }
124 | };
125 | }();
126 |
127 | console.log(weekDay.name(weekDay.number("Sunday")));
128 | // → Sunday
129 | ```
130 |
131 | Para módulos maiores, juntar todos os módulos exportados em um objeto no fim da função se torna algo incômodo, e geralmente requer que façamos algo repetido. Isso pode ser melhorado declarando um objeto, usualmente nomeado `exports`, e adicionando propriedades a este objeto sempre que nós definirmos algo que precise ser exportado. Este objeto pode então ser retornado, ou aceito como um parâmetro armazenado em algum lugar pelo código exterior ao módulo.
132 |
133 | ```
134 | (function(exports) {
135 | var names = ["Sunday", "Monday", "Tuesday", "Wednesday",
136 | "Thursday", "Friday", "Saturday"];
137 |
138 | exports.name = function(number) {
139 | return names[number];
140 | };
141 | exports.number = function(name) {
142 | return names.indexOf(name);
143 | };
144 | })(window.weekDay = {});
145 |
146 | console.log(weekDay.name(weekDay.number("Saturday")));
147 | // → Saturday
148 | ```
149 |
150 | ## Removendo do escopo global
151 |
152 | O padrão acima é usado normalmente em módulos JavaScript criados para o navegador. Eles requerem um simples e conhecido nome global, e encapsular seu código em uma função para ter seu namespace privado próprio.
153 |
154 | Ainda existe um problema quando múltiplos módulos reivindicam o mesmo nome, ou quando você quer, por qualquer motivo, carregar duas versões do mesmo módulo de forma conjunta.
155 |
156 | Com um pequeno encanamento, nós podemos criar um sistema que permite que aos módulos requerirem diretamente por interfaces de objetos de outros módulos que eles precisem de acessar, sem precisarmos usar o escopo global. Isso resolve os problemas mencionados acima e tem um benefício adicional de ser explícito sobre suas dependências, tornando difícil usar acidentalmente algum módulo sem declarar que você precisa dele.
157 |
158 | Nosso objetivo é uma função 'require' que, quando dado o nome de um módulo, vai carregar esse arquivo (do disco ou da web, dependendo da plataforma que estivermos rodando), e retornar o valor apropriado da interface.
159 |
160 | Para isso nós precisamos de pelo menos duas coisas. Primeiramente, nós vamos imaginar que temos uma função `readFile` (que não está presente por padrão no JavaScript), que retorna o conteúdo do arquivo com um nome fornecido. Existem formas de acessar a web com JavaScript no navegador, e acessar o disco rígido com outras plataformas JavaScript, mas elas são mais envolvidas. Por agora, nós apenas pretendemos desta simples função.
161 |
162 | Em segundo lugar, nós precisamos de ser capazes, quando tivermos uma string contendo o código (lida do arquivo), de realmente executar o código como um programa JavaScript.
163 |
164 | ## Avaliando dados como código
165 |
166 | Existem várias formas de se pegar dados (uma `string` de código) e rodá-los no contexto do programa atual.
167 |
168 | A mais óbvia maneira é o operador padrão especial `eval`, que vai executar a string de código no escopo atual. Isso usualmente é uma ideia muito ruim, porque quebra algumas propriedades que escopos normalmente tem (ser isolado do mundo externo é a mais notável).
169 |
170 | ```
171 | function evalAndReturnX(code) {
172 | eval(code);
173 | return x;
174 | }
175 |
176 | console.log(evalAndReturnX("var x = 2"));
177 | // → 2
178 | ```
179 |
180 | A melhor forma de converter dados dentro do programa é usar uma função construtora. Ela recebe como argumentos uma lista de nomes de argumentos separados por vírgula, e então uma string contendo o corpo da função.
181 |
182 | ```
183 | var plusOne = new Function("n", "return n + 1;");
184 | console.log(plusOne(4));
185 | // → 5
186 | ```
187 |
188 | Isso é precisamente o que precisamos - podemos encapsular o código para um módulo em uma função, com este escopo de função se tornando nosso escopo de módulo.
189 |
190 | ## Require
191 |
192 | Se a nova função construtora, usada pelo nosso módulo de carregamento, encapsula o código em uma função de qualquer forma, nós podemos omitir a função *namespace* encapsuladora atual dos arquivos. Nós também vamos fazer `exports` um argumento à função módulo, então o módulo não precisará de declarar isso. Isso remove um monte de barulho supérfluo do nosso módulo de exemplo:
193 |
194 | ```
195 | var names = ["Sunday", "Monday", "Tuesday", "Wednesday",
196 | "Thursday", "Friday", "Saturday"];
197 |
198 | exports.name = function(number) {
199 | return names[number];
200 | };
201 | exports.number = function(name) {
202 | return names.indexOf(name);
203 | };
204 | ```
205 |
206 | Essa é uma implementação mínima de `require`:
207 |
208 | ```
209 | function require(name) {
210 | var code = new Function("exports", readFile(name));
211 | var exports = {};
212 | code(exports);
213 | return exports;
214 | }
215 |
216 | console.log(require("weekDay").name(1));
217 | // → Monday
218 | ```
219 |
220 | Quando usando este sistema, um módulo tipicamente começa com pequenas declarações de variáveis que carregam os módulos que ele precisa.
221 |
222 | ```
223 | var weekDay = require("weekDay");
224 | var today = require("today");
225 |
226 | console.log(weekDay.name(today.dayNumber()));
227 | ```
228 |
229 | A implementação de require acima tem diversos problemas. Primeiro, ela vai carregar e rodar um módulo todas as vezes que este for "require-d" (requisitado), então se diversos módulos têm a mesma dependência, ou uma chamada require é colocada dentro de uma função que vai ser chamada múltiplas vezes, tempo e energia serão disperdiçados.
230 |
231 | Isso pode ser resolvido armazenando os módulos que já tenham sido carregados em um objeto, e simplesmente retornando o valor existente se eles forem carregados novamente.
232 |
233 | O segundo problema é que não é possível para um módulo expor diretamente um valor simples. Por exemplo, um módulo pode querer exportar apenas o construtor do tipo do objeto que ele define. Por agora, isso não pode ser feito, porque `require` sempre vai usar o objeto `exports` que ele cria como o valor exportado.
234 |
235 | A solução tradicional para isso é fornecer outra variável, `module`, que é um objeto que tem a propriedade `exports`. Essa propriedade inicialmente aponta para o objeto vazio criado por require, mas pode ser sobrescrita com outro valor para exportar algo a mais.
236 |
237 | ```
238 | function require(name) {
239 | if (name in require.cache)
240 | return require.cache[name];
241 |
242 | var code = new Function("exports, module", readFile(name));
243 | var exports = {}, mod = {exports: exports};
244 | code(exports, mod);
245 |
246 | require.cache[name] = module.exports;
247 | return module.exports;
248 | }
249 | require.cache = Object.create(null);
250 | ```
251 |
252 | Agora temos um sistema de módulo que usa uma simples variável global (`require`) para permitir que módulos encontrem e usem um ao outro sem ter que ir para o escopo global.
253 |
254 | Este estilo de sistema de módulos é chamado "Módulos CommonJS", após o pseudo-padrão que o implementou pela primeira vez. Ele também é feito dentro do Node.js. Implementações reais fazem bem mais do que o exemplo que eu mostrei. Mais importante, eles tem uma forma muito mais inteligente de ir de um nome de módulo para uma parte de código real, permitindo ambos caminhos relativos e nomes de módulos registrados "globalmente".
255 |
256 | ## Carregando módulos lentamente
257 |
258 | Embora seja possível usar a técnica acima para carregar JavaScript no navegador, isso é um pouco complicado. A razão para isso é que ler um arquivo (módulo) na web é muito mais lento que ler este mesmo arquivo do seu disco rígido. JavaScript no navegador é obrigado a se comportar de tal forma que, enquanto um script esteja rodando, nada mais pode acontecer no site que ele está rodando. Isso significa que se todas as chamadas `require` carregarem algo em algum servidor web distante, a página vai ficar congelada por um doloroso longo período durante sua inicialização.
259 |
260 | Existem maneiras de se trabalhar isso, por exemplo, rodando outro programa (como o Browserify) em seu programa antes, que irá concatenar todas as dependências olhando todas as chamadas `require`, e colocando-as em juntas em um grande arquivo.
261 |
262 | Outra solução é encapsular seu módulo em uma função, carregar os módulos que ela depende em segundo plano, e apenas rodas essa função quando todas suas dependências forem carregadas. Isso é o que o sistema de módulos AMD ("Asynchronous Module Definition") faz.
263 |
264 | Nosso programa trivial com dependências, em AMD, se parece com isso:
265 |
266 | ```
267 | define(["weekDay", "today"], function(weekDay, today) {
268 | console.log(weekDay.name(today.dayNumber()));
269 | });
270 | ```
271 |
272 | A função `define` é o conceito central nessa abordagem. Ela primeiro recebe um array com nomes de módulos, e então uma função que recebe um argumento para cada dependência. Ela vai carregar as dependências (se elas ainda não tiverem sido carregadas) em segundo plano, permitindo que a página continue a trabalhar em quanto está esperando. Uma vez que todas as dependências estejam carregadas, ela vai carregar a função que foi passada, com as interfaces das dependências como argumentos.
273 |
274 | Os módulos que são carregados dessa forma devem conter uma chamada a `define`. O valor usado para sua interface é qualquer valor retornado pela função que é o segundo argumento passado nessa chamada. Aqui está o módulo `weekDay` de novo.
275 |
276 | ```
277 | define([], function() {
278 | var names = ["Sunday", "Monday", "Tuesday", "Wednesday",
279 | "Thursday", "Friday", "Saturday"];
280 | return {
281 | name: function(number) { return names[number]; },
282 | number: function(name) { return names.indexOf(name); }
283 | };
284 | });
285 | ```
286 |
287 | Para mostrar uma simples implementação de `define`, vamos supor que também temos uma função `backgroundReadFile`, que pega o nome do arquivo e uma função, e vai chamar a função com o conteúdo do arquivo assim que este for carregado.
288 |
289 | ```
290 | function define(depNames, moduleFunction) {
291 | var deps = [], myMod = define.currentModule;
292 |
293 | depNames.forEach(function(name) {
294 | if (name in define.cache) {
295 | var depMod = define.cache[name];
296 | } else {
297 | var depMod = {exports: null,
298 | loaded: false,
299 | onLoad: []};
300 | define.cache[name] = depMod;
301 | backgroundReadFile(name, function(code) {
302 | define.currentModule = depMod;
303 | new Function("", code)();
304 | });
305 | }
306 | deps.push(depMod);
307 | if (!depMod.loaded)
308 | depMod.onLoad.push(runIfDepsLoaded);
309 | });
310 |
311 | function runIfDepsLoaded() {
312 | if (!deps.every(function(m) { return m.loaded; }))
313 | return;
314 |
315 | var args = deps.map(function(m) { return m.exports; });
316 | var exports = moduleFunction.apply(null, args);
317 | if (myMod) {
318 | myMod.exports = exports;
319 | myMod.loaded = true;
320 | myMod.onLoad.every(function(f) { f(); });
321 | }
322 | }
323 | runIfDepsLoaded();
324 | }
325 | define.cache = Object.create(null);
326 | ```
327 |
328 | Isso é muito mais difícil de seguir que a função `require`. Sua execução não segue um caminho simples e previsível. Ao invés disso, múltiplas operações são definidas para acontecerem em algum tempo não especificado no futuro (quando o módulo for carregado), que obscurece a forma que o código é executado.
329 |
330 | O maior problema que este código lida é coletar os valores das interfaces das dependências do módulo. Para rastrear os módulos, e seus estados, um objeto é criado para cada módulo que é carregado por `define`. Este objeto armazena o valor exportado pelo módulo, um booleano indicando se o módulo já foi completamente carregado e um array de funções para ser chamado quando o módulo tiver sido carregado.
331 |
332 | Um *cache* é usado para prevenir o carregamento de módulos múltiplas vezes, assim como fizemos para o `require`. Quando `define` é chamada, nós primeiro construímos um array de módulos de objetos que representam as dependências deste módulo. Se o nome da dependência corresponde com o nome de um módulo *cacheado*, nós usamos o objeto existente. Caso contrário, nós criamos um novo objeto (com o valor de `loaded` igual a `false`) e armazenamos isso em cache. Nós também começamos a carregar o módulo, usando a função `backgroundReadFile`. Uma vez que o arquivo tenha sido carregado, seu conteúdo é rodado usando o construtor `Function`.
333 |
334 | É assumido que este arquivo também contenha uma (única) chamada a `define`. A propriedade `define.currentModule` é usada para informar a esta chamada sobre o módulo objeto que está sendo carregado atualmente, dessa forma podemos atualizá-lo umas vez e terminar o carregamento.
335 |
336 | Isso é manipulado na função `runIfDepsLoaded`, que é chamada uma vez imediatamente (no caso de não ser necessário carregar nenhuma dependência) e uma vez para cada dependência que termina seu carregamento. Quando todas as dependências estão lá, nós chamamos `moduleFunction`, passando para ela os valores exportados apropriados. Se existe um módulo objeto, o valor retornado da função é armazenado, o objeto é marcado como carregado (*loaded*), e as funções em seu array `onLoad` são chamadas. Isso vai notificar qualquer módulo que esteja esperando que suas dependências sejam carregadas completamente.
337 |
338 | Uma implementação real do AMD é, novamente, bem mais inteligente em relação a resolução dos nomes e suas URLs, e genericamente mais robusta. O projeto RequireJS (http://requirejs.org) fornece uma implementação popular deste estilo que carregamento de módulos.
339 |
340 | ## Projeto de interfaces
341 |
342 | Projetar interfaces para módulos e tipos de objeto é um dos aspectos sutis da programação. Qualquer pedaço não-trivial de funcionalidade pode ser modelada de formas diferentes. Encontrar um caminho que funciona bem requer perspicácia e previdência.
343 |
344 | A melhor forma de aprender o valor de um bom projeto de interface é usar várias interfaces, algumas boas, algumas horríveis. Experiência vai ensinar a você o que funciona e o que não funciona. Nunca assuma que uma interface dolorosa de se usar é "da forma que ela deve ser". Conserte-a, ou encapsule-a em uma nova interface de forma que funcione melhor para você.
345 |
346 | ### Previsilibidade
347 |
348 | Se programadores podem prever a forma que a interface vai funcionar, eles (ou você) não vão ser desviados frequentemente pela necessidade de checar como trabalhar com esta interface. Portanto, tente seguir convenções (por exemplo, quando se trata da capitalização de nomes). Quando existe outro módulo ou parte do ambiente padrão JavaScript que faz algo similar ao que você está implementando, é uma boa ideia fazer sua interface se assemelhar a interface existente. Dessa forma, as pessoas que conhecem a interface existente vão se sentir em casa.
349 |
350 | Outra área que previsibilidade é importante é no comportamento do seu código. Pode ser tentador "empilhar inteligência" com a justificativa que isso torna a interface fácil de ser utilizada. Por exemplo, aceitando todos os diferentes tipos e combinações de argumentos, e fazendo "a coisa certa" para todos eles, ou fornecendo dezenas de diferentes funções especializadas por "conveniência" que fornecem pequenas alterações do sabor da funcionalidade do seu módulo. Isso pode tornar o código construído em cima da sua interface um pouco menor, mas isso vai também tornar o código muito mais difícil para as pessoas manterem um modelo mental do comportamento do módulo em suas cabeças.
351 |
352 | ### "Componibilidade"
353 |
354 | Em suas interfaces, tente usar as estruturas de dados mais simples que funcionem e crie funções que façam algo simples e claro - sempre que possível, crie funções puras (veja capítulo 3).
355 |
356 | Por exemplo, não é comum para módulos fornecerem suas próprias coleções de objetos similares a arrays, com sua própria interface para contar e extrair elementos. Tais objetos não terão os métodos `map` e `forEach`, e qualquer função existente que espere um array real não será capaz de trabalhar com estas coleções. Este é um exemplo de componibilidade (*composability*) ruim - o módulo não pode ser facilmente composto com outro código.
357 |
358 | Outro exemplo seria um módulo verificação ortográfica de texto, que podemos necessitar se quisermos escrever um editor de texto. O verificador pode ser construído para funcionar diretamente em qualquer tipo complexo de estrutura de dados que o editor usa, e chamar funções internas diretamente no editor para que o usuário possa escolher entre as sugestões de ortografia. Se formos por esse caminho, o módulo não poderá ser usado com outros programas. De outra forma, se nós definirmos a interface do verificador ortográfico para que possamos passar simples strings e retornar a possível localização do erro, juntamente com um array de correções sugeridas, nós teremos uma interface que pode ser composta com outros sistemas, porque strings e arrays estarão sempre disponíveis.
359 |
360 | ### Interfaces em camadas
361 |
362 | Quando projetando uma interface para uma complexa parte de funcionalidade - digo, enviar email - você geralmente se depara com um dilema. Em uma mão, você não quer sobrecarregar o usuário da sua interface com detalhes. Ele não deve estudar sua interface por 20 minutos antes de ser capaz de enviar um email. Na outra mão, você não quer esconder todos os detalhes - quando pessoas precisam fazer coisas complicadas com seu moulo, eles também devem ser capazes.
363 |
364 | Normalmente a solução é oferecer duas interfaces: uma de "baixo nível" detalhada para situações complexas e uma de "alto nível" simples para uso rotineiro. A segunda pode ser construída de forma simples utilizando as ferramentas fornecidas pela primeira camada. No módulo de email, a interface de alto nível pode simplesmente ser uma função que recebe uma mensagem, um endereço de remetente, um endereço de destinatário e envia o email. A interface de baixo nível deve permitir um controle completo sobre os cabeçalhos do email, anexos, envio de email HTML, e por ai vai.
365 |
366 | ## Resumo
367 |
368 | Módulos fornecem estrutura para programas grandes, separando o código em diferentes arquivos e *namespaces*. Dando a estes módulos interfaces bem definidas os tornam fáceis de se utilizar, reusando-os em contextos diferentes, e continuando os usando mesmo quando evoluem.
369 |
370 | Mesmo que a linguagem JavaScript não auxilie muito quando se trata de módulos, as flexíveis funções e objetos que ela fornece fazem que seja possível definir úteis sistemas de módulo. Escopo de função pode ser utilizado como namespace interno para o módulo, e objetos podem ser usados para armazenar blocos de valores exportados.
371 |
372 | Existem duas abordagens populares para tais módulos. Uma é chamada "Módulos CommonJS", e funciona em torno da função `require` que busca um módulo pelo seu nome e retorna sua interface. A outra abordagem é chamada "AMD", e usa a função assíncrona `define` que recebe um array de nome de módulos e uma função, e depois de carregar os módulos, roda a função com suas interfaces e argumentos.
373 |
374 | ## Exercícios
375 |
376 | ### Nomes dos meses
377 |
378 | Escreva um simples módulo similar ao módulo `weekDay`, que pode converter os números dos meses (*zero-based*, assim como o tipo `Date`) para nomes, e nomes para números. Dê a este módulo seu próprio namespace, pois ele vai precisar de um array interno com o nome dos meses, mas use JavaScript puro, sem nenhum sistema de carregamento de módulos.
379 |
380 | ```
381 | // Your code here.
382 |
383 | console.log(month.name(2));
384 | // → March
385 | console.log(month.number("November"));
386 | // → 10
387 | ```
388 |
389 | Ele vai seguir o módulo weekDay praticamente por inteiro. Uma função anônima, chamada imediatamente, encapsula a variável que contém o array de nomes, assim como as duas funções que precisam ser exportadas. As funções são colocadas em um objeto. A interface de objeto retornada é armazenada na variável `month`.
390 |
391 | ### Dependências circulares
392 |
393 | Um assunto complicado na gestão de dependências é o de dependências circulares, onde módulo A depende do módulo B, e B também depende do módulo A. Muitos sistemas simplesmente proibem isso. CommonJS permite uma forma limitada disso, onde isso funciona se os módulos não trocarem seus objetos exportados por padrão com outro valor, e somente começam a acessar a interface um do outro após terem finalizados seus carregamentos.
394 |
395 | Você pode pensar em algo que dê suporte para essa funcionalidade ser implementada? Olhe anteriormente a definição de `require`, e considere o quê você deve fazer para permitir isso.
396 |
397 | O segredo é adicionar o objeto `exports` criado por um módulo para requisitar o cache antes de rodar o módulo de fato. Isso significa que o módulo não teria tido ainda uma chance de sobrescrever `module.exports`, então não sabemos se ele deseja exportar outro valor. Depois de carregar, o objeto cache é sobrescrito com `module.exports`, que pode ser um valor diferente.
398 |
399 | Mas se, no curso de carregar o módulo, um segundo módulo é carregado e solicita o primeiro módulo, seu objeto `exports` padrão, ainda vazio até este ponto, vai estar no cache, e o segundo módulo vai receber uma referência dele. Se ele não tentar fazer nada com o objeto até que o segundo módulo tenha terminado seu carregamento, as coisas vão funcionar.
400 |
401 | ### Um retorno a vida eletrônica
402 |
403 | Esperando que o capítulo 7 ainda esteja um pouco fresco em sua mente, pense novamente no sistema projetado neste capítulo e elabore um separação em módulo para o código. Para refrescar sua memória, essas são as funções e tipos definidos naquele capítulo, em ordem de aparição.
404 |
405 | - Point
406 | - Grid
407 | - directions
408 | - randomElement
409 | - BouncingCritter
410 | - elementFromChar
411 | - World
412 | - charFromElement
413 | - Wall
414 | - View
415 | - directionNames
416 | - WallFollower
417 | - dirPlus
418 | - LifeLikeWorld
419 | - Plant
420 | - PlantEater
421 | - SmartPlantEater
422 | - Tiger
423 |
424 | Não exagere em criar muitos módulos. Um livro que começa um novo capítulo para cada página provavelmente vai te deixar nervoso, por todo espaço perdido com os títulos. De forma similar, ter que abrir dez arquivos para ler um pequeno projeto não é útil. Vise por três ou cinco módulos.
425 |
426 | Você pode escolher ter algumas funções internas ao módulo, e então inacessíveis a outros módulos.
427 |
428 | Não existe uma única solução correta aqui. Organização de módulos é meramente uma questão de gosto.
429 |
430 | Aqui está o que eu fiz. Coloquei parenteses em torno de funções internas.
431 |
432 | - Module "grid"
433 | + Point
434 | + Grid
435 | + directions
436 | - Module "world"
437 | + (randomElement)
438 | + (elementFromChar)
439 | + (charFromElement)
440 | + View
441 | + World
442 | + LifeLikeWorld
443 | + directions [re-exported]
444 | - Module "simple_ecosystem"
445 | + (randomElement) [duplicated]
446 | + (directionNames)
447 | + (dirPlus)
448 | + Wall
449 | + BouncingCritter
450 | + WallFollower
451 | - Module "ecosystem"
452 | + Wall [duplicated]
453 | + Plant
454 | + PlantEater
455 | + SmartPlantEater
456 | + Tiger
457 |
458 | Eu reexportei o array `directions` do módulo `grid` para `world`, então módulos criados com eles (`ecosystems`) não precisam de saber ou se preocupar da existência do módulo `grid`.
459 |
460 | Eu também dupliquei dois valores minúsculos e genéricos (`randomElement` e `Wall`) pois eles são usados como detalhes internos em contextos diferentes, e não pertencem nas interfaces destes módulos.
461 |
--------------------------------------------------------------------------------