-
Notifications
You must be signed in to change notification settings - Fork 76
Expand file tree
/
Copy path02_program_structure.html
More file actions
512 lines (330 loc) · 65.3 KB
/
Copy path02_program_structure.html
File metadata and controls
512 lines (330 loc) · 65.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Estructura del Programa :: Eloquent JavaScript</title>
<link rel=stylesheet href="css/ejs.css"><script>
var page = {"type":"chapter","number":2}</script></head>
<article>
<nav><a href="01_values.html" title="previous chapter" aria-label="previous chapter">◂</a> <a href="index.html" title="cover" aria-label="cover">●</a> <a href="03_functions.html" title="next chapter" aria-label="next chapter">▸</a> <button class=help title="help" aria-label="help"><strong>?</strong></button>
</nav>
<h1>Estructura del Programa</h1>
<blockquote>
<p><a class="p_ident" id="p-qP+4WumZIz" href="#p-qP+4WumZIz" tabindex="-1" role="presentation"></a>Y mi corazón brilla de color rojo intenso bajo mi diáfana y translúcida piel, y tienen que administrarme 10cc de JavaScript para traerme de vuelta. —Tolero bien las toxinas en la sangre. ¡Amigo, esa cosa sería capaz hasta de sacarte un melocotón atorado en las branquias!</p>
<footer>_why, <cite>La (Conmovedora) Guía de Ruby de Why</cite></footer>
</blockquote><figure class="chapter framed"><img src="img/chapter_picture_2.jpg" alt="Ilustración que muestra varios tentáculos sujetando piezas de ajedrez"></figure>
<p><a class="p_ident" id="p-uqRM4ZM/cN" href="#p-uqRM4ZM/cN" tabindex="-1" role="presentation"></a>En este capítulo, vamos a empezar a hacer cosas que realmente podrían llamarse <em>programación</em>. Ampliaremos nuestro dominio del lenguaje JavaScript más allá de los sustantivos y fragmentos de oraciones que hemos visto hasta ahora, hasta el punto en que podamos expresar prosa significativa.</p>
<h2><a class="h_ident" id="h-oqfl+ptPGG" href="#h-oqfl+ptPGG" tabindex="-1" role="presentation"></a>Expresiones y declaraciones</h2>
<p><a class="p_ident" id="p-wp0fJOzSaK" href="#p-wp0fJOzSaK" tabindex="-1" role="presentation"></a>En el <a href="01_values.html">Capítulo 1</a> hemos creado valores y les hemos aplicado operadores para obtener nuevos valores. Crear valores de esta manera es la esencia principal de cualquier programa de JavaScript. Pero esa esencia debe enmarcarse en una estructura más grande para ser de utilidad. Eso es lo que vamos a cubrir en este capítulo.</p>
<p><a class="p_ident" id="p-ZOiJ36tTUi" href="#p-ZOiJ36tTUi" tabindex="-1" role="presentation"></a>Un trozo de código que produce un valor se llama una <em>expresión</em>. Cada valor escrito literalmente (como <code>22</code> o <code>"psicoanálisis"</code>) es una expresión. Una expresión entre paréntesis también es una expresión, al igual que un operador binario aplicado a dos expresiones o un operador unario aplicado a una.</p>
<p><a class="p_ident" id="p-UqOwwtmeFY" href="#p-UqOwwtmeFY" tabindex="-1" role="presentation"></a>Esto muestra parte de la belleza de una interfaz basada en un lenguaje. Las expresiones pueden contener otras expresiones de manera similar a cómo las oraciones están anidadas en el lenguaje humano —una oración puede contener sus propias oraciones y así sucesivamente. Esto nos permite construir expresiones que describen cálculos arbitrariamente complejos.</p>
<p><a class="p_ident" id="p-ZVBoR+/oNP" href="#p-ZVBoR+/oNP" tabindex="-1" role="presentation"></a>Si una expresión corresponde a un fragmento de oración, una <em>declaración</em> (o sentencia, o instrucción) de JavaScript corresponde a una oración completa. Un programa es una lista de declaraciones.</p>
<p><a class="p_ident" id="p-VEI0X64AX2" href="#p-VEI0X64AX2" tabindex="-1" role="presentation"></a>El tipo más simple de declaración es una expresión con un punto y coma al final. Esto es un programa:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-hjwmfcgDR0" href="#c-hjwmfcgDR0" tabindex="-1" role="presentation"></a><span class="tok-number">1</span>;
!false;</pre>
<p><a class="p_ident" id="p-QL6KXOoBJm" href="#p-QL6KXOoBJm" tabindex="-1" role="presentation"></a>Aunque es un programa inútil. Una expresión puede conformarse con simplemente producir un valor, que luego podrá ser utilizado por el código que la contiene. Sin embargo, una declaración es autónoma, por lo que, si no afecta al mundo, es inútil. Puede mostrar algo en la pantalla, como con <code>console.log</code>, o cambiar el estado de la máquina de una manera que afectará a las declaraciones que vienen después de ella. Estos cambios se llaman <em>efectos secundarios</em>. Las declaraciones en el ejemplo anterior simplemente producen los valores <code>1</code> y <code>verdadero</code>, y luego los desecha inmediatamente. Esto no deja huella alguna en el mundo. Cuando ejecutas este programa no sucede nada observable.</p>
<p><a class="p_ident" id="p-dbde+JAl0p" href="#p-dbde+JAl0p" tabindex="-1" role="presentation"></a>A veces, JavaScript te permite omitir el punto y coma al final de una declaración. Otras veces, debe estar ahí, o, si no, la próxima línea se tratará como parte de la misma declaración. Las reglas sobre cuándo se puede omitir de manera segura son algo complejas y propensas a causar errores. Por lo tanto, en este libro vamos a ponerle un punto y coma a cada declaración que lo necesite. Te recomiendo que hagas lo mismo, al menos hasta que aprendas más sobre las sutilezas que conlleva la omisión del punto y coma.</p>
<h2><a class="h_ident" id="h-MCmlRffKOG" href="#h-MCmlRffKOG" tabindex="-1" role="presentation"></a>Enlaces</h2>
<p><a class="p_ident" id="p-38bl8CNA5y" href="#p-38bl8CNA5y" tabindex="-1" role="presentation"></a>¿Cómo mantiene un programa un estado interno? ¿Cómo recuerda las cosas? Hemos visto cómo producir nuevos valores a partir de valores antiguos, pero esto no modifica los valores originales. Además, el nuevo valor debe utilizarse inmediatamente o desaparecerá tan pronto aparezca. Para atrapar y retener valores, JavaScript nos da algo llamado <em>asociación</em>, o <em>enlace</em>, o <em>variable</em>:</p>
<div class="translator-note"><p><strong>N. del T.:</strong> El uso de la palabra <strong>variable</strong> para denotar este concepto es muy común, aunque puede llegar a resultar confusa. En la versión original de este libro, el autor elige usar la palabra <strong>bind</strong> en lugar de <strong>variable</strong> para referirse a estas entidades. Nosotros haremos lo mismo utilizando la palabra <strong>asociación</strong>, aunque, en ocasiones, también se usará la palabra <strong>enlace</strong> o <strong>asignación</strong>. Rara vez usaremos la palabra <strong>variable</strong>, que se reservará en general para un tipo concreto de enlace. Veremos más sobre las diferencias entre cada tipo de asociación en este y el <a href="functions">siguiente capítulo</a></p>
</div>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-aT9yLxdY/V" href="#c-aT9yLxdY/V" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">caught</span> = <span class="tok-number">5</span> * <span class="tok-number">5</span>;</pre>
<p><a class="p_ident" id="p-X/x/ckvx7F" href="#p-X/x/ckvx7F" tabindex="-1" role="presentation"></a>Eso nos da un segundo tipo de declaración. La palabra clave (<em>keyword</em>) <code>let</code> indica que esta frase va a definir una variable (o asociación). Está seguida por el nombre de la variable y, si queremos darle inmediatamente un valor, por un operador <code>=</code> y una expresión.</p>
<p><a class="p_ident" id="p-AT3mFhUtnW" href="#p-AT3mFhUtnW" tabindex="-1" role="presentation"></a>En el ejemplo se crea una asociación llamada <code>caught</code> y se utiliza para capturar el número que se produce al multiplicar 5 por 5.</p>
<p><a class="p_ident" id="p-K3pByXEqHE" href="#p-K3pByXEqHE" tabindex="-1" role="presentation"></a>Después de que se haya definido una asociación, su nombre se puede usar como una expresión. El valor de esa expresión es el valor que la asociación guarda actualmente. Aquí tienes un ejemplo:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-FfLIqaoaFx" href="#c-FfLIqaoaFx" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">ten</span> = <span class="tok-number">10</span>;
console.log(ten * ten);
<span class="tok-comment">// → 100</span></pre>
<p><a class="p_ident" id="p-2GPt2tymia" href="#p-2GPt2tymia" tabindex="-1" role="presentation"></a>Cuando una asociación apunta a un valor, eso no significa que esté atada a ese valor para siempre. El operador <code>=</code> se puede usar en cualquier momento en asociaciones existentes para desconectarlas de su valor actual y hacer que apunten a uno nuevo:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-FiZBrHz3CX" href="#c-FiZBrHz3CX" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">mood</span> = <span class="tok-string">"light"</span>;
console.log(mood);
<span class="tok-comment">// → light</span>
mood = <span class="tok-string">"dark"</span>;
console.log(mood);
<span class="tok-comment">// → dark</span></pre>
<p><a class="p_ident" id="p-F8iWo5Sq8i" href="#p-F8iWo5Sq8i" tabindex="-1" role="presentation"></a>Debes imaginarte las asociaciones como tentáculos más que como cajas. No <em>contienen</em> valores; los <em>agarran</em> —dos asociaciones pueden hacer referencia al mismo valor. Un programa solo puede acceder a los valores a los que todavía tiene una referencia. Cuando necesitas recordar algo, o bien haces crecer un nuevo tentáculo para agarrarlo o lo reconectas con uno de tus tentáculos existentes.</p>
<p><a class="p_ident" id="p-rQptflTqgB" href="#p-rQptflTqgB" tabindex="-1" role="presentation"></a>Veamos otro ejemplo. Para recordar la cantidad de dólares que Luigi todavía te debe, creas una asociación. Cuando te paga $35, le das a esta asociación un nuevo valor:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-UpFQBNACng" href="#c-UpFQBNACng" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">luigisDebt</span> = <span class="tok-number">140</span>;
luigisDebt = luigisDebt - <span class="tok-number">35</span>;
console.log(luigisDebt);
<span class="tok-comment">// → 105</span></pre>
<p><a class="p_ident" id="p-frevBaVx3D" href="#p-frevBaVx3D" tabindex="-1" role="presentation"></a>Cuando defines una asociación sin darle un valor, el tentáculo no tiene nada que agarrar, por lo que termina en el aire. Si solicitas el valor de un enlace vacío, obtendrás el valor <code>undefined</code>.</p>
<p><a class="p_ident" id="p-i2sMZlYPHm" href="#p-i2sMZlYPHm" tabindex="-1" role="presentation"></a>Una sola instrucción <code>let</code> puede definir múltiples asociaciones. Las definiciones deben estar separadas por comas:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-pT4pqev8kx" href="#c-pT4pqev8kx" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">one</span> = <span class="tok-number">1</span>, <span class="tok-definition">two</span> = <span class="tok-number">2</span>;
console.log(one + two);
<span class="tok-comment">// → 3</span></pre>
<p><a class="p_ident" id="p-8J5hlJwJL/" href="#p-8J5hlJwJL/" tabindex="-1" role="presentation"></a>Las palabras <code>var</code> y <code>const</code> también se pueden usar para crear asociaciones de manera similar a como lo hace <code>let</code>:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-MMmzlomlXC" href="#c-MMmzlomlXC" tabindex="-1" role="presentation"></a><span class="tok-keyword">var</span> <span class="tok-definition">name</span> = <span class="tok-string">"Ayda"</span>;
<span class="tok-keyword">const</span> <span class="tok-definition">greeting</span> = <span class="tok-string">"Hola "</span>;
console.log(greeting + name);
<span class="tok-comment">// → Hola Ayda</span></pre>
<p><a class="p_ident" id="p-MRfMa48ppd" href="#p-MRfMa48ppd" tabindex="-1" role="presentation"></a>La primera de estas, <code>var</code> (abreviatura de “variable”), es la forma en que se declaraban las asociaciones en JavaScript anterior a 2015, cuando aún no existía <code>let</code>. Veremos la forma precisa en que difiere de <code>let</code> en el <a href="03_functions.html">próximo capítulo</a>. Por ahora, recuerda que en su mayoría hace lo mismo, pero rara vez la usaremos en este libro porque se comporta de manera extraña en algunas situaciones.</p>
<p><a class="p_ident" id="p-De7FCWnS3+" href="#p-De7FCWnS3+" tabindex="-1" role="presentation"></a>La palabra <code>const</code> significa <em>constante</em>. Define una asociación constante, que apunta al mismo valor mientras exista. Esto es útil para asociaciones que solo dan un nombre a un valor de manera que más tarde puedas referirte fácilmente a él.</p>
<h2><a class="h_ident" id="h-FHPw62JANA" href="#h-FHPw62JANA" tabindex="-1" role="presentation"></a>Nombres de enlaces</h2>
<p><a class="p_ident" id="p-zmdNm4zBdm" href="#p-zmdNm4zBdm" tabindex="-1" role="presentation"></a>Los nombres de asociaciones o enlaces pueden ser cualquier secuencia de una o más letras. Podemos incluir dígitos como parte del nombre de un enlace —<code>catch22</code> es un nombre válido, por ejemplo—, siempre y cuando el nombre no empiece por uno de ellos. Un nombre de enlace puede incluir signos de dólar (<code>$</code>) o subrayados (<code>_</code>), pero ningún otro carácter especial o signo de puntuación.</p>
<p><a class="p_ident" id="p-twMqL1Xqqf" href="#p-twMqL1Xqqf" tabindex="-1" role="presentation"></a>Cualquier palabra con un significado especial, como <code>let</code>, es una <em>palabra clave</em>, y no puede ser usada como nombre de una asociación. También hay una serie de palabras que están “reservadas para su uso” en futuras versiones de JavaScript, las cuales tampoco se pueden usar como nombres de asociaciones. La lista completa de palabras clave y palabras reservadas es bastante larga:</p>
<pre class="snippet" data-language="null" ><a class="c_ident" id="c-7BGolnv7qC" href="#c-7BGolnv7qC" tabindex="-1" role="presentation"></a>break case catch class const continue debugger default
delete do else enum export extends false finally for
function if implements import interface in instanceof let
new package private protected public return static super
switch this throw true try typeof var void while with yield</pre>
<p><a class="p_ident" id="p-X1tpMP4uiz" href="#p-X1tpMP4uiz" tabindex="-1" role="presentation"></a>No te entretengas en memorizar esta lista. Simplemente, cuando al crear una asociación se produzca un error de sintaxis inesperado, comprueba si estás intentando definir una palabra reservada.</p>
<h2><a class="h_ident" id="h-QDYVZFuV/L" href="#h-QDYVZFuV/L" tabindex="-1" role="presentation"></a>El entorno</h2>
<p><a class="p_ident" id="p-K18DlGgInQ" href="#p-K18DlGgInQ" tabindex="-1" role="presentation"></a>La colección de enlaces y sus valores que existen en un momento dado se llama <em>entorno</em>. Cuando un programa se inicia, este entorno no está vacío. Siempre contiene enlaces que forman parte del estándar del lenguaje, y la mayoría de las veces también tiene enlaces que proporcionan formas de interactuar con el sistema circundante. Por ejemplo, en un navegador, existen funciones para interactuar con el sitio web cargado actualmente y para leer la entrada del ratón y el teclado.</p>
<h2><a class="h_ident" id="h-H0l5He7QIh" href="#h-H0l5He7QIh" tabindex="-1" role="presentation"></a>Funciones</h2>
<p><a class="p_ident" id="p-Ic41DcsHv8" href="#p-Ic41DcsHv8" tabindex="-1" role="presentation"></a>Muchos de los valores proporcionados en el entorno predeterminado tienen el tipo <em>función</em>. Una función es un fragmento de programa encapsulado en un valor. Estos valores pueden ser <em>aplicados</em> para ejecutar el programa encapsulado. Por ejemplo, en un entorno de navegador, el enlace <code>prompt</code> contiene una función que muestra un pequeño cuadro de diálogo pidiendo la entrada del usuario. Se utiliza de la siguiente manera:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-QSUssd4nHv" href="#c-QSUssd4nHv" tabindex="-1" role="presentation"></a>prompt(<span class="tok-string">"Enter passcode"</span>);</pre><figure><img src="img/prompt.png" alt="Un cuadro de diálogo que dice 'Enter passcode'"></figure>
<p><a class="p_ident" id="p-ndYtFXmH+W" href="#p-ndYtFXmH+W" tabindex="-1" role="presentation"></a>Ejecutar una función es lo que se conoce como <em>invocar</em>, <em>llamar</em>, o <em>aplicar</em> la función. Puedes llamar a una función poniendo paréntesis después de una expresión que produce un valor de función. Usualmente usarás directamente el nombre del enlace que contiene la función. Los valores entre paréntesis se le pasan al programa de dentro de la función. En el ejemplo, la función <code>prompt</code> utiliza la cadena que le pasamos como el texto a mostrar en el cuadro de diálogo. Los valores dados a las funciones se llaman <em>argumentos</em>. Diferentes funciones pueden necesitar un número diferente o diferentes tipos de argumentos.</p>
<p><a class="p_ident" id="p-ocgjHJ27CZ" href="#p-ocgjHJ27CZ" tabindex="-1" role="presentation"></a>La función <code>prompt</code> no se usa mucho en la programación web moderna, principalmente porque no tienes control sobre cómo se ve el cuadro de diálogo resultante, pero puede ser útil en programas simples y experimentos.</p>
<h2><a class="h_ident" id="h-Q017V5uet0" href="#h-Q017V5uet0" tabindex="-1" role="presentation"></a>La función console.log</h2>
<p><a class="p_ident" id="p-vU+xFwvodB" href="#p-vU+xFwvodB" tabindex="-1" role="presentation"></a>En los ejemplos, he usado <code>console.log</code> para mostrar valores. La mayoría de los sistemas de JavaScript (incluidos todos los navegadores web modernos y Node.js) proveen una función <code>console.log</code> que escribe sus argumentos en <em>algún</em> dispositivo de salida de texto. En los navegadores, la salida va a la consola de JavaScript. Esta parte de la interfaz del navegador está oculta por defecto, pero la mayoría de los navegadores la abren cuando pulsas F12 o, en Mac, <span class="keyname">comando</span>-<span class="keyname">opción</span>-I. Si eso no funciona, busca a través de los menús un elemento llamado Herramientas para Desarrolladores o similar.</p>
<p><a class="p_ident" id="p-pHtjXNwFtz" href="#p-pHtjXNwFtz" tabindex="-1" role="presentation"></a>Cuando ejecutas los ejemplos (o tu propio código) en las páginas de este libro, la salida de <code>console.log</code> se mostrará después del ejemplo, en lugar de en la consola de JavaScript del navegador.</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-EmkzRCLpvG" href="#c-EmkzRCLpvG" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">x</span> = <span class="tok-number">30</span>;
console.log(<span class="tok-string">"el valor de x es"</span>, x);
<span class="tok-comment">// → el valor de x es 30</span></pre>
<p><a class="p_ident" id="p-1QcFA54MdF" href="#p-1QcFA54MdF" tabindex="-1" role="presentation"></a>Aunque los nombres de asociaciones no pueden contener puntos, <code>console.log</code> tiene uno. Esto se debe a que <code>console.log</code> no es un simple enlace, sino una expresión que recupera la propiedad <code>log</code> del valor contenido por el enlace <code>console</code>. Descubriremos exactamente lo que esto significa en el <a href="04_data.html#properties">Capítulo 4</a>.</p>
<h2 id="valores_retorno"><a class="h_ident" id="h-xdOUAXPBXv" href="#h-xdOUAXPBXv" tabindex="-1" role="presentation"></a>Valores de retorno</h2>
<p><a class="p_ident" id="p-7wc9bq6hIg" href="#p-7wc9bq6hIg" tabindex="-1" role="presentation"></a>Mostrar un cuadro de diálogo o escribir texto en la pantalla es un efecto secundario. Muchas funciones son útiles debido a los efectos secundarios que producen. Las funciones también pueden producir valores, en cuyo caso no necesitan tener un efecto secundario para ser útiles. Por ejemplo, la función <code>Math.max</code> toma una cantidad cualquiera de argumentos numéricos y devuelve el mayor de ellos:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-PEuTYZX6NI" href="#c-PEuTYZX6NI" tabindex="-1" role="presentation"></a>console.log(Math.max(<span class="tok-number">2</span>, <span class="tok-number">4</span>));
<span class="tok-comment">// → 4</span></pre>
<p><a class="p_ident" id="p-F6xnVn91xR" href="#p-F6xnVn91xR" tabindex="-1" role="presentation"></a>Cuando una función produce un valor, se dice que <em>retorna</em> ese valor. Cualquier cosa que produzca un valor es una expresión en JavaScript, lo que significa que las llamadas a funciones se pueden utilizar dentro de expresiones más grandes. En el siguiente código, una llamada a <code>Math.min</code>, que es lo opuesto a <code>Math.max</code>, se usa como parte de una expresión de suma:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-V4eUUr1Irj" href="#c-V4eUUr1Irj" tabindex="-1" role="presentation"></a>console.log(Math.min(<span class="tok-number">2</span>, <span class="tok-number">4</span>) + <span class="tok-number">100</span>);
<span class="tok-comment">// → 102</span></pre>
<p><a class="p_ident" id="p-Pk0vMYrbRo" href="#p-Pk0vMYrbRo" tabindex="-1" role="presentation"></a>El <a href="03_functions.html">Capítulo 3</a> explicará cómo escribir tus propias funciones.</p>
<h2><a class="h_ident" id="h-hdgf/RurEo" href="#h-hdgf/RurEo" tabindex="-1" role="presentation"></a>Flujo de control</h2>
<p><a class="p_ident" id="p-9EgKeHK0je" href="#p-9EgKeHK0je" tabindex="-1" role="presentation"></a>Cuando tu programa contiene más de una declaración (o sentencia), estas se ejecutan como si fueran una historia, de arriba hacia abajo. Por ejemplo, el siguiente programa tiene dos declaraciones. La primera le pide al usuario un número, y la segunda, que se ejecuta después de la primera, muestra el cuadrado de ese número:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-/qJYz8f0H0" href="#c-/qJYz8f0H0" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">elNumero</span> = Number(prompt(<span class="tok-string">"Elige un número"</span>));
console.log(<span class="tok-string">"Tu número es la raíz cuadrada de "</span> +
elNumero * elNumero);</pre>
<p><a class="p_ident" id="p-8DDMYXGv2v" href="#p-8DDMYXGv2v" tabindex="-1" role="presentation"></a>La función <code>Number</code> convierte un valor a un número. Necesitamos esa conversión porque el resultado de <code>prompt</code> es un valor de tipo <em>string</em> (una cadena), y queremos un número (un valor de tipo <em>number</em>). Hay funciones similares llamadas <code>String</code> y <code>Boolean</code> que convierten valores a esos tipos.</p>
<p><a class="p_ident" id="p-Hmketh0qEs" href="#p-Hmketh0qEs" tabindex="-1" role="presentation"></a>Aquí está la más bien trivial representación esquemática del flujo de control en línea recta:</p><figure><img src="img/controlflow-straight.svg" alt="Diagrama mostrando una flecha recta"></figure>
<h2><a class="h_ident" id="h-iTDXrRhIfn" href="#h-iTDXrRhIfn" tabindex="-1" role="presentation"></a>Ejecución condicional</h2>
<p><a class="p_ident" id="p-e8j4kqj9t6" href="#p-e8j4kqj9t6" tabindex="-1" role="presentation"></a>No todos los programas son caminos rectos. Podríamos, por ejemplo, querer crear una carretera ramificada donde el programa tome la rama adecuada basada en la situación en cuestión. Esto se llama <em>ejecución condicional</em>.</p><figure><img src="img/controlflow-if.svg" alt="Diagrama de una flecha que se divide en dos y luego se une de nuevo"></figure>
<p><a class="p_ident" id="p-fZc5KedAGN" href="#p-fZc5KedAGN" tabindex="-1" role="presentation"></a>La ejecución condicional se crea con la palabra clave <code>if</code> en JavaScript. La idea es que queremos que cierto código se ejecute si, y solo si, una cierta condición es verdadera. Por ejemplo, podríamos querer mostrar el cuadrado de la entrada solo si la entrada es realmente un número:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-X/zXi7paJC" href="#c-X/zXi7paJC" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">elNumero</span> = Number(prompt(<span class="tok-string">"Elige un número"</span>));
<span class="tok-keyword">if</span> (!Number.isNaN(elNumero)) {
console.log(<span class="tok-string">"Tu número es la raíz cuadrada de "</span> +
elNumero * elNumero);
}</pre>
<p><a class="p_ident" id="p-wm40Jh5aS8" href="#p-wm40Jh5aS8" tabindex="-1" role="presentation"></a>Con esta modificación, si introduces “loro”, no se mostrará ninguna salida.</p>
<p><a class="p_ident" id="p-qmGSztfyJW" href="#p-qmGSztfyJW" tabindex="-1" role="presentation"></a>La palabra clave <code>if</code> ejecuta o salta una sentencia dependiendo del valor de una expresión booleana. La expresión de decisión (la condición) se escribe después de la palabra clave, entre paréntesis, seguida de la sentencia a ejecutar.</p>
<p><a class="p_ident" id="p-76c1pNKDSl" href="#p-76c1pNKDSl" tabindex="-1" role="presentation"></a>La función <code>Number.isNaN</code> es una función estándar de JavaScript que devuelve <code>true</code> solo si el argumento que se le pasa es <code>NaN</code>. La función <code>Number</code> devuelve <code>NaN</code> cuando le das una cadena que no representa un número válido. Por lo tanto, la condición se traduce a “a menos que <code>elNumero</code> no sea un número, haz esto”.</p>
<p><a class="p_ident" id="p-pmUn3Gxq/x" href="#p-pmUn3Gxq/x" tabindex="-1" role="presentation"></a>La sentencia después del <code>if</code> está envuelta entre llaves (<code>{</code> y <code>}</code>) en este ejemplo. Las llaves se pueden usar para agrupar cualquier cantidad de sentencias en una sola sentencia llamada <em>bloque</em>. También las podrías haber omitido en este caso, ya que contienen solo una sentencia, pero para evitar tener que pensar si son necesarias, la mayoría de los programadores de JavaScript las usan en todas las sentencias que forman parte de un <code>if</code>. Seguiremos principalmente esa convención en este libro, excepto por ocasionales expresiones de una sola línea (o <em>one-liners</em>).</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-Oe35vWsR97" href="#c-Oe35vWsR97" tabindex="-1" role="presentation"></a><span class="tok-keyword">if</span> (<span class="tok-number">1</span> + <span class="tok-number">1</span> == <span class="tok-number">2</span>) console.log(<span class="tok-string">"Es verdad"</span>);
<span class="tok-comment">// → Es verdad</span></pre>
<p><a class="p_ident" id="p-Pu3zQ4TgAo" href="#p-Pu3zQ4TgAo" tabindex="-1" role="presentation"></a>A menudo no solo tendrás código que se ejecuta cuando una condición es verdadera, sino también código que se encarga de lo que ocurre en caso contrario. Esta ruta alternativa está representada por la segunda flecha en el diagrama. Puedes usar la palabra clave <code>else</code>, junto con <code>if</code>, para crear dos caminos de ejecución alternativos y separados:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-NjAA+mEzvG" href="#c-NjAA+mEzvG" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">elNumero</span> = Number(prompt(<span class="tok-string">"Elige un número"</span>));
<span class="tok-keyword">if</span> (!Number.isNaN(elNumero)) {
console.log(<span class="tok-string">"Tu número es la raíz cuadrada de "</span> +
elNumero * elNumero);
} <span class="tok-keyword">else</span> {
console.log(<span class="tok-string">"Oye. ¿Por qué no me has dado un número?"</span>);
}</pre>
<p><a class="p_ident" id="p-wBEEbOmaGZ" href="#p-wBEEbOmaGZ" tabindex="-1" role="presentation"></a>Si tienes más de dos caminos entre los que elegir, puedes “encadenar” múltiples pares <code>if</code>/<code>else</code>. Aquí tienes un ejemplo:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-Q0hG4Qfs2i" href="#c-Q0hG4Qfs2i" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">num</span> = Number(prompt(<span class="tok-string">"Escoge un número"</span>));
<span class="tok-keyword">if</span> (num < <span class="tok-number">10</span>) {
console.log(<span class="tok-string">"Pequeño"</span>);
} <span class="tok-keyword">else</span> <span class="tok-keyword">if</span> (num < <span class="tok-number">100</span>) {
console.log(<span class="tok-string">"Mediano"</span>);
} <span class="tok-keyword">else</span> {
console.log(<span class="tok-string">"Grande"</span>);
}</pre>
<p><a class="p_ident" id="p-9Hw10NQph5" href="#p-9Hw10NQph5" tabindex="-1" role="presentation"></a>El programa primero comprueba si <code>num</code> es menor que 10. Si lo es, elige esa rama, muestra <code>"Pequeño"</code>, y termina. Si no lo es, toma la rama <code>else</code>, la cual contiene a su vez otro <code>if</code>. Si la segunda condición (<code>< 100</code>) se cumple, eso significa que el número es al menos 10 pero menor que 100, y se muestra <code>"Mediano"</code>. Si no, se elige la segunda y última rama <code>else</code>.</p>
<p><a class="p_ident" id="p-0R64oKXHDE" href="#p-0R64oKXHDE" tabindex="-1" role="presentation"></a>El esquema de este programa se ve más o menos así:</p><figure><img src="img/controlflow-nested-if.svg" alt="Diagrama que muestra una flecha que se divide en dos, con una de las ramas dividiéndose nuevamente antes de que todas las ramas se unan de nuevo"></figure>
<h2 id="loops"><a class="h_ident" id="h-n6ktDf8NGQ" href="#h-n6ktDf8NGQ" tabindex="-1" role="presentation"></a>Bucles while y do</h2>
<p><a class="p_ident" id="p-TNAfAvS4od" href="#p-TNAfAvS4od" tabindex="-1" role="presentation"></a>Considera un programa que muestre en la consola todos los números pares de 0 a 12. Una forma de escribirlo es la siguiente:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-NiH5lbw9eg" href="#c-NiH5lbw9eg" tabindex="-1" role="presentation"></a>console.log(<span class="tok-number">0</span>);
console.log(<span class="tok-number">2</span>);
console.log(<span class="tok-number">4</span>);
console.log(<span class="tok-number">6</span>);
console.log(<span class="tok-number">8</span>);
console.log(<span class="tok-number">10</span>);
console.log(<span class="tok-number">12</span>);</pre>
<p><a class="p_ident" id="p-tMc5CDndOi" href="#p-tMc5CDndOi" tabindex="-1" role="presentation"></a>Y eso funciona, pero la idea de escribir un programa es hacer <em>menos</em> trabajo, no más. Si necesitáramos todos los números pares menores que 1000, este enfoque sería inviable. Lo que necesitamos es una manera de ejecutar un fragmento de código múltiples veces. Esta forma de flujo de control se llama <em>bucle</em>.</p><figure><img src="img/controlflow-loop.svg" alt="Diagrama que muestra una flecha que apunta a un punto que tiene una flecha cíclica que regresa a sí mismo y otra flecha que continúa"></figure>
<p><a class="p_ident" id="p-KOYU5zesRQ" href="#p-KOYU5zesRQ" tabindex="-1" role="presentation"></a>El flujo de control mediante bucles nos permite regresar a algún punto en el programa donde estábamos antes y repetirlo con nuestro estado de programa actual. Si combinamos esto con una variable contadora, podemos hacer algo como esto:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-4dT1JqWY0K" href="#c-4dT1JqWY0K" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">numero</span> = <span class="tok-number">0</span>;
<span class="tok-keyword">while</span> (numero <= <span class="tok-number">12</span>) {
console.log(numero);
numero = numero + <span class="tok-number">2</span>;
}
<span class="tok-comment">// → 0</span>
<span class="tok-comment">// → 2</span>
<span class="tok-comment">// … etcétera</span></pre>
<p><a class="p_ident" id="p-36iEUfXxKy" href="#p-36iEUfXxKy" tabindex="-1" role="presentation"></a>Una sentencia que empiece con la palabra clave <code>while</code> crea un bucle. La palabra <code>while</code> va seguida de una expresión entre paréntesis y luego una sentencia, como con el <code>if</code>. El bucle sigue ejecutando esa sentencia mientras la expresión del paréntesis produzca un valor que dé <code>true</code> al convertirse a Booleano.</p>
<p><a class="p_ident" id="p-G4Zb2m4vDY" href="#p-G4Zb2m4vDY" tabindex="-1" role="presentation"></a>El enlace <code>numero</code> demuestra la forma en que un enlace puede seguir el progreso de un programa. Cada vez que se repite el bucle, <code>numero</code> obtiene un valor que es 2 unidades más que su valor anterior. Al comienzo de cada repetición, se compara con el número 12 para decidir si el trabajo del programa ha terminado.</p>
<p><a class="p_ident" id="p-IhKlP4aMVK" href="#p-IhKlP4aMVK" tabindex="-1" role="presentation"></a>Como ejemplo de algo realmente útil, ahora podemos escribir un programa que calcule y muestre el valor de 2<sup>10</sup> (2 elevado a la 10ª potencia). Usamos dos enlaces: uno para llevar un seguimiento de nuestro resultado y otro para contar cuántas veces hemos multiplicado este resultado por 2. El bucle comprueba si el segundo enlace ya ha alcanzado 10 y, si no, actualiza ambos enlaces.</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-9qGtVj9Vr2" href="#c-9qGtVj9Vr2" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">resultado</span> = <span class="tok-number">1</span>;
<span class="tok-keyword">let</span> <span class="tok-definition">contador</span> = <span class="tok-number">0</span>;
<span class="tok-keyword">while</span> (contador < <span class="tok-number">10</span>) {
resultado = resultado * <span class="tok-number">2</span>;
contador = contador + <span class="tok-number">1</span>;
}
console.log(resultado);
<span class="tok-comment">// → 1024</span></pre>
<p><a class="p_ident" id="p-Ca1o09ICca" href="#p-Ca1o09ICca" tabindex="-1" role="presentation"></a>El contador también podría haber comenzado en <code>1</code> y haber comprobado si era <code><= 10</code>, pero por razones que se harán evidentes en el <a href="04_data.html#array_indexing">Capítulo 4</a>, conviene acostumbrarse a contar desde 0.</p>
<p><a class="p_ident" id="p-gN82FHEguV" href="#p-gN82FHEguV" tabindex="-1" role="presentation"></a>Ten en cuenta que JavaScript también tiene un operador para la potencia (<code>2 ** 10</code>), que sería lo que usarías para calcular esto en un código real —pero entonces nos quedaríamos sin ejemplo.</p>
<p><a class="p_ident" id="p-0oKajUiBua" href="#p-0oKajUiBua" tabindex="-1" role="presentation"></a>Un bucle <code>do</code> es una estructura de control similar a un bucle <code>while</code>. La única diferencia radica en que un bucle <code>do</code> siempre ejecuta su cuerpo al menos una vez, y comienza a probar si debe detenerse solo después de esa primera ejecución. Para reflejar esto, podemos hacer una comprobación después del cuerpo del bucle:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-o9i6UWcm3g" href="#c-o9i6UWcm3g" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">tuNombre</span>;
<span class="tok-keyword">do</span> {
tuNombre = prompt(<span class="tok-string">"¿Quién eres?"</span>);
} <span class="tok-keyword">while</span> (!tuNombre);
console.log(<span class="tok-string">"Hola "</span> + tuNombre);</pre>
<p><a class="p_ident" id="p-DuLfPxV3a1" href="#p-DuLfPxV3a1" tabindex="-1" role="presentation"></a>Este programa te obligará a introducir un nombre. Preguntará una y otra vez hasta que obtenga algo que no sea una cadena vacía. Aplicar el operador <code>!</code> convertirá un valor al tipo Booleano antes de negarlo, y todas las cadenas excepto <code>""</code> se convierten en <code>true</code>. Esto significa que el bucle continúa hasta que proporciones un nombre no vacío.</p>
<h2><a class="h_ident" id="h-Ii0ETl2x9J" href="#h-Ii0ETl2x9J" tabindex="-1" role="presentation"></a>Sangrado de Código</h2>
<p><a class="p_ident" id="p-EIxizf1CMX" href="#p-EIxizf1CMX" tabindex="-1" role="presentation"></a>En los ejemplos, he estado agregando espacios delante de cada sentencia que forma parte de alguna otra sentencia más grande. Estos espacios no son necesarios: la computadora aceptará el programa perfectamente sin ellos. De hecho, incluso los saltos de línea en los programas son opcionales. Podrías escribir un programa como una sola línea larga si quisieras.</p>
<p><a class="p_ident" id="p-znDKK7dtkr" href="#p-znDKK7dtkr" tabindex="-1" role="presentation"></a>El papel de este sangrado dentro de los bloques es resaltar la estructura del código para los lectores humanos. En código donde se abren nuevos bloques dentro de otros bloques, puede hacerse complicado ver dónde termina un bloque y comienza otro. Con un sangrado adecuado, la forma visual de un programa corresponde a la forma de los bloques dentro de él. A mí me gusta usar dos espacios para cada bloque abierto, pero los gustos difieren: algunas personas usan cuatro espacios y otras usan caracteres de tabulación. Lo importante es que cada nuevo bloque agregue la misma cantidad de espacio.</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-l+Egm3hhDK" href="#c-l+Egm3hhDK" tabindex="-1" role="presentation"></a><span class="tok-keyword">if</span> (false != true) {
console.log(<span class="tok-string">"Tiene sentido."</span>);
<span class="tok-keyword">if</span> (<span class="tok-number">1</span> < <span class="tok-number">2</span>) {
console.log(<span class="tok-string">"Sin sorpresas."</span>);
}
}</pre>
<p><a class="p_ident" id="p-FgMgQYGV7f" href="#p-FgMgQYGV7f" tabindex="-1" role="presentation"></a>La mayoría de los programas de edición (incluido el de este libro) ayudarán automáticamente con la sangría adecuada al escribir nuevas líneas.</p>
<h2><a class="h_ident" id="h-mgPDSpUcUD" href="#h-mgPDSpUcUD" tabindex="-1" role="presentation"></a>Bucles for</h2>
<p><a class="p_ident" id="p-b/v1NpkLGq" href="#p-b/v1NpkLGq" tabindex="-1" role="presentation"></a>Muchos bucles siguen el patrón mostrado en los ejemplos de <code>while</code>. Primero se crea una variable “contador” para rastrear el progreso del bucle. Luego viene un bucle <code>while</code>, generalmente con una expresión de prueba que verifica si el contador ha alcanzado su valor final. Al final del cuerpo del bucle, el contador se actualiza para rastrear el progreso.</p>
<p><a class="p_ident" id="p-dIfowzePhR" href="#p-dIfowzePhR" tabindex="-1" role="presentation"></a>Debido a que este patrón es tan común, JavaScript y lenguajes similares proporcionan una forma ligeramente más corta y entendible, el bucle <code>for</code>:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-luM90AtsUL" href="#c-luM90AtsUL" tabindex="-1" role="presentation"></a><span class="tok-keyword">for</span> (<span class="tok-keyword">let</span> <span class="tok-definition">numero</span> = <span class="tok-number">0</span>; numero <= <span class="tok-number">12</span>; numero = numero + <span class="tok-number">2</span>) {
console.log(numero);
}
<span class="tok-comment">// → 0</span>
<span class="tok-comment">// → 2</span>
<span class="tok-comment">// … etcétera</span></pre>
<p><a class="p_ident" id="p-fN0Wqpo2bS" href="#p-fN0Wqpo2bS" tabindex="-1" role="presentation"></a>Este programa es exactamente equivalente al <a href="02_program_structure.html#loops">anterior</a> ejemplo de impresión de números pares en la consola. La única diferencia es que todas las declaraciones relacionadas con el “estado” del bucle están agrupadas después de <code>for</code>.</p>
<p><a class="p_ident" id="p-9Dk5fa1UtV" href="#p-9Dk5fa1UtV" tabindex="-1" role="presentation"></a>Los paréntesis después de la palabra clave <code>for</code> deben contener dos punto y coma. La parte antes del primer punto y coma <em>inicializa</em> el bucle, normalmente definiendo una variable. La segunda parte es la expresión que <em>verifica</em> si el bucle debe continuar. La parte final <em>actualiza</em> el estado del bucle después de cada iteración. En la mayoría de los casos, esto es más corto y claro que un <code>while</code> tradicional.</p>
<p><a class="p_ident" id="p-q5iPDIA0KE" href="#p-q5iPDIA0KE" tabindex="-1" role="presentation"></a>Este es el código que calcula 2<sup>10</sup> usando <code>for</code> en lugar de <code>while</code>:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-fSU8wAXXvW" href="#c-fSU8wAXXvW" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">resultado</span> = <span class="tok-number">1</span>;
<span class="tok-keyword">for</span> (<span class="tok-keyword">let</span> <span class="tok-definition">contador</span> = <span class="tok-number">0</span>; contador < <span class="tok-number">10</span>; contador = contador + <span class="tok-number">1</span>) {
resultado = resultado * <span class="tok-number">2</span>;
}
console.log(resultado);
<span class="tok-comment">// → 1024</span></pre>
<h2><a class="h_ident" id="h-SKY+ZrYARv" href="#h-SKY+ZrYARv" tabindex="-1" role="presentation"></a>Saliendo de un bucle</h2>
<p><a class="p_ident" id="p-hzS/J9owHF" href="#p-hzS/J9owHF" tabindex="-1" role="presentation"></a>Hacer que la condición del bucle produzca <code>false</code> no es la única forma en que un bucle puede terminar. La instrucción <code>break</code> tiene el efecto de salir inmediatamente del bucle que la contiene. Su uso se demuestra en el siguiente programa, que encuentra el primer número mayor o igual a 20 que es divisible por 7:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-zHPHsO2cGF" href="#c-zHPHsO2cGF" tabindex="-1" role="presentation"></a><span class="tok-keyword">for</span> (<span class="tok-keyword">let</span> <span class="tok-definition">actual</span> = <span class="tok-number">20</span>; ; actual = actual + <span class="tok-number">1</span>) {
<span class="tok-keyword">if</span> (actual % <span class="tok-number">7</span> == <span class="tok-number">0</span>) {
console.log(actual);
<span class="tok-keyword">break</span>;
}
}
<span class="tok-comment">// → 21</span></pre>
<p><a class="p_ident" id="p-SatU3DM22D" href="#p-SatU3DM22D" tabindex="-1" role="presentation"></a>Usar el operador de resto (<code>%</code>) es una forma sencilla de comprobar si un número es divisible por otro. Si lo es, el resto de su división es cero.</p>
<p><a class="p_ident" id="p-3Dsko/ipk1" href="#p-3Dsko/ipk1" tabindex="-1" role="presentation"></a>La construcción <code>for</code> en el ejemplo no tiene una parte que verifique el final del bucle. Esto significa que el bucle nunca se detendrá a menos que se ejecute la instrucción <code>break</code> dentro de él.</p>
<p><a class="p_ident" id="p-q4qJ+93ZrC" href="#p-q4qJ+93ZrC" tabindex="-1" role="presentation"></a>Si eliminaras esa declaración <code>break</code> o escribieses accidentalmente una condición final que siempre produzca <code>true</code>, tu programa quedaría atrapado en un <em>bucle infinito</em>. Un programa atrapado en un bucle infinito nunca terminará de ejecutarse, lo cual suele ser malo.</p>
<p><a class="p_ident" id="p-QiJsr1f8Ma" href="#p-QiJsr1f8Ma" tabindex="-1" role="presentation"></a>Si creas un bucle infinito en uno de los ejemplos en estas páginas, generalmente se te preguntará si deseas detener el script después de unos segundos. Si eso falla, deberás cerrar la pestaña en la que estás trabajando para pararlo.</p>
<p><a class="p_ident" id="p-SpplRbvKVL" href="#p-SpplRbvKVL" tabindex="-1" role="presentation"></a>La palabra clave <code>continue</code> es similar a <code>break</code> en que influye en el progreso de un bucle. Cuando se encuentra <code>continue</code> en el cuerpo de un bucle, el control salta fuera del cuerpo y continúa con la siguiente iteración del bucle.</p>
<h2><a class="h_ident" id="h-+CnY1WFDZS" href="#h-+CnY1WFDZS" tabindex="-1" role="presentation"></a>Actualización concisa de enlaces</h2>
<p><a class="p_ident" id="p-OmbzX4bGUg" href="#p-OmbzX4bGUg" tabindex="-1" role="presentation"></a>Especialmente al hacer bucles, un programa a menudo necesita “actualizar” un enlace para que contenga un valor basado en el valor anterior de ese enlace.</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-VGviBLlVDb" href="#c-VGviBLlVDb" tabindex="-1" role="presentation"></a>contador = contador + <span class="tok-number">1</span>;</pre>
<p><a class="p_ident" id="p-vQO+HtxGdF" href="#p-vQO+HtxGdF" tabindex="-1" role="presentation"></a>JavaScript proporciona un atajo para esto:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-VzxL+w9AHp" href="#c-VzxL+w9AHp" tabindex="-1" role="presentation"></a>contador += <span class="tok-number">1</span>;</pre>
<p><a class="p_ident" id="p-k9sYK52irQ" href="#p-k9sYK52irQ" tabindex="-1" role="presentation"></a>Para muchos otros operadores hay atajos similares, como <code>resultado *= 2</code> para duplicar <code>resultado</code> o <code>contador -= 1</code> para contar hacia atrás.</p>
<p><a class="p_ident" id="p-2jbBcAR3za" href="#p-2jbBcAR3za" tabindex="-1" role="presentation"></a>Esto nos permite acortar aún más nuestro ejemplo de contar:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-WDAcfdyHyg" href="#c-WDAcfdyHyg" tabindex="-1" role="presentation"></a><span class="tok-keyword">for</span> (<span class="tok-keyword">let</span> <span class="tok-definition">número</span> = <span class="tok-number">0</span>; número <= <span class="tok-number">12</span>; número += <span class="tok-number">2</span>) {
console.log(número);
}</pre>
<p><a class="p_ident" id="p-7MweW6WlSL" href="#p-7MweW6WlSL" tabindex="-1" role="presentation"></a>Para <code>contador += 1</code> y <code>contador -= 1</code>, existen equivalentes más cortos aún: <code>contador++</code> y <code>contador--</code>.</p>
<h2><a class="h_ident" id="h-eZRVlMfTEH" href="#h-eZRVlMfTEH" tabindex="-1" role="presentation"></a>Despachar según un valor con switch</h2>
<p><a class="p_ident" id="p-a7WK2eFLam" href="#p-a7WK2eFLam" tabindex="-1" role="presentation"></a>No es raro encontrar código con esta pinta:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-ydQ9zTKexk" href="#c-ydQ9zTKexk" tabindex="-1" role="presentation"></a><span class="tok-keyword">if</span> (x == <span class="tok-string">"valor1"</span>) accion1();
<span class="tok-keyword">else</span> <span class="tok-keyword">if</span> (x == <span class="tok-string">"valor2"</span>) accion2();
<span class="tok-keyword">else</span> <span class="tok-keyword">if</span> (x == <span class="tok-string">"valor3"</span>) accion3();
<span class="tok-keyword">else</span> accionPredeterminada();</pre>
<p><a class="p_ident" id="p-TN80MDBMtL" href="#p-TN80MDBMtL" tabindex="-1" role="presentation"></a>Existe una construcción llamada <code>switch</code> que está destinada a expresar dicho “despacho” de una manera más directa. Desafortunadamente, la sintaxis que JavaScript utiliza para esto (heredada de lenguajes de programación en la línea de C/Java) es algo incómoda —una cadena de declaraciones <code>if</code> podría quedar mejor. Aquí hay un ejemplo:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-Se77UtUd8a" href="#c-Se77UtUd8a" tabindex="-1" role="presentation"></a><span class="tok-keyword">switch</span> (prompt(<span class="tok-string">"¿Cómo está el clima?"</span>)) {
<span class="tok-keyword">case</span> <span class="tok-string">"lluvioso"</span>:
console.log(<span class="tok-string">"Recuerda llevar un paraguas."</span>);
<span class="tok-keyword">break</span>;
<span class="tok-keyword">case</span> <span class="tok-string">"soleado"</span>:
console.log(<span class="tok-string">"Vístete con ropa ligera."</span>);
<span class="tok-keyword">case</span> <span class="tok-string">"nublado"</span>:
console.log(<span class="tok-string">"Sal al exterior."</span>);
<span class="tok-keyword">break</span>;
<span class="tok-keyword">default</span>:
console.log(<span class="tok-string">"¡Tipo de clima desconocido!"</span>);
<span class="tok-keyword">break</span>;
}</pre>
<p><a class="p_ident" id="p-Ebda3Pwhl6" href="#p-Ebda3Pwhl6" tabindex="-1" role="presentation"></a>Puedes colocar cualquier cantidad de etiquetas <code>case</code> dentro del cuerpo de <code>switch</code>. El programa comenzará a ejecutarse en la etiqueta que corresponda al valor que se le dio a <code>switch</code>, o en <code>default</code>, si no se encuentra ningún valor coincidente. Continuará ejecutándose, incluso a través de otras etiquetas, hasta que alcance una declaración <code>break</code>. En algunos casos, como el caso <code>"soleado"</code> del ejemplo, esto se puede usar para compartir algo de código entre casos (recomienda salir al exterior tanto para el clima soleado como para el nublado). Pero ten cuidado, es fácil olvidar un <code>break</code> de este tipo, lo que hará que el programa ejecute código que no deseas ejecutar.</p>
<h2><a class="h_ident" id="h-uaN9rBKlOx" href="#h-uaN9rBKlOx" tabindex="-1" role="presentation"></a>Uso de mayúsculas</h2>
<p><a class="p_ident" id="p-LPEByvMVpz" href="#p-LPEByvMVpz" tabindex="-1" role="presentation"></a>Los nombres de los asociaciones no pueden contener espacios, aunque a menudo es útil usar varias palabras para describir claramente lo que representa la asociación. Estas son básicamente tus opciones para escribir un nombre de asociación con varias palabras:</p>
<pre class="snippet" data-language="null" ><a class="c_ident" id="c-HtUFwP9TF9" href="#c-HtUFwP9TF9" tabindex="-1" role="presentation"></a>fuzzylittleturtle
fuzzy_little_turtle
FuzzyLittleTurtle
fuzzyLittleTurtle</pre>
<p><a class="p_ident" id="p-7f2h/V6EQk" href="#p-7f2h/V6EQk" tabindex="-1" role="presentation"></a>El primer estilo puede ser difícil de leer. Personalmente me gusta más la apariencia de los guiones bajos, aunque ese estilo es un poco difícil de escribir. Las funciones estándar de JavaScript y la mayoría de los programadores de JavaScript siguen el último estilo: escriben con mayúscula cada palabra excepto la primera. No es difícil adoptar pequeñas costumbres como esta, y el código con estilos de nombrado mixtos puede resultar molesto de leer, así que seguiremos esta última convención.</p>
<p><a class="p_ident" id="p-jCGMhIRLKD" href="#p-jCGMhIRLKD" tabindex="-1" role="presentation"></a>En algunos casos, como en la función <code>Number</code>, la primera letra de un enlace también está en mayúscula. Esto se hizo para marcar esta función como un constructor. Quedará claro lo que es un constructor en el <a href="06_object.html#constructors">Capítulo 6</a>. Por ahora, lo importante es no molestarse por esta aparente falta de consistencia.</p>
<h2><a class="h_ident" id="h-BU3lBD6Cl5" href="#h-BU3lBD6Cl5" tabindex="-1" role="presentation"></a>Comentarios</h2>
<p><a class="p_ident" id="p-HxjnUCWytj" href="#p-HxjnUCWytj" tabindex="-1" role="presentation"></a>A menudo, el código sin formato no transmite toda la información que quieres que un programa transmita a los lectores humanos, o lo hace de una manera tan críptica que la gente podría no entenderlo. Otras veces, es posible que solo quieras incluir algunos pensamientos relacionados como parte de tu programa. Para eso sirven los <em>comentarios</em>.</p>
<p><a class="p_ident" id="p-7Y56DjyRCG" href="#p-7Y56DjyRCG" tabindex="-1" role="presentation"></a>Un comentario es un fragmento de texto que forma parte de un programa pero que es completamente ignorado por la computadora. JavaScript tiene dos formas de escribir comentarios. Para escribir un comentario de una sola línea, puedes usar dos caracteres de barra (<code>//</code>) y luego el texto del comentario después de eso:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-GA8ZZh0lVD" href="#c-GA8ZZh0lVD" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">saldoCuenta</span> = calcularSaldo(cuenta);
<span class="tok-comment">// Al olmo viejo, hendido por el rayo</span>
saldoCuenta.ajustar();
<span class="tok-comment">// y en su mitad podrido,</span>
<span class="tok-keyword">let</span> <span class="tok-definition">informe</span> = <span class="tok-keyword">new</span> Informe();
<span class="tok-comment">// con las lluvias de abril y el sol de mayo</span>
agregarAInforme(saldoCuenta, informe);
<span class="tok-comment">// algunas hojas verdes le han salido.</span></pre>
<p><a class="p_ident" id="p-RiQt53UNig" href="#p-RiQt53UNig" tabindex="-1" role="presentation"></a>Un comentario con <code>//</code> solo va hasta el final de la línea. Una sección de texto entre <code>/*</code> y <code>*/</code> será ignorada por completo, independientemente de si contiene saltos de línea o no. Esto es útil para agregar bloques de información sobre un archivo o un fragmento de programa:</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-TErmbVw8Jm" href="#c-TErmbVw8Jm" tabindex="-1" role="presentation"></a><span class="tok-comment">/*</span>
<span class="tok-comment"> Encontré este número por primera vez garabateado en la parte de atrás de un viejo</span>
<span class="tok-comment"> cuaderno. Desde entonces, ha aparecido con frecuencia en</span>
<span class="tok-comment"> números de teléfono y números de serie de productos que he</span>
<span class="tok-comment"> comprado. Obviamente le gusto, así que he decidido quedármelo.</span>
<span class="tok-comment">*/</span>
<span class="tok-keyword">const</span> <span class="tok-definition">miNumero</span> = <span class="tok-number">11213</span>;</pre>
<h2><a class="h_ident" id="h-NUFOUyK+lw" href="#h-NUFOUyK+lw" tabindex="-1" role="presentation"></a>Resumen</h2>
<p><a class="p_ident" id="p-f/OQzkkDiz" href="#p-f/OQzkkDiz" tabindex="-1" role="presentation"></a>Ahora sabes que un programa está construido a partir de declaraciones (o sentencias), que a veces contienen más declaraciones. Las declaraciones tienden a contener expresiones, que a su vez pueden estar construidas a partir de expresiones más pequeñas. Poner declaraciones una después de la otra te da un programa que se ejecuta de arriba hacia abajo. Puedes introducir alteraciones en el flujo de control usando sentencias condicionales (<code>if</code>, <code>else</code> y <code>switch</code>) y bucles (<code>while</code>, <code>do</code> y <code>for</code>).</p>
<p><a class="p_ident" id="p-rcZwELYOMD" href="#p-rcZwELYOMD" tabindex="-1" role="presentation"></a>Los enlaces se pueden usar para guardar fragmentos de datos bajo un nombre, y son útiles para hacer un seguimiento del estado en tu programa. El entorno es el conjunto de enlaces que están definidos. Los sistemas de JavaScript siempre ponen varios enlaces estándar útiles en tu entorno.</p>
<p><a class="p_ident" id="p-lh+UoMXkIt" href="#p-lh+UoMXkIt" tabindex="-1" role="presentation"></a>Las funciones son valores especiales que encapsulan un fragmento de programa. Puedes invocarlas escribiendo <code>nombreDeFuncion(argumento1, argumento2)</code>. Dicha llamada a función es una expresión y puede producir un valor.</p>
<h2><a class="h_ident" id="h-tkm7ntLto1" href="#h-tkm7ntLto1" tabindex="-1" role="presentation"></a>Ejercicios</h2>
<p><a class="p_ident" id="p-Vw2WvEdyD9" href="#p-Vw2WvEdyD9" tabindex="-1" role="presentation"></a>Si no sabes cómo comprobar tus soluciones a los ejercicios, consulta la <a href="00_intro.html">Introducción</a>.</p>
<p><a class="p_ident" id="p-8sD0jXsHvJ" href="#p-8sD0jXsHvJ" tabindex="-1" role="presentation"></a>Cada ejercicio comienza con una descripción del problema. Léela e intenta resolver el ejercicio. Si tienes problemas, considera leer las pistas después del ejercicio. Puedes encontrar soluciones completas a los ejercicios en línea en <a href="https://eloquentjavascript.net/code#2"><em>https://eloquentjavascript.net/code</em></a>. Si quieres aprender algo de los ejercicios, te recomiendo mirar las soluciones solo después de haber resuelto el ejercicio, o al menos después de haberlo intentado lo suficiente como para tener un ligero dolor de cabeza.</p>
<h3><a class="i_ident" id="i-ThHo8CNjUY" href="#i-ThHo8CNjUY" tabindex="-1" role="presentation"></a>Haciendo un triángulo con bucles</h3>
<p><a class="p_ident" id="p-nyPSDpu43Y" href="#p-nyPSDpu43Y" tabindex="-1" role="presentation"></a>Escribe un bucle que realice siete llamadas a <code>console.log</code> para mostrar el siguiente triángulo:</p>
<pre class="snippet" data-language="null" ><a class="c_ident" id="c-iAdOqXrnTq" href="#c-iAdOqXrnTq" tabindex="-1" role="presentation"></a>#
##
###
####
#####
######
#######</pre>
<p><a class="p_ident" id="p-HnTbcF9d+w" href="#p-HnTbcF9d+w" tabindex="-1" role="presentation"></a>Puede ser útil saber que puedes calcular la longitud de una cadena escribiendo <code>.length</code> después de ella.</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-qHvXAGuPvV" href="#c-qHvXAGuPvV" tabindex="-1" role="presentation"></a><span class="tok-keyword">let</span> <span class="tok-definition">abc</span> = <span class="tok-string">"abc"</span>;
console.log(abc.length);
<span class="tok-comment">// → 3</span></pre>
<p><a class="p_ident" id="p-ssg9S6jLc4" href="#p-ssg9S6jLc4" tabindex="-1" role="presentation"></a>La mayoría de los ejercicios contienen un fragmento de código que puedes modificar para resolver el ejercicio. Recuerda que puedes hacer clic en los bloques de código para editarlos.</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-ROnwerR8AG" href="#c-ROnwerR8AG" tabindex="-1" role="presentation"></a><span class="tok-comment">// Tu código aquí.</span></pre>
<details class="solution"><summary>Mostrar pistas...</summary><div class="solution-text">
<p><a class="p_ident" id="p-DpgPWjXISq" href="#p-DpgPWjXISq" tabindex="-1" role="presentation"></a>Puedes comenzar con un programa que imprime los números del 1 al 7, el cual puedes obtener haciendo algunas modificaciones al ejemplo de impresión de números pares dado anteriormente en el capítulo, donde se introdujo el bucle <code>for</code>.</p>
<p><a class="p_ident" id="p-tjWvssIayu" href="#p-tjWvssIayu" tabindex="-1" role="presentation"></a>Luego, considera la equivalencia entre los números y las cadenas de caracteres "#" . Puedes pasar de 1 a 2 sumando 1 (<code>+= 1</code>). Puedes pasar de <code>"#"</code> a <code>"##"</code> agregando un carácter (<code>+= "#"</code>). Por lo tanto, tu solución puede basarse fuertemente en el programa de impresión de números.</p>
</div></details>
<h3><a class="i_ident" id="i-rebKE3gdjV" href="#i-rebKE3gdjV" tabindex="-1" role="presentation"></a>FizzBuzz</h3>
<p><a class="p_ident" id="p-sN81xT6Ls4" href="#p-sN81xT6Ls4" tabindex="-1" role="presentation"></a>Escribe un programa que use <code>console.log</code> para imprimir todos los números del 1 al 100, con dos excepciones. Para los números divisibles por 3, imprime <code>"Fizz"</code> en lugar del número, y para los números divisibles por 5 (y no por 3), imprime <code>"Buzz"</code> en su lugar.</p>
<p><a class="p_ident" id="p-E9o5g3i4vC" href="#p-E9o5g3i4vC" tabindex="-1" role="presentation"></a>Cuando eso esté listo, modifica tu programa para imprimir <code>"FizzBuzz"</code> para los números que son divisibles por 3 y 5 (y sigue imprimiendo <code>"Fizz"</code> o <code>"Buzz"</code> para los números que son divisibles solo por uno de esos).</p>
<p><a class="p_ident" id="p-xiZio9jEj5" href="#p-xiZio9jEj5" tabindex="-1" role="presentation"></a>(Esto es en realidad una pregunta de entrevista que se ha afirmado que elimina a un porcentaje significativo de candidatos a programadores. Por tanto, si lo resolviste, tu valor en el mercado laboral acaba de aumentar.)</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-ROnwerR8AG_1" href="#c-ROnwerR8AG_1" tabindex="-1" role="presentation"></a><span class="tok-comment">// Tu código aquí.</span></pre>
<details class="solution"><summary>Mostrar pistas...</summary><div class="solution-text">
<p><a class="p_ident" id="p-FnPgHxuR9J" href="#p-FnPgHxuR9J" tabindex="-1" role="presentation"></a>Claramente, recorrer los números es tarea para un bucle, y seleccionar qué imprimir es una cuestión de ejecución condicional. Recuerda el truco de usar el operador de resto (<code>%</code>) para verificar si un número es divisible por otro número (tiene un resto de cero).</p>
<p><a class="p_ident" id="p-oYpHxgkxw/" href="#p-oYpHxgkxw/" tabindex="-1" role="presentation"></a>En la primera versión, hay tres resultados posibles para cada número, por lo que tendrás que crear una secuencia <code>if</code>/<code>else if</code>/<code>else</code>.</p>
<p><a class="p_ident" id="p-wu2JrShz/M" href="#p-wu2JrShz/M" tabindex="-1" role="presentation"></a>La segunda versión del programa tiene una solución sencilla y una inteligente. La solución sencilla es agregar otra “rama” condicional para probar exactamente la condición dada. Para la solución inteligente, construye una cadena que contenga la palabra o palabras a imprimir e imprime esta palabra o el número si no hubiera palabra, potencialmente haciendo un buen uso del operador <code>||</code>.</p>
</div></details>
<h3><a class="i_ident" id="i-48yefwrYvK" href="#i-48yefwrYvK" tabindex="-1" role="presentation"></a>Tablero de ajedrez</h3>
<p><a class="p_ident" id="p-eZy03w3wJ3" href="#p-eZy03w3wJ3" tabindex="-1" role="presentation"></a>Escribe un programa que cree una cadena que represente un tablero de 8x8, usando caracteres de salto de línea para separar las líneas. En cada posición del tablero hay un carácter de espacio o un carácter "#". Los caracteres deben formar un tablero de ajedrez.</p>
<p><a class="p_ident" id="p-yoH2dRdE5H" href="#p-yoH2dRdE5H" tabindex="-1" role="presentation"></a>Al pasar esta cadena a <code>console.log</code>, debería mostrar algo como esto:</p>
<pre class="snippet" data-language="null" ><a class="c_ident" id="c-7yVx5TrcJ/" href="#c-7yVx5TrcJ/" tabindex="-1" role="presentation"></a> # # # #
# # # #
# # # #
# # # #
# # # #
# # # #
# # # #
# # # #</pre>
<p><a class="p_ident" id="p-cusKWZ8lmV" href="#p-cusKWZ8lmV" tabindex="-1" role="presentation"></a>Cuando tengas un programa que genere este patrón, define una variable <code>size = 8</code> y cambia el programa para que funcione para cualquier <code>size</code>, generando un tablero con el ancho y alto dados.</p>
<pre tabindex="0" class="snippet" data-language="javascript" ><a class="c_ident" id="c-ROnwerR8AG_2" href="#c-ROnwerR8AG_2" tabindex="-1" role="presentation"></a><span class="tok-comment">// Tu código aquí.</span></pre>
<details class="solution"><summary>Mostrar pistas...</summary><div class="solution-text">
<p><a class="p_ident" id="p-Gr7cParUG1" href="#p-Gr7cParUG1" tabindex="-1" role="presentation"></a>Para trabajar con dos dimensiones, necesitarás un bucle dentro de otro bucle. Pon llaves alrededor de los cuerpos de ambos bucles para que sea fácil ver dónde empiezan y terminan. Intenta añadir sangrado (o <em>indentar</em>) correctamente a estos cuerpos. El orden de los bucles debe seguir el orden en el que construimos la cadena (línea por línea, de izquierda a derecha, de arriba abajo). Entonces el bucle exterior maneja las líneas y el bucle interior maneja los caracteres en una línea.</p>
<p><a class="p_ident" id="p-QwX2iYYwbo" href="#p-QwX2iYYwbo" tabindex="-1" role="presentation"></a>Necesitarás dos variables para hacer un seguimiento de tu progreso. Para saber si debes colocar un espacio o un signo de almohadilla en una posición determinada, podrías verificar si la suma de los dos contadores es par (<code>% 2</code>).</p>
<p><a class="p_ident" id="p-YhRlDyis8S" href="#p-YhRlDyis8S" tabindex="-1" role="presentation"></a>Terminar una línea agregando un carácter de salto de línea debe ocurrir después de que se haya construido la línea, así que hazlo después del bucle interno pero dentro del bucle externo.</p>
</div></details><nav><a href="01_values.html" title="previous chapter" aria-label="previous chapter">◂</a> <a href="index.html" title="cover" aria-label="cover">●</a> <a href="03_functions.html" title="next chapter" aria-label="next chapter">▸</a> <button class=help title="help" aria-label="help"><strong>?</strong></button>
</nav>
</article>
<script src="ejs.js"></script>