tag:blogger.com,1999:blog-15764296612082240712024-03-13T09:06:25.750-07:00Pivotsirleitohttp://www.blogger.com/profile/01252662839159935317noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-1576429661208224071.post-74646973857298883742020-10-06T15:50:00.001-07:002020-10-06T15:50:05.125-07:00Las bases de generadores en ES6 (JavaScript)<p> <span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Traducido de </span><a href="https://davidwalsh.name/es6-generators" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://davidwalsh.name/es6-generators</span></a></p><span id="docs-internal-guid-afb90ead-7fff-fcd4-d25c-91c352cb39f9"><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Una de las más emocionantes nuevas features que vienen en JavaScript ES6, son una nueva generación de funciones, llamadas generadores. Su nombre es un poco extraño, pero su comportamiento puede parecer mucho más extraño al primer vistazo. Este artículo tiene por objetivo explicar las bases de cómo trabaja, y ayudarlo a entender porqué es tan poderoso para el futuro de Js.</span></p><br /><h2 dir="ltr" style="line-height: 1.38; margin-bottom: 6pt; margin-top: 18pt;"><span style="font-family: Arial; font-size: 16pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">Run-To-Completion</span></h2><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Lo primero que debemos observar al hablar sobre generadores es como difieren de una función normal con respecto a la expectativa de ‘run to completion’.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Ya sea que te hayas dado cuenta o no, tu siempre has podido asumir algo bastante fundamental acerca de tus funciones: siempre que una función haya comenzado a ejecutarse, está seguirá hasta completarse sin que ningún otro código js pueda correr antes.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Por ejemplo:</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">setTimeout</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(){</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; color: #669900; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"Hello World"</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">},</span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">1</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// NOTE: don't ever do crazy long-running loops like this</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">for</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">var</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> i</span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">0</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> i</span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><=</span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">1E10</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> i</span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">++</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">)</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">i</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">();</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// 0..1E10</span></p><p dir="ltr" style="line-height: 1.7999999999999998; margin-bottom: 23pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// "Hello World"</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Aquí, al bucle for le tomará bastante tiempo completarse. Beno, en realidad poco más de un milisegundo. Pero nuestro timer callback de la instrucción console.log no puede interrumpir a la función foo() mientras se ejecuta, por lo que se atasca al final de la línea (del event-loop) y espera pacientemente su turno.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">¿Sin embargo, qué pasaría si foo() pudiera ser interrumpida? ¿Esto no causaría estragos en nuestros programas?</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Son exactamente esos los desafíos de la programación multihilo. Pero somos bastante afortunados en la tierra de JavaScript, no tenemos miedo a tales cosas porque javascript es siempre monohilo (solo un comando/función ejecutándose por vez) </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">Nota: </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Los web workers son un mecanismo por el cual vos podés independizar un hilo para que corra una parte del programa en JavaScript totalmente separado del hilo principal del programa.</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">La razón por la cual esto no introduce complicaciones multihilo en nuestros programas es que ambos threads sólo pueden comunicarse a través de eventos asíncronos normales. los cuales siempre cumplen el comportamiento del bucle de eventos ‘uno a la vez’ requerido para el run-to-completion.</span></p><br /><h2 dir="ltr" style="line-height: 1.38; margin-bottom: 6pt; margin-top: 18pt;"><span style="font-family: Arial; font-size: 16pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">Run-Stop-Run</span></h2><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Con los generadores de ES6, tenemos un nuevo tipo de función, que puede ser pausada en el medio, una o varias veces, y retomada luego; permitiendo al resto del código ejecutarse durante los periodos de pausa.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Si alguna vez has leído algo sobre concurrencia o programación de hilos, puede que hayas visto el término ‘cooperativo’, el cual básicamente indica que un proceso (o en nuestro caso, una función) elige cuándo permitirá una interrupción, para que pueda cooperar con otro código. Este concepto contrasta con ‘preventivo’, que sugiere que una función/proceso puede ser interrumpida contra su voluntad.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Los generadores de ES6 son ‘cooperativos’ en su comportamiento de concurrencia. Dentro del cuerpo de la función generador, usarás la palabra clave </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> para pausar el proceso dentro de sí misma. Nada puede pausar a un generador desde afuera, se detiene solo cuando se encuentra con un </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Como sea, una vez un generador se ha pausado a sí mismo, no puede reanudarse solo. Un control externo debe ser usado para reiniciar el generador. Les explicaré cómo en un momento.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Entonces, básicamente, una función generadora puede detenerse y retomarse tantas veces como vos elijas. De hecho, podés definir una función generador con un loop infinito (como el famoso </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">while(true</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">)) que esencialmente nunca termine. Si bien esto suele ser una locura o un error en un programa Js,. con las funciones generadoras es perfectamente sensato y, en ocasiones, es exactamente lo que quieres.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Aún más importante, esta detención e inicio no es solo un control sobre la ejecución del generador, sino que también permite que el mensaje two-way entre y salga del generador a medida que avanza. Con las funciones normales tenés los parámetros al principio y el retorno al final. Con funciones generador, mandás un mensaje con cada </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, y otro de vuelta cada vez que lo reinicies.</span></p><br /><h2 dir="ltr" style="line-height: 1.38; margin-bottom: 6pt; margin-top: 18pt;"><span style="font-family: Arial; font-size: 16pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">¡Sintaxis por favor!</span></h2><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Profundicemos en la sintaxis de estas nuevas y emocionantes funciones generadoras.</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Primero, la nueva declaración de sintaxis.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">*</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// ..</span></p><p dir="ltr" style="line-height: 1.7999999999999998; margin-bottom: 23pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Notás el + acá? Esto es nuevo y se ve un poco raro. Para los de otros lenguajes, esto puede parecer un horrible return-value pointer. ¡Pero no te confundas! Esto es solo una forma de señalar que esta función será de tipo generador. </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Probablemente hayas visto otros artículos/documentación que usan </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">function* foo(){ }</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">en lugar de </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">function *foo(){ } </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(la diferencia es el lugar del *). Ambas son válidas, pero recientemente he decidido que la segunda forma es más precisa, así que seo es lo que estoy usando aquí.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Ahora, voy a hablarles sobre el contenido de los generadores. Las funciones de generador son como las funciones normales en la mayoría de los aspectos. Hay muy poca sintaxis nueva </span><span style="font-family: Arial; font-size: 11pt; font-style: italic; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">dentro </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">de las funciones de generador.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">El principal nuevo juguete que tenemos para jugar, como mencioné más arriba, es la palabra reservada </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">yield__</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> es una expresión (no una declaración ) porque cuando reiniciamos el generador, le enviaremos un valor de vuelta, y lo que enviamos será un resultado calculado de la expresión </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">yield__</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> .</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Por ejemplo:</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">*</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">var</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> x </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">1</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">+</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #669900; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"foo"</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">x</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span></p><p dir="ltr" style="line-height: 1.7999999999999998; margin-bottom: 23pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">La expresión </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">yield “foo”</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> enviará el string “foo” al pausar el generador en ese punto, y cada vez vez que se reinicie el generador. El resultado en la consola será el de la expresión más uno.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">¿Ves la comunicación bidireccional? Envías el valor "foo", te detienes, y en algún momento más tarde (¡podría ser inmediato, podría tardar mucho!), El generador se reiniciará y te devolverá un valor. Es casi como si la palabra clave </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> fuera una especie de solicitud de un valor.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Podés usar el yield en cualquier lugar de la expresión/declaración, allí </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> tomará el valor de indefinido a menos que se le envíe un parámetro. Entonces:</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// note: `foo(..)` here is NOT a generator!!</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">x</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">)</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; color: #669900; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"x: "</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">+</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> x</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">*</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">bar</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// just pause</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// pause waiting for a parameter to pass into `foo(..)`</span></p><p dir="ltr" style="line-height: 1.7999999999999998; margin-bottom: 23pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><h2 dir="ltr" style="line-height: 1.38; margin-bottom: 6pt; margin-top: 18pt;"><span style="font-family: Arial; font-size: 16pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">Generador iterador</span></h2><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">“Generador iterador” Todo un tema ¿no?</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Los iteradores son un tipo especial de comportamiento, un patrón de diseño en realidad, donde avanzamos por un conjunto de valores ordenados uno a la vez llamando a </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">next()</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. Imagina que usas un iterador en un array que tiene cinco valores en el: </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">[1,2,3,4,5]</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. El primer </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">next()</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> retornaría </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">1</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, el segundo </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">next()</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> retornaría </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">2</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, y así. Luego de que todos los valores hayan sido retornados, </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">next()</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> retornaría </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">null</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> o </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">false</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> o te indicará que ya ha iterado sobre todos los valores del contenedor de datos. </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">La forma en la que controlamos al generador desde afuera es construyendo e interactuando con un </span><span style="font-family: Arial; font-size: 11pt; font-style: italic; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">generador iterador</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. Esto suena mucho más complicado de lo que realmente es. Considerá el siguiente ejemplo: </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">*</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">1</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">2</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">3</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">4</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">5</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.7999999999999998; margin-bottom: 23pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Para recorrer los valores de esa función generador * foo (), necesitamos un iterador para ser construido. ¿Cómo hacemos eso? ¡Fácil!</span></p><br /><p dir="ltr" style="line-height: 1.7999999999999998; margin-bottom: 23pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">var</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">();</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Oh! Entonces, llamar a la función del generador de la manera normal en realidad no ejecuta ninguno de sus contenidos.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Es un poco raro de entender. También podés sentirte tentado a preguntarte, ¿por qué no es </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">var it = new foo()</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">? Los por qué detrás de la sintaxis son complicados y están más allá de nuestro alcance de discusión aquí.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Ahora, para comenzar a iterar en nuestra función de generador, simplemente hacemos lo siguiente:</span></p><br /><p dir="ltr" style="line-height: 1.7999999999999998; margin-bottom: 23pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">var</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> message </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">();</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Esto devolverá nuestro </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">1 </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">de la declaración </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield 1</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> , que tiene la propiedad </span><span style="background-color: #f0f0f0; font-family: Arial; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">value </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> con el valor devuelto en el </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, y </span><span style="background-color: #f0f0f0; font-family: Arial; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">done</span><span style="background-color: white; font-family: Georgia; font-size: 16.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">es un booleano que indica si la iteración terminó o no.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Sigamos con nuestra iteración:</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// { value:2, done:false }</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// { value:3, done:false }</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// { value:4, done:false }</span></p><p dir="ltr" style="line-height: 1.7999999999999998; margin-bottom: 23pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// { value:5, done:false }</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Es interesante notar que </span><span style="background-color: #f0f0f0; font-family: Arial; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">done </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">aún es falso cuando obtenemos el valor de 5. Eso es porque técnicamente, la función del generador no está completa. Todavía tenemos que llamar a una llamada next () final, y si enviamos un valor, debe establecerse como resultado de esa expresión de </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield 5</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. Solo entonces se completa la función del generador.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Entonces, ahora:</span></p><br /><p dir="ltr" style="line-height: 1.7999999999999998; margin-bottom: 23pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// { value:undefined, done:true }</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">El resultado final de nuestra función generador fue que completamos la función, pero no se dio ningún resultado (ya que ya habíamos agotado todas las declaraciones de </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield__</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">).</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Puede que te preguntes en este punto, ¿puedo usar el retorno de una función generadora y, si lo hago, ese valor se envía en la propiedad value?</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Sí…</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">*</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">1</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">return</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">2</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">var</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">();</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// { value:1, done:false }</span></p><p dir="ltr" style="line-height: 1.7999999999999998; margin-bottom: 23pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// { value:2, done:true }</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Y no…</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Puede que no sea una buena idea confiar en el valor de retorno de los generadores, porque al iterar las funciones del generador con loops for..of (ver más abajo), el return final sería desechado.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Para completar, también echemos un vistazo al envío de mensajes dentro y fuera de una función de generador a medida que lo iteramos:</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">*</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">x</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">)</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">var</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> y </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">2</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">*</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">x </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">+</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">1</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">));</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">var</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> z </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">y </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">/</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">3</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">return</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">x </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">+</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> y </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">+</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> z</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">var</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">5</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// note: not sending anything into `next()` here</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// { value:6, done:false }</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">12</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">)</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// { value:8, done:false }</span></p><p dir="ltr" style="line-height: 1.7999999999999998; margin-bottom: 23pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> it</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">13</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">)</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// { value:42, done:true }</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Podés notar que todavía podemos pasarle parámetros (</span><span style="background-color: #f0f0f0; font-family: Arial; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">x </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">en nuestro ejemplo) con la primera instancia del iterador </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo( 5 )</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, al igual que en las funciones normales, haciendo que </span><span style="background-color: #f0f0f0; font-family: Arial; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">x</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> sea igual a </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">5</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">En la primera llamada </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next(...)</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, no enviamos nada. ¿Por qué? Porque no hay expresión de </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">para recibir lo que pasamos.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Pero si pasaramos un valor a la primera llamada </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next(...)</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, no pasaría nada malo. Solo sería un valor descartado. ES6 dice que las funciones generador ignoran el valor no utilizado en este caso. (Nota: al momento de escribir, los nightlies de Chrome y FF están bien, pero es posible que otros navegadores aún no sean totalmente compatibles y puedan arrojar un error incorrectamente en este caso).</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">El </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield (x + 1)</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> es lo que envía el valor </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">6</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. La segunda llamada </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next(12)</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> envía </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">12</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> a esa expresión de </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield (x + 1)</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> en espera, por lo que </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">y</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> se establece en </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">12 * 2</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, el valor </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">24</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. Luego, el </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield (y / 3)</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> (</span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield (24 / 3)</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">) es lo que envía el valor </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">8</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. La tercera llamada </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next(13)</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> envía </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">13</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> a esa expresión de </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield (y / 3)</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> en espera, haciendo que </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">z</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> se establezca en </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">13</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Finalmente, </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">return (x + y + z)</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> es </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">return (5 + 24 + 13)</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, o </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">42</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> se devuelve como último </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">value</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">Volvé a leer eso algunas veces</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. Es extraño para la mayoría, las primeras veces que lo ven.</span></p><br /><h2 dir="ltr" style="line-height: 1.38; margin-bottom: 6pt; margin-top: 18pt;"><span style="font-family: Arial; font-size: 16pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">for..of</span></h2><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">ES6 también adopta este patrón de iterador en el nivel sintáctico, proporcionando soporte directo para ejecutar iteradores hasta su finalización: el bucle </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">for..of</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Ejemplo:</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #a67f59; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">*</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">()</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">1</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">2</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">3</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">4</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">yield</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">5</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">return</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #990055; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">6</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">for</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">var</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> v </span><span style="background-color: #f5f2f0; color: #0077aa; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">of</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">())</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> v </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// 1 2 3 4 5</span></p><br /><p dir="ltr" style="line-height: 1.7999999999999998; margin-bottom: 23pt; margin-top: 0pt;"><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">console</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="background-color: #f5f2f0; color: #dd4a68; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">log</span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> v </span><span style="background-color: #f5f2f0; color: #999999; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span><span style="background-color: #f5f2f0; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f5f2f0; color: slategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">// still `5`, not `6` :(</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Como puede ver, el iterador creado por </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">foo()</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> es capturado automáticamente por el bucle </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">for..of</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, y se itera automáticamente, una iteración para cada valor, hasta que de </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">done:true</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. Siempre que </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">done </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">sea </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">false</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, automáticamente extrae la propiedad </span><span style="background-color: #f0f0f0; font-family: Arial; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">value</span><span style="background-color: white; font-family: Georgia; font-size: 16.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">y la asigna a su variable de iteración (</span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">v</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> en nuestro caso). Una vez </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">done </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> es </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">true</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, la iteración del ciclo se detiene (y no hace nada con ningún </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">value </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">final devuelto, si lo hay).</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Como señalé anteriormente, podés ver que el bucle </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">for..of</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> ignora y tira el valor de </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">return 6</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. Además, como no hay una llamada </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">next()</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> expuesta, el bucle </span><span style="background-color: #f0f0f0; font-family: "Courier New"; font-size: 13pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">for..of</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> no se puede usar en situaciones en las que necesita pasar valores a los pasos del generador como lo hicimos anteriormente.</span></p><br /><h2 dir="ltr" style="line-height: 1.38; margin-bottom: 6pt; margin-top: 18pt;"><span style="font-family: Arial; font-size: 16pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">Resumen</span></h2><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Bien, eso es todo por lo básico de los generadores. No te preocupes si todavía es un poco alucinante. ¡Todos nos hemos sentido así al principio!</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Es natural preguntarse qué hará, en la práctica, este nuevo juguete exótico. Sin embargo, hay mucho má. Acabamos de arañar la superficie. Así que tenemos que sumergirnos más profundamente antes de poder descubrir cuán poderosos pueden ser / serán.</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Después de haber jugado con los fragmentos de código anteriores, pueden surgir las siguientes preguntas:</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">¿Cómo funciona el manejo de errores?</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">¿Puede un generador llamar a otro generador?</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">¿Cómo funciona la código asíncrono con generadores?</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Esas preguntas, y más, se tratarán en artículos posteriores aquí, ¡así que quedáte atento!</span></p><br /></span>sirleitohttp://www.blogger.com/profile/01252662839159935317noreply@blogger.com0tag:blogger.com,1999:blog-1576429661208224071.post-86494960755752034092020-10-04T11:53:00.002-07:002020-10-04T11:53:56.343-07:00TypeScript en 5 minutos<p> <span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Traducido de </span><a href="https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html</span></a></p><span id="docs-internal-guid-f8ddb97d-7fff-dafd-5dd9-7c171e66c1c5"><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">¡Empecemos a crear una web simple con TypeScript!</span></p><br /><h2 dir="ltr" style="line-height: 1.38; margin-bottom: 6pt; margin-top: 18pt;"><span style="font-family: Arial; font-size: 16pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">Instalando TypeScript</span></h2><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Estas son las dos maneras de obtener las herramientas de TypeScript:</span></p><br /><ul style="margin-bottom: 0; margin-top: 0;"><li dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Via npm (the Node.js package manager)</span></p></li><li dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Instalando Plugins en Visual Studio</span></p></li></ul><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Visual Studio 2017 y Visual Studio 2015 Update 3 incluyen TypeScript de forma predeterminada. Si no instalaste TypeScript con Visual Studio, aún podés </span><a href="https://www.typescriptlang.org/#download-links" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">descargarlo</span></a><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Para usuarios de NPM:</span></p><br /><p dir="ltr" style="line-height: 1.7142000000000002; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">npm install -g typescript</span></p><br /><h2 dir="ltr" style="line-height: 1.38; margin-bottom: 6pt; margin-top: 18pt;"><span style="font-family: Arial; font-size: 16pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">Escribiendo tu primer archivo TypeScript</span></h2><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">En tu editor, escribí el siguiente código Javascript en </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">greeter.ts</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f4f6f9; color: #0048ab; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">greeter</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(person) {</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">return</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f4f6f9; color: #0048ab; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"Hello, "</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> + person;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">let</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> user = </span><span style="background-color: #f4f6f9; color: #0048ab; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"Jane User"</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: #0048ab; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">document</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.body.textContent = greeter(user);</span></p><h2 dir="ltr" style="background-color: white; line-height: 1.32; margin-bottom: 0pt; margin-top: 0pt; padding: 15pt 0pt 8pt 0pt;"> </h2><h2 dir="ltr" style="line-height: 1.38; margin-bottom: 6pt; margin-top: 18pt;"><span style="font-family: Arial; font-size: 16pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">Compilando tu código</span></h2><br /><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Usamos la extención </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">.ts</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, pero el código es solo Javascript. Podría haber copy-pasteado esto directo de una pp Javascript.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Con este comando empezamos la compilación:</span></p><br /><p dir="ltr" style="line-height: 1.7142000000000002; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">tsc greeter.ts</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">El resultado será el archivo </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">greeters.js</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> que contendrá el mismo código Js que le diste ¡Estamos trabajando con TypeScript en nuestra app js!</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Ahora podemos empezar a tomar ventaja de las nuevas herramientas que nos ofrece TypeScript. Añadí la notación de tipo </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">:string </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">al argumento person de la función. Así:</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">greeter</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(person: </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">string</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">) </span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">return</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"Hello, "</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> + person;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">let</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> user = </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"Jane User"</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">document</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.body.textContent = greeter(user);</span></p><br /><h2 dir="ltr" style="line-height: 1.38; margin-bottom: 6pt; margin-top: 18pt;"><span style="font-family: Arial; font-size: 16pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">Anotaciones de tipo</span></h2><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Las anotaciones de tipo en TypeScript son formas ligeras de registrar el contrato previsto de la función o variable. En este caso, pretendemos que la función greeter se llame con un solo parámetro </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">string</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. Podemos intentar llamar a greeter pasandole un array:</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">greeter</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(person: </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">string</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">) </span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">return</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"Hello, "</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> + person;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">let</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> user = [</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">0</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, </span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">1</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, </span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">2</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">];</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">document</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.body.textContent = greeter(user);</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Re-compilando esto, vas a ver un error</span></p><br /><p dir="ltr" style="line-height: 1.7142000000000002; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 17.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">De forma similar, probá removiendo todos los parámetros de la llamada a la función.TypeScript te hará saber que estás llamando a la función con un inesperado número de parámetros. En ambos casos, TypeScript puede ofrecer un análisis estático basado tanto en la estructura de su código como en las anotaciones de tipo que proporcione.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Notá cómo a pesar de haber errores, el archivo </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">greeter.js</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> es creado igual. Podés usar TypeScript incluso si hay errores en tu código. Pero en este caso, TypeScript advierte que tu código probablemente no se ejecutará como se esperabas.</span></p><br /><h2 dir="ltr" style="line-height: 1.38; margin-bottom: 6pt; margin-top: 18pt;"><span style="font-family: Arial; font-size: 16pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">Interfaces</span></h2><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Desarrollemos nuestro ejemplo un poco más. Acá usamos una interface que describe objetos que tienen un firstName y un lastName. En TypeScript, dos tipos son compatibles si su estructura interna es compatible. Esto nos permite implementar una interface con solo tener la forma requerida, sin una cláusula </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">implements</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> explícita.</span></p><br /><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">interface</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> Person </span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> firstName: </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">string</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> lastName: </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">string</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">greeter</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(person: Person) </span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">return</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"Hello, "</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> + person.firstName + </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">" "</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> + person.lastName;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">let</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> user = { firstName: </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"Jane"</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, lastName: </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"User"</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> };</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">document</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.body.textContent = greeter(user);</span></p><br /><h2 dir="ltr" style="line-height: 1.38; margin-bottom: 6pt; margin-top: 18pt;"><span style="font-family: Arial; font-size: 16pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">Clases</span></h2><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Finalmente, extendamos el ejemplo una vez más con clases. TypeScript soporta las nuevas features de JavaScript, como las clases y la POO.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Vamos a crear la clase </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">Student </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">con algunos campos públicos. Fijáte cómo las clases y las interfaces van bien juntas, dejando al programador decidir el correcto nivel de abstracción.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">El uso de </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">public</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> en los argumentos del constructor sirve para crear automáticamente propiedades con ese nombre</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">class</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> Student {</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> fullName: </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">string</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">constructor</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">public</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> firstName: </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">string</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, </span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">public</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> middleInitial: </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">string</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, </span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">public</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> lastName: </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">string</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">) </span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">this</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.fullName = firstName + </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">" "</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> + middleInitial + </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">" "</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> + lastName;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> }</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">interface</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> Person </span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> firstName: </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">string</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> lastName: </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">string</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">function</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">greeter</span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">(person: Person) </span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">{</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">return</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"Hello, "</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> + person.firstName + </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">" "</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> + person.lastName;</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">}</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">let</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> user = </span><span style="color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">new</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> Student(</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"Jane"</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"M."</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">"User"</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">);</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">document</span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.body.textContent = greeter(user);</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Ejecuta de vuelta </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">tsc greeter.ts</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> y vas a ver que el JavaScript generado es el mismo que el código anterior. Las clases en TypeScript son solo una abreviatura para el mismo OO basado en prototipos que se usa con frecuencia en JavaScript.</span></p><br /><h2 dir="ltr" style="line-height: 1.38; margin-bottom: 6pt; margin-top: 18pt;"><span style="font-family: Arial; font-size: 16pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">Ejecutando tu web app TypeScript</span></h2><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Escribí lo siguiente en</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;"> greeter.html</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: #3a68a7; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><!DOCTYPE html></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">html</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">head</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">><</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">title</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">></span><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">TypeScript Greeter</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"></</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">title</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">></</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">head</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">body</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">script</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #3a68a7; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">src</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">="greeter.js"></</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">script</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: #f4f6f9; color: darkslategrey; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"></</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">body</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"></</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">html</span><span style="color: #0048ab; font-family: "Courier New"; font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">></span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">¡Abrí </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">greeter.html</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> en el browser y tendrás tu primera app en TypeScript!</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Opcional: Abrí greeter.ts en Visual Studio o copie el código en el playground de TypeScript. Podés pasar el cursor sobre los identificadores para ver sus tipos. Tené en cuenta que en algunos casos estos tipos se infieren automáticamente. Vuelva a escribir la última línea y verás las listas de finalización y la ayuda de parámetros según los tipos de elementos DOM. Coloca el cursor sobre la referencia a la función de bienvenida y presiona F12 para ir a su definición. Fijáte también que puede hacer clic con el botón derecho en un símbolo y utilizar la refactorización para cambiarle el nombre.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">La información de tipo proporcionada funciona junto con las herramientas para trabajar con JavaScript a escala de aplicación.</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="border: none; display: inline-block; height: 328px; overflow: hidden; width: 624px;"><img height="328" src="https://lh6.googleusercontent.com/z2Sids_RqFGSCuIQdtoie4yJ3fuB2rtaM0XI1XvhHFHqdhghUDelvzl5Tq2Kyx1xTjfrKBczHSm7Fd_l0PR_GCyQWCIFp5FdFA1c6Qnl8lZsnRkxECKJ_8zRumlFM9MDvFCq7apr" style="margin-left: 0px; margin-top: 0px;" width="624" /></span></span></p><div><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="border: none; display: inline-block; height: 328px; overflow: hidden; width: 624px;"><br /></span></span></div></span>sirleitohttp://www.blogger.com/profile/01252662839159935317noreply@blogger.com0tag:blogger.com,1999:blog-1576429661208224071.post-48029263963232296672017-07-08T12:03:00.000-07:002017-07-08T12:03:47.266-07:00Como centrar un DIV<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
En realidad es muy sencillo centrar elementos con CSS3. Hay
muchos blogs que dan respuestas muy incorrectas, cuando en realidad lo único
que debemos hacer es rezarle a nuestro dios FLEX-BOX.<o:p></o:p></div>
<div class="MsoNormal">
Lo primero que hay que hacer es aplicar flex a los displays
de todos los contenedores de tu web, y manejarte con ello durante el resto del
proyecto. Ejemplo:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Flexbox<o:p></o:p></b></div>
<div class="MsoNormal">
<b><br /></b></div>
<div class="MsoNormal">
<b>HTML</b><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<!DOCTYPE html><o:p></o:p></div>
<div class="MsoNormal">
<html><o:p></o:p></div>
<div class="MsoNormal">
<head><o:p></o:p></div>
<div class="MsoNormal">
<link
rel="stylesheet" type="text/css"
href="styles.css"><o:p></o:p></div>
<div class="MsoNormal">
<title></title><o:p></o:p></div>
<div class="MsoNormal">
</head><o:p></o:p></div>
<div class="MsoNormal">
<body><o:p></o:p></div>
<div class="MsoNormal">
<section
class="contenedor"><o:p></o:p></div>
<div class="MsoNormal">
<div
class="centrado"></div><o:p></o:p></div>
<div class="MsoNormal">
</section><o:p></o:p></div>
<div class="MsoNormal">
</body><o:p></o:p></div>
<div class="MsoNormal">
</html><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><br /></b></div>
<div class="MsoNormal">
<b>CSS</b><o:p></o:p></div>
<div class="MsoNormal">
body{<o:p></o:p></div>
<div class="MsoNormal">
display:
flex;<o:p></o:p></div>
<div class="MsoNormal">
}<o:p></o:p></div>
<div class="MsoNormal">
.contenedor{<o:p></o:p></div>
<div class="MsoNormal">
display:
flex;<o:p></o:p></div>
<div class="MsoNormal">
}<o:p></o:p></div>
<div class="MsoNormal">
.centrado{<o:p></o:p></div>
<div class="MsoNormal">
display:
flex;<o:p></o:p></div>
<div class="MsoNormal">
}<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Alinear Horizontalmente con CSS<o:p></o:p></div>
<div class="MsoNormal">
Solo deberemos agregar una simple propiedad al contenedor de
nuestro div.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
.contenedor{<o:p></o:p></div>
<div class="MsoNormal">
display:
flex;<o:p></o:p></div>
<div class="MsoNormal">
justify-content:
center;<o:p></o:p></div>
<div class="MsoNormal">
}<o:p></o:p></div>
<div class="MsoNormal">
Si tenemos varios divs, “justify-content” nos ofrece algunas
opciones que ayudarán a darle estilo al proyecto:<o:p></o:p></div>
<div class="MsoNormal">
flex-start: Agrupa los elementos a la izquierda<o:p></o:p></div>
<div class="MsoNormal">
flex-end: Agrupa los elementos a la derecha<o:p></o:p></div>
<div class="MsoNormal">
center: Agrupa los elementos en el centro. Es justamente lo
que estamos ejemplificando el día de hoy.<o:p></o:p></div>
<div class="MsoNormal">
space-between: Centra los elemento pegando a los extremos
dos de ellos, para dejar la mayor cantidad de espacio posible entre todos<o:p></o:p></div>
<div class="MsoNormal">
space-around: Mi preferido. Deja el mismo espacio entre
todos los elementos, pero también deja espacio con los márgenes. Este, junto
con center, serán los que más utilizarás a lo largo de tu carrera.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Centrar verticalmente con CSS<o:p></o:p></div>
<div class="MsoNormal">
Ya habiendo hecho lo anterior,
solo debes dar un pequeño paso más. Nuevamente actuaremos sobre el contenedor.<o:p></o:p></div>
<div class="MsoNormal">
.contenedor{<o:p></o:p></div>
<div class="MsoNormal">
display: flex;<o:p></o:p></div>
<div class="MsoNormal">
justify-content: center;<o:p></o:p></div>
<div class="MsoNormal">
align-items: center;<o:p></o:p></div>
<div class="MsoNormal">
}<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Con align-items tenemos otras
varias opciones:<o:p></o:p></div>
<div class="MsoNormal">
flex-start: pega a la parte
superior a los divs<o:p></o:p></div>
<div class="MsoNormal">
flex-end: Lo mismo pero abajo<o:p></o:p></div>
<div class="MsoNormal">
strech: fuerza al elemento a
ocupar el 100% del alto, formando columnas con cana elemento<o:p></o:p></div>
<div class="MsoNormal">
baseline: Bastante interesante,
sin importar como queden los div, lo que hace esta propiedad es alinear todo
tomando como base los textos. Si, bastante loco.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
OK, esto fue todo. Es bastante
sencillo espero que te haya sido de ayuda.<o:p></o:p></div>
</div>
sirleitohttp://www.blogger.com/profile/01252662839159935317noreply@blogger.com0tag:blogger.com,1999:blog-1576429661208224071.post-81107251643594983402017-04-07T18:06:00.000-07:002017-04-07T18:06:56.283-07:00Como alinear un elemento horizontalmente y verticalmente con CSS3<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
En realidad es muy sencillo centrar elementos con CSS3. Hay
muchos blogs que dan respuestas muy incorrectas, cuando en realidad lo único
que debemos hacer es rezarle a nuestro dios FLEX-BOX.<o:p></o:p></div>
<div class="MsoNormal">
Lo primero que hay que hacer es aplicar flex a los displays
de todos los contenedores de tu web, y manejarte con ello durante el resto del
proyecto. Ejemplo:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<h4 style="text-align: center;">
Flexbox</h4>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<b>HTML</b><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<!DOCTYPE html></div>
<div class="MsoNormal">
<html></div>
<div class="MsoNormal">
<head></div>
<div class="MsoNormal">
<link rel="stylesheet" type="text/css" href="styles.css"></div>
<div class="MsoNormal">
<title></title></div>
<div class="MsoNormal">
</head></div>
<div class="MsoNormal">
<body></div>
<div class="MsoNormal">
<section class="contenedor"></div>
<div class="MsoNormal">
<div class="centrado"></div></div>
<div class="MsoNormal">
</section></div>
<div class="MsoNormal">
</body></div>
<div class="MsoNormal">
</html></div>
<div>
<br /></div>
<div class="MsoNormal">
<b>CSS</b><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
body{<o:p></o:p></div>
<div class="MsoNormal">
display:
flex;<o:p></o:p></div>
<div class="MsoNormal">
}<o:p></o:p></div>
<div class="MsoNormal">
.contenedor{<o:p></o:p></div>
<div class="MsoNormal">
display:
flex;<o:p></o:p></div>
<div class="MsoNormal">
}<o:p></o:p></div>
<div class="MsoNormal">
.centrado{<o:p></o:p></div>
<div class="MsoNormal">
display:
flex;<o:p></o:p></div>
<div class="MsoNormal">
}<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<h4 style="text-align: justify;">
Alinear Horizontalmente con CSS</h4>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Solo deberemos agregar una simple propiedad al contenedor de
nuestro div.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
.contenedor{<o:p></o:p></div>
<div class="MsoNormal">
display:
flex;<o:p></o:p></div>
<div class="MsoNormal">
justify-content:
center;<o:p></o:p></div>
<div class="MsoNormal">
}<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Si tenemos varios divs, “justify-content” nos ofrece algunas
opciones que ayudarán a darle estilo al proyecto:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>flex-start</b>: Agrupa los elementos a la izquierda<o:p></o:p></div>
<div class="MsoNormal">
<b>flex-end</b>: Agrupa los elementos a la derecha<o:p></o:p></div>
<div class="MsoNormal">
<b>center</b>: Agrupa los elementos en el centro. Es justamente lo
que estamos ejemplificando el día de hoy.<o:p></o:p></div>
<div class="MsoNormal">
<b>space-between</b>: Centra los elemento pegando a los extremos
dos de ellos, para dejar la mayor cantidad de espacio posible entre todos<o:p></o:p></div>
<div class="MsoNormal">
<b>space-around</b>: Mi preferido. Deja el mismo espacio entre
todos los elementos, pero también deja espacio con los márgenes. Este, junto
con center, serán los que más utilizarás a lo largo de tu carrera.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<h4 style="text-align: center;">
Centrar verticalmente con CSS</h4>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Ya habiendo hecho lo anterior,
solo debes dar un pequeño paso más. Nuevamente actuaremos sobre el contenedor.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
.contenedor{<o:p></o:p></div>
<div class="MsoNormal">
display: flex;<o:p></o:p></div>
<div class="MsoNormal">
justify-content: center;<o:p></o:p></div>
<div class="MsoNormal">
align-items: center;<o:p></o:p></div>
<div class="MsoNormal">
}<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Con align-items tenemos otras
varias opciones:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>flex-start</b>: pega a la parte
superior a los divs<o:p></o:p></div>
<div class="MsoNormal">
<b>flex-end</b>: Lo mismo pero abajo<o:p></o:p></div>
<div class="MsoNormal">
<b>strech</b>: fuerza al elemento a
ocupar el 100% del alto, formando columnas con cana elemento<o:p></o:p></div>
<div class="MsoNormal">
<b>baseline</b>: Bastante interesante,
sin importar como queden los div, lo que hace esta propiedad es alinear todo
tomando como base los textos. Si, bastante loco.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
OK, esto fue todo. Es bastante
sencillo espero que te haya sido de ayuda. Si necesitan algún tipo de ayuda pueden seguirme en mi <a href="https://www.facebook.com/lgvenezia/" rel="nofollow" target="_blank">facebook</a><o:p></o:p></div>
</div>
sirleitohttp://www.blogger.com/profile/01252662839159935317noreply@blogger.com0Buenos Aires, CABA, Argentina-34.6036844 -58.381559100000004-34.8127694 -58.704282600000006 -34.3945994 -58.0588356tag:blogger.com,1999:blog-1576429661208224071.post-46661338276172811772017-04-05T12:59:00.002-07:002017-04-05T13:14:00.985-07:00Como hacer una tarjeta 3D que gire con CSS3<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<h2 style="text-align: left;">
Como hacer una carta 3D que se voltee con CSS</h2>
<br />
<b>Para crear una tarjeta 3d debes seguir los siguientes pasos:</b><o:p></o:p><br />
<b><br /></b>
<b><br /></b></div>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->1-<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;">
</span><!--[endif]-->Crear el documento HTML con su estructura básica
crear un documento css y vincularlos mediante la etiqueta <link></link><o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->2-<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;">
</span><!--[endif]-->Crear un contenedor, que será la carta, y dentro
de él otros dos contenedores, que serán cada lado de la carta. Es recomendable
que ambos lados de la carta tengan dos clases: una compartida y la otra
individual. Todo esto dentro de la sección del sitio en donde queramos ubicarlos.
Ejemplo:</div>
<div class="MsoListParagraphCxSpMiddle">
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<!DOCTYPE html><br />
<html><br />
<head><br />
<link rel="stylesheet" type="text/css" href="styles.css"><br />
<title></title><br />
</head><br />
<body><br />
<section class="seccion"><br />
<div class="contenedor"><br />
<div class="lado frente"></div><br />
<div class="lado atras"></div><br />
</div><br />
</section><br />
</body><br />
</html></div>
</div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
</div>
<div style="text-align: left;">
<o:p></o:p><br /></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left; text-indent: -18pt;">
<!--[if !supportLists]-->3-<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;">
</span><!--[endif]-->Dales a ambos lados los estilos correspondientes
para que queden como tú elijas. Esto lo harás mediante la clase que compartan
ambos div, obviamente.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
.contenedor{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
width:
200px;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
height:
300px;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
.lado{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
width:
100%;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
height:
100%;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
.frente{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
background-color:
red;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
.atras{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
background-color:
blue;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: left;">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->4-<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;">
</span><!--[endif]-->Ahora empieza la magia. Deberás rotar el lado de
atrás unos 180º en el eje y con la propiedad transform<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle">
.atras{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
background-color:
blue;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
transform:
rotateY(180deg);<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->5-<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;">
</span><!--[endif]-->Luego ocultarás la parte posterior de cada div
con “backface-visibility”. En este punto verás que el lado de atrás desaparece.
No te preocupes, sigue estando ahí.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle">
.lado{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
width:
100%;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
height:
100%;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
backface-visibility:
hidden;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->6-<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;">
</span><!--[endif]-->Lo siguiente será unir las dos partes. Para esto
le daremos a ambas una posición absoluta y al contenedor una posición relativa
para que los estilos que tenga se basen en su contenedor y no en el body.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle">
.contenedor{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
width:
200px;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
height:
300px;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
position:
relative;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
.lado{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
width:
100%;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
height:
100%;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
backface-visibility:
hidden;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
position:
absolute;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->7-<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;">
</span><!--[endif]-->Convierte al contenedor en un elemento 3D con “transform-style”.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle">
.contenedor{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
width:
200px;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
height:
300px;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
position:
relative;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
transform-style:
preserve-3d;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->8-<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;">
</span><!--[endif]-->Mediante la subclase “hover” le diremos a la
carta que se gire, como hicimos con el lado de atrás al principio, cuando el
mouse le pase por encima.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle">
.contenedor:hover{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
transform:
rotateY(180deg);<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->9-<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;">
</span><!--[endif]-->El movimiento es muy brusco, digamosle que se lo
tome con calma. Utilizando “transition” podremos especificar cuánto debe tardar
en rotar.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle">
.contenedor{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
width:
200px;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
height:
300px;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
position:
relative;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
transform-style:
preserve-3d;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
transition:
2s;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]-->10-<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;">
</span><!--[endif]-->Finalmente, con “perspective” le daremos el
toque final para que realmente se vea como una verdadera carta 3D hecha en CSS.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle">
section{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
-webkit-perspective:
800;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
.contenedor{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
width:
200px;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
height:
300px;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
position:
relative;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
transform-style:
preserve-3d;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
transition:
2s;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
.contenedor:hover{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
transform:
rotateY(180deg);<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
.lado{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
width:
100%;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
height:
100%;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
backface-visibility:
hidden;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
position:
absolute;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
.frente{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
background-color:
red;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
.atras{<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
background-color:
blue;<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
transform:
rotateY(180deg);<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
}<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<div class="MsoListParagraphCxSpMiddle">
Así de sencillo. En otro momento publicaré
como hacer una tarjeta muy parecida a esta, pero haciendo que el fondo se vea
revertido cuando la demos vuelta. <o:p></o:p><br />
<br />
Si necesitas hacerme alguna consulta no dudes en hacermela en mi <a href="https://www.facebook.com/lgvenezia/" target="_blank">facebook</a>.</div>
<div class="MsoListParagraphCxSpMiddle">
<br /></div>
<br />
<div class="MsoListParagraphCxSpLast">
¡Éxitos!<o:p></o:p></div>
</div>
sirleitohttp://www.blogger.com/profile/01252662839159935317noreply@blogger.com0Buenos Aires, CABA, Argentina-34.6036844 -58.381559100000004-34.8127694 -58.704282600000006 -34.3945994 -58.0588356